Skip to content

Commit

Permalink
Move the Block Patterns UI to the inserter
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Mar 17, 2020
1 parent 390eac2 commit f6b8156
Show file tree
Hide file tree
Showing 10 changed files with 248 additions and 223 deletions.
30 changes: 0 additions & 30 deletions packages/block-editor/src/components/block-patterns/style.scss
View file

This file was deleted.

1 change: 0 additions & 1 deletion packages/block-editor/src/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export { default as BlockFormatControls } from './block-format-controls';
export { default as BlockIcon } from './block-icon';
export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
export { default as __experimentalBlockNavigationList } from './block-navigation/list';
export { default as __experimentalBlockPatterns } from './block-patterns';
export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
export { default as ButtonBlockerAppender } from './button-block-appender';
Expand Down
126 changes: 22 additions & 104 deletions packages/block-editor/src/components/inserter/block-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import {
map,
pick,
includes,
filter,
findIndex,
Expand All @@ -23,9 +22,9 @@ import { PanelBody, withSpokenMessages } from '@wordpress/components';
import { addQueryArgs } from '@wordpress/url';
import { controlsRepeat } from '@wordpress/icons';
import { speak } from '@wordpress/a11y';
import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
import { createBlock } from '@wordpress/blocks';
import { useMemo, useEffect, useState, useRef } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect } from '@wordpress/data';
import { compose, withSafeTimeout } from '@wordpress/compose';

/**
Expand Down Expand Up @@ -54,10 +53,8 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
const MAX_SUGGESTED_ITEMS = 9;

function InserterBlockList( {
clientId,
isAppender,
rootClientId,
onSelect,
onInsert,
onHover,
__experimentalSelectBlockOnInsert: selectBlockOnInsert,
filterValue,
Expand All @@ -69,61 +66,30 @@ function InserterBlockList( {
collections,
items,
rootChildBlocks,
getSelectedBlock,
destinationRootClientId,
getBlockIndex,
getBlockSelectionEnd,
getBlockOrder,
fetchReusableBlocks,
} = useSelect(
( select ) => {
const {
getInserterItems,
getBlockName,
getBlockRootClientId,
getBlockSelectionEnd: _getBlockSelectionEnd,
getSettings,
} = select( 'core/block-editor' );
const { getInserterItems, getBlockName, getSettings } = select(
'core/block-editor'
);
const {
getCategories,
getCollections,
getChildBlockNames,
} = select( 'core/blocks' );

let destRootClientId = rootClientId;
if ( ! destRootClientId && ! clientId && ! isAppender ) {
const end = _getBlockSelectionEnd();
if ( end ) {
destRootClientId = getBlockRootClientId( end ) || undefined;
}
}
const destinationRootBlockName = getBlockName( destRootClientId );

const rootBlockName = getBlockName( rootClientId );
const { __experimentalFetchReusableBlocks } = getSettings();

return {
categories: getCategories(),
collections: getCollections(),
rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
items: getInserterItems( destRootClientId ),
destinationRootClientId: destRootClientId,
rootChildBlocks: getChildBlockNames( rootBlockName ),
items: getInserterItems( rootClientId ),
fetchReusableBlocks: __experimentalFetchReusableBlocks,
...pick( select( 'core/block-editor' ), [
'getSelectedBlock',
'getBlockIndex',
'getBlockSelectionEnd',
'getBlockOrder',
] ),
};
},
[ clientId, isAppender, rootClientId ]
[ rootClientId ]
);
const {
replaceBlocks,
insertBlock,
showInsertionPoint,
hideInsertionPoint,
} = useDispatch( 'core/block-editor' );

// Fetch resuable blocks on mount
useEffect( () => {
Expand All @@ -132,68 +98,21 @@ function InserterBlockList( {
}
}, [] );

// To avoid duplication, getInsertionIndex is extracted and used in two event handlers
// This breaks the withDispatch not containing any logic rule.
// Since it's a function only called when the event handlers are called,
// it's fine to extract it.
// eslint-disable-next-line no-restricted-syntax
function getInsertionIndex() {
// If the clientId is defined, we insert at the position of the block.
if ( clientId ) {
return getBlockIndex( clientId, destinationRootClientId );
}

// If there a selected block, we insert after the selected block.
const end = getBlockSelectionEnd();
if ( ! isAppender && end ) {
return getBlockIndex( end, destinationRootClientId ) + 1;
}

// Otherwise, we insert at the end of the current rootClientId
return getBlockOrder( destinationRootClientId ).length;
}

const onHoverItem = ( item ) => {
onHover();
if ( item ) {
const index = getInsertionIndex();
showInsertionPoint( destinationRootClientId, index );
} else {
hideInsertionPoint();
}
};

const onSelectItem = ( item ) => {
const { name, title, initialAttributes, innerBlocks } = item;
const selectedBlock = getSelectedBlock();
const insertedBlock = createBlock(
name,
initialAttributes,
createBlocksFromInnerBlocksTemplate( innerBlocks )
);
if (
! isAppender &&
selectedBlock &&
isUnmodifiedDefaultBlock( selectedBlock )
) {
replaceBlocks( selectedBlock.clientId, insertedBlock );
} else {
insertBlock(
insertedBlock,
getInsertionIndex(),
destinationRootClientId,
selectBlockOnInsert
);

if ( ! selectBlockOnInsert ) {
// translators: %s: the name of the block that has been added
const message = sprintf( __( '%s block added' ), title );
speak( message );
}
}
onInsert( insertedBlock );

onSelect();
return insertedBlock;
if ( ! selectBlockOnInsert ) {
// translators: %s: the name of the block that has been added
const message = sprintf( __( '%s block added' ), title );
speak( message );
}
};

const filteredItems = useMemo( () => {
Expand Down Expand Up @@ -331,7 +250,6 @@ function InserterBlockList( {

return (
<div
className="block-editor-inserter__results"
ref={ inserterResults }
tabIndex="0"
role="region"
Expand All @@ -341,7 +259,7 @@ function InserterBlockList( {
rootClientId={ rootClientId }
items={ childItems }
onSelect={ onSelectItem }
onHover={ onHoverItem }
onHover={ onHover }
/>

{ !! suggestedItems.length && ! filterValue && (
Expand All @@ -354,7 +272,7 @@ function InserterBlockList( {
<BlockTypesList
items={ suggestedItems }
onSelect={ onSelectItem }
onHover={ onHoverItem }
onHover={ onHover }
/>
</PanelBody>
) }
Expand All @@ -376,7 +294,7 @@ function InserterBlockList( {
<BlockTypesList
items={ categoryItems }
onSelect={ onSelectItem }
onHover={ onHoverItem }
onHover={ onHover }
/>
</PanelBody>
);
Expand All @@ -400,7 +318,7 @@ function InserterBlockList( {
<BlockTypesList
items={ collectionItems }
onSelect={ onSelectItem }
onHover={ onHoverItem }
onHover={ onHover }
/>
</PanelBody>
);
Expand All @@ -418,7 +336,7 @@ function InserterBlockList( {
<BlockTypesList
items={ reusableItems }
onSelect={ onSelectItem }
onHover={ onHoverItem }
onHover={ onHover }
/>
<a
className="block-editor-inserter__manage-reusable-blocks"
Expand All @@ -434,7 +352,7 @@ function InserterBlockList( {
<__experimentalInserterMenuExtension.Slot
fillProps={ {
onSelect: onSelectItem,
onHover: onHoverItem,
onHover,
filterValue,
hasItems,
} }
Expand Down
30 changes: 11 additions & 19 deletions ...or/src/components/block-patterns/index.js → ...src/components/inserter/block-patterns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { map } from 'lodash';
*/
import { useMemo, useCallback } from '@wordpress/element';
import { parse, cloneBlock } from '@wordpress/blocks';
import { useSelect, useDispatch } from '@wordpress/data';
import { useDispatch } from '@wordpress/data';
import { ENTER, SPACE } from '@wordpress/keycodes';
import { __, sprintf } from '@wordpress/i18n';

