@wordpress/block-editor 12.13.0 → 12.15.0

package/build-module/components/block-pattern-setup/index.js

@@ -4,7 +4,7 @@ import { createElement, Fragment } from "react";
  */
 import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
-import { VisuallyHidden, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem } from '@wordpress/components';
+import { VisuallyHidden, privateApis as componentsPrivateApis } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -17,6 +17,12 @@ import BlockPreview from '../block-preview';
 import SetupToolbar from './setup-toolbar';
 import usePatternsSetup from './use-patterns-setup';
 import { VIEWMODES } from './constants';
+import { unlock } from '../../lock-unlock';
+const {
+  CompositeV2: Composite,
+  CompositeItemV2: CompositeItem,
+  useCompositeStoreV2: useCompositeStore
+} = unlock(componentsPrivateApis);
 const SetupContent = ({
   viewMode,
   activeSlide,
@@ -24,7 +30,7 @@ const SetupContent = ({
   onBlockPatternSelect,
   showTitles
 }) => {
-  const composite = useCompositeState();
+  const compositeStore = useCompositeStore();
   const containerClass = 'block-editor-block-pattern-setup__container';
   if (viewMode === VIEWMODES.carousel) {
     const slideClass = new Map([[activeSlide, 'active-slide'], [activeSlide - 1, 'previous-slide'], [activeSlide + 1, 'next-slide']]);
@@ -32,9 +38,10 @@ const SetupContent = ({
       className: "block-editor-block-pattern-setup__carousel"
     }, createElement("div", {
       className: containerClass
-    }, createElement("ul", {
+    }, createElement("div", {
       className: "carousel-container"
     }, patterns.map((pattern, index) => createElement(BlockPatternSlide, {
+      active: index === activeSlide,
       className: slideClass.get(index) || '',
       key: pattern.name,
       pattern: pattern
@@ -43,7 +50,7 @@ const SetupContent = ({
   return createElement("div", {
     className: "block-editor-block-pattern-setup__grid"
   }, createElement(Composite, {
-    ...composite,
+    store: compositeStore,
     role: "listbox",
     className: containerClass,
     "aria-label": __('Patterns list')
@@ -51,14 +58,12 @@ const SetupContent = ({
     key: pattern.name,
     pattern: pattern,
     onSelect: onBlockPatternSelect,
-    composite: composite,
     showTitles: showTitles
   }))));
 };
 function BlockPattern({
   pattern,
   onSelect,
-  composite,
   showTitles
 }) {
   const baseClassName = 'block-editor-block-pattern-setup-list';
@@ -69,14 +74,15 @@ function BlockPattern({
   } = pattern;
   const descriptionId = useInstanceId(BlockPattern, `${baseClassName}__item-description`);
   return createElement("div", {
-    className: `${baseClassName}__list-item`,
-    "aria-label": pattern.title,
-    "aria-describedby": pattern.description ? descriptionId : undefined
+    className: `${baseClassName}__list-item`
   }, createElement(CompositeItem, {
+    render: createElement("div", {
+      "aria-describedby": description ? descriptionId : undefined,
+      "aria-label": pattern.title,
+      className: `${baseClassName}__item`
+    }),
+    id: `${baseClassName}__pattern__${pattern.name}`,
     role: "option",
-    as: "div",
-    ...composite,
-    className: `${baseClassName}__item`,
     onClick: () => onSelect(blocks)
   }, createElement(BlockPreview, {
     blocks: blocks,
@@ -88,6 +94,7 @@ function BlockPattern({
   }, description)));
 }
 function BlockPatternSlide({
+  active,
   className,
   pattern,
   minHeight
@@ -98,7 +105,9 @@ function BlockPatternSlide({
     description
   } = pattern;
   const descriptionId = useInstanceId(BlockPatternSlide, 'block-editor-block-pattern-setup-list__item-description');
-  return createElement("li", {
+  return createElement("div", {
+    "aria-hidden": !active,
+    role: "img",
     className: `pattern-slide ${className}`,
     "aria-label": title,
     "aria-describedby": description ? descriptionId : undefined
@@ -145,10 +154,10 @@ const BlockPatternSetup = ({
     activeSlide: activeSlide,
     totalSlides: patterns.length,
     handleNext: () => {
-      setActiveSlide(active => active + 1);
+      setActiveSlide(active => Math.min(active + 1, patterns.length - 1));
     },
     handlePrevious: () => {
-      setActiveSlide(active => active - 1);
+      setActiveSlide(active => Math.max(active - 1, 0));
     },
     onBlockPatternSelect: () => {
       onPatternSelectCallback(patterns[activeSlide].blocks);

package/build-module/components/block-pattern-setup/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDispatch","cloneBlock","VisuallyHidden","__unstableComposite","Composite","__unstableUseCompositeState","useCompositeState","__unstableCompositeItem","CompositeItem","useState","useInstanceId","__","store","blockEditorStore","BlockPreview","SetupToolbar","usePatternsSetup","VIEWMODES","SetupContent","viewMode","activeSlide","patterns","onBlockPatternSelect","showTitles","composite","containerClass","carousel","slideClass","Map","createElement","className","map","pattern","index","BlockPatternSlide","get","key","name","role","BlockPattern","onSelect","baseClassName","blocks","description","viewportWidth","descriptionId","title","undefined","as","onClick","id","minHeight","BlockPatternSetup","clientId","blockName","filterPatternsFn","initialViewMode","setViewMode","setActiveSlide","replaceBlock","length","onBlockPatternSelectDefault","clonedBlocks","block","onPatternSelectCallback","Fragment","totalSlides","handleNext","active","handlePrevious"],"sources":["@wordpress/block-editor/src/components/block-pattern-setup/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { cloneBlock } from '@wordpress/blocks';\nimport {\n\tVisuallyHidden,\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n\t__unstableCompositeItem as CompositeItem,\n} from '@wordpress/components';\n\nimport { useState } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockPreview from '../block-preview';\nimport SetupToolbar from './setup-toolbar';\nimport usePatternsSetup from './use-patterns-setup';\nimport { VIEWMODES } from './constants';\n\nconst SetupContent = ( {\n\tviewMode,\n\tactiveSlide,\n\tpatterns,\n\tonBlockPatternSelect,\n\tshowTitles,\n} ) => {\n\tconst composite = useCompositeState();\n\tconst containerClass = 'block-editor-block-pattern-setup__container';\n\tif ( viewMode === VIEWMODES.carousel ) {\n\t\tconst slideClass = new Map( [\n\t\t\t[ activeSlide, 'active-slide' ],\n\t\t\t[ activeSlide - 1, 'previous-slide' ],\n\t\t\t[ activeSlide + 1, 'next-slide' ],\n\t\t] );\n\t\treturn (\n\t\t\t<div className=\"block-editor-block-pattern-setup__carousel\">\n\t\t\t\t<div className={ containerClass }>\n\t\t\t\t\t<ul className=\"carousel-container\">\n\t\t\t\t\t\t{ patterns.map( ( pattern, index ) => (\n\t\t\t\t\t\t\t<BlockPatternSlide\n\t\t\t\t\t\t\t\tclassName={ slideClass.get( index ) || '' }\n\t\t\t\t\t\t\t\tkey={ pattern.name }\n\t\t\t\t\t\t\t\tpattern={ pattern }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\treturn (\n\t\t<div className=\"block-editor-block-pattern-setup__grid\">\n\t\t\t<Composite\n\t\t\t\t{ ...composite }\n\t\t\t\trole=\"listbox\"\n\t\t\t\tclassName={ containerClass }\n\t\t\t\taria-label={ __( 'Patterns list' ) }\n\t\t\t>\n\t\t\t\t{ patterns.map( ( pattern ) => (\n\t\t\t\t\t<BlockPattern\n\t\t\t\t\t\tkey={ pattern.name }\n\t\t\t\t\t\tpattern={ pattern }\n\t\t\t\t\t\tonSelect={ onBlockPatternSelect }\n\t\t\t\t\t\tcomposite={ composite }\n\t\t\t\t\t\tshowTitles={ showTitles }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</Composite>\n\t\t</div>\n\t);\n};\n\nfunction BlockPattern( { pattern, onSelect, composite, showTitles } ) {\n\tconst baseClassName = 'block-editor-block-pattern-setup-list';\n\tconst { blocks, description, viewportWidth = 700 } = pattern;\n\tconst descriptionId = useInstanceId(\n\t\tBlockPattern,\n\t\t`${ baseClassName }__item-description`\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ `${ baseClassName }__list-item` }\n\t\t\taria-label={ pattern.title }\n\t\t\taria-describedby={ pattern.description ? descriptionId : undefined }\n\t\t>\n\t\t\t<CompositeItem\n\t\t\t\trole=\"option\"\n\t\t\t\tas=\"div\"\n\t\t\t\t{ ...composite }\n\t\t\t\tclassName={ `${ baseClassName }__item` }\n\t\t\t\tonClick={ () => onSelect( blocks ) }\n\t\t\t>\n\t\t\t\t<BlockPreview\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t/>\n\t\t\t\t{ showTitles && (\n\t\t\t\t\t<div className={ `${ baseClassName }__item-title` }>\n\t\t\t\t\t\t{ pattern.title }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ !! description && (\n\t\t\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t) }\n\t\t\t</CompositeItem>\n\t\t</div>\n\t);\n}\n\nfunction BlockPatternSlide( { className, pattern, minHeight } ) {\n\tconst { blocks, title, description } = pattern;\n\tconst descriptionId = useInstanceId(\n\t\tBlockPatternSlide,\n\t\t'block-editor-block-pattern-setup-list__item-description'\n\t);\n\treturn (\n\t\t<li\n\t\t\tclassName={ `pattern-slide ${ className }` }\n\t\t\taria-label={ title }\n\t\t\taria-describedby={ description ? descriptionId : undefined }\n\t\t>\n\t\t\t<BlockPreview blocks={ blocks } minHeight={ minHeight } />\n\t\t\t{ !! description && (\n\t\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t\t{ description }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</li>\n\t);\n}\n\nconst BlockPatternSetup = ( {\n\tclientId,\n\tblockName,\n\tfilterPatternsFn,\n\tonBlockPatternSelect,\n\tinitialViewMode = VIEWMODES.carousel,\n\tshowTitles = false,\n} ) => {\n\tconst [ viewMode, setViewMode ] = useState( initialViewMode );\n\tconst [ activeSlide, setActiveSlide ] = useState( 0 );\n\tconst { replaceBlock } = useDispatch( blockEditorStore );\n\tconst patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );\n\n\tif ( ! patterns?.length ) {\n\t\treturn null;\n\t}\n\n\tconst onBlockPatternSelectDefault = ( blocks ) => {\n\t\tconst clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );\n\t\treplaceBlock( clientId, clonedBlocks );\n\t};\n\tconst onPatternSelectCallback =\n\t\tonBlockPatternSelect || onBlockPatternSelectDefault;\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclassName={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }\n\t\t\t>\n\t\t\t\t<SetupContent\n\t\t\t\t\tviewMode={ viewMode }\n\t\t\t\t\tactiveSlide={ activeSlide }\n\t\t\t\t\tpatterns={ patterns }\n\t\t\t\t\tonBlockPatternSelect={ onPatternSelectCallback }\n\t\t\t\t\tshowTitles={ showTitles }\n\t\t\t\t/>\n\t\t\t\t<SetupToolbar\n\t\t\t\t\tviewMode={ viewMode }\n\t\t\t\t\tsetViewMode={ setViewMode }\n\t\t\t\t\tactiveSlide={ activeSlide }\n\t\t\t\t\ttotalSlides={ patterns.length }\n\t\t\t\t\thandleNext={ () => {\n\t\t\t\t\t\tsetActiveSlide( ( active ) => active + 1 );\n\t\t\t\t\t} }\n\t\t\t\t\thandlePrevious={ () => {\n\t\t\t\t\t\tsetActiveSlide( ( active ) => active - 1 );\n\t\t\t\t\t} }\n\t\t\t\t\tonBlockPatternSelect={ () => {\n\t\t\t\t\t\tonPatternSelectCallback(\n\t\t\t\t\t\t\tpatterns[ activeSlide ].blocks\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default BlockPatternSetup;\n"],"mappings":"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"}
+{"version":3,"names":["useDispatch","cloneBlock","VisuallyHidden","privateApis","componentsPrivateApis","useState","useInstanceId","__","store","blockEditorStore","BlockPreview","SetupToolbar","usePatternsSetup","VIEWMODES","unlock","CompositeV2","Composite","CompositeItemV2","CompositeItem","useCompositeStoreV2","useCompositeStore","SetupContent","viewMode","activeSlide","patterns","onBlockPatternSelect","showTitles","compositeStore","containerClass","carousel","slideClass","Map","createElement","className","map","pattern","index","BlockPatternSlide","active","get","key","name","role","BlockPattern","onSelect","baseClassName","blocks","description","viewportWidth","descriptionId","render","undefined","title","id","onClick","minHeight","BlockPatternSetup","clientId","blockName","filterPatternsFn","initialViewMode","setViewMode","setActiveSlide","replaceBlock","length","onBlockPatternSelectDefault","clonedBlocks","block","onPatternSelectCallback","Fragment","totalSlides","handleNext","Math","min","handlePrevious","max"],"sources":["@wordpress/block-editor/src/components/block-pattern-setup/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { cloneBlock } from '@wordpress/blocks';\nimport {\n\tVisuallyHidden,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\nimport { useState } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockPreview from '../block-preview';\nimport SetupToolbar from './setup-toolbar';\nimport usePatternsSetup from './use-patterns-setup';\nimport { VIEWMODES } from './constants';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tuseCompositeStoreV2: useCompositeStore,\n} = unlock( componentsPrivateApis );\n\nconst SetupContent = ( {\n\tviewMode,\n\tactiveSlide,\n\tpatterns,\n\tonBlockPatternSelect,\n\tshowTitles,\n} ) => {\n\tconst compositeStore = useCompositeStore();\n\tconst containerClass = 'block-editor-block-pattern-setup__container';\n\n\tif ( viewMode === VIEWMODES.carousel ) {\n\t\tconst slideClass = new Map( [\n\t\t\t[ activeSlide, 'active-slide' ],\n\t\t\t[ activeSlide - 1, 'previous-slide' ],\n\t\t\t[ activeSlide + 1, 'next-slide' ],\n\t\t] );\n\t\treturn (\n\t\t\t<div className=\"block-editor-block-pattern-setup__carousel\">\n\t\t\t\t<div className={ containerClass }>\n\t\t\t\t\t<div className=\"carousel-container\">\n\t\t\t\t\t\t{ patterns.map( ( pattern, index ) => (\n\t\t\t\t\t\t\t<BlockPatternSlide\n\t\t\t\t\t\t\t\tactive={ index === activeSlide }\n\t\t\t\t\t\t\t\tclassName={ slideClass.get( index ) || '' }\n\t\t\t\t\t\t\t\tkey={ pattern.name }\n\t\t\t\t\t\t\t\tpattern={ pattern }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"block-editor-block-pattern-setup__grid\">\n\t\t\t<Composite\n\t\t\t\tstore={ compositeStore }\n\t\t\t\trole=\"listbox\"\n\t\t\t\tclassName={ containerClass }\n\t\t\t\taria-label={ __( 'Patterns list' ) }\n\t\t\t>\n\t\t\t\t{ patterns.map( ( pattern ) => (\n\t\t\t\t\t<BlockPattern\n\t\t\t\t\t\tkey={ pattern.name }\n\t\t\t\t\t\tpattern={ pattern }\n\t\t\t\t\t\tonSelect={ onBlockPatternSelect }\n\t\t\t\t\t\tshowTitles={ showTitles }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</Composite>\n\t\t</div>\n\t);\n};\n\nfunction BlockPattern( { pattern, onSelect, showTitles } ) {\n\tconst baseClassName = 'block-editor-block-pattern-setup-list';\n\tconst { blocks, description, viewportWidth = 700 } = pattern;\n\tconst descriptionId = useInstanceId(\n\t\tBlockPattern,\n\t\t`${ baseClassName }__item-description`\n\t);\n\treturn (\n\t\t<div className={ `${ baseClassName }__list-item` }>\n\t\t\t<CompositeItem\n\t\t\t\trender={\n\t\t\t\t\t<div\n\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\tdescription ? descriptionId : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ pattern.title }\n\t\t\t\t\t\tclassName={ `${ baseClassName }__item` }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tid={ `${ baseClassName }__pattern__${ pattern.name }` }\n\t\t\t\trole=\"option\"\n\t\t\t\tonClick={ () => onSelect( blocks ) }\n\t\t\t>\n\t\t\t\t<BlockPreview\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t/>\n\t\t\t\t{ showTitles && (\n\t\t\t\t\t<div className={ `${ baseClassName }__item-title` }>\n\t\t\t\t\t\t{ pattern.title }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ !! description && (\n\t\t\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t) }\n\t\t\t</CompositeItem>\n\t\t</div>\n\t);\n}\n\nfunction BlockPatternSlide( { active, className, pattern, minHeight } ) {\n\tconst { blocks, title, description } = pattern;\n\tconst descriptionId = useInstanceId(\n\t\tBlockPatternSlide,\n\t\t'block-editor-block-pattern-setup-list__item-description'\n\t);\n\treturn (\n\t\t<div\n\t\t\taria-hidden={ ! active }\n\t\t\trole=\"img\"\n\t\t\tclassName={ `pattern-slide ${ className }` }\n\t\t\taria-label={ title }\n\t\t\taria-describedby={ description ? descriptionId : undefined }\n\t\t>\n\t\t\t<BlockPreview blocks={ blocks } minHeight={ minHeight } />\n\t\t\t{ !! description && (\n\t\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t\t{ description }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nconst BlockPatternSetup = ( {\n\tclientId,\n\tblockName,\n\tfilterPatternsFn,\n\tonBlockPatternSelect,\n\tinitialViewMode = VIEWMODES.carousel,\n\tshowTitles = false,\n} ) => {\n\tconst [ viewMode, setViewMode ] = useState( initialViewMode );\n\tconst [ activeSlide, setActiveSlide ] = useState( 0 );\n\tconst { replaceBlock } = useDispatch( blockEditorStore );\n\tconst patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );\n\n\tif ( ! patterns?.length ) {\n\t\treturn null;\n\t}\n\n\tconst onBlockPatternSelectDefault = ( blocks ) => {\n\t\tconst clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );\n\t\treplaceBlock( clientId, clonedBlocks );\n\t};\n\tconst onPatternSelectCallback =\n\t\tonBlockPatternSelect || onBlockPatternSelectDefault;\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclassName={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }\n\t\t\t>\n\t\t\t\t<SetupContent\n\t\t\t\t\tviewMode={ viewMode }\n\t\t\t\t\tactiveSlide={ activeSlide }\n\t\t\t\t\tpatterns={ patterns }\n\t\t\t\t\tonBlockPatternSelect={ onPatternSelectCallback }\n\t\t\t\t\tshowTitles={ showTitles }\n\t\t\t\t/>\n\t\t\t\t<SetupToolbar\n\t\t\t\t\tviewMode={ viewMode }\n\t\t\t\t\tsetViewMode={ setViewMode }\n\t\t\t\t\tactiveSlide={ activeSlide }\n\t\t\t\t\ttotalSlides={ patterns.length }\n\t\t\t\t\thandleNext={ () => {\n\t\t\t\t\t\tsetActiveSlide( ( active ) =>\n\t\t\t\t\t\t\tMath.min( active + 1, patterns.length - 1 )\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t\thandlePrevious={ () => {\n\t\t\t\t\t\tsetActiveSlide( ( active ) =>\n\t\t\t\t\t\t\tMath.max( active - 1, 0 )\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t\tonBlockPatternSelect={ () => {\n\t\t\t\t\t\tonPatternSelectCallback(\n\t\t\t\t\t\t\tpatterns[ activeSlide ].blocks\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default BlockPatternSetup;\n"],"mappings":"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"}

package/build-module/components/block-pattern-setup/setup-toolbar.js

@@ -29,12 +29,14 @@ const CarouselNavigation = ({
   icon: chevronLeft,
   label: __('Previous pattern'),
   onClick: handlePrevious,
-  disabled: activeSlide === 0
+  disabled: activeSlide === 0,
+  __experimentalIsFocusable: true
 }), createElement(Button, {
   icon: chevronRight,
   label: __('Next pattern'),
   onClick: handleNext,
-  disabled: activeSlide === totalSlides - 1
+  disabled: activeSlide === totalSlides - 1,
+  __experimentalIsFocusable: true
 }));
 const SetupToolbar = ({
   viewMode,

package/build-module/components/block-pattern-setup/setup-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","Button","chevronRight","chevronLeft","grid","stretchFullWidth","VIEWMODES","Actions","onBlockPatternSelect","createElement","className","variant","onClick","CarouselNavigation","handlePrevious","handleNext","activeSlide","totalSlides","icon","label","disabled","SetupToolbar","viewMode","setViewMode","isCarouselView","carousel","displayControls","isPressed"],"sources":["@wordpress/block-editor/src/components/block-pattern-setup/setup-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport {\n\tchevronRight,\n\tchevronLeft,\n\tgrid,\n\tstretchFullWidth,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VIEWMODES } from './constants';\n\nconst Actions = ( { onBlockPatternSelect } ) => (\n\t<div className=\"block-editor-block-pattern-setup__actions\">\n\t\t<Button variant=\"primary\" onClick={ onBlockPatternSelect }>\n\t\t\t{ __( 'Choose' ) }\n\t\t</Button>\n\t</div>\n);\n\nconst CarouselNavigation = ( {\n\thandlePrevious,\n\thandleNext,\n\tactiveSlide,\n\ttotalSlides,\n} ) => (\n\t<div className=\"block-editor-block-pattern-setup__navigation\">\n\t\t<Button\n\t\t\ticon={ chevronLeft }\n\t\t\tlabel={ __( 'Previous pattern' ) }\n\t\t\tonClick={ handlePrevious }\n\t\t\tdisabled={ activeSlide === 0 }\n\t\t/>\n\t\t<Button\n\t\t\ticon={ chevronRight }\n\t\t\tlabel={ __( 'Next pattern' ) }\n\t\t\tonClick={ handleNext }\n\t\t\tdisabled={ activeSlide === totalSlides - 1 }\n\t\t/>\n\t</div>\n);\n\nconst SetupToolbar = ( {\n\tviewMode,\n\tsetViewMode,\n\thandlePrevious,\n\thandleNext,\n\tactiveSlide,\n\ttotalSlides,\n\tonBlockPatternSelect,\n} ) => {\n\tconst isCarouselView = viewMode === VIEWMODES.carousel;\n\tconst displayControls = (\n\t\t<div className=\"block-editor-block-pattern-setup__display-controls\">\n\t\t\t<Button\n\t\t\t\ticon={ stretchFullWidth }\n\t\t\t\tlabel={ __( 'Carousel view' ) }\n\t\t\t\tonClick={ () => setViewMode( VIEWMODES.carousel ) }\n\t\t\t\tisPressed={ isCarouselView }\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\ticon={ grid }\n\t\t\t\tlabel={ __( 'Grid view' ) }\n\t\t\t\tonClick={ () => setViewMode( VIEWMODES.grid ) }\n\t\t\t\tisPressed={ viewMode === VIEWMODES.grid }\n\t\t\t/>\n\t\t</div>\n\t);\n\treturn (\n\t\t<div className=\"block-editor-block-pattern-setup__toolbar\">\n\t\t\t{ isCarouselView && (\n\t\t\t\t<CarouselNavigation\n\t\t\t\t\thandlePrevious={ handlePrevious }\n\t\t\t\t\thandleNext={ handleNext }\n\t\t\t\t\tactiveSlide={ activeSlide }\n\t\t\t\t\ttotalSlides={ totalSlides }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ displayControls }\n\t\t\t{ isCarouselView && (\n\t\t\t\t<Actions onBlockPatternSelect={ onBlockPatternSelect } />\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport default SetupToolbar;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SACCC,YAAY,EACZC,WAAW,EACXC,IAAI,EACJC,gBAAgB,QACV,kBAAkB;;AAEzB;AACA;AACA;AACA,SAASC,SAAS,QAAQ,aAAa;AAEvC,MAAMC,OAAO,GAAGA,CAAE;EAAEC;AAAqB,CAAC,KACzCC,aAAA;EAAKC,SAAS,EAAC;AAA2C,GACzDD,aAAA,CAACR,MAAM;EAACU,OAAO,EAAC,SAAS;EAACC,OAAO,EAAGJ;AAAsB,GACvDR,EAAE,CAAE,QAAS,CACR,CACJ,CACL;AAED,MAAMa,kBAAkB,GAAGA,CAAE;EAC5BC,cAAc;EACdC,UAAU;EACVC,WAAW;EACXC;AACD,CAAC,KACAR,aAAA;EAAKC,SAAS,EAAC;AAA8C,GAC5DD,aAAA,CAACR,MAAM;EACNiB,IAAI,EAAGf,WAAa;EACpBgB,KAAK,EAAGnB,EAAE,CAAE,kBAAmB,CAAG;EAClCY,OAAO,EAAGE,cAAgB;EAC1BM,QAAQ,EAAGJ,WAAW,KAAK;AAAG,CAC9B,CAAC,EACFP,aAAA,CAACR,MAAM;EACNiB,IAAI,EAAGhB,YAAc;EACrBiB,KAAK,EAAGnB,EAAE,CAAE,cAAe,CAAG;EAC9BY,OAAO,EAAGG,UAAY;EACtBK,QAAQ,EAAGJ,WAAW,KAAKC,WAAW,GAAG;AAAG,CAC5C,CACG,CACL;AAED,MAAMI,YAAY,GAAGA,CAAE;EACtBC,QAAQ;EACRC,WAAW;EACXT,cAAc;EACdC,UAAU;EACVC,WAAW;EACXC,WAAW;EACXT;AACD,CAAC,KAAM;EACN,MAAMgB,cAAc,GAAGF,QAAQ,KAAKhB,SAAS,CAACmB,QAAQ;EACtD,MAAMC,eAAe,GACpBjB,aAAA;IAAKC,SAAS,EAAC;EAAoD,GAClED,aAAA,CAACR,MAAM;IACNiB,IAAI,EAAGb,gBAAkB;IACzBc,KAAK,EAAGnB,EAAE,CAAE,eAAgB,CAAG;IAC/BY,OAAO,EAAGA,CAAA,KAAMW,WAAW,CAAEjB,SAAS,CAACmB,QAAS,CAAG;IACnDE,SAAS,EAAGH;EAAgB,CAC5B,CAAC,EACFf,aAAA,CAACR,MAAM;IACNiB,IAAI,EAAGd,IAAM;IACbe,KAAK,EAAGnB,EAAE,CAAE,WAAY,CAAG;IAC3BY,OAAO,EAAGA,CAAA,KAAMW,WAAW,CAAEjB,SAAS,CAACF,IAAK,CAAG;IAC/CuB,SAAS,EAAGL,QAAQ,KAAKhB,SAAS,CAACF;EAAM,CACzC,CACG,CACL;EACD,OACCK,aAAA;IAAKC,SAAS,EAAC;EAA2C,GACvDc,cAAc,IACff,aAAA,CAACI,kBAAkB;IAClBC,cAAc,EAAGA,cAAgB;IACjCC,UAAU,EAAGA,UAAY;IACzBC,WAAW,EAAGA,WAAa;IAC3BC,WAAW,EAAGA;EAAa,CAC3B,CACD,EACCS,eAAe,EACfF,cAAc,IACff,aAAA,CAACF,OAAO;IAACC,oBAAoB,EAAGA;EAAsB,CAAE,CAErD,CAAC;AAER,CAAC;AAED,eAAea,YAAY"}
+{"version":3,"names":["__","Button","chevronRight","chevronLeft","grid","stretchFullWidth","VIEWMODES","Actions","onBlockPatternSelect","createElement","className","variant","onClick","CarouselNavigation","handlePrevious","handleNext","activeSlide","totalSlides","icon","label","disabled","__experimentalIsFocusable","SetupToolbar","viewMode","setViewMode","isCarouselView","carousel","displayControls","isPressed"],"sources":["@wordpress/block-editor/src/components/block-pattern-setup/setup-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport {\n\tchevronRight,\n\tchevronLeft,\n\tgrid,\n\tstretchFullWidth,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VIEWMODES } from './constants';\n\nconst Actions = ( { onBlockPatternSelect } ) => (\n\t<div className=\"block-editor-block-pattern-setup__actions\">\n\t\t<Button variant=\"primary\" onClick={ onBlockPatternSelect }>\n\t\t\t{ __( 'Choose' ) }\n\t\t</Button>\n\t</div>\n);\n\nconst CarouselNavigation = ( {\n\thandlePrevious,\n\thandleNext,\n\tactiveSlide,\n\ttotalSlides,\n} ) => (\n\t<div className=\"block-editor-block-pattern-setup__navigation\">\n\t\t<Button\n\t\t\ticon={ chevronLeft }\n\t\t\tlabel={ __( 'Previous pattern' ) }\n\t\t\tonClick={ handlePrevious }\n\t\t\tdisabled={ activeSlide === 0 }\n\t\t\t__experimentalIsFocusable\n\t\t/>\n\t\t<Button\n\t\t\ticon={ chevronRight }\n\t\t\tlabel={ __( 'Next pattern' ) }\n\t\t\tonClick={ handleNext }\n\t\t\tdisabled={ activeSlide === totalSlides - 1 }\n\t\t\t__experimentalIsFocusable\n\t\t/>\n\t</div>\n);\n\nconst SetupToolbar = ( {\n\tviewMode,\n\tsetViewMode,\n\thandlePrevious,\n\thandleNext,\n\tactiveSlide,\n\ttotalSlides,\n\tonBlockPatternSelect,\n} ) => {\n\tconst isCarouselView = viewMode === VIEWMODES.carousel;\n\tconst displayControls = (\n\t\t<div className=\"block-editor-block-pattern-setup__display-controls\">\n\t\t\t<Button\n\t\t\t\ticon={ stretchFullWidth }\n\t\t\t\tlabel={ __( 'Carousel view' ) }\n\t\t\t\tonClick={ () => setViewMode( VIEWMODES.carousel ) }\n\t\t\t\tisPressed={ isCarouselView }\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\ticon={ grid }\n\t\t\t\tlabel={ __( 'Grid view' ) }\n\t\t\t\tonClick={ () => setViewMode( VIEWMODES.grid ) }\n\t\t\t\tisPressed={ viewMode === VIEWMODES.grid }\n\t\t\t/>\n\t\t</div>\n\t);\n\treturn (\n\t\t<div className=\"block-editor-block-pattern-setup__toolbar\">\n\t\t\t{ isCarouselView && (\n\t\t\t\t<CarouselNavigation\n\t\t\t\t\thandlePrevious={ handlePrevious }\n\t\t\t\t\thandleNext={ handleNext }\n\t\t\t\t\tactiveSlide={ activeSlide }\n\t\t\t\t\ttotalSlides={ totalSlides }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ displayControls }\n\t\t\t{ isCarouselView && (\n\t\t\t\t<Actions onBlockPatternSelect={ onBlockPatternSelect } />\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport default SetupToolbar;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SACCC,YAAY,EACZC,WAAW,EACXC,IAAI,EACJC,gBAAgB,QACV,kBAAkB;;AAEzB;AACA;AACA;AACA,SAASC,SAAS,QAAQ,aAAa;AAEvC,MAAMC,OAAO,GAAGA,CAAE;EAAEC;AAAqB,CAAC,KACzCC,aAAA;EAAKC,SAAS,EAAC;AAA2C,GACzDD,aAAA,CAACR,MAAM;EAACU,OAAO,EAAC,SAAS;EAACC,OAAO,EAAGJ;AAAsB,GACvDR,EAAE,CAAE,QAAS,CACR,CACJ,CACL;AAED,MAAMa,kBAAkB,GAAGA,CAAE;EAC5BC,cAAc;EACdC,UAAU;EACVC,WAAW;EACXC;AACD,CAAC,KACAR,aAAA;EAAKC,SAAS,EAAC;AAA8C,GAC5DD,aAAA,CAACR,MAAM;EACNiB,IAAI,EAAGf,WAAa;EACpBgB,KAAK,EAAGnB,EAAE,CAAE,kBAAmB,CAAG;EAClCY,OAAO,EAAGE,cAAgB;EAC1BM,QAAQ,EAAGJ,WAAW,KAAK,CAAG;EAC9BK,yBAAyB;AAAA,CACzB,CAAC,EACFZ,aAAA,CAACR,MAAM;EACNiB,IAAI,EAAGhB,YAAc;EACrBiB,KAAK,EAAGnB,EAAE,CAAE,cAAe,CAAG;EAC9BY,OAAO,EAAGG,UAAY;EACtBK,QAAQ,EAAGJ,WAAW,KAAKC,WAAW,GAAG,CAAG;EAC5CI,yBAAyB;AAAA,CACzB,CACG,CACL;AAED,MAAMC,YAAY,GAAGA,CAAE;EACtBC,QAAQ;EACRC,WAAW;EACXV,cAAc;EACdC,UAAU;EACVC,WAAW;EACXC,WAAW;EACXT;AACD,CAAC,KAAM;EACN,MAAMiB,cAAc,GAAGF,QAAQ,KAAKjB,SAAS,CAACoB,QAAQ;EACtD,MAAMC,eAAe,GACpBlB,aAAA;IAAKC,SAAS,EAAC;EAAoD,GAClED,aAAA,CAACR,MAAM;IACNiB,IAAI,EAAGb,gBAAkB;IACzBc,KAAK,EAAGnB,EAAE,CAAE,eAAgB,CAAG;IAC/BY,OAAO,EAAGA,CAAA,KAAMY,WAAW,CAAElB,SAAS,CAACoB,QAAS,CAAG;IACnDE,SAAS,EAAGH;EAAgB,CAC5B,CAAC,EACFhB,aAAA,CAACR,MAAM;IACNiB,IAAI,EAAGd,IAAM;IACbe,KAAK,EAAGnB,EAAE,CAAE,WAAY,CAAG;IAC3BY,OAAO,EAAGA,CAAA,KAAMY,WAAW,CAAElB,SAAS,CAACF,IAAK,CAAG;IAC/CwB,SAAS,EAAGL,QAAQ,KAAKjB,SAAS,CAACF;EAAM,CACzC,CACG,CACL;EACD,OACCK,aAAA;IAAKC,SAAS,EAAC;EAA2C,GACvDe,cAAc,IACfhB,aAAA,CAACI,kBAAkB;IAClBC,cAAc,EAAGA,cAAgB;IACjCC,UAAU,EAAGA,UAAY;IACzBC,WAAW,EAAGA,WAAa;IAC3BC,WAAW,EAAGA;EAAa,CAC3B,CACD,EACCU,eAAe,EACfF,cAAc,IACfhB,aAAA,CAACF,OAAO;IAACC,oBAAoB,EAAGA;EAAsB,CAAE,CAErD,CAAC;AAER,CAAC;AAED,eAAec,YAAY"}

package/build-module/components/block-patterns-list/index.js

@@ -7,8 +7,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, forwardRef } from '@wordpress/element';
-import { VisuallyHidden, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem, Tooltip, __experimentalHStack as HStack } from '@wordpress/components';
+import { useEffect, useState, forwardRef } from '@wordpress/element';
+import { VisuallyHidden, Tooltip, privateApis as componentsPrivateApis, __experimentalHStack as HStack } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, symbol } from '@wordpress/icons';
@@ -16,9 +16,16 @@ 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,
@@ -32,11 +39,11 @@ const WithToolTip = ({
   return createElement(Fragment, null, children);
 };
 function BlockPattern({
+  id,
   isDraggable,
   pattern,
   onClick,
   onHover,
-  composite,
   showTooltip
 }) {
   const [isDragging, setIsDragging] = useState(false);
@@ -71,15 +78,18 @@ function BlockPattern({
       }
     }
   }, createElement(WithToolTip, {
-    showTooltip: showTooltip && !pattern.id,
+    showTooltip: showTooltip && !pattern.type !== PATTERN_TYPES.user,
     title: pattern.title
   }, createElement(CompositeItem, {
-    role: "option",
-    as: "div",
-    ...composite,
-    className: classnames('block-editor-block-patterns-list__item', {
-      'block-editor-block-patterns-list__list-item-synced': pattern.id && !pattern.syncStatus
+    render: createElement("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);
@@ -90,20 +100,18 @@ function BlockPattern({
       }
       onHover?.(pattern);
     },
-    onMouseLeave: () => onHover?.(null),
-    "aria-label": pattern.title,
-    "aria-describedby": pattern.description ? descriptionId : undefined
+    onMouseLeave: () => onHover?.(null)
   }, createElement(BlockPreview, {
     blocks: blocks,
     viewportWidth: viewportWidth
   }), createElement(HStack, {
     className: "block-editor-patterns__pattern-details"
-  }, pattern.id && !pattern.syncStatus && createElement("div", {
+  }, pattern.type === PATTERN_TYPES.user && !pattern.syncStatus && createElement("div", {
     className: "block-editor-patterns__pattern-icon-wrapper"
   }, createElement(Icon, {
     className: "block-editor-patterns__pattern-icon",
     icon: symbol
-  })), (!showTooltip || pattern.id) && createElement("div", {
+  })), (!showTooltip || pattern.type === PATTERN_TYPES.user) && createElement("div", {
     className: "block-editor-block-patterns-list__item-title"
   }, pattern.title)), !!pattern.description && createElement(VisuallyHidden, {
     id: descriptionId
@@ -114,7 +122,7 @@ function BlockPatternPlaceholder() {
     className: "block-editor-block-patterns-list__item is-placeholder"
   });
 }
-function BlockPatternList({
+function BlockPatternsList({
   isDraggable,
   blockPatterns,
   shownPatterns,
@@ -125,11 +133,20 @@ function BlockPatternList({
   showTitlesAsTooltip,
   pagingProps
 }, ref) {
-  const composite = useCompositeState({
+  const compositeStore = useCompositeStore({
     orientation
   });
+  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]);
   return createElement(Composite, {
-    ...composite,
+    store: compositeStore,
     role: "listbox",
     className: "block-editor-block-patterns-list",
     "aria-label": label,
@@ -138,11 +155,11 @@ function BlockPatternList({
     const isShown = shownPatterns.includes(pattern);
     return isShown ? createElement(BlockPattern, {
       key: pattern.name,
+      id: pattern.name,
       pattern: pattern,
       onClick: onClickPattern,
       onHover: onHover,
       isDraggable: isDraggable,
-      composite: composite,
       showTooltip: showTitlesAsTooltip
     }) : createElement(BlockPatternPlaceholder, {
       key: pattern.name
@@ -151,5 +168,5 @@ function BlockPatternList({
     ...pagingProps
   }));
 }
-export default forwardRef(BlockPatternList);
+export default forwardRef(BlockPatternsList);
 //# sourceMappingURL=index.js.map

package/build-module/components/block-patterns-list/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useState","forwardRef","VisuallyHidden","__unstableComposite","Composite","__unstableUseCompositeState","useCompositeState","__unstableCompositeItem","CompositeItem","Tooltip","__experimentalHStack","HStack","useInstanceId","__","Icon","symbol","BlockPreview","InserterDraggableBlocks","BlockPatternsPaging","WithToolTip","showTooltip","title","children","createElement","text","Fragment","BlockPattern","isDraggable","pattern","onClick","onHover","composite","isDragging","setIsDragging","blocks","viewportWidth","instanceId","descriptionId","isEnabled","isPattern","draggable","onDragStart","onDragEnd","className","event","id","role","as","syncStatus","onMouseEnter","onMouseLeave","description","undefined","icon","BlockPatternPlaceholder","BlockPatternList","blockPatterns","shownPatterns","onClickPattern","orientation","label","showTitlesAsTooltip","pagingProps","ref","map","isShown","includes","key","name"],"sources":["@wordpress/block-editor/src/components/block-patterns-list/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, forwardRef } from '@wordpress/element';\nimport {\n\tVisuallyHidden,\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n\t__unstableCompositeItem as CompositeItem,\n\tTooltip,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, symbol } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BlockPreview from '../block-preview';\nimport InserterDraggableBlocks from '../inserter-draggable-blocks';\nimport BlockPatternsPaging from '../block-patterns-paging';\n\nconst WithToolTip = ( { showTooltip, title, children } ) => {\n\tif ( showTooltip ) {\n\t\treturn <Tooltip text={ title }>{ children }</Tooltip>;\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction BlockPattern( {\n\tisDraggable,\n\tpattern,\n\tonClick,\n\tonHover,\n\tcomposite,\n\tshowTooltip,\n} ) {\n\tconst [ isDragging, setIsDragging ] = useState( false );\n\tconst { blocks, viewportWidth } = pattern;\n\tconst instanceId = useInstanceId( BlockPattern );\n\tconst descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;\n\n\treturn (\n\t\t<InserterDraggableBlocks\n\t\t\tisEnabled={ isDraggable }\n\t\t\tblocks={ blocks }\n\t\t\tisPattern={ !! pattern }\n\t\t>\n\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"block-editor-block-patterns-list__list-item\"\n\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\tonDragStart={ ( event ) => {\n\t\t\t\t\t\tsetIsDragging( true );\n\t\t\t\t\t\tif ( onDragStart ) {\n\t\t\t\t\t\t\tonHover?.( null );\n\t\t\t\t\t\t\tonDragStart( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tonDragEnd={ ( event ) => {\n\t\t\t\t\t\tsetIsDragging( false );\n\t\t\t\t\t\tif ( onDragEnd ) {\n\t\t\t\t\t\t\tonDragEnd( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<WithToolTip\n\t\t\t\t\t\tshowTooltip={ showTooltip && ! pattern.id }\n\t\t\t\t\t\ttitle={ pattern.title }\n\t\t\t\t\t>\n\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'block-editor-block-patterns-list__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'block-editor-block-patterns-list__list-item-synced':\n\t\t\t\t\t\t\t\t\t\tpattern.id && ! pattern.syncStatus,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonClick( pattern, blocks );\n\t\t\t\t\t\t\t\tonHover?.( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseEnter={ () => {\n\t\t\t\t\t\t\t\tif ( isDragging ) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonHover?.( pattern );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseLeave={ () => onHover?.( null ) }\n\t\t\t\t\t\t\taria-label={ pattern.title }\n\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\tpattern.description ? descriptionId : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BlockPreview\n\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<HStack className=\"block-editor-patterns__pattern-details\">\n\t\t\t\t\t\t\t\t{ pattern.id && ! pattern.syncStatus && (\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-patterns__pattern-icon-wrapper\">\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-patterns__pattern-icon\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ symbol }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ( ! showTooltip || pattern.id ) && (\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-block-patterns-list__item-title\">\n\t\t\t\t\t\t\t\t\t\t{ pattern.title }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\n\t\t\t\t\t\t\t{ !! pattern.description && (\n\t\t\t\t\t\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t\t\t\t\t\t{ pattern.description }\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</CompositeItem>\n\t\t\t\t\t</WithToolTip>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</InserterDraggableBlocks>\n\t);\n}\n\nfunction BlockPatternPlaceholder() {\n\treturn (\n\t\t<div className=\"block-editor-block-patterns-list__item is-placeholder\" />\n\t);\n}\n\nfunction BlockPatternList(\n\t{\n\t\tisDraggable,\n\t\tblockPatterns,\n\t\tshownPatterns,\n\t\tonHover,\n\t\tonClickPattern,\n\t\torientation,\n\t\tlabel = __( 'Block patterns' ),\n\t\tshowTitlesAsTooltip,\n\t\tpagingProps,\n\t},\n\tref\n) {\n\tconst composite = useCompositeState( { orientation } );\n\treturn (\n\t\t<Composite\n\t\t\t{ ...composite }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"block-editor-block-patterns-list\"\n\t\t\taria-label={ label }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ blockPatterns.map( ( pattern ) => {\n\t\t\t\tconst isShown = shownPatterns.includes( pattern );\n\t\t\t\treturn isShown ? (\n\t\t\t\t\t<BlockPattern\n\t\t\t\t\t\tkey={ pattern.name }\n\t\t\t\t\t\tpattern={ pattern }\n\t\t\t\t\t\tonClick={ onClickPattern }\n\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\tisDraggable={ isDraggable }\n\t\t\t\t\t\tcomposite={ composite }\n\t\t\t\t\t\tshowTooltip={ showTitlesAsTooltip }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BlockPatternPlaceholder key={ pattern.name } />\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }\n\t\t</Composite>\n\t);\n}\n\nexport default forwardRef( BlockPatternList );\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,QAAQ,EAAEC,UAAU,QAAQ,oBAAoB;AACzD,SACCC,cAAc,EACdC,mBAAmB,IAAIC,SAAS,EAChCC,2BAA2B,IAAIC,iBAAiB,EAChDC,uBAAuB,IAAIC,aAAa,EACxCC,OAAO,EACPC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,IAAI,EAAEC,MAAM,QAAQ,kBAAkB;;AAE/C;AACA;AACA;AACA,OAAOC,YAAY,MAAM,kBAAkB;AAC3C,OAAOC,uBAAuB,MAAM,8BAA8B;AAClE,OAAOC,mBAAmB,MAAM,0BAA0B;AAE1D,MAAMC,WAAW,GAAGA,CAAE;EAAEC,WAAW;EAAEC,KAAK;EAAEC;AAAS,CAAC,KAAM;EAC3D,IAAKF,WAAW,EAAG;IAClB,OAAOG,aAAA,CAACd,OAAO;MAACe,IAAI,EAAGH;IAAO,GAAGC,QAAmB,CAAC;EACtD;EACA,OAAOC,aAAA,CAAAE,QAAA,QAAIH,QAAY,CAAC;AACzB,CAAC;AAED,SAASI,YAAYA,CAAE;EACtBC,WAAW;EACXC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTX;AACD,CAAC,EAAG;EACH,MAAM,CAAEY,UAAU,EAAEC,aAAa,CAAE,GAAGjC,QAAQ,CAAE,KAAM,CAAC;EACvD,MAAM;IAAEkC,MAAM;IAAEC;EAAc,CAAC,GAAGP,OAAO;EACzC,MAAMQ,UAAU,GAAGxB,aAAa,CAAEc,YAAa,CAAC;EAChD,MAAMW,aAAa,GAAI,sDAAsDD,UAAY,EAAC;EAE1F,OACCb,aAAA,CAACN,uBAAuB;IACvBqB,SAAS,EAAGX,WAAa;IACzBO,MAAM,EAAGA,MAAQ;IACjBK,SAAS,EAAG,CAAC,CAAEX;EAAS,GAEtB,CAAE;IAAEY,SAAS;IAAEC,WAAW;IAAEC;EAAU,CAAC,KACxCnB,aAAA;IACCoB,SAAS,EAAC,6CAA6C;IACvDH,SAAS,EAAGA,SAAW;IACvBC,WAAW,EAAKG,KAAK,IAAM;MAC1BX,aAAa,CAAE,IAAK,CAAC;MACrB,IAAKQ,WAAW,EAAG;QAClBX,OAAO,GAAI,IAAK,CAAC;QACjBW,WAAW,CAAEG,KAAM,CAAC;MACrB;IACD,CAAG;IACHF,SAAS,EAAKE,KAAK,IAAM;MACxBX,aAAa,CAAE,KAAM,CAAC;MACtB,IAAKS,SAAS,EAAG;QAChBA,SAAS,CAAEE,KAAM,CAAC;MACnB;IACD;EAAG,GAEHrB,aAAA,CAACJ,WAAW;IACXC,WAAW,EAAGA,WAAW,IAAI,CAAEQ,OAAO,CAACiB,EAAI;IAC3CxB,KAAK,EAAGO,OAAO,CAACP;EAAO,GAEvBE,aAAA,CAACf,aAAa;IACbsC,IAAI,EAAC,QAAQ;IACbC,EAAE,EAAC,KAAK;IAAA,GACHhB,SAAS;IACdY,SAAS,EAAG5C,UAAU,CACrB,wCAAwC,EACxC;MACC,oDAAoD,EACnD6B,OAAO,CAACiB,EAAE,IAAI,CAAEjB,OAAO,CAACoB;IAC1B,CACD,CAAG;IACHnB,OAAO,EAAGA,CAAA,KAAM;MACfA,OAAO,CAAED,OAAO,EAAEM,MAAO,CAAC;MAC1BJ,OAAO,GAAI,IAAK,CAAC;IAClB,CAAG;IACHmB,YAAY,EAAGA,CAAA,KAAM;MACpB,IAAKjB,UAAU,EAAG;QACjB;MACD;MACAF,OAAO,GAAIF,OAAQ,CAAC;IACrB,CAAG;IACHsB,YAAY,EAAGA,CAAA,KAAMpB,OAAO,GAAI,IAAK,CAAG;IACxC,cAAaF,OAAO,CAACP,KAAO;IAC5B,oBACCO,OAAO,CAACuB,WAAW,GAAGd,aAAa,GAAGe;EACtC,GAED7B,aAAA,CAACP,YAAY;IACZkB,MAAM,EAAGA,MAAQ;IACjBC,aAAa,EAAGA;EAAe,CAC/B,CAAC,EAEFZ,aAAA,CAACZ,MAAM;IAACgC,SAAS,EAAC;EAAwC,GACvDf,OAAO,CAACiB,EAAE,IAAI,CAAEjB,OAAO,CAACoB,UAAU,IACnCzB,aAAA;IAAKoB,SAAS,EAAC;EAA6C,GAC3DpB,aAAA,CAACT,IAAI;IACJ6B,SAAS,EAAC,qCAAqC;IAC/CU,IAAI,EAAGtC;EAAQ,CACf,CACG,CACL,EACC,CAAE,CAAEK,WAAW,IAAIQ,OAAO,CAACiB,EAAE,KAC9BtB,aAAA;IAAKoB,SAAS,EAAC;EAA8C,GAC1Df,OAAO,CAACP,KACN,CAEC,CAAC,EAEP,CAAC,CAAEO,OAAO,CAACuB,WAAW,IACvB5B,aAAA,CAACrB,cAAc;IAAC2C,EAAE,EAAGR;EAAe,GACjCT,OAAO,CAACuB,WACK,CAEH,CACH,CACT,CAEkB,CAAC;AAE5B;AAEA,SAASG,uBAAuBA,CAAA,EAAG;EAClC,OACC/B,aAAA;IAAKoB,SAAS,EAAC;EAAuD,CAAE,CAAC;AAE3E;AAEA,SAASY,gBAAgBA,CACxB;EACC5B,WAAW;EACX6B,aAAa;EACbC,aAAa;EACb3B,OAAO;EACP4B,cAAc;EACdC,WAAW;EACXC,KAAK,GAAG/C,EAAE,CAAE,gBAAiB,CAAC;EAC9BgD,mBAAmB;EACnBC;AACD,CAAC,EACDC,GAAG,EACF;EACD,MAAMhC,SAAS,GAAGzB,iBAAiB,CAAE;IAAEqD;EAAY,CAAE,CAAC;EACtD,OACCpC,aAAA,CAACnB,SAAS;IAAA,GACJ2B,SAAS;IACde,IAAI,EAAC,SAAS;IACdH,SAAS,EAAC,kCAAkC;IAC5C,cAAaiB,KAAO;IACpBG,GAAG,EAAGA;EAAK,GAETP,aAAa,CAACQ,GAAG,CAAIpC,OAAO,IAAM;IACnC,MAAMqC,OAAO,GAAGR,aAAa,CAACS,QAAQ,CAAEtC,OAAQ,CAAC;IACjD,OAAOqC,OAAO,GACb1C,aAAA,CAACG,YAAY;MACZyC,GAAG,EAAGvC,OAAO,CAACwC,IAAM;MACpBxC,OAAO,EAAGA,OAAS;MACnBC,OAAO,EAAG6B,cAAgB;MAC1B5B,OAAO,EAAGA,OAAS;MACnBH,WAAW,EAAGA,WAAa;MAC3BI,SAAS,EAAGA,SAAW;MACvBX,WAAW,EAAGyC;IAAqB,CACnC,CAAC,GAEFtC,aAAA,CAAC+B,uBAAuB;MAACa,GAAG,EAAGvC,OAAO,CAACwC;IAAM,CAAE,CAC/C;EACF,CAAE,CAAC,EACDN,WAAW,IAAIvC,aAAA,CAACL,mBAAmB;IAAA,GAAM4C;EAAW,CAAI,CAChD,CAAC;AAEd;AAEA,eAAe7D,UAAU,CAAEsD,gBAAiB,CAAC"}
+{"version":3,"names":["classnames","useEffect","useState","forwardRef","VisuallyHidden","Tooltip","privateApis","componentsPrivateApis","__experimentalHStack","HStack","useInstanceId","__","Icon","symbol","unlock","BlockPreview","InserterDraggableBlocks","BlockPatternsPaging","PATTERN_TYPES","CompositeV2","Composite","CompositeItemV2","CompositeItem","useCompositeStoreV2","useCompositeStore","WithToolTip","showTooltip","title","children","createElement","text","Fragment","BlockPattern","id","isDraggable","pattern","onClick","onHover","isDragging","setIsDragging","blocks","viewportWidth","instanceId","descriptionId","isEnabled","isPattern","draggable","onDragStart","onDragEnd","className","event","type","user","render","role","description","undefined","syncStatus","onMouseEnter","onMouseLeave","icon","BlockPatternPlaceholder","BlockPatternsList","blockPatterns","shownPatterns","onClickPattern","orientation","label","showTitlesAsTooltip","pagingProps","ref","compositeStore","setActiveId","store","map","isShown","includes","key","name"],"sources":["@wordpress/block-editor/src/components/block-patterns-list/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useState, forwardRef } from '@wordpress/element';\nimport {\n\tVisuallyHidden,\n\tTooltip,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, symbol } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport BlockPreview from '../block-preview';\nimport InserterDraggableBlocks from '../inserter-draggable-blocks';\nimport BlockPatternsPaging from '../block-patterns-paging';\nimport { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';\n\nconst {\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tuseCompositeStoreV2: useCompositeStore,\n} = unlock( componentsPrivateApis );\n\nconst WithToolTip = ( { showTooltip, title, children } ) => {\n\tif ( showTooltip ) {\n\t\treturn <Tooltip text={ title }>{ children }</Tooltip>;\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction BlockPattern( {\n\tid,\n\tisDraggable,\n\tpattern,\n\tonClick,\n\tonHover,\n\tshowTooltip,\n} ) {\n\tconst [ isDragging, setIsDragging ] = useState( false );\n\tconst { blocks, viewportWidth } = pattern;\n\tconst instanceId = useInstanceId( BlockPattern );\n\tconst descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;\n\n\treturn (\n\t\t<InserterDraggableBlocks\n\t\t\tisEnabled={ isDraggable }\n\t\t\tblocks={ blocks }\n\t\t\tisPattern={ !! pattern }\n\t\t>\n\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"block-editor-block-patterns-list__list-item\"\n\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\tonDragStart={ ( event ) => {\n\t\t\t\t\t\tsetIsDragging( true );\n\t\t\t\t\t\tif ( onDragStart ) {\n\t\t\t\t\t\t\tonHover?.( null );\n\t\t\t\t\t\t\tonDragStart( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tonDragEnd={ ( event ) => {\n\t\t\t\t\t\tsetIsDragging( false );\n\t\t\t\t\t\tif ( onDragEnd ) {\n\t\t\t\t\t\t\tonDragEnd( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<WithToolTip\n\t\t\t\t\t\tshowTooltip={\n\t\t\t\t\t\t\tshowTooltip && ! pattern.type !== PATTERN_TYPES.user\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttitle={ pattern.title }\n\t\t\t\t\t>\n\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\taria-label={ pattern.title }\n\t\t\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\t\t\tpattern.description\n\t\t\t\t\t\t\t\t\t\t\t? descriptionId\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'block-editor-block-patterns-list__item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'block-editor-block-patterns-list__list-item-synced':\n\t\t\t\t\t\t\t\t\t\t\t\tpattern.type ===\n\t\t\t\t\t\t\t\t\t\t\t\t\tPATTERN_TYPES.user &&\n\t\t\t\t\t\t\t\t\t\t\t\t! pattern.syncStatus,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonClick( pattern, blocks );\n\t\t\t\t\t\t\t\tonHover?.( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseEnter={ () => {\n\t\t\t\t\t\t\t\tif ( isDragging ) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonHover?.( pattern );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseLeave={ () => onHover?.( null ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BlockPreview\n\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<HStack className=\"block-editor-patterns__pattern-details\">\n\t\t\t\t\t\t\t\t{ pattern.type === PATTERN_TYPES.user &&\n\t\t\t\t\t\t\t\t\t! pattern.syncStatus && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-patterns__pattern-icon-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-patterns__pattern-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ symbol }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ( ! showTooltip ||\n\t\t\t\t\t\t\t\t\tpattern.type === PATTERN_TYPES.user ) && (\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-block-patterns-list__item-title\">\n\t\t\t\t\t\t\t\t\t\t{ pattern.title }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\n\t\t\t\t\t\t\t{ !! pattern.description && (\n\t\t\t\t\t\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t\t\t\t\t\t{ pattern.description }\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</CompositeItem>\n\t\t\t\t\t</WithToolTip>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</InserterDraggableBlocks>\n\t);\n}\n\nfunction BlockPatternPlaceholder() {\n\treturn (\n\t\t<div className=\"block-editor-block-patterns-list__item is-placeholder\" />\n\t);\n}\n\nfunction BlockPatternsList(\n\t{\n\t\tisDraggable,\n\t\tblockPatterns,\n\t\tshownPatterns,\n\t\tonHover,\n\t\tonClickPattern,\n\t\torientation,\n\t\tlabel = __( 'Block patterns' ),\n\t\tshowTitlesAsTooltip,\n\t\tpagingProps,\n\t},\n\tref\n) {\n\tconst compositeStore = useCompositeStore( { orientation } );\n\tconst { setActiveId } = compositeStore;\n\n\tuseEffect( () => {\n\t\t// We reset the active composite item whenever the\n\t\t// available patterns change, to make sure that\n\t\t// focus is put back to the start.\n\t\tsetActiveId( undefined );\n\t}, [ setActiveId, shownPatterns, blockPatterns ] );\n\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"block-editor-block-patterns-list\"\n\t\t\taria-label={ label }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ blockPatterns.map( ( pattern ) => {\n\t\t\t\tconst isShown = shownPatterns.includes( pattern );\n\t\t\t\treturn isShown ? (\n\t\t\t\t\t<BlockPattern\n\t\t\t\t\t\tkey={ pattern.name }\n\t\t\t\t\t\tid={ pattern.name }\n\t\t\t\t\t\tpattern={ pattern }\n\t\t\t\t\t\tonClick={ onClickPattern }\n\t\t\t\t\t\tonHover={ onHover }\n\t\t\t\t\t\tisDraggable={ isDraggable }\n\t\t\t\t\t\tshowTooltip={ showTitlesAsTooltip }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BlockPatternPlaceholder key={ pattern.name } />\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }\n\t\t</Composite>\n\t);\n}\n\nexport default forwardRef( BlockPatternsList );\n"],"mappings":"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"}

package/build-module/components/block-quick-navigation/index.js

@@ -3,7 +3,7 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalVStack as VStack, __experimentalHStack as HStack, FlexItem } from '@wordpress/components';
+import { Button, __experimentalVStack as VStack, __experimentalTruncate as Truncate, Flex, FlexBlock, FlexItem } from '@wordpress/components';
 import { __experimentalGetBlockLabel, store as blocksStore } from '@wordpress/blocks';
 
 /**
@@ -55,10 +55,12 @@ function BlockQuickNavigationItem({
   return createElement(Button, {
     isPressed: isSelected,
     onClick: () => selectBlock(clientId)
-  }, createElement(HStack, {
-    justify: "flex-start"
-  }, createElement(BlockIcon, {
+  }, createElement(Flex, null, createElement(FlexItem, null, createElement(BlockIcon, {
     icon: icon
-  }), createElement(FlexItem, null, name)));
+  })), createElement(FlexBlock, {
+    style: {
+      textAlign: 'left'
+    }
+  }, createElement(Truncate, null, name))));
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/block-quick-navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelect","useDispatch","Button","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","__experimentalGetBlockLabel","store","blocksStore","blockEditorStore","BlockIcon","BlockQuickNavigation","clientIds","length","createElement","spacing","map","clientId","BlockQuickNavigationItem","key","name","icon","isSelected","select","getBlockName","getBlockAttributes","isBlockSelected","hasSelectedInnerBlock","getBlockType","blockType","attributes","selectBlock","isPressed","onClick","justify"],"sources":["@wordpress/block-editor/src/components/block-quick-navigation/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport {\n\t__experimentalGetBlockLabel,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\n\nexport default function BlockQuickNavigation( { clientIds } ) {\n\tif ( ! clientIds.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<VStack spacing={ 1 }>\n\t\t\t{ clientIds.map( ( clientId ) => (\n\t\t\t\t<BlockQuickNavigationItem\n\t\t\t\t\tkey={ clientId }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</VStack>\n\t);\n}\n\nfunction BlockQuickNavigationItem( { clientId } ) {\n\tconst { name, icon, isSelected } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tisBlockSelected,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\n\t\t\tconst blockType = getBlockType( getBlockName( clientId ) );\n\t\t\tconst attributes = getBlockAttributes( clientId );\n\n\t\t\treturn {\n\t\t\t\tname:\n\t\t\t\t\tblockType &&\n\t\t\t\t\t__experimentalGetBlockLabel(\n\t\t\t\t\t\tblockType,\n\t\t\t\t\t\tattributes,\n\t\t\t\t\t\t'list-view'\n\t\t\t\t\t),\n\t\t\t\ticon: blockType?.icon,\n\t\t\t\tisSelected:\n\t\t\t\t\tisBlockSelected( clientId ) ||\n\t\t\t\t\thasSelectedInnerBlock( clientId, /* deep: */ true ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\treturn (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tonClick={ () => selectBlock( clientId ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ icon } />\n\t\t\t\t<FlexItem>{ name }</FlexItem>\n\t\t\t</HStack>\n\t\t</Button>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SACCC,MAAM,EACNC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,QAAQ,QACF,uBAAuB;AAC9B,SACCC,2BAA2B,EAC3BC,KAAK,IAAIC,WAAW,QACd,mBAAmB;;AAE1B;AACA;AACA;AACA,SAASD,KAAK,IAAIE,gBAAgB,QAAQ,aAAa;AACvD,OAAOC,SAAS,MAAM,eAAe;AAErC,eAAe,SAASC,oBAAoBA,CAAE;EAAEC;AAAU,CAAC,EAAG;EAC7D,IAAK,CAAEA,SAAS,CAACC,MAAM,EAAG;IACzB,OAAO,IAAI;EACZ;EACA,OACCC,aAAA,CAACZ,MAAM;IAACa,OAAO,EAAG;EAAG,GAClBH,SAAS,CAACI,GAAG,CAAIC,QAAQ,IAC1BH,aAAA,CAACI,wBAAwB;IACxBC,GAAG,EAAGF,QAAU;IAChBA,QAAQ,EAAGA;EAAU,CACrB,CACA,CACK,CAAC;AAEX;AAEA,SAASC,wBAAwBA,CAAE;EAAED;AAAS,CAAC,EAAG;EACjD,MAAM;IAAEG,IAAI;IAAEC,IAAI;IAAEC;EAAW,CAAC,GAAGxB,SAAS,CACzCyB,MAAM,IAAM;IACb,MAAM;MACLC,YAAY;MACZC,kBAAkB;MAClBC,eAAe;MACfC;IACD,CAAC,GAAGJ,MAAM,CAAEd,gBAAiB,CAAC;IAC9B,MAAM;MAAEmB;IAAa,CAAC,GAAGL,MAAM,CAAEf,WAAY,CAAC;IAE9C,MAAMqB,SAAS,GAAGD,YAAY,CAAEJ,YAAY,CAAEP,QAAS,CAAE,CAAC;IAC1D,MAAMa,UAAU,GAAGL,kBAAkB,CAAER,QAAS,CAAC;IAEjD,OAAO;MACNG,IAAI,EACHS,SAAS,IACTvB,2BAA2B,CAC1BuB,SAAS,EACTC,UAAU,EACV,WACD,CAAC;MACFT,IAAI,EAAEQ,SAAS,EAAER,IAAI;MACrBC,UAAU,EACTI,eAAe,CAAET,QAAS,CAAC,IAC3BU,qBAAqB,CAAEV,QAAQ,EAAE,WAAY,IAAK;IACpD,CAAC;EACF,CAAC,EACD,CAAEA,QAAQ,CACX,CAAC;EACD,MAAM;IAAEc;EAAY,CAAC,GAAGhC,WAAW,CAAEU,gBAAiB,CAAC;EAEvD,OACCK,aAAA,CAACd,MAAM;IACNgC,SAAS,EAAGV,UAAY;IACxBW,OAAO,EAAGA,CAAA,KAAMF,WAAW,CAAEd,QAAS;EAAG,GAEzCH,aAAA,CAACV,MAAM;IAAC8B,OAAO,EAAC;EAAY,GAC3BpB,aAAA,CAACJ,SAAS;IAACW,IAAI,EAAGA;EAAM,CAAE,CAAC,EAC3BP,aAAA,CAACT,QAAQ,QAAGe,IAAgB,CACrB,CACD,CAAC;AAEX"}
+{"version":3,"names":["useSelect","useDispatch","Button","__experimentalVStack","VStack","__experimentalTruncate","Truncate","Flex","FlexBlock","FlexItem","__experimentalGetBlockLabel","store","blocksStore","blockEditorStore","BlockIcon","BlockQuickNavigation","clientIds","length","createElement","spacing","map","clientId","BlockQuickNavigationItem","key","name","icon","isSelected","select","getBlockName","getBlockAttributes","isBlockSelected","hasSelectedInnerBlock","getBlockType","blockType","attributes","selectBlock","isPressed","onClick","style","textAlign"],"sources":["@wordpress/block-editor/src/components/block-quick-navigation/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalVStack as VStack,\n\t__experimentalTruncate as Truncate,\n\tFlex,\n\tFlexBlock,\n\tFlexItem,\n} from '@wordpress/components';\nimport {\n\t__experimentalGetBlockLabel,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\n\nexport default function BlockQuickNavigation( { clientIds } ) {\n\tif ( ! clientIds.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<VStack spacing={ 1 }>\n\t\t\t{ clientIds.map( ( clientId ) => (\n\t\t\t\t<BlockQuickNavigationItem\n\t\t\t\t\tkey={ clientId }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</VStack>\n\t);\n}\n\nfunction BlockQuickNavigationItem( { clientId } ) {\n\tconst { name, icon, isSelected } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tisBlockSelected,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\n\t\t\tconst blockType = getBlockType( getBlockName( clientId ) );\n\t\t\tconst attributes = getBlockAttributes( clientId );\n\n\t\t\treturn {\n\t\t\t\tname:\n\t\t\t\t\tblockType &&\n\t\t\t\t\t__experimentalGetBlockLabel(\n\t\t\t\t\t\tblockType,\n\t\t\t\t\t\tattributes,\n\t\t\t\t\t\t'list-view'\n\t\t\t\t\t),\n\t\t\t\ticon: blockType?.icon,\n\t\t\t\tisSelected:\n\t\t\t\t\tisBlockSelected( clientId ) ||\n\t\t\t\t\thasSelectedInnerBlock( clientId, /* deep: */ true ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\treturn (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tonClick={ () => selectBlock( clientId ) }\n\t\t>\n\t\t\t<Flex>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ icon } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexBlock style={ { textAlign: 'left' } }>\n\t\t\t\t\t<Truncate>{ name }</Truncate>\n\t\t\t\t</FlexBlock>\n\t\t\t</Flex>\n\t\t</Button>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SACCC,MAAM,EACNC,oBAAoB,IAAIC,MAAM,EAC9BC,sBAAsB,IAAIC,QAAQ,EAClCC,IAAI,EACJC,SAAS,EACTC,QAAQ,QACF,uBAAuB;AAC9B,SACCC,2BAA2B,EAC3BC,KAAK,IAAIC,WAAW,QACd,mBAAmB;;AAE1B;AACA;AACA;AACA,SAASD,KAAK,IAAIE,gBAAgB,QAAQ,aAAa;AACvD,OAAOC,SAAS,MAAM,eAAe;AAErC,eAAe,SAASC,oBAAoBA,CAAE;EAAEC;AAAU,CAAC,EAAG;EAC7D,IAAK,CAAEA,SAAS,CAACC,MAAM,EAAG;IACzB,OAAO,IAAI;EACZ;EACA,OACCC,aAAA,CAACd,MAAM;IAACe,OAAO,EAAG;EAAG,GAClBH,SAAS,CAACI,GAAG,CAAIC,QAAQ,IAC1BH,aAAA,CAACI,wBAAwB;IACxBC,GAAG,EAAGF,QAAU;IAChBA,QAAQ,EAAGA;EAAU,CACrB,CACA,CACK,CAAC;AAEX;AAEA,SAASC,wBAAwBA,CAAE;EAAED;AAAS,CAAC,EAAG;EACjD,MAAM;IAAEG,IAAI;IAAEC,IAAI;IAAEC;EAAW,CAAC,GAAG1B,SAAS,CACzC2B,MAAM,IAAM;IACb,MAAM;MACLC,YAAY;MACZC,kBAAkB;MAClBC,eAAe;MACfC;IACD,CAAC,GAAGJ,MAAM,CAAEd,gBAAiB,CAAC;IAC9B,MAAM;MAAEmB;IAAa,CAAC,GAAGL,MAAM,CAAEf,WAAY,CAAC;IAE9C,MAAMqB,SAAS,GAAGD,YAAY,CAAEJ,YAAY,CAAEP,QAAS,CAAE,CAAC;IAC1D,MAAMa,UAAU,GAAGL,kBAAkB,CAAER,QAAS,CAAC;IAEjD,OAAO;MACNG,IAAI,EACHS,SAAS,IACTvB,2BAA2B,CAC1BuB,SAAS,EACTC,UAAU,EACV,WACD,CAAC;MACFT,IAAI,EAAEQ,SAAS,EAAER,IAAI;MACrBC,UAAU,EACTI,eAAe,CAAET,QAAS,CAAC,IAC3BU,qBAAqB,CAAEV,QAAQ,EAAE,WAAY,IAAK;IACpD,CAAC;EACF,CAAC,EACD,CAAEA,QAAQ,CACX,CAAC;EACD,MAAM;IAAEc;EAAY,CAAC,GAAGlC,WAAW,CAAEY,gBAAiB,CAAC;EAEvD,OACCK,aAAA,CAAChB,MAAM;IACNkC,SAAS,EAAGV,UAAY;IACxBW,OAAO,EAAGA,CAAA,KAAMF,WAAW,CAAEd,QAAS;EAAG,GAEzCH,aAAA,CAACX,IAAI,QACJW,aAAA,CAACT,QAAQ,QACRS,aAAA,CAACJ,SAAS;IAACW,IAAI,EAAGA;EAAM,CAAE,CACjB,CAAC,EACXP,aAAA,CAACV,SAAS;IAAC8B,KAAK,EAAG;MAAEC,SAAS,EAAE;IAAO;EAAG,GACzCrB,aAAA,CAACZ,QAAQ,QAAGkB,IAAgB,CAClB,CACN,CACC,CAAC;AAEX"}

package/build-module/components/block-rename/index.js

@@ -0,0 +1,4 @@
+export { default as BlockRenameControl } from './rename-control';
+export { default as BlockRenameModal } from './modal';
+export { default as useBlockRename } from './use-block-rename';
+//# sourceMappingURL=index.js.map

package/build-module/components/block-rename/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","BlockRenameControl","BlockRenameModal","useBlockRename"],"sources":["@wordpress/block-editor/src/components/block-rename/index.js"],"sourcesContent":["export { default as BlockRenameControl } from './rename-control';\nexport { default as BlockRenameModal } from './modal';\nexport { default as useBlockRename } from './use-block-rename';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,kBAAkB,QAAQ,kBAAkB;AAChE,SAASD,OAAO,IAAIE,gBAAgB,QAAQ,SAAS;AACrD,SAASF,OAAO,IAAIG,cAAc,QAAQ,oBAAoB"}

package/build-module/components/block-rename/is-empty-string.js

@@ -0,0 +1,4 @@
+export default function isEmptyString(testString) {
+  return testString?.trim()?.length === 0;
+}
+//# sourceMappingURL=is-empty-string.js.map

package/build-module/components/block-rename/is-empty-string.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isEmptyString","testString","trim","length"],"sources":["@wordpress/block-editor/src/components/block-rename/is-empty-string.js"],"sourcesContent":["export default function isEmptyString( testString ) {\n\treturn testString?.trim()?.length === 0;\n}\n"],"mappings":"AAAA,eAAe,SAASA,aAAaA,CAAEC,UAAU,EAAG;EACnD,OAAOA,UAAU,EAAEC,IAAI,CAAC,CAAC,EAAEC,MAAM,KAAK,CAAC;AACxC"}

package/build-module/components/block-rename/modal.js

@@ -0,0 +1,79 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack, __experimentalVStack as VStack, Button, TextControl, Modal } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import isEmptyString from './is-empty-string';
+export default function BlockRenameModal({
+  blockName,
+  originalBlockName,
+  onClose,
+  onSave
+}) {
+  const [editedBlockName, setEditedBlockName] = useState(blockName);
+  const nameHasChanged = editedBlockName !== blockName;
+  const nameIsOriginal = editedBlockName === originalBlockName;
+  const nameIsEmpty = isEmptyString(editedBlockName);
+  const isNameValid = nameHasChanged || nameIsOriginal;
+  const autoSelectInputText = event => event.target.select();
+  const dialogDescription = useInstanceId(BlockRenameModal, `block-editor-rename-modal__description`);
+  const handleSubmit = () => {
+    const message = nameIsOriginal || nameIsEmpty ? sprintf( /* translators: %s: new name/label for the block */
+    __('Block name reset to: "%s".'), editedBlockName) : sprintf( /* translators: %s: new name/label for the block */
+    __('Block name changed to: "%s".'), editedBlockName);
+
+    // Must be assertive to immediately announce change.
+    speak(message, 'assertive');
+    onSave(editedBlockName);
+
+    // Immediate close avoids ability to hit save multiple times.
+    onClose();
+  };
+  return createElement(Modal, {
+    title: __('Rename'),
+    onRequestClose: onClose,
+    overlayClassName: "block-editor-block-rename-modal",
+    aria: {
+      describedby: dialogDescription
+    },
+    focusOnMount: "firstContentElement"
+  }, createElement("p", {
+    id: dialogDescription
+  }, __('Enter a custom name for this block.')), createElement("form", {
+    onSubmit: e => {
+      e.preventDefault();
+      if (!isNameValid) {
+        return;
+      }
+      handleSubmit();
+    }
+  }, createElement(VStack, {
+    spacing: "3"
+  }, createElement(TextControl, {
+    __nextHasNoMarginBottom: true,
+    value: editedBlockName,
+    label: __('Block name'),
+    hideLabelFromVision: true,
+    placeholder: originalBlockName,
+    onChange: setEditedBlockName,
+    onFocus: autoSelectInputText
+  }), createElement(HStack, {
+    justify: "right"
+  }, createElement(Button, {
+    variant: "tertiary",
+    onClick: onClose
+  }, __('Cancel')), createElement(Button, {
+    "aria-disabled": !isNameValid,
+    variant: "primary",
+    type: "submit"
+  }, __('Save'))))));
+}
+//# sourceMappingURL=modal.js.map

package/build-module/components/block-rename/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalHStack","HStack","__experimentalVStack","VStack","Button","TextControl","Modal","useInstanceId","__","sprintf","useState","speak","isEmptyString","BlockRenameModal","blockName","originalBlockName","onClose","onSave","editedBlockName","setEditedBlockName","nameHasChanged","nameIsOriginal","nameIsEmpty","isNameValid","autoSelectInputText","event","target","select","dialogDescription","handleSubmit","message","createElement","title","onRequestClose","overlayClassName","aria","describedby","focusOnMount","id","onSubmit","e","preventDefault","spacing","__nextHasNoMarginBottom","value","label","hideLabelFromVision","placeholder","onChange","onFocus","justify","variant","onClick","type"],"sources":["@wordpress/block-editor/src/components/block-rename/modal.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tTextControl,\n\tModal,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport isEmptyString from './is-empty-string';\n\nexport default function BlockRenameModal( {\n\tblockName,\n\toriginalBlockName,\n\tonClose,\n\tonSave,\n} ) {\n\tconst [ editedBlockName, setEditedBlockName ] = useState( blockName );\n\n\tconst nameHasChanged = editedBlockName !== blockName;\n\tconst nameIsOriginal = editedBlockName === originalBlockName;\n\tconst nameIsEmpty = isEmptyString( editedBlockName );\n\n\tconst isNameValid = nameHasChanged || nameIsOriginal;\n\n\tconst autoSelectInputText = ( event ) => event.target.select();\n\n\tconst dialogDescription = useInstanceId(\n\t\tBlockRenameModal,\n\t\t`block-editor-rename-modal__description`\n\t);\n\n\tconst handleSubmit = () => {\n\t\tconst message =\n\t\t\tnameIsOriginal || nameIsEmpty\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %s: new name/label for the block */\n\t\t\t\t\t\t__( 'Block name reset to: \"%s\".' ),\n\t\t\t\t\t\teditedBlockName\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t/* translators: %s: new name/label for the block */\n\t\t\t\t\t\t__( 'Block name changed to: \"%s\".' ),\n\t\t\t\t\t\teditedBlockName\n\t\t\t\t  );\n\n\t\t// Must be assertive to immediately announce change.\n\t\tspeak( message, 'assertive' );\n\t\tonSave( editedBlockName );\n\n\t\t// Immediate close avoids ability to hit save multiple times.\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Rename' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t\toverlayClassName=\"block-editor-block-rename-modal\"\n\t\t\taria={ {\n\t\t\t\tdescribedby: dialogDescription,\n\t\t\t} }\n\t\t\tfocusOnMount=\"firstContentElement\"\n\t\t>\n\t\t\t<p id={ dialogDescription }>\n\t\t\t\t{ __( 'Enter a custom name for this block.' ) }\n\t\t\t</p>\n\t\t\t<form\n\t\t\t\tonSubmit={ ( e ) => {\n\t\t\t\t\te.preventDefault();\n\n\t\t\t\t\tif ( ! isNameValid ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\thandleSubmit();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<VStack spacing=\"3\">\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tvalue={ editedBlockName }\n\t\t\t\t\t\tlabel={ __( 'Block name' ) }\n\t\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\t\tplaceholder={ originalBlockName }\n\t\t\t\t\t\tonChange={ setEditedBlockName }\n\t\t\t\t\t\tonFocus={ autoSelectInputText }\n\t\t\t\t\t/>\n\t\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t\t<Button variant=\"tertiary\" onClick={ onClose }>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\taria-disabled={ ! isNameValid }\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n"],"mappings":"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"}