@wordpress/block-editor 12.14.0 → 12.15.0

package/build-module/utils/transform-styles/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import postcss from 'postcss';
+import postcss, { CssSyntaxError } from 'postcss';
 import wrap from 'postcss-prefixwrap';
 import rebaseUrl from 'postcss-urlrebase';
 
@@ -23,13 +23,30 @@ const transformStyles = (styles, wrapperSelector = '') => {
     ignoredSelectors = [],
     baseURL
   }) => {
-    return postcss([wrapperSelector && wrap(wrapperSelector, {
-      ignoredSelectors: [...ignoredSelectors, wrapperSelector]
-    }), baseURL && rebaseUrl({
-      rootUrl: baseURL
-    })].filter(Boolean)).process(css, {}).css; // use sync PostCSS API
+    // When there is no wrapper selector or base URL, there is no need
+    // to transform the CSS. This is most cases because in the default
+    // iframed editor, no wrapping is needed, and not many styles
+    // provide a base URL.
+    if (!wrapperSelector && !baseURL) {
+      return css;
+    }
+    try {
+      return postcss([wrapperSelector && wrap(wrapperSelector, {
+        ignoredSelectors: [...ignoredSelectors, wrapperSelector]
+      }), baseURL && rebaseUrl({
+        rootUrl: baseURL
+      })].filter(Boolean)).process(css, {}).css; // use sync PostCSS API
+    } catch (error) {
+      if (error instanceof CssSyntaxError) {
+        // eslint-disable-next-line no-console
+        console.warn('wp.blockEditor.transformStyles Failed to transform CSS.', error.message + '\n' + error.showSourceCode(false));
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn('wp.blockEditor.transformStyles Failed to transform CSS.', error);
+      }
+      return null;
+    }
   });
 };
-
 export default transformStyles;
 //# sourceMappingURL=index.js.map