Expand All @@ -23,7 +23,7 @@ function BlockPattern( { pattern, onClick } ) {

return (
<div
className="block-editor-patterns__item"
className="block-editor-inserter__patterns-item"
role="button"
onClick={ () => onClick( pattern, blocks ) }
onKeyDown={ ( event ) => {
Expand All @@ -33,28 +33,20 @@ function BlockPattern( { pattern, onClick } ) {
} }
tabIndex={ 0 }
>
<div className="block-editor-patterns__item-preview">
<div className="block-editor-inserter__patterns-item-preview">
<BlockPreview blocks={ blocks } autoHeight />
</div>
<div className="block-editor-patterns__item-title">{ title }</div>
<div className="block-editor-inserter__patterns-item-title">
{ title }
</div>
</div>
);
}

function BlockPatterns( { patterns } ) {
const getBlockInsertionPoint = useSelect( ( select ) => {
return select( 'core/block-editor' ).getBlockInsertionPoint;
} );
const { insertBlocks } = useDispatch( 'core/block-editor' );
function BlockPatterns( { patterns, onInsert } ) {
const { createSuccessNotice } = useDispatch( 'core/notices' );
const onClickPattern = useCallback( ( pattern, blocks ) => {
const { index, rootClientId } = getBlockInsertionPoint();
insertBlocks(
map( blocks, ( block ) => cloneBlock( block ) ),
index,
rootClientId,
false
);
onInsert( map( blocks, ( block ) => cloneBlock( block ) ) );
createSuccessNotice(
sprintf( __( 'Pattern "%s" inserted' ), pattern.title ),
{
Expand All @@ -64,10 +56,10 @@ function BlockPatterns( { patterns } ) {
}, [] );

return (
<div className="block-editor-patterns">
{ patterns.map( ( pattern, index ) => (
<div className="block-editor-inserter__patterns">
{ patterns.map( ( pattern, patternIndex ) => (
<BlockPattern
key={ index }
key={ patternIndex }
pattern={ pattern }
onClick={ onClickPattern }
/>
Expand Down
Loading

0 comments on commit f6b8156

Please sign in to comment.