Skip to content

Commit

Permalink
Make it possible to apply initial attributes and inner blocks directl…
Browse files Browse the repository at this point in the history
…y from the inserter
  • Loading branch information
gziolo committed Jan 16, 2020
1 parent cb9ae90 commit 47f4a06
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 25 deletions.
38 changes: 35 additions & 3 deletions packages/block-editor/src/components/block-types-list/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import { isEmpty } from 'lodash';

/**
* WordPress dependencies
*/
Expand All @@ -17,8 +22,36 @@ function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
/* eslint-disable jsx-a11y/no-redundant-roles */
<ul role="list" className="block-editor-block-types-list">
{ items && items.map( ( item ) => {
const { patterns = [] } = item;
const matchedPatterns = patterns.filter( ( { matched } ) => matched );
if ( ! isEmpty( item.patterns ) ) {
return item.patterns.map( ( pattern ) => {
const customizedItem = {
...item,
initialAttributes: {
...item.initialAttributes,
...pattern.attributes,
},
innerBlocks: pattern.innerBlocks,
};
return (
<InserterListItem
key={ item.id + pattern.name }
className={ getBlockMenuDefaultClassName( item.id ) }
icon={ pattern.icon || item.icon }
onClick={ () => {
onSelect( customizedItem );
onHover( null );
} }
onFocus={ () => onHover( customizedItem ) }
onMouseEnter={ () => onHover( customizedItem ) }
onMouseLeave={ () => onHover( null ) }
onBlur={ () => onHover( null ) }
isDisabled={ item.isDisabled }
title={ item.title }
patternName={ pattern.label }
/>
);
} );
}
return (
<InserterListItem
key={ item.id }
Expand All @@ -34,7 +67,6 @@ function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
onBlur={ () => onHover( null ) }
isDisabled={ item.isDisabled }
title={ item.title }
patterns={ matchedPatterns }
/>
);
} ) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function InserterListItem( {
isDisabled,
title,
className,
patterns = [],
patternName,
...props
} ) {
const itemIconStyle = icon ? {
Expand Down Expand Up @@ -52,10 +52,8 @@ function InserterListItem( {
<span className="block-editor-block-types-list__item-title">
{ title }
</span>
{ patterns.map(
( { label, name } ) => (
<em style={ { padding: '5px' } } key={ name }>{ label }</em>
)
{ patternName && (
<em>{ patternName }</em>
) }
</Button>
</li>
Expand Down
17 changes: 15 additions & 2 deletions packages/block-editor/src/components/inserter/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,15 @@ const stopKeyPropagation = ( event ) => event.stopPropagation();

const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];

// Copied over from the Columns block. It seems like it should become part of public API.
const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => {
return map(
innerBlocksTemplate,
( [ name, attributes, innerBlocks = [] ] ) =>
createBlock( name, attributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) )
);
};

export class InserterMenu extends Component {
constructor() {
super( ...arguments );
Expand Down Expand Up @@ -534,9 +543,13 @@ export default compose(
onSelect,
__experimentalSelectBlockOnInsert: selectBlockOnInsert,
} = ownProps;
const { name, title, initialAttributes } = item;
const { name, title, initialAttributes, innerBlocks } = item;
const selectedBlock = getSelectedBlock();
const insertedBlock = createBlock( name, initialAttributes );
const insertedBlock = createBlock(
name,
initialAttributes,
createBlocksFromInnerBlocksTemplate( innerBlocks )
);

if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) {
replaceBlocks( selectedBlock.clientId, insertedBlock );
Expand Down
26 changes: 15 additions & 11 deletions packages/block-editor/src/components/inserter/search-items.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
find,
get,
intersectionWith,
isEmpty,
words,
} from 'lodash';

Expand Down Expand Up @@ -102,22 +103,25 @@ export const searchItems = ( items, categories, collections, searchTerm ) => {

return unmatchedTerms.length === 0;
} ).map( ( item ) => {
if ( ! item.patterns ) {
if ( isEmpty( item.patterns ) ) {
return item;
}

const matchedPatterns = item.patterns.filter( ( pattern ) => {
return intersectionWith(
normalizedSearchTerms,
normalizeSearchTerm( pattern.label ),
( termToMatch, labelTerm ) => labelTerm.includes( termToMatch )
).length > 0;
} );
// When no partterns matched, fallback to all patterns.
if ( isEmpty( matchedPatterns ) ) {
return item;
}

return {
...item,
patterns: item.patterns.map( ( pattern ) => {
return {
...pattern,
matched: intersectionWith(
normalizedSearchTerms,
normalizeSearchTerm( pattern.label ),
( termToMatch, labelTerm ) => labelTerm.includes( termToMatch )
).length > 0,
};
} ),
patterns: matchedPatterns,
};
} );
};
15 changes: 11 additions & 4 deletions packages/block-editor/src/components/inserter/test/search-items.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,19 @@ describe( 'searchItems', () => {
);
} );

it( 'should match words using the patterns and mark those matched which are scoped to inserter', () => {
it( 'should match words using also patterns and return all matched patterns', () => {
const filteredItems = searchItems( items, categories, collections, 'pattern' );

expect( filteredItems ).toHaveLength( 1 );
expect( filteredItems[ 0 ].patterns ).toHaveLength( 3 );
} );

it( 'should match words using also patterns and filter out unmatched patterns', () => {
const filteredItems = searchItems( items, categories, collections, 'patterns two three' );

expect( filteredItems ).toHaveLength( 1 );
expect( filteredItems[ 0 ].patterns[ 0 ].matched ).toBe( false );
expect( filteredItems[ 0 ].patterns[ 1 ].matched ).toBe( true );
expect( filteredItems[ 0 ].patterns[ 2 ].matched ).toBe( true );
expect( filteredItems[ 0 ].patterns ).toHaveLength( 2 );
expect( filteredItems[ 0 ].patterns[ 0 ].label ).toBe( 'Pattern Two' );
expect( filteredItems[ 0 ].patterns[ 1 ].label ).toBe( 'Pattern Three' );
} );
} );

0 comments on commit 47f4a06

Please sign in to comment.