diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js index 140c0a4feb971..2dc6eb7c86d53 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -11,37 +11,53 @@ import { useInstanceId } from '@wordpress/compose'; * Internal dependencies */ import BlockPreview from '../block-preview'; +import InserterDraggableBlocks from '../inserter-draggable-blocks'; -function BlockPattern( { pattern, onClick } ) { +function BlockPattern( { isDraggable, pattern, onClick } ) { const { content, viewportWidth } = pattern; const blocks = useMemo( () => parse( content ), [ content ] ); const instanceId = useInstanceId( BlockPattern ); const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`; return ( -
onClick( pattern, blocks ) } - onKeyDown={ ( event ) => { - if ( ENTER === event.keyCode || SPACE === event.keyCode ) { - onClick( pattern, blocks ); - } - } } - tabIndex={ 0 } - aria-label={ pattern.title } - aria-describedby={ pattern.description ? descriptionId : undefined } - > - -
- { pattern.title } -
- { !! pattern.description && ( - - { pattern.description } - + + { ( { draggable, onDragStart, onDragEnd } ) => ( +
onClick( pattern, blocks ) } + onKeyDown={ ( event ) => { + if ( + ENTER === event.keyCode || + SPACE === event.keyCode + ) { + onClick( pattern, blocks ); + } + } } + tabIndex={ 0 } + aria-label={ pattern.title } + aria-describedby={ + pattern.description ? descriptionId : undefined + } + draggable={ draggable } + onDragStart={ onDragStart } + onDragEnd={ onDragEnd } + > + +
+ { pattern.title } +
+ { !! pattern.description && ( + + { pattern.description } + + ) } +
) } -
+ ); } @@ -51,7 +67,12 @@ function BlockPatternPlaceholder() { ); } -function BlockPatternList( { blockPatterns, shownPatterns, onClickPattern } ) { +function BlockPatternList( { + isDraggable, + blockPatterns, + shownPatterns, + onClickPattern, +} ) { return blockPatterns.map( ( pattern ) => { const isShown = shownPatterns.includes( pattern ); return isShown ? ( @@ -59,6 +80,7 @@ function BlockPatternList( { blockPatterns, shownPatterns, onClickPattern } ) { key={ pattern.name } pattern={ pattern } onClick={ onClickPattern } + isDraggable={ isDraggable } /> ) : ( diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss index f66019261d0b4..9eb0f52acab72 100644 --- a/packages/block-editor/src/components/block-patterns-list/style.scss +++ b/packages/block-editor/src/components/block-patterns-list/style.scss @@ -21,6 +21,10 @@ &.is-placeholder { min-height: 100px; } + + &[draggable="true"] .block-editor-block-preview__container { + cursor: grab; + } } .block-editor-block-patterns-list__item-title { diff --git a/packages/block-editor/src/components/inserter-list-item/draggable.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js similarity index 84% rename from packages/block-editor/src/components/inserter-list-item/draggable.js rename to packages/block-editor/src/components/inserter-draggable-blocks/index.js index 92539d6266645..5d01ecc02515b 100644 --- a/packages/block-editor/src/components/inserter-list-item/draggable.js +++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js @@ -7,7 +7,7 @@ import { Draggable } from '@wordpress/components'; */ import BlockDraggableChip from '../block-draggable/draggable-chip'; -const InserterListItemDraggable = ( { isEnabled, blocks, icon, children } ) => { +const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => { const transferData = { type: 'inserter', blocks, @@ -31,4 +31,4 @@ const InserterListItemDraggable = ( { isEnabled, blocks, icon, children } ) => { ); }; -export default InserterListItemDraggable; +export default InserterDraggableBlocks; diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js index f0770e596ebd5..81c66c69ee58d 100644 --- a/packages/block-editor/src/components/inserter-list-item/index.js +++ b/packages/block-editor/src/components/inserter-list-item/index.js @@ -18,7 +18,7 @@ import { useMemo, useRef } from '@wordpress/element'; * Internal dependencies */ import BlockIcon from '../block-icon'; -import InserterListItemDraggable from './draggable'; +import InserterDraggableBlocks from '../inserter-draggable-blocks'; function InserterListItem( { className, @@ -47,7 +47,7 @@ function InserterListItem( { }, [ item.name, item.initialAttributes, item.initialAttributes ] ); return ( - ) } - + ); } diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js index 3f1e438f06c7d..0a11200cab7e7 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js @@ -112,6 +112,7 @@ function BlockPatternsCategory( { shownPatterns={ currentShownPatterns } blockPatterns={ currentCategoryPatterns } onClickPattern={ onClick } + isDraggable /> ) } diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index 0285fd4a872ed..511813003cceb 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -140,6 +140,7 @@ function InserterSearchResults( { shownPatterns={ currentShownPatterns } blockPatterns={ filteredBlockPatterns } onClickPattern={ onSelectBlockPattern } + isDraggable={ isDraggable } />