@wordpress/block-editor 13.0.5 → 13.0.7

package/build-module/store/utils.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -5,6 +10,36 @@ import { selectBlockPatternsKey } from './private-keys';
 import { unlock } from '../lock-unlock';
 import { STORE_NAME } from './constants';
 export const withRootClientIdOptionKey = Symbol('withRootClientId');
+const parsedPatternCache = new WeakMap();
+function parsePattern(pattern) {
+  const blocks = parse(pattern.content, {
+    __unstableSkipMigrationLogs: true
+  });
+  if (blocks.length === 1) {
+    blocks[0].attributes = {
+      ...blocks[0].attributes,
+      metadata: {
+        ...(blocks[0].attributes.metadata || {}),
+        categories: pattern.categories,
+        patternName: pattern.name,
+        name: blocks[0].attributes.metadata?.name || pattern.title
+      }
+    };
+  }
+  return {
+    ...pattern,
+    blocks
+  };
+}
+export function getParsedPattern(pattern) {
+  let parsedPattern = parsedPatternCache.get(pattern);
+  if (parsedPattern) {
+    return parsedPattern;
+  }
+  parsedPattern = parsePattern(pattern);
+  parsedPatternCache.set(pattern, parsedPattern);
+  return parsedPattern;
+}
 export const checkAllowList = (list, item, defaultResult = null) => {
   if (typeof list === 'boolean') {
     return list;

package/build-module/store/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["selectBlockPatternsKey","unlock","STORE_NAME","withRootClientIdOptionKey","Symbol","checkAllowList","list","item","defaultResult","Array","isArray","includes","checkAllowListRecursive","blocks","allowedBlockTypes","blocksQueue","length","block","shift","isAllowed","name","blockName","innerBlocks","forEach","innerBlock","push","getAllPatternsDependants","select","state","settings","__experimentalBlockPatterns","__experimentalUserPatternCategories","__experimentalReusableBlocks","blockPatterns","getReusableBlocks","getInsertBlockTypeDependants","rootClientId","blockListSettings","byClientId","get","templateLock","blockEditingModes"],"sources":["@wordpress/block-editor/src/store/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { selectBlockPatternsKey } from './private-keys';\nimport { unlock } from '../lock-unlock';\nimport { STORE_NAME } from './constants';\n\nexport const withRootClientIdOptionKey = Symbol( 'withRootClientId' );\n\nexport const checkAllowList = ( list, item, defaultResult = null ) => {\n\tif ( typeof list === 'boolean' ) {\n\t\treturn list;\n\t}\n\tif ( Array.isArray( list ) ) {\n\t\t// TODO: when there is a canonical way to detect that we are editing a post\n\t\t// the following check should be changed to something like:\n\t\t// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )\n\t\tif ( list.includes( 'core/post-content' ) && item === null ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn list.includes( item );\n\t}\n\treturn defaultResult;\n};\n\nexport const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {\n\tif ( typeof allowedBlockTypes === 'boolean' ) {\n\t\treturn allowedBlockTypes;\n\t}\n\n\tconst blocksQueue = [ ...blocks ];\n\twhile ( blocksQueue.length > 0 ) {\n\t\tconst block = blocksQueue.shift();\n\n\t\tconst isAllowed = checkAllowList(\n\t\t\tallowedBlockTypes,\n\t\t\tblock.name || block.blockName,\n\t\t\ttrue\n\t\t);\n\t\tif ( ! isAllowed ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tblock.innerBlocks?.forEach( ( innerBlock ) => {\n\t\t\tblocksQueue.push( innerBlock );\n\t\t} );\n\t}\n\n\treturn true;\n};\n\nexport const getAllPatternsDependants = ( select ) => ( state ) => {\n\treturn [\n\t\tstate.settings.__experimentalBlockPatterns,\n\t\tstate.settings.__experimentalUserPatternCategories,\n\t\tstate.settings.__experimentalReusableBlocks,\n\t\tstate.settings[ selectBlockPatternsKey ]?.( select ),\n\t\tstate.blockPatterns,\n\t\tunlock( select( STORE_NAME ) ).getReusableBlocks(),\n\t];\n};\n\nexport function getInsertBlockTypeDependants( state, rootClientId ) {\n\treturn [\n\t\tstate.blockListSettings[ rootClientId ],\n\t\tstate.blocks.byClientId.get( rootClientId ),\n\t\tstate.settings.allowedBlockTypes,\n\t\tstate.settings.templateLock,\n\t\tstate.blockEditingModes,\n\t];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,UAAU,QAAQ,aAAa;AAExC,OAAO,MAAMC,yBAAyB,GAAGC,MAAM,CAAE,kBAAmB,CAAC;AAErE,OAAO,MAAMC,cAAc,GAAGA,CAAEC,IAAI,EAAEC,IAAI,EAAEC,aAAa,GAAG,IAAI,KAAM;EACrE,IAAK,OAAOF,IAAI,KAAK,SAAS,EAAG;IAChC,OAAOA,IAAI;EACZ;EACA,IAAKG,KAAK,CAACC,OAAO,CAAEJ,IAAK,CAAC,EAAG;IAC5B;IACA;IACA;IACA,IAAKA,IAAI,CAACK,QAAQ,CAAE,mBAAoB,CAAC,IAAIJ,IAAI,KAAK,IAAI,EAAG;MAC5D,OAAO,IAAI;IACZ;IACA,OAAOD,IAAI,CAACK,QAAQ,CAAEJ,IAAK,CAAC;EAC7B;EACA,OAAOC,aAAa;AACrB,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGA,CAAEC,MAAM,EAAEC,iBAAiB,KAAM;EACvE,IAAK,OAAOA,iBAAiB,KAAK,SAAS,EAAG;IAC7C,OAAOA,iBAAiB;EACzB;EAEA,MAAMC,WAAW,GAAG,CAAE,GAAGF,MAAM,CAAE;EACjC,OAAQE,WAAW,CAACC,MAAM,GAAG,CAAC,EAAG;IAChC,MAAMC,KAAK,GAAGF,WAAW,CAACG,KAAK,CAAC,CAAC;IAEjC,MAAMC,SAAS,GAAGd,cAAc,CAC/BS,iBAAiB,EACjBG,KAAK,CAACG,IAAI,IAAIH,KAAK,CAACI,SAAS,EAC7B,IACD,CAAC;IACD,IAAK,CAAEF,SAAS,EAAG;MAClB,OAAO,KAAK;IACb;IAEAF,KAAK,CAACK,WAAW,EAAEC,OAAO,CAAIC,UAAU,IAAM;MAC7CT,WAAW,CAACU,IAAI,CAAED,UAAW,CAAC;IAC/B,CAAE,CAAC;EACJ;EAEA,OAAO,IAAI;AACZ,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAKC,MAAM,IAAQC,KAAK,IAAM;EAClE,OAAO,CACNA,KAAK,CAACC,QAAQ,CAACC,2BAA2B,EAC1CF,KAAK,CAACC,QAAQ,CAACE,mCAAmC,EAClDH,KAAK,CAACC,QAAQ,CAACG,4BAA4B,EAC3CJ,KAAK,CAACC,QAAQ,CAAE7B,sBAAsB,CAAE,GAAI2B,MAAO,CAAC,EACpDC,KAAK,CAACK,aAAa,EACnBhC,MAAM,CAAE0B,MAAM,CAAEzB,UAAW,CAAE,CAAC,CAACgC,iBAAiB,CAAC,CAAC,CAClD;AACF,CAAC;AAED,OAAO,SAASC,4BAA4BA,CAAEP,KAAK,EAAEQ,YAAY,EAAG;EACnE,OAAO,CACNR,KAAK,CAACS,iBAAiB,CAAED,YAAY,CAAE,EACvCR,KAAK,CAACf,MAAM,CAACyB,UAAU,CAACC,GAAG,CAAEH,YAAa,CAAC,EAC3CR,KAAK,CAACC,QAAQ,CAACf,iBAAiB,EAChCc,KAAK,CAACC,QAAQ,CAACW,YAAY,EAC3BZ,KAAK,CAACa,iBAAiB,CACvB;AACF","ignoreList":[]}
+{"version":3,"names":["parse","selectBlockPatternsKey","unlock","STORE_NAME","withRootClientIdOptionKey","Symbol","parsedPatternCache","WeakMap","parsePattern","pattern","blocks","content","__unstableSkipMigrationLogs","length","attributes","metadata","categories","patternName","name","title","getParsedPattern","parsedPattern","get","set","checkAllowList","list","item","defaultResult","Array","isArray","includes","checkAllowListRecursive","allowedBlockTypes","blocksQueue","block","shift","isAllowed","blockName","innerBlocks","forEach","innerBlock","push","getAllPatternsDependants","select","state","settings","__experimentalBlockPatterns","__experimentalUserPatternCategories","__experimentalReusableBlocks","blockPatterns","getReusableBlocks","getInsertBlockTypeDependants","rootClientId","blockListSettings","byClientId","templateLock","blockEditingModes"],"sources":["@wordpress/block-editor/src/store/utils.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { parse } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { selectBlockPatternsKey } from './private-keys';\nimport { unlock } from '../lock-unlock';\nimport { STORE_NAME } from './constants';\n\nexport const withRootClientIdOptionKey = Symbol( 'withRootClientId' );\n\nconst parsedPatternCache = new WeakMap();\n\nfunction parsePattern( pattern ) {\n\tconst blocks = parse( pattern.content, {\n\t\t__unstableSkipMigrationLogs: true,\n\t} );\n\tif ( blocks.length === 1 ) {\n\t\tblocks[ 0 ].attributes = {\n\t\t\t...blocks[ 0 ].attributes,\n\t\t\tmetadata: {\n\t\t\t\t...( blocks[ 0 ].attributes.metadata || {} ),\n\t\t\t\tcategories: pattern.categories,\n\t\t\t\tpatternName: pattern.name,\n\t\t\t\tname: blocks[ 0 ].attributes.metadata?.name || pattern.title,\n\t\t\t},\n\t\t};\n\t}\n\treturn {\n\t\t...pattern,\n\t\tblocks,\n\t};\n}\n\nexport function getParsedPattern( pattern ) {\n\tlet parsedPattern = parsedPatternCache.get( pattern );\n\tif ( parsedPattern ) {\n\t\treturn parsedPattern;\n\t}\n\tparsedPattern = parsePattern( pattern );\n\tparsedPatternCache.set( pattern, parsedPattern );\n\treturn parsedPattern;\n}\n\nexport const checkAllowList = ( list, item, defaultResult = null ) => {\n\tif ( typeof list === 'boolean' ) {\n\t\treturn list;\n\t}\n\tif ( Array.isArray( list ) ) {\n\t\t// TODO: when there is a canonical way to detect that we are editing a post\n\t\t// the following check should be changed to something like:\n\t\t// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )\n\t\tif ( list.includes( 'core/post-content' ) && item === null ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn list.includes( item );\n\t}\n\treturn defaultResult;\n};\n\nexport const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {\n\tif ( typeof allowedBlockTypes === 'boolean' ) {\n\t\treturn allowedBlockTypes;\n\t}\n\n\tconst blocksQueue = [ ...blocks ];\n\twhile ( blocksQueue.length > 0 ) {\n\t\tconst block = blocksQueue.shift();\n\n\t\tconst isAllowed = checkAllowList(\n\t\t\tallowedBlockTypes,\n\t\t\tblock.name || block.blockName,\n\t\t\ttrue\n\t\t);\n\t\tif ( ! isAllowed ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tblock.innerBlocks?.forEach( ( innerBlock ) => {\n\t\t\tblocksQueue.push( innerBlock );\n\t\t} );\n\t}\n\n\treturn true;\n};\n\nexport const getAllPatternsDependants = ( select ) => ( state ) => {\n\treturn [\n\t\tstate.settings.__experimentalBlockPatterns,\n\t\tstate.settings.__experimentalUserPatternCategories,\n\t\tstate.settings.__experimentalReusableBlocks,\n\t\tstate.settings[ selectBlockPatternsKey ]?.( select ),\n\t\tstate.blockPatterns,\n\t\tunlock( select( STORE_NAME ) ).getReusableBlocks(),\n\t];\n};\n\nexport function getInsertBlockTypeDependants( state, rootClientId ) {\n\treturn [\n\t\tstate.blockListSettings[ rootClientId ],\n\t\tstate.blocks.byClientId.get( rootClientId ),\n\t\tstate.settings.allowedBlockTypes,\n\t\tstate.settings.templateLock,\n\t\tstate.blockEditingModes,\n\t];\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.0.5",
+	"version": "13.0.7",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -73,7 +73,7 @@
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
-		"postcss-prefixwrap": "^1.41.0",
+		"postcss-prefixwrap": "^1.51.0",
 		"postcss-urlrebase": "^1.0.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.0.6",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "38063ae466e1b62d400b910136757a4cafdbe7fa"
+	"gitHead": "a74a70ed203bbcbb5f3d34335df9631178647acb"
 }

package/src/autocompleters/block.js

@@ -60,7 +60,8 @@ function createBlockCompleter() {
 				}, [] );
 			const [ items, categories, collections ] = useBlockTypesState(
 				rootClientId,
-				noop
+				noop,
+				true
 			);
 
 			const filteredItems = useMemo( () => {

package/src/components/block-list/use-block-props/use-block-refs.js

@@ -1,8 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo, useRef } from '@wordpress/element';
-import { useRefEffect, useObservableValue } from '@wordpress/compose';
+import {
+	useContext,
+	useMemo,
+	useRef,
+	useState,
+	useLayoutEffect,
+} from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -67,7 +73,17 @@ function useBlockRef( clientId ) {
  */
 function useBlockElement( clientId ) {
 	const { refsMap } = useContext( BlockRefs );
-	return useObservableValue( refsMap, clientId ) ?? null;
+	const [ blockElement, setBlockElement ] = useState( null );
+	// Delay setting the resulting `blockElement` until an effect. If the block element
+	// changes (i.e., the block is unmounted and re-mounted), this allows enough time
+	// for the ref callbacks to clean up the old element and set the new one.
+	useLayoutEffect( () => {
+		setBlockElement( refsMap.get( clientId ) );
+		return refsMap.subscribe( clientId, () =>
+			setBlockElement( refsMap.get( clientId ) )
+		);
+	}, [ refsMap, clientId ] );
+	return blockElement;
 }
 
 export { useBlockRef as __unstableUseBlockRef };

package/src/components/block-toolbar/shuffle.js

@@ -66,7 +66,8 @@ export default function Shuffle( { clientId, as = Container } ) {
 			);
 		} );
 	}, [ categories, patterns ] );
