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

Migrating block editor BlockPatternsList component #56210

Merged
merged 5 commits into from
Nov 22, 2023
Merged

Migrating block editor BlockPatternsList component #56210

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9184eb5
Migrating block editor BlockPatternsList component
Nov 16, 2023
924c139
Removing `setItems` logic in favour of resetting active ID in `useEff…
Nov 21, 2023
5b27fa6
Adding scroll margin to keep patterns in view on scroll
Nov 21, 2023
8fa80a5
Merge branch 'trunk' into 55224/block-editor/block-patterns-list
Nov 22, 2023
7acfaf8
Adding note about resetting active ID
Nov 22, 2023
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: 4 additions & 4 deletions packages/block-editor/src/components/block-patterns-list/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Block Patterns List

The `BlockPatternList` component makes a list of the different registered block patterns. It uses the `BlockPreview` component to display a preview for each block pattern.
The `BlockPatternsList` component makes a list of the different registered block patterns. It uses the `BlockPreview` component to display a preview for each block pattern.

For more infos about blocks patterns, read [this](https://make.wordpress.org/core/2020/07/16/block-patterns-in-wordpress-5-5/).

Expand All @@ -18,10 +18,10 @@ For more infos about blocks patterns, read [this](https://make.wordpress.org/cor
Renders a block patterns list.

```jsx
import { BlockPatternList } from '@wordpress/block-editor';
import { BlockPatternsList } from '@wordpress/block-editor';
andrewhayward marked this conversation as resolved.
Show resolved Hide resolved

const MyBlockPatternList = () => (
<BlockPatternList
const MyBlockPatternsList = () => (
<BlockPatternsList
blockPatterns={ shownBlockPatterns }
shownPatterns={ shownBlockPatterns }
onClickPattern={ onSelectBlockPattern }
Expand Down
67 changes: 42 additions & 25 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 @@ -6,13 +6,11 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useState, forwardRef } from '@wordpress/element';
import { useEffect, useState, forwardRef } from '@wordpress/element';
import {
VisuallyHidden,
__unstableComposite as Composite,
__unstableUseCompositeState as useCompositeState,
__unstableCompositeItem as CompositeItem,
Tooltip,
privateApis as componentsPrivateApis,
__experimentalHStack as HStack,
} from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
Expand All @@ -22,11 +20,18 @@ import { Icon, symbol } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import BlockPreview from '../block-preview';
import InserterDraggableBlocks from '../inserter-draggable-blocks';
import BlockPatternsPaging from '../block-patterns-paging';
import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';

const {
CompositeV2: Composite,
CompositeItemV2: CompositeItem,
useCompositeStoreV2: useCompositeStore,
} = unlock( componentsPrivateApis );

const WithToolTip = ( { showTooltip, title, children } ) => {
if ( showTooltip ) {
return <Tooltip text={ title }>{ children }</Tooltip>;
Expand All @@ -35,11 +40,11 @@ const WithToolTip = ( { showTooltip, title, children } ) => {
};

function BlockPattern( {
id,
isDraggable,
pattern,
onClick,
onHover,
composite,
showTooltip,
} ) {
const [ isDragging, setIsDragging ] = useState( false );
Expand Down Expand Up @@ -78,17 +83,27 @@ function BlockPattern( {
title={ pattern.title }
>
<CompositeItem
role="option"
as="div"
{ ...composite }
className={ classnames(
'block-editor-block-patterns-list__item',
{
'block-editor-block-patterns-list__list-item-synced':
pattern.type === PATTERN_TYPES.user &&
! pattern.syncStatus,
}
) }
render={
<div
role="option"
aria-label={ pattern.title }
aria-describedby={
pattern.description
? descriptionId
: undefined
}
className={ classnames(
'block-editor-block-patterns-list__item',
{
'block-editor-block-patterns-list__list-item-synced':
pattern.type ===
PATTERN_TYPES.user &&
! pattern.syncStatus,
}
) }
/>
}
id={ id }
onClick={ () => {
onClick( pattern, blocks );
onHover?.( null );
Expand All @@ -100,10 +115,6 @@ function BlockPattern( {
onHover?.( pattern );
} }
onMouseLeave={ () => onHover?.( null ) }
aria-label={ pattern.title }
aria-describedby={
pattern.description ? descriptionId : undefined
}
>
<BlockPreview
blocks={ blocks }
Expand Down Expand Up @@ -147,7 +158,7 @@ function BlockPatternPlaceholder() {
);
}

function BlockPatternList(
function BlockPatternsList(
{
isDraggable,
blockPatterns,
Expand All @@ -161,10 +172,16 @@ function BlockPatternList(
},
ref
) {
const composite = useCompositeState( { orientation } );
const compositeStore = useCompositeStore( { orientation } );
const { setActiveId } = compositeStore;

useEffect( () => {
setActiveId( undefined );
}, [ setActiveId, shownPatterns, blockPatterns ] );
andrewhayward marked this conversation as resolved.
Show resolved Hide resolved

return (
<Composite
{ ...composite }
store={ compositeStore }
role="listbox"
className="block-editor-block-patterns-list"
aria-label={ label }
Expand All @@ -175,11 +192,11 @@ function BlockPatternList(
return isShown ? (
<BlockPattern
key={ pattern.name }
id={ pattern.name }
pattern={ pattern }
onClick={ onClickPattern }
onHover={ onHover }
isDraggable={ isDraggable }
composite={ composite }
showTooltip={ showTitlesAsTooltip }
/>
) : (
Expand All @@ -191,4 +208,4 @@ function BlockPatternList(
);
}

export default forwardRef( BlockPatternList );
export default forwardRef( BlockPatternsList );
7 changes: 7 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 @@ -18,6 +18,13 @@

.block-editor-block-patterns-list__item {
height: 100%;
// This is derived from the top padding set on
// `.block-editor-block-patterns-explorer__list`
scroll-margin-top: $grid-unit-30;
// This is derived from the bottom padding set on
// `.block-editor-block-patterns-explorer__list` and
// the bottom margin set on `...__list-item` above
scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30);

.block-editor-block-preview__container {
display: flex;
Expand Down
4 changes: 2 additions & 2 deletions ...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
* Internal dependencies
*/
import usePatternsState from '../hooks/use-patterns-state';
import BlockPatternList from '../../block-patterns-list';
import BlockPatternsList from '../../block-patterns-list';
import usePatternsPaging from '../hooks/use-patterns-paging';
import { PatternsFilter } from './patterns-filter';
import { usePatternCategories } from './use-pattern-categories';
Expand Down Expand Up @@ -159,7 +159,7 @@ export function PatternCategoryPreviews( {
</VStack>

{ currentCategoryPatterns.length > 0 && (
<BlockPatternList
<BlockPatternsList
ref={ scrollContainerRef }
shownPatterns={ pagingProps.categoryPatternsAsyncList }
blockPatterns={ pagingProps.categoryPatterns }
Expand Down
Loading