package/build-module/utils/transform-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["postcss","wrap","rebaseUrl","transformStyles","styles","wrapperSelector","map","css","ignoredSelectors","baseURL","rootUrl","filter","Boolean","process"],"sources":["@wordpress/block-editor/src/utils/transform-styles/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport postcss from 'postcss';\nimport wrap from 'postcss-prefixwrap';\nimport rebaseUrl from 'postcss-urlrebase';\n\n/**\n * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.\n *\n * @typedef {Object} EditorStyle\n * @property {string}        css              the CSS block(s), as a single string.\n * @property {?string}       baseURL          the base URL to be used as the reference when rewritting urls.\n * @property {?string[]}     ignoredSelectors the selectors not to wrap.\n *\n * @param    {EditorStyle[]} styles           CSS rules.\n * @param    {string}        wrapperSelector  Wrapper selector.\n * @return {Array} converted rules.\n */\nconst transformStyles = ( styles, wrapperSelector = '' ) => {\n\treturn styles.map( ( { css, ignoredSelectors = [], baseURL } ) => {\n\t\treturn postcss(\n\t\t\t[\n\t\t\t\twrapperSelector &&\n\t\t\t\t\twrap( wrapperSelector, {\n\t\t\t\t\t\tignoredSelectors: [\n\t\t\t\t\t\t\t...ignoredSelectors,\n\t\t\t\t\t\t\twrapperSelector,\n\t\t\t\t\t\t],\n\t\t\t\t\t} ),\n\t\t\t\tbaseURL && rebaseUrl( { rootUrl: baseURL } ),\n\t\t\t].filter( Boolean )\n\t\t).process( css, {} ).css; // use sync PostCSS API\n\t} );\n};\n\nexport default transformStyles;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAO,MAAM,SAAS;AAC7B,OAAOC,IAAI,MAAM,oBAAoB;AACrC,OAAOC,SAAS,MAAM,mBAAmB;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,eAAe,GAAGA,CAAEC,MAAM,EAAEC,eAAe,GAAG,EAAE,KAAM;EAC3D,OAAOD,MAAM,CAACE,GAAG,CAAE,CAAE;IAAEC,GAAG;IAAEC,gBAAgB,GAAG,EAAE;IAAEC;EAAQ,CAAC,KAAM;IACjE,OAAOT,OAAO,CACb,CACCK,eAAe,IACdJ,IAAI,CAAEI,eAAe,EAAE;MACtBG,gBAAgB,EAAE,CACjB,GAAGA,gBAAgB,EACnBH,eAAe;IAEjB,CAAE,CAAC,EACJI,OAAO,IAAIP,SAAS,CAAE;MAAEQ,OAAO,EAAED;IAAQ,CAAE,CAAC,CAC5C,CAACE,MAAM,CAAEC,OAAQ,CACnB,CAAC,CAACC,OAAO,CAAEN,GAAG,EAAE,CAAC,CAAE,CAAC,CAACA,GAAG,CAAC,CAAC;EAC3B,CAAE,CAAC;AACJ,CAAC;;AAED,eAAeJ,eAAe"}
+{"version":3,"names":["postcss","CssSyntaxError","wrap","rebaseUrl","transformStyles","styles","wrapperSelector","map","css","ignoredSelectors","baseURL","rootUrl","filter","Boolean","process","error","console","warn","message","showSourceCode"],"sources":["@wordpress/block-editor/src/utils/transform-styles/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport postcss, { CssSyntaxError } from 'postcss';\nimport wrap from 'postcss-prefixwrap';\nimport rebaseUrl from 'postcss-urlrebase';\n\n/**\n * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.\n *\n * @typedef {Object} EditorStyle\n * @property {string}        css              the CSS block(s), as a single string.\n * @property {?string}       baseURL          the base URL to be used as the reference when rewritting urls.\n * @property {?string[]}     ignoredSelectors the selectors not to wrap.\n *\n * @param    {EditorStyle[]} styles           CSS rules.\n * @param    {string}        wrapperSelector  Wrapper selector.\n * @return {Array} converted rules.\n */\nconst transformStyles = ( styles, wrapperSelector = '' ) => {\n\treturn styles.map( ( { css, ignoredSelectors = [], baseURL } ) => {\n\t\t// When there is no wrapper selector or base URL, there is no need\n\t\t// to transform the CSS. This is most cases because in the default\n\t\t// iframed editor, no wrapping is needed, and not many styles\n\t\t// provide a base URL.\n\t\tif ( ! wrapperSelector && ! baseURL ) {\n\t\t\treturn css;\n\t\t}\n\n\t\ttry {\n\t\t\treturn postcss(\n\t\t\t\t[\n\t\t\t\t\twrapperSelector &&\n\t\t\t\t\t\twrap( wrapperSelector, {\n\t\t\t\t\t\t\tignoredSelectors: [\n\t\t\t\t\t\t\t\t...ignoredSelectors,\n\t\t\t\t\t\t\t\twrapperSelector,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t} ),\n\t\t\t\t\tbaseURL && rebaseUrl( { rootUrl: baseURL } ),\n\t\t\t\t].filter( Boolean )\n\t\t\t).process( css, {} ).css; // use sync PostCSS API\n\t\t} catch ( error ) {\n\t\t\tif ( error instanceof CssSyntaxError ) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'wp.blockEditor.transformStyles Failed to transform CSS.',\n\t\t\t\t\terror.message + '\\n' + error.showSourceCode( false )\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'wp.blockEditor.transformStyles Failed to transform CSS.',\n\t\t\t\t\terror\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn null;\n\t\t}\n\t} );\n};\n\nexport default transformStyles;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAO,IAAIC,cAAc,QAAQ,SAAS;AACjD,OAAOC,IAAI,MAAM,oBAAoB;AACrC,OAAOC,SAAS,MAAM,mBAAmB;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,eAAe,GAAGA,CAAEC,MAAM,EAAEC,eAAe,GAAG,EAAE,KAAM;EAC3D,OAAOD,MAAM,CAACE,GAAG,CAAE,CAAE;IAAEC,GAAG;IAAEC,gBAAgB,GAAG,EAAE;IAAEC;EAAQ,CAAC,KAAM;IACjE;IACA;IACA;IACA;IACA,IAAK,CAAEJ,eAAe,IAAI,CAAEI,OAAO,EAAG;MACrC,OAAOF,GAAG;IACX;IAEA,IAAI;MACH,OAAOR,OAAO,CACb,CACCM,eAAe,IACdJ,IAAI,CAAEI,eAAe,EAAE;QACtBG,gBAAgB,EAAE,CACjB,GAAGA,gBAAgB,EACnBH,eAAe;MAEjB,CAAE,CAAC,EACJI,OAAO,IAAIP,SAAS,CAAE;QAAEQ,OAAO,EAAED;MAAQ,CAAE,CAAC,CAC5C,CAACE,MAAM,CAAEC,OAAQ,CACnB,CAAC,CAACC,OAAO,CAAEN,GAAG,EAAE,CAAC,CAAE,CAAC,CAACA,GAAG,CAAC,CAAC;IAC3B,CAAC,CAAC,OAAQO,KAAK,EAAG;MACjB,IAAKA,KAAK,YAAYd,cAAc,EAAG;QACtC;QACAe,OAAO,CAACC,IAAI,CACX,yDAAyD,EACzDF,KAAK,CAACG,OAAO,GAAG,IAAI,GAAGH,KAAK,CAACI,cAAc,CAAE,KAAM,CACpD,CAAC;MACF,CAAC,MAAM;QACN;QACAH,OAAO,CAACC,IAAI,CACX,yDAAyD,EACzDF,KACD,CAAC;MACF;MAEA,OAAO,IAAI;IACZ;EACD,CAAE,CAAC;AACJ,CAAC;AAED,eAAeX,eAAe"}

package/build-style/content-rtl.css

@@ -638,10 +638,10 @@
   color: #000;
 }
 
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child {
   pointer-events: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -652,7 +652,7 @@
   border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after::before {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child::after::before, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child::after::before {
   content: "";
   position: absolute;
   top: 0;
@@ -663,13 +663,13 @@
   background: currentColor;
   opacity: 0.1;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after {
   border: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
   visibility: visible;
 }
 .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {

package/build-style/content.css

@@ -638,10 +638,10 @@
   color: #000;
 }
 
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child {
   pointer-events: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -652,7 +652,7 @@
   border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after::before {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child::after::before, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child::after::before {
   content: "";
   position: absolute;
   top: 0;
@@ -663,13 +663,13 @@
   background: currentColor;
   opacity: 0.1;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after {
   border: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
   visibility: visible;
 }
 .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {

package/build-style/style-rtl.css

@@ -860,6 +860,8 @@
 
 .block-editor-block-patterns-list__item {
   height: 100%;
+  scroll-margin-top: 24px;
+  scroll-margin-bottom: 56px;
 }
 .block-editor-block-patterns-list__item .block-editor-block-preview__container {
   display: flex;
@@ -999,6 +1001,10 @@
   z-index: 1;
 }
 
+.block-editor-block-rename-modal {
+  z-index: 1000001;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }
@@ -1276,6 +1282,9 @@
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
   cursor: pointer;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item {
+  scroll-margin: 5px 0;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-preview__container {
   box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
@@ -1321,7 +1330,7 @@
   align-items: center;
   justify-content: space-between;
   border-top: 1px solid #ddd;
-  align-self: flex-end;
+  align-self: stretch;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls {
   display: flex;
@@ -3370,10 +3379,6 @@
   grid-column: span 1;
 }
 
-.block-editor-block-rename-modal {
-  z-index: 1000001;
-}
-
 /**
  * Block Toolbar
  */

package/build-style/style.css

@@ -860,6 +860,8 @@
 
 .block-editor-block-patterns-list__item {
   height: 100%;
+  scroll-margin-top: 24px;
+  scroll-margin-bottom: 56px;
 }
 .block-editor-block-patterns-list__item .block-editor-block-preview__container {
   display: flex;
@@ -999,6 +1001,10 @@
   z-index: 1;
 }
 
+.block-editor-block-rename-modal {
+  z-index: 1000001;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }
@@ -1276,6 +1282,9 @@
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
   cursor: pointer;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item {
+  scroll-margin: 5px 0;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-preview__container {
   box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
@@ -1321,7 +1330,7 @@
   align-items: center;
   justify-content: space-between;
   border-top: 1px solid #ddd;
-  align-self: flex-end;
+  align-self: stretch;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls {
   display: flex;
@@ -3371,10 +3380,6 @@
   grid-column: span 1;
 }
 
-.block-editor-block-rename-modal {
-  z-index: 1000001;
-}
-
 /**
  * Block Toolbar
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.14.0",
+	"version": "12.15.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.46.0",
-		"@wordpress/api-fetch": "^6.43.0",
-		"@wordpress/blob": "^3.46.0",
-		"@wordpress/blocks": "^12.23.0",
-		"@wordpress/commands": "^0.17.0",
-		"@wordpress/components": "^25.12.0",
-		"@wordpress/compose": "^6.23.0",
-		"@wordpress/data": "^9.16.0",
-		"@wordpress/date": "^4.46.0",
-		"@wordpress/deprecated": "^3.46.0",
-		"@wordpress/dom": "^3.46.0",
-		"@wordpress/element": "^5.23.0",
-		"@wordpress/escape-html": "^2.46.0",
-		"@wordpress/hooks": "^3.46.0",
-		"@wordpress/html-entities": "^3.46.0",
-		"@wordpress/i18n": "^4.46.0",
-		"@wordpress/icons": "^9.37.0",
-		"@wordpress/is-shallow-equal": "^4.46.0",
-		"@wordpress/keyboard-shortcuts": "^4.23.0",
-		"@wordpress/keycodes": "^3.46.0",
-		"@wordpress/notices": "^4.14.0",
-		"@wordpress/preferences": "^3.23.0",
-		"@wordpress/private-apis": "^0.28.0",
-		"@wordpress/rich-text": "^6.23.0",
-		"@wordpress/style-engine": "^1.29.0",
-		"@wordpress/token-list": "^2.46.0",
-		"@wordpress/url": "^3.47.0",
-		"@wordpress/warning": "^2.46.0",
-		"@wordpress/wordcount": "^3.46.0",
+		"@wordpress/a11y": "^3.47.0",
+		"@wordpress/api-fetch": "^6.44.0",
+		"@wordpress/blob": "^3.47.0",
+		"@wordpress/blocks": "^12.24.0",
+		"@wordpress/commands": "^0.18.0",
+		"@wordpress/components": "^25.13.0",
+		"@wordpress/compose": "^6.24.0",
+		"@wordpress/data": "^9.17.0",
+		"@wordpress/date": "^4.47.0",
+		"@wordpress/deprecated": "^3.47.0",
+		"@wordpress/dom": "^3.47.0",
+		"@wordpress/element": "^5.24.0",
+		"@wordpress/escape-html": "^2.47.0",
+		"@wordpress/hooks": "^3.47.0",
+		"@wordpress/html-entities": "^3.47.0",
+		"@wordpress/i18n": "^4.47.0",
+		"@wordpress/icons": "^9.38.0",
+		"@wordpress/is-shallow-equal": "^4.47.0",
+		"@wordpress/keyboard-shortcuts": "^4.24.0",
+		"@wordpress/keycodes": "^3.47.0",
+		"@wordpress/notices": "^4.15.0",
+		"@wordpress/preferences": "^3.24.0",
+		"@wordpress/private-apis": "^0.29.0",
+		"@wordpress/rich-text": "^6.24.0",
+		"@wordpress/style-engine": "^1.30.0",
+		"@wordpress/token-list": "^2.47.0",
+		"@wordpress/url": "^3.48.0",
+		"@wordpress/warning": "^2.47.0",
+		"@wordpress/wordcount": "^3.47.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
+	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
 }

package/src/components/block-list/block.native.js

@@ -605,6 +605,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
+				} else {
+					removeBlock( clientId );
 				}
 			}
 		},

package/src/components/block-parent-selector/index.js

@@ -74,7 +74,7 @@ export default function BlockParentSelector() {
 				onClick={ () => selectBlock( firstParentClientId ) }
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
-					__( 'Select %s' ),
+					__( 'Select parent block: %s' ),
 					blockInformation?.title
 				) }
 				showTooltip

package/src/components/block-pattern-setup/index.js

@@ -5,9 +5,7 @@ import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 import {
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
@@ -22,6 +20,13 @@ 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,
@@ -30,8 +35,9 @@ 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' ],
@@ -41,23 +47,25 @@ const SetupContent = ( {
 		return (
 			<div className="block-editor-block-pattern-setup__carousel">
 				<div className={ containerClass }>
-					<ul className="carousel-container">
+					<div className="carousel-container">
 						{ patterns.map( ( pattern, index ) => (
 							<BlockPatternSlide
+								active={ index === activeSlide }
 								className={ slideClass.get( index ) || '' }
 								key={ pattern.name }
 								pattern={ pattern }
 							/>
 						) ) }
-					</ul>
+					</div>
 				</div>
 			</div>
 		);
 	}
+
 	return (
 		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
-				{ ...composite }
+				store={ compositeStore }
 				role="listbox"
 				className={ containerClass }
 				aria-label={ __( 'Patterns list' ) }
@@ -67,7 +75,6 @@ const SetupContent = ( {
 						key={ pattern.name }
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
-						composite={ composite }
 						showTitles={ showTitles }
 					/>
 				) ) }
@@ -76,7 +83,7 @@ const SetupContent = ( {
 	);
 };
 
-function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
+function BlockPattern( { pattern, onSelect, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
@@ -84,16 +91,19 @@ function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 		`${ baseClassName }__item-description`
 	);
 	return (
-		<div
-			className={ `${ baseClassName }__list-item` }
-			aria-label={ pattern.title }
-			aria-describedby={ pattern.description ? descriptionId : undefined }
-		>
+		<div className={ `${ baseClassName }__list-item` }>
 			<CompositeItem
+				render={
+					<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 ) }
 			>
 				<BlockPreview
@@ -115,14 +125,16 @@ function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 	);
 }
 
-function BlockPatternSlide( { className, pattern, minHeight } ) {
+function BlockPatternSlide( { active, className, pattern, minHeight } ) {
 	const { blocks, title, description } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPatternSlide,
 		'block-editor-block-pattern-setup-list__item-description'
 	);
 	return (
-		<li
+		<div
+			aria-hidden={ ! active }
+			role="img"
 			className={ `pattern-slide ${ className }` }
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
@@ -133,7 +145,7 @@ function BlockPatternSlide( { className, pattern, minHeight } ) {
 					{ description }
 				</VisuallyHidden>
 			) }
-		</li>
+		</div>
 	);
 }
 
@@ -178,10 +190,14 @@ 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(

package/src/components/block-pattern-setup/setup-toolbar.js

@@ -35,12 +35,14 @@ const CarouselNavigation = ( {
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
 			disabled={ activeSlide === 0 }
+			__experimentalIsFocusable
 		/>
 		<Button
 			icon={ chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
 			disabled={ activeSlide === totalSlides - 1 }
+			__experimentalIsFocusable
 		/>
 	</div>
 );

package/src/components/block-pattern-setup/style.scss

@@ -32,6 +32,8 @@
 			}
 
 			.block-editor-block-pattern-setup-list__item {
+				scroll-margin: 5px 0;
+
 				&:hover .block-editor-block-preview__container {
 					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 				}
@@ -44,6 +46,7 @@
 					color: var(--wp-admin-theme-color);
 				}
 			}
+
 			.block-editor-block-pattern-setup-list__list-item {
 				break-inside: avoid-column;
 				margin-bottom: $grid-unit-30;
@@ -85,7 +88,7 @@
 		align-items: center;
 		justify-content: space-between;
 		border-top: 1px solid $gray-300;
-		align-self: flex-end;
+		align-self: stretch;
 
 		.block-editor-block-pattern-setup__display-controls {
 			display: flex;

package/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 = () => (
-	<BlockPatternList
+const MyBlockPatternsList = () => (
+	<BlockPatternsList
 		blockPatterns={ shownBlockPatterns }
 		shownPatterns={ shownBlockPatterns }
 		onClickPattern={ onSelectBlockPattern }