-	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
+
+	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
 		return null;
 	}
 

package/src/components/global-styles/hooks.js

@@ -85,7 +85,11 @@ const VALID_SETTINGS = [
 ];
 
 export const useGlobalStylesReset = () => {
-	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
+	const { user, setUserConfig } = useContext( GlobalStylesContext );
+	const config = {
+		settings: user.settings,
+		styles: user.styles,
+	};
 	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,

package/src/components/global-styles/test/use-global-styles-output.js

@@ -107,6 +107,7 @@ describe( 'global styles renderer', () => {
 						},
 					},
 					selector: ROOT_BLOCK_SELECTOR,
+					skipSelectorWrapper: true,
 				},
 				{
 					styles: {
@@ -128,6 +129,7 @@ describe( 'global styles renderer', () => {
 						},
 					},
 					selector: ELEMENTS.link,
+					skipSelectorWrapper: true,
 				},
 				{
 					styles: {
@@ -480,7 +482,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(body){background-color: red;margin: 10px;padding: 10px;}:root :where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}:root :where(h1){font-size: 42px;}:root :where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:root :where(h1,h2,h3,h4,h5,h6){color: orange;}:root :where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }body{background-color: red;margin: 10px;padding: 10px;}a:where(:not(.wp-element-button)){color: blue;}:root :where(a:where(:not(.wp-element-button)):hover){color: orange;}:root :where(a:where(:not(.wp-element-button)):focus){color: orange;}h1{font-size: 42px;}:root :where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:root :where(h1,h2,h3,h4,h5,h6){color: orange;}:root :where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}:root :where(h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover){color: red;}:root :where(h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus){color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
 
@@ -761,7 +763,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.is-layout-flow > * + * { margin-block-start: 0.5em; margin-block-end: 0; }.is-layout-flex { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
+				':root :where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:root :where(.is-layout-flex) { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -778,7 +780,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.is-layout-flex { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
+				':root :where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:root :where(.is-layout-flex) { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -795,7 +797,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex { gap: 12px; }'
+				':root :where(.wp-block-group-is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.wp-block-group-is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:root :where(.wp-block-group-is-layout-flex) { gap: 12px; }'
 			);
 		} );
 
@@ -1029,11 +1031,19 @@ describe( 'global styles renderer', () => {
 	} );
 
 	describe( 'processCSSNesting', () => {
+		it( 'should return empty string when supplied css is empty', () => {
+			expect( processCSSNesting( '', '.foo' ) ).toEqual( '' );
+		} );
 		it( 'should return processed CSS without any nested selectors', () => {
 			expect(
 				processCSSNesting( 'color: red; margin: auto;', '.foo' )
 			).toEqual( ':root :where(.foo){color: red; margin: auto;}' );
 		} );
+		it( 'should return processed CSS when there are no root selectors', () => {
+			expect(
+				processCSSNesting( '&::before{color: red;}', '.foo' )
+			).toEqual( ':root :where(.foo)::before{color: red;}' );
+		} );
 		it( 'should return processed CSS with nested selectors', () => {
 			expect(
 				processCSSNesting(
@@ -1047,21 +1057,21 @@ describe( 'global styles renderer', () => {
 		it( 'should return processed CSS with pseudo elements', () => {
 			expect(
 				processCSSNesting(
-					'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;}',
+					'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;} & > ::before{color: darkseagreen;}',
 					'.foo'
 				)
 			).toEqual(
-				':root :where(.foo){color: red; margin: auto;}:root :where(.foo::before){color: blue;}:root :where(.foo ::before){color: green;}:root :where(.foo.one::before){color: yellow;}:root :where(.foo .two::before){color: purple;}'
+				':root :where(.foo){color: red; margin: auto;}:root :where(.foo)::before{color: blue;}:root :where(.foo) ::before{color: green;}:root :where(.foo.one)::before{color: yellow;}:root :where(.foo .two)::before{color: purple;}:root :where(.foo) > ::before{color: darkseagreen;}'
 			);
 		} );
 		it( 'should return processed CSS with multiple root selectors', () => {
 			expect(
 				processCSSNesting(
-					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;}',
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;} & > ::before{color: darkseagreen;}',
 					'.foo, .bar'
 				)
 			).toEqual(
-				':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo::before, .bar::before){color: yellow;}:root :where(.foo ::before, .bar ::before){color: purple;}:root :where(.foo.three::before, .bar.three::before){color: orange;}:root :where(.foo .four::before, .bar .four::before){color: skyblue;}'
+				':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo, .bar)::before{color: yellow;}:root :where(.foo, .bar) ::before{color: purple;}:root :where(.foo.three, .bar.three)::before{color: orange;}:root :where(.foo .four, .bar .four)::before{color: skyblue;}:root :where(.foo, .bar) > ::before{color: darkseagreen;}'
 			);
 		} );
 	} );

package/src/components/global-styles/use-global-styles-output.js

@@ -37,6 +37,12 @@ import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
 import { setThemeFileUris } from './theme-file-uri-utils';
 
+// Elements that rely on class names in their selectors.
+const ELEMENT_CLASS_NAMES = {
+	button: 'wp-element-button',
+	caption: 'wp-element-caption',
+};
+
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
 const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
@@ -523,10 +529,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `.${ className }${
+										? `:root :where(.${ className })${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }-${ className }${
+										: `:root :where(${ selector }-${ className })${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -628,6 +634,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 		nodes.push( {
 			styles,
 			selector: ROOT_BLOCK_SELECTOR,
+			// Root selector (body) styles should not be wrapped in `:root where()` to keep
+			// specificity at (0,0,1) and maintain backwards compatibility.
+			skipSelectorWrapper: true,
 		} );
 	}
 
@@ -636,6 +645,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			nodes.push( {
 				styles: tree.styles?.elements?.[ name ],
 				selector,
+				// Top level elements that don't use a class name should not receive the
+				// `:root :where()` wrapper to maintain backwards compatibility.
+				skipSelectorWrapper: ! ELEMENT_CLASS_NAMES[ name ],
 			} );
 		}
 	} );
@@ -942,6 +954,7 @@ export const toStyles = (
 				hasLayoutSupport,
 				featureSelectors,
 				styleVariationSelectors,
+				skipSelectorWrapper,
 			} ) => {
 				// Process styles for block support features with custom feature level
 				// CSS selectors set.
@@ -1000,7 +1013,10 @@ export const toStyles = (
 					disableRootPadding
 				);
 				if ( styleDeclarations?.length ) {
-					ruleset += `:root :where(${ selector }){${ styleDeclarations.join(
+					const generalSelector = skipSelectorWrapper
+						? selector
+						: `:root :where(${ selector })`;
+					ruleset += `${ generalSelector }{${ styleDeclarations.join(
 						';'
 					) };}`;
 				}
@@ -1094,7 +1110,11 @@ export const toStyles = (
 								.map( ( sel ) => sel + pseudoKey )
 								.join( ',' );
 
-							const pseudoRule = `${ _selector }{${ pseudoDeclarations.join(
+							// As pseudo classes such as :hover, :focus etc. have class-level
+							// specificity, they must use the `:root :where()` wrapper. This.
+							// caps the specificity at `0-1-0` to allow proper nesting of variations
+							// and block type element styles.
+							const pseudoRule = `:root :where(${ _selector }){${ pseudoDeclarations.join(
 								';'
 							) };}`;
 
@@ -1292,9 +1312,17 @@ function updateConfigWithSeparator( config ) {
 export function processCSSNesting( css, blockSelector ) {
 	let processedCSS = '';
 
+	if ( ! css || css.trim() === '' ) {
+		return processedCSS;
+	}
+
 	// Split CSS nested rules.
 	const parts = css.split( '&' );
 	parts.forEach( ( part ) => {
+		if ( ! part || part.trim() === '' ) {
+			return;
+		}
+
 		const isRootCss = ! part.includes( '{' );
 		if ( isRootCss ) {
 			// If the part doesn't contain braces, it applies to the root level.
@@ -1307,11 +1335,32 @@ export function processCSSNesting( css, blockSelector ) {
 			}
 
 			const [ nestedSelector, cssValue ] = splittedPart;
-			const combinedSelector = nestedSelector.startsWith( ' ' )
-				? scopeSelector( blockSelector, nestedSelector )
-				: appendToSelector( blockSelector, nestedSelector );
 
-			processedCSS += `:root :where(${ combinedSelector }){${ cssValue.trim() }}`;
+			// Handle pseudo elements such as ::before, ::after, etc. Regex will also
+			// capture any leading combinator such as >, +, or ~, as well as spaces.
+			// This allows pseudo elements as descendants e.g. `.parent ::before`.
+			const matches = nestedSelector.match( /([>+~\s]*::[a-zA-Z-]+)/ );
+			const pseudoPart = matches ? matches[ 1 ] : '';
+			const withoutPseudoElement = matches
+				? nestedSelector.replace( pseudoPart, '' ).trim()
+				: nestedSelector.trim();
+
+			let combinedSelector;
+			if ( withoutPseudoElement === '' ) {
+				// Only contained a pseudo element to use the block selector to form
+				// the final `:root :where()` selector.
+				combinedSelector = blockSelector;
+			} else {
+				// If the nested selector is a descendant of the block scope it with the
+				// block selector. Otherwise append it to the block selector.
+				combinedSelector = nestedSelector.startsWith( ' ' )
+					? scopeSelector( blockSelector, withoutPseudoElement )
+					: appendToSelector( blockSelector, withoutPseudoElement );
+			}
+
+			// Build final rule, re-adding any pseudo element outside the `:where()`
+			// to maintain valid CSS selector.
+			processedCSS += `:root :where(${ combinedSelector })${ pseudoPart }{${ cssValue.trim() }}`;
 		}
 	} );
 	return processedCSS;

package/src/layouts/constrained.js

@@ -217,15 +217,23 @@ export default {
 			const paddingValues = getCSSRules( style );
 			paddingValues.forEach( ( rule ) => {
 				if ( rule.key === 'paddingRight' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingRightValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-right: calc(${ rule.value } * -1);
+						margin-right: calc(${ paddingRightValue } * -1);
 					}
 					`;
 				} else if ( rule.key === 'paddingLeft' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingLeftValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-left: calc(${ rule.value } * -1);
+						margin-left: calc(${ paddingLeftValue } * -1);
 					}
 					`;
 				}

package/src/store/private-selectors.js

@@ -20,6 +20,7 @@ import {
 	checkAllowListRecursive,
 	getAllPatternsDependants,
 	getInsertBlockTypeDependants,
+	getParsedPattern,
 } from './utils';
 import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 import { STORE_NAME } from './constants';
@@ -291,16 +292,15 @@ export const getInserterMediaCategories = createSelector(
 export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state, rootClientId = null ) => {
-			const { getAllPatterns, __experimentalGetParsedPattern } = unlock(
-				select( STORE_NAME )
-			);
+			const { getAllPatterns } = unlock( select( STORE_NAME ) );
 			const patterns = getAllPatterns();
 			const { allowedBlockTypes } = getSettings( state );
-			return patterns.some( ( { name, inserter = true } ) => {
+			return patterns.some( ( pattern ) => {
+				const { inserter = true } = pattern;
 				if ( ! inserter ) {
 					return false;
 				}
-				const { blocks } = __experimentalGetParsedPattern( name );
+				const { blocks } = getParsedPattern( pattern );
 				return (
 					checkAllowListRecursive( blocks, allowedBlockTypes ) &&
 					blocks.every( ( { name: blockName } ) =>

package/src/store/selectors.js

@@ -7,7 +7,6 @@ import {
 	getBlockVariations,
 	hasBlockSupport,
 	getPossibleBlockTransformations,
-	parse,
 	switchToBlockType,
 	store as blocksStore,
 } from '@wordpress/blocks';
@@ -27,6 +26,7 @@ import {
 	checkAllowList,
 	getAllPatternsDependants,
 	getInsertBlockTypeDependants,
+	getParsedPattern,
 } from './utils';
 import { orderBy } from '../utils/sorting';
 import { STORE_NAME } from './constants';
@@ -2349,40 +2349,12 @@ export function __experimentalGetDirectInsertBlock(
 }
 
 export const __experimentalGetParsedPattern = createRegistrySelector(
-	( select ) =>
-		createSelector(
-			( state, patternName ) => {
-				const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug(
-					patternName
-				);
-				if ( ! pattern ) {
-					return null;
-				}
-				const blocks = parse( pattern.content, {
-					__unstableSkipMigrationLogs: true,
-				} );
-				if ( blocks.length === 1 ) {
-					blocks[ 0 ].attributes = {
-						...blocks[ 0 ].attributes,
-						metadata: {
-							...( blocks[ 0 ].attributes.metadata || {} ),
-							categories: pattern.categories,
-							patternName: pattern.name,
-							name:
-								blocks[ 0 ].attributes.metadata?.name ||
-								pattern.title,
-						},
-					};
-				}
-				return {
-					...pattern,
-					blocks,
-				};
-			},
-			( state, patternName ) => [
-				unlock( select( STORE_NAME ) ).getPatternBySlug( patternName ),
-			]
-		)
+	( select ) => ( state, patternName ) => {
+		const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug(
+			patternName
+		);
+		return pattern ? getParsedPattern( pattern ) : null;
+	}
 );
 
 const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
@@ -2401,16 +2373,13 @@ const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
 export const __experimentalGetAllowedPatterns = createRegistrySelector(
 	( select ) => {
 		return createSelector( ( state, rootClientId = null ) => {
-			const {
-				getAllPatterns,
-				__experimentalGetParsedPattern: getParsedPattern,
-			} = unlock( select( STORE_NAME ) );
+			const { getAllPatterns } = unlock( select( STORE_NAME ) );
 			const patterns = getAllPatterns();
 			const { allowedBlockTypes } = getSettings( state );
 
 			const parsedPatterns = patterns
 				.filter( ( { inserter = true } ) => !! inserter )
-				.map( ( { name } ) => getParsedPattern( name ) );
+				.map( getParsedPattern );
 			const availableParsedPatterns = parsedPatterns.filter(
 				( { blocks } ) =>
 					checkAllowListRecursive( blocks, allowedBlockTypes )

package/src/store/utils.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -7,6 +12,39 @@ import { STORE_NAME } from './constants';
 
 export const withRootClientIdOptionKey = Symbol( 'withRootClientId' );
 
+const parsedPatternCache = new WeakMap();
+
+function parsePattern( pattern ) {
+	const blocks = parse( pattern.content, {
+		__unstableSkipMigrationLogs: true,
+	} );
+	if ( blocks.length === 1 ) {
+		blocks[ 0 ].attributes = {
+			...blocks[ 0 ].attributes,
+			metadata: {
+				...( blocks[ 0 ].attributes.metadata || {} ),
+				categories: pattern.categories,
+				patternName: pattern.name,
+				name: blocks[ 0 ].attributes.metadata?.name || pattern.title,
+			},
+		};
+	}
+	return {
+		...pattern,
+		blocks,
+	};
+}
+
+export function getParsedPattern( pattern ) {
+	let parsedPattern = parsedPatternCache.get( pattern );
+	if ( parsedPattern ) {
+		return parsedPattern;
+	}
+	parsedPattern = parsePattern( pattern );
+	parsedPatternCache.set( pattern, parsedPattern );
+	return parsedPattern;
+}
+
 export const checkAllowList = ( list, item, defaultResult = null ) => {
 	if ( typeof list === 'boolean' ) {
 		return list;