From 9184eb531691e6f03d9034214a17e5dd225aaf30 Mon Sep 17 00:00:00 2001 From: Andrew Hayward Date: Thu, 16 Nov 2023 14:47:05 +0000 Subject: [PATCH 1/4] Migrating block editor BlockPatternsList component - Removes `__unstableComposite` imports from `@wordpress/components` - Adds private `Composite*` exports from `@wordpress/components` - Refactors `BlockPatternsList` and `BlockPattern` to use updated `Composite` components - Additionally renames list component to be consistent with codebase --- .../components/block-patterns-list/README.md | 8 +- .../components/block-patterns-list/index.js | 80 +++++++++++++------ .../pattern-category-previews.js | 4 +- 3 files changed, 63 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/block-patterns-list/README.md b/packages/block-editor/src/components/block-patterns-list/README.md index 7b30dcecc7bbd4..8b798f93b7190a 100644 --- a/packages/block-editor/src/components/block-patterns-list/README.md +++ b/packages/block-editor/src/components/block-patterns-list/README.md @@ -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/). @@ -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'; -const MyBlockPatternList = () => ( - ( + { if ( showTooltip ) { return { children }; @@ -34,11 +39,11 @@ const WithToolTip = ( { showTooltip, title, children } ) => { }; function BlockPattern( { + id, isDraggable, pattern, onClick, onHover, - composite, showTooltip, } ) { const [ isDragging, setIsDragging ] = useState( false ); @@ -75,16 +80,26 @@ function BlockPattern( { title={ pattern.title } > + } + id={ id } onClick={ () => { onClick( pattern, blocks ); onHover?.( null ); @@ -96,10 +111,6 @@ function BlockPattern( { onHover?.( pattern ); } } onMouseLeave={ () => onHover?.( null ) } - aria-label={ pattern.title } - aria-describedby={ - pattern.description ? descriptionId : undefined - } > { + // This is necessary for if/when we filter the block patterns; + // we can potentially remove the currently active item, so we + // check to see if the active item is still present, and if not, + // reset the active item to be the first available block. + + const currentIds = items.map( ( item ) => item.id ); + if ( ! currentIds.includes( activeId ) ) { + // We can't rely on the order of `currentIds` here, because + // `blockPatterns` may not be in the same order the blocks were + // originally registered in. So we filter the blocks by what's + // visible, and take the first item in that list instead. + const firstPattern = blockPatterns.filter( ( pattern ) => + currentIds.includes( pattern.name ) + )[ 0 ]; + compositeStore.setActiveId( firstPattern?.name ); + } + }, + } ); + + const activeId = compositeStore.useState( 'activeId' ); + return ( ) : ( @@ -185,4 +219,4 @@ function BlockPatternList( ); } -export default forwardRef( BlockPatternList ); +export default forwardRef( BlockPatternsList ); diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js index 2fef53cfa2a193..cad9686faf674c 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js @@ -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'; @@ -155,7 +155,7 @@ export function PatternCategoryPreviews( { { currentCategoryPatterns.length > 0 && ( - Date: Tue, 21 Nov 2023 14:45:35 +0000 Subject: [PATCH 2/4] Removing `setItems` logic in favour of resetting active ID in `useEffect` --- .../components/block-patterns-list/index.js | 29 ++++--------------- 1 file changed, 6 insertions(+), 23 deletions(-) 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 b0ee7fb1b068dc..e70d74c89f47ad 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useState, forwardRef } from '@wordpress/element'; +import { useEffect, useState, forwardRef } from '@wordpress/element'; import { VisuallyHidden, Tooltip, @@ -166,29 +166,12 @@ function BlockPatternsList( }, ref ) { - const compositeStore = useCompositeStore( { - orientation, - setItems: ( items ) => { - // This is necessary for if/when we filter the block patterns; - // we can potentially remove the currently active item, so we - // check to see if the active item is still present, and if not, - // reset the active item to be the first available block. - - const currentIds = items.map( ( item ) => item.id ); - if ( ! currentIds.includes( activeId ) ) { - // We can't rely on the order of `currentIds` here, because - // `blockPatterns` may not be in the same order the blocks were - // originally registered in. So we filter the blocks by what's - // visible, and take the first item in that list instead. - const firstPattern = blockPatterns.filter( ( pattern ) => - currentIds.includes( pattern.name ) - )[ 0 ]; - compositeStore.setActiveId( firstPattern?.name ); - } - }, - } ); + const compositeStore = useCompositeStore( { orientation } ); + const { setActiveId } = compositeStore; - const activeId = compositeStore.useState( 'activeId' ); + useEffect( () => { + setActiveId( undefined ); + }, [ setActiveId, shownPatterns, blockPatterns ] ); return ( Date: Tue, 21 Nov 2023 14:49:50 +0000 Subject: [PATCH 3/4] Adding scroll margin to keep patterns in view on scroll --- .../src/components/block-patterns-list/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) 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 e3b38deff5ef7a..8009dfbcce1f23 100644 --- a/packages/block-editor/src/components/block-patterns-list/style.scss +++ b/packages/block-editor/src/components/block-patterns-list/style.scss @@ -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; From 7acfaf85a8aa1b913660e355b9ca6673800cff24 Mon Sep 17 00:00:00 2001 From: Andrew Hayward Date: Wed, 22 Nov 2023 15:01:58 +0000 Subject: [PATCH 4/4] Adding note about resetting active ID --- .../block-editor/src/components/block-patterns-list/index.js | 3 +++ 1 file changed, 3 insertions(+) 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 8df2807640d0ac..a392d2687017ff 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -176,6 +176,9 @@ function BlockPatternsList( const { setActiveId } = compositeStore; useEffect( () => { + // We reset the active composite item whenever the + // available patterns change, to make sure that + // focus is put back to the start. setActiveId( undefined ); }, [ setActiveId, shownPatterns, blockPatterns ] );