Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Patterns]: Add a flag to hide patterns from UI #36108

Merged
merged 2 commits into from
Nov 1, 2021
Merged

[Patterns]: Add a flag to hide patterns from UI #36108

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e25e74c
[Patterns]: Add a flag to hide patterns from UI
ntsekouras Nov 1, 2021
510d22f
rename flag
ntsekouras Nov 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/block-editor/src/store/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1901,9 +1901,11 @@ const getAllAllowedPatterns = createSelector(
( state ) => {
const patterns = state.settings.__experimentalBlockPatterns;
const { allowedBlockTypes } = getSettings( state );
const parsedPatterns = patterns.map( ( { name } ) =>
__experimentalGetParsedPattern( state, name )
);
const parsedPatterns = patterns
.filter( ( { hideFromUI } ) => ! hideFromUI )
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do wonder whether hideFormUI is the right name for it. Maybe at some point we'd want to show patterns in the UI somewhere but not in the inserter. Anyway, maybe we should just base it on how we do it for blocks. So (inserter: false or supports.inserter: false)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have strong opinion on this and I can change it. I just named it this way, as by using inserter made me think the Inserter (main+quick) where there might be more places that we do no want these patterns displayed like the pattern explorer modal (if it lands 😄 ).

.map( ( { name } ) =>
__experimentalGetParsedPattern( state, name )
);
const allowedPatterns = parsedPatterns.filter( ( { blocks } ) =>
checkAllowListRecursive( blocks, allowedBlockTypes )
);
Expand Down
79 changes: 79 additions & 0 deletions packages/block-editor/src/store/test/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const {
getLowestCommonAncestorWithSelectedBlock,
__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
__experimentalGetAllowedPatterns,
__experimentalGetParsedPattern,
__experimentalGetPatternsByBlockTypes,
__unstableGetClientIdWithClientIdsTree,
__unstableGetClientIdsTree,
Expand Down Expand Up @@ -3330,6 +3331,13 @@ describe( 'selectors', () => {
content:
'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
},
{
name: 'pattern-c',
title: 'pattern hidden from UI',
hideFromUI: true,
content:
'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
},
Copy link
Contributor Author

@ntsekouras ntsekouras Nov 1, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The above was added just to verify that the current behavior is not affected by patterns with inserter flag set to false.

],
},
};
Expand All @@ -3349,6 +3357,77 @@ describe( 'selectors', () => {
__experimentalGetAllowedPatterns( state, 'block2' )
).toHaveLength( 0 );
} );
it( 'should return empty array if only patterns hidden from UI exist', () => {
expect(
__experimentalGetAllowedPatterns( {
blocks: { byClientId: {} },
blockListSettings: {},
settings: {
__experimentalBlockPatterns: [
{
name: 'pattern-c',
title: 'pattern hidden from UI',
hideFromUI: true,
content:
'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
},
],
},
} )
).toHaveLength( 0 );
} );
} );
describe( '__experimentalGetParsedPattern', () => {
const state = {
settings: {
__experimentalBlockPatterns: [
{
name: 'pattern-a',
title: 'pattern with a',
content: `<!-- wp:test-block-a --><!-- /wp:test-block-a -->`,
},
{
name: 'pattern-hidden-from-ui',
title: 'pattern hidden from UI',
hideFromUI: true,
content:
'<!-- wp:test-block-a --><!-- /wp:test-block-a --><!-- wp:test-block-b --><!-- /wp:test-block-b -->',
},
],
},
};
it( 'should return proper results when pattern does not exist', () => {
expect(
__experimentalGetParsedPattern( state, 'not there' )
).toBeNull();
} );
it( 'should return existing pattern properly parsed', () => {
const { name, blocks } = __experimentalGetParsedPattern(
state,
'pattern-a'
);
expect( name ).toEqual( 'pattern-a' );
expect( blocks ).toHaveLength( 1 );
expect( blocks[ 0 ] ).toEqual(
expect.objectContaining( {
name: 'core/test-block-a',
} )
);
} );
it( 'should return hidden from UI pattern when requested', () => {
const { name, blocks, hideFromUI } = __experimentalGetParsedPattern(
state,
'pattern-hidden-from-ui'
);
expect( name ).toEqual( 'pattern-hidden-from-ui' );
expect( hideFromUI ).toBeTruthy();
expect( blocks ).toHaveLength( 2 );
expect( blocks[ 0 ] ).toEqual(
expect.objectContaining( {
name: 'core/test-block-a',
} )
);
} );
} );
describe( '__experimentalGetPatternsByBlockTypes', () => {
const state = {
Expand Down