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

Jump to bottom

Support drag and dropping block patterns from the inserter. #27927

Merged
merged 1 commit into from
Dec 30, 2020
Merged

Support drag and dropping block patterns from the inserter. #27927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
70 changes: 46 additions & 24 deletions packages/block-editor/src/components/block-patterns-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div
className="block-editor-block-patterns-list__item"
role="button"
onClick={ () => 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 }
>
<BlockPreview blocks={ blocks } viewportWidth={ viewportWidth } />
<div className="block-editor-block-patterns-list__item-title">
{ pattern.title }
</div>
{ !! pattern.description && (
<VisuallyHidden id={ descriptionId }>
{ pattern.description }
</VisuallyHidden>
<InserterDraggableBlocks isEnabled={ isDraggable } blocks={ blocks }>
{ ( { draggable, onDragStart, onDragEnd } ) => (
<div
className="block-editor-block-patterns-list__item"
role="button"
onClick={ () => 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 }
>
<BlockPreview
blocks={ blocks }
viewportWidth={ viewportWidth }
/>
<div className="block-editor-block-patterns-list__item-title">
{ pattern.title }
</div>
{ !! pattern.description && (
<VisuallyHidden id={ descriptionId }>
{ pattern.description }
</VisuallyHidden>
) }
</div>
) }
</div>
</InserterDraggableBlocks>
);
}

Expand All @@ -51,14 +67,20 @@ function BlockPatternPlaceholder() {
);
}

function BlockPatternList( { blockPatterns, shownPatterns, onClickPattern } ) {
function BlockPatternList( {
isDraggable,
blockPatterns,
shownPatterns,
onClickPattern,
} ) {
return blockPatterns.map( ( pattern ) => {
const isShown = shownPatterns.includes( pattern );
return isShown ? (
<BlockPattern
key={ pattern.name }
pattern={ pattern }
onClick={ onClickPattern }
isDraggable={ isDraggable }
/>
) : (
<BlockPatternPlaceholder key={ pattern.name } />
Expand Down
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/block-patterns-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions ...omponents/inserter-list-item/draggable.js → ...onents/inserter-draggable-blocks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -31,4 +31,4 @@ const InserterListItemDraggable = ( { isEnabled, blocks, icon, children } ) => {
);
};

export default InserterListItemDraggable;
export default InserterDraggableBlocks;
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/inserter-list-item/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -47,7 +47,7 @@ function InserterListItem( {
}, [ item.name, item.initialAttributes, item.initialAttributes ] );

return (
<InserterListItemDraggable
<InserterDraggableBlocks
isEnabled={ isDraggable && ! item.disabled }
blocks={ blocks }
icon={ item.icon }
Expand Down Expand Up @@ -116,7 +116,7 @@ function InserterListItem( {
</CompositeItem>
</div>
) }
</InserterListItemDraggable>
</InserterDraggableBlocks>
);
}

Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/inserter/block-patterns-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ function BlockPatternsCategory( {
shownPatterns={ currentShownPatterns }
blockPatterns={ currentCategoryPatterns }
onClickPattern={ onClick }
isDraggable
/>
</PatternInserterPanel>
) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/inserter/search-results.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ function InserterSearchResults( {
shownPatterns={ currentShownPatterns }
blockPatterns={ filteredBlockPatterns }
onClickPattern={ onSelectBlockPattern }
isDraggable={ isDraggable }
/>
</div>
</InserterPanel>
Expand Down