@wordpress/block-editor 15.6.1-next.36001005c.0 → 15.7.0

package/build-module/store/utils.js

@@ -3,7 +3,7 @@ import { parse as grammarParse } from "@wordpress/block-serialization-default-pa
 import { selectBlockPatternsKey } from "./private-keys";
 import { unlock } from "../lock-unlock";
 import { STORE_NAME } from "./constants";
-import { getSectionRootClientId } from "./private-selectors";
+import { getSectionRootClientId, isSectionBlock } from "./private-selectors";
 import { getBlockEditingMode } from "./selectors";
 import { INSERTER_PATTERN_TYPES } from "../components/inserter/block-patterns-tab/utils";
 const isFiltered = Symbol("isFiltered");
@@ -112,7 +112,8 @@ const getInsertBlockTypeDependants = () => (state, rootClientId) => {
     state.settings.allowedBlockTypes,
     state.settings.templateLock,
     getBlockEditingMode(state, rootClientId),
-    getSectionRootClientId(state)
+    getSectionRootClientId(state),
+    isSectionBlock(state, rootClientId)
   ];
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/store/utils.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { parse } from '@wordpress/blocks';\nimport { parse as grammarParse } from '@wordpress/block-serialization-default-parser';\n\n/**\n * Internal dependencies\n */\nimport { selectBlockPatternsKey } from './private-keys';\nimport { unlock } from '../lock-unlock';\nimport { STORE_NAME } from './constants';\nimport { getSectionRootClientId } from './private-selectors';\nimport { getBlockEditingMode } from './selectors';\nimport { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';\n\nexport const isFiltered = Symbol( 'isFiltered' );\nconst parsedPatternCache = new WeakMap();\nconst grammarMapCache = new WeakMap();\n\nexport function mapUserPattern(\n\tuserPattern,\n\t__experimentalUserPatternCategories = []\n) {\n\treturn {\n\t\tname: `core/block/${ userPattern.id }`,\n\t\tid: userPattern.id,\n\t\ttype: INSERTER_PATTERN_TYPES.user,\n\t\ttitle: userPattern.title?.raw,\n\t\tcategories: userPattern.wp_pattern_category?.map( ( catId ) => {\n\t\t\tconst category = __experimentalUserPatternCategories.find(\n\t\t\t\t( { id } ) => id === catId\n\t\t\t);\n\t\t\treturn category ? category.slug : catId;\n\t\t} ),\n\t\tcontent: userPattern.content?.raw,\n\t\tsyncStatus: userPattern.wp_pattern_sync_status,\n\t};\n}\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\tparsedPattern = parsePattern( pattern );\n\t\tparsedPatternCache.set( pattern, parsedPattern );\n\t}\n\treturn parsedPattern;\n}\n\nexport function getGrammar( pattern ) {\n\tlet grammarMap = grammarMapCache.get( pattern );\n\tif ( ! grammarMap ) {\n\t\tgrammarMap = grammarParse( pattern.content );\n\t\t// Block names are null only at the top level for whitespace.\n\t\tgrammarMap = grammarMap.filter( ( block ) => block.blockName !== null );\n\t\tgrammarMapCache.set( pattern, grammarMap );\n\t}\n\treturn grammarMap;\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 const 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\tgetBlockEditingMode( state, rootClientId ),\n\t\tgetSectionRootClientId( state ),\n\t];\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { parse } from '@wordpress/blocks';\nimport { parse as grammarParse } from '@wordpress/block-serialization-default-parser';\n\n/**\n * Internal dependencies\n */\nimport { selectBlockPatternsKey } from './private-keys';\nimport { unlock } from '../lock-unlock';\nimport { STORE_NAME } from './constants';\nimport { getSectionRootClientId, isSectionBlock } from './private-selectors';\nimport { getBlockEditingMode } from './selectors';\nimport { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';\n\nexport const isFiltered = Symbol( 'isFiltered' );\nconst parsedPatternCache = new WeakMap();\nconst grammarMapCache = new WeakMap();\n\nexport function mapUserPattern(\n\tuserPattern,\n\t__experimentalUserPatternCategories = []\n) {\n\treturn {\n\t\tname: `core/block/${ userPattern.id }`,\n\t\tid: userPattern.id,\n\t\ttype: INSERTER_PATTERN_TYPES.user,\n\t\ttitle: userPattern.title?.raw,\n\t\tcategories: userPattern.wp_pattern_category?.map( ( catId ) => {\n\t\t\tconst category = __experimentalUserPatternCategories.find(\n\t\t\t\t( { id } ) => id === catId\n\t\t\t);\n\t\t\treturn category ? category.slug : catId;\n\t\t} ),\n\t\tcontent: userPattern.content?.raw,\n\t\tsyncStatus: userPattern.wp_pattern_sync_status,\n\t};\n}\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\tparsedPattern = parsePattern( pattern );\n\t\tparsedPatternCache.set( pattern, parsedPattern );\n\t}\n\treturn parsedPattern;\n}\n\nexport function getGrammar( pattern ) {\n\tlet grammarMap = grammarMapCache.get( pattern );\n\tif ( ! grammarMap ) {\n\t\tgrammarMap = grammarParse( pattern.content );\n\t\t// Block names are null only at the top level for whitespace.\n\t\tgrammarMap = grammarMap.filter( ( block ) => block.blockName !== null );\n\t\tgrammarMapCache.set( pattern, grammarMap );\n\t}\n\treturn grammarMap;\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 const 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\tgetBlockEditingMode( state, rootClientId ),\n\t\tgetSectionRootClientId( state ),\n\t\tisSectionBlock( state, rootClientId ),\n\t];\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/utils/fit-text-utils.js

@@ -1,9 +1,10 @@
 function generateCSSRule(elementSelector, fontSize) {
   return `${elementSelector} { font-size: ${fontSize}px !important; }`;
 }
-function findOptimalFontSize(textElement, elementSelector, applyStylesFn, maxSize = 600) {
+function findOptimalFontSize(textElement, elementSelector, applyStylesFn) {
   const alreadyHasScrollableHeight = textElement.scrollHeight > textElement.clientHeight;
   let minSize = 5;
+  let maxSize = 600;
   let bestSize = minSize;
   while (minSize <= maxSize) {
     const midSize = Math.floor((minSize + maxSize) / 2);
@@ -19,7 +20,7 @@ function findOptimalFontSize(textElement, elementSelector, applyStylesFn, maxSiz
   }
   return bestSize;
 }
-function optimizeFitText(textElement, elementSelector, applyStylesFn, maxSize) {
+function optimizeFitText(textElement, elementSelector, applyStylesFn) {
   if (!textElement) {
     return;
   }
@@ -27,8 +28,7 @@ function optimizeFitText(textElement, elementSelector, applyStylesFn, maxSize) {
   const optimalSize = findOptimalFontSize(
     textElement,
     elementSelector,
-    applyStylesFn,
-    maxSize
+    applyStylesFn
   );
   const cssRule = generateCSSRule(elementSelector, optimalSize);
   applyStylesFn(cssRule);

package/build-module/utils/fit-text-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/fit-text-utils.js"],
-  "sourcesContent": ["/**\n * Shared utility functions for fit text functionality.\n * Uses callback-based approach for maximum code reuse between editor and frontend.\n */\n\n/**\n * Generate CSS rule for single text element.\n *\n * @param {string} elementSelector CSS selector for the text element\n * @param {number} fontSize        Font size in pixels\n * @return {string} CSS rule string\n */\nfunction generateCSSRule( elementSelector, fontSize ) {\n\treturn `${ elementSelector } { font-size: ${ fontSize }px !important; }`;\n}\n\n/**\n * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement     The text element\n * @param {string}      elementSelector CSS selector for the text element\n * @param {Function}    applyStylesFn   Function to apply test styles\n * @param {number}      maxSize         Maximum font size in pixels (default: 600)\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize(\n\ttextElement,\n\telementSelector,\n\tapplyStylesFn,\n\tmaxSize = 600\n) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\n\tlet bestSize = minSize;\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyStylesFn( generateCSSRule( elementSelector, midSize ) );\n\n\t\tconst fitsWidth = textElement.scrollWidth <= textElement.clientWidth;\n\t\tconst fitsHeight =\n\t\t\talreadyHasScrollableHeight ||\n\t\t\ttextElement.scrollHeight <= textElement.clientHeight;\n\n\t\tif ( fitsWidth && fitsHeight ) {\n\t\t\tbestSize = midSize;\n\t\t\tminSize = midSize + 1;\n\t\t} else {\n\t\t\tmaxSize = midSize - 1;\n\t\t}\n\t}\n\n\treturn bestSize;\n}\n\n/**\n * Complete fit text optimization for a single text element.\n * Handles the full flow using callbacks for style management.\n *\n * @param {HTMLElement} textElement     The text element (paragraph, heading, etc.)\n * @param {string}      elementSelector CSS selector for the text element\n * @param {Function}    applyStylesFn   Function to apply CSS styles (pass empty string to clear)\n * @param {number}      maxSize         Maximum font size in pixels.\n */\nexport function optimizeFitText(\n\ttextElement,\n\telementSelector,\n\tapplyStylesFn,\n\tmaxSize\n) {\n\tif ( ! textElement ) {\n\t\treturn;\n\t}\n\n\tapplyStylesFn( '' );\n\n\tconst optimalSize = findOptimalFontSize(\n\t\ttextElement,\n\t\telementSelector,\n\t\tapplyStylesFn,\n\t\tmaxSize\n\t);\n\n\tconst cssRule = generateCSSRule( elementSelector, optimalSize );\n\tapplyStylesFn( cssRule );\n}\n"],
-  "mappings": "AAYA,SAAS,gBAAiB,iBAAiB,UAAW;AACrD,SAAO,GAAI,eAAgB,iBAAkB,QAAS;AACvD;AAWA,SAAS,oBACR,aACA,iBACA,eACA,UAAU,KACT;AACD,QAAM,6BACL,YAAY,eAAe,YAAY;AACxC,MAAI,UAAU;AACd,MAAI,WAAW;AAEf,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,gBAAiB,iBAAiB,OAAQ,CAAE;AAE3D,UAAM,YAAY,YAAY,eAAe,YAAY;AACzD,UAAM,aACL,8BACA,YAAY,gBAAgB,YAAY;AAEzC,QAAK,aAAa,YAAa;AAC9B,iBAAW;AACX,gBAAU,UAAU;AAAA,IACrB,OAAO;AACN,gBAAU,UAAU;AAAA,IACrB;AAAA,EACD;AAEA,SAAO;AACR;AAWO,SAAS,gBACf,aACA,iBACA,eACA,SACC;AACD,MAAK,CAAE,aAAc;AACpB;AAAA,EACD;AAEA,gBAAe,EAAG;AAElB,QAAM,cAAc;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,UAAU,gBAAiB,iBAAiB,WAAY;AAC9D,gBAAe,OAAQ;AACxB;",
+  "sourcesContent": ["/**\n * Shared utility functions for fit text functionality.\n * Uses callback-based approach for maximum code reuse between editor and frontend.\n */\n\n/**\n * Generate CSS rule for single text element.\n *\n * @param {string} elementSelector CSS selector for the text element\n * @param {number} fontSize        Font size in pixels\n * @return {string} CSS rule string\n */\nfunction generateCSSRule( elementSelector, fontSize ) {\n\treturn `${ elementSelector } { font-size: ${ fontSize }px !important; }`;\n}\n\n/**\n * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement     The text element\n * @param {string}      elementSelector CSS selector for the text element\n * @param {Function}    applyStylesFn   Function to apply test styles\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\n\tlet maxSize = 600;\n\tlet bestSize = minSize;\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyStylesFn( generateCSSRule( elementSelector, midSize ) );\n\n\t\tconst fitsWidth = textElement.scrollWidth <= textElement.clientWidth;\n\t\tconst fitsHeight =\n\t\t\talreadyHasScrollableHeight ||\n\t\t\ttextElement.scrollHeight <= textElement.clientHeight;\n\n\t\tif ( fitsWidth && fitsHeight ) {\n\t\t\tbestSize = midSize;\n\t\t\tminSize = midSize + 1;\n\t\t} else {\n\t\t\tmaxSize = midSize - 1;\n\t\t}\n\t}\n\n\treturn bestSize;\n}\n\n/**\n * Complete fit text optimization for a single text element.\n * Handles the full flow using callbacks for style management.\n *\n * @param {HTMLElement} textElement     The text element (paragraph, heading, etc.)\n * @param {string}      elementSelector CSS selector for the text element\n * @param {Function}    applyStylesFn   Function to apply CSS styles (pass empty string to clear)\n */\nexport function optimizeFitText( textElement, elementSelector, applyStylesFn ) {\n\tif ( ! textElement ) {\n\t\treturn;\n\t}\n\n\tapplyStylesFn( '' );\n\n\tconst optimalSize = findOptimalFontSize(\n\t\ttextElement,\n\t\telementSelector,\n\t\tapplyStylesFn\n\t);\n\n\tconst cssRule = generateCSSRule( elementSelector, optimalSize );\n\tapplyStylesFn( cssRule );\n}\n"],
+  "mappings": "AAYA,SAAS,gBAAiB,iBAAiB,UAAW;AACrD,SAAO,GAAI,eAAgB,iBAAkB,QAAS;AACvD;AAUA,SAAS,oBAAqB,aAAa,iBAAiB,eAAgB;AAC3E,QAAM,6BACL,YAAY,eAAe,YAAY;AACxC,MAAI,UAAU;AACd,MAAI,UAAU;AACd,MAAI,WAAW;AAEf,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,gBAAiB,iBAAiB,OAAQ,CAAE;AAE3D,UAAM,YAAY,YAAY,eAAe,YAAY;AACzD,UAAM,aACL,8BACA,YAAY,gBAAgB,YAAY;AAEzC,QAAK,aAAa,YAAa;AAC9B,iBAAW;AACX,gBAAU,UAAU;AAAA,IACrB,OAAO;AACN,gBAAU,UAAU;AAAA,IACrB;AAAA,EACD;AAEA,SAAO;AACR;AAUO,SAAS,gBAAiB,aAAa,iBAAiB,eAAgB;AAC9E,MAAK,CAAE,aAAc;AACpB;AAAA,EACD;AAEA,gBAAe,EAAG;AAElB,QAAM,cAAc;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,UAAU,gBAAiB,iBAAiB,WAAY;AAC9D,gBAAe,OAAQ;AACxB;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.6.1-next.36001005c.0",
+	"version": "15.7.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -56,40 +56,40 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.33.1-next.36001005c.0",
-		"@wordpress/api-fetch": "^7.33.1-next.36001005c.0",
-		"@wordpress/base-styles": "^6.10.1-next.36001005c.0",
-		"@wordpress/blob": "^4.33.1-next.36001005c.0",
-		"@wordpress/block-serialization-default-parser": "^5.33.1-next.36001005c.0",
-		"@wordpress/blocks": "^15.6.1-next.36001005c.0",
-		"@wordpress/commands": "^1.33.1-next.36001005c.0",
-		"@wordpress/components": "^30.7.1-next.36001005c.0",
-		"@wordpress/compose": "^7.33.1-next.36001005c.0",
-		"@wordpress/data": "^10.33.1-next.36001005c.0",
-		"@wordpress/date": "^5.33.1-next.36001005c.0",
-		"@wordpress/deprecated": "^4.33.1-next.36001005c.0",
-		"@wordpress/dom": "^4.33.1-next.36001005c.0",
-		"@wordpress/element": "^6.33.1-next.36001005c.0",
-		"@wordpress/escape-html": "^3.33.1-next.36001005c.0",
-		"@wordpress/global-styles-engine": "^1.0.1-next.36001005c.0",
-		"@wordpress/hooks": "^4.33.1-next.36001005c.0",
-		"@wordpress/html-entities": "^4.33.1-next.36001005c.0",
-		"@wordpress/i18n": "^6.6.1-next.36001005c.0",
-		"@wordpress/icons": "^11.0.1-next.36001005c.0",
-		"@wordpress/is-shallow-equal": "^5.33.1-next.36001005c.0",
-		"@wordpress/keyboard-shortcuts": "^5.33.1-next.36001005c.0",
-		"@wordpress/keycodes": "^4.33.1-next.36001005c.0",
-		"@wordpress/notices": "^5.33.1-next.36001005c.0",
-		"@wordpress/preferences": "^4.33.1-next.36001005c.0",
-		"@wordpress/priority-queue": "^3.33.1-next.36001005c.0",
-		"@wordpress/private-apis": "^1.33.1-next.36001005c.0",
-		"@wordpress/rich-text": "^7.33.1-next.36001005c.0",
-		"@wordpress/style-engine": "^2.33.1-next.36001005c.0",
-		"@wordpress/token-list": "^3.33.1-next.36001005c.0",
-		"@wordpress/upload-media": "^0.18.1-next.36001005c.0",
-		"@wordpress/url": "^4.33.1-next.36001005c.0",
-		"@wordpress/warning": "^3.33.1-next.36001005c.0",
-		"@wordpress/wordcount": "^4.33.1-next.36001005c.0",
+		"@wordpress/a11y": "^4.34.0",
+		"@wordpress/api-fetch": "^7.34.0",
+		"@wordpress/base-styles": "^6.10.0",
+		"@wordpress/blob": "^4.34.0",
+		"@wordpress/block-serialization-default-parser": "^5.34.0",
+		"@wordpress/blocks": "^15.7.0",
+		"@wordpress/commands": "^1.34.0",
+		"@wordpress/components": "^30.7.0",
+		"@wordpress/compose": "^7.34.0",
+		"@wordpress/data": "^10.34.0",
+		"@wordpress/date": "^5.34.0",
+		"@wordpress/deprecated": "^4.34.0",
+		"@wordpress/dom": "^4.34.0",
+		"@wordpress/element": "^6.34.0",
+		"@wordpress/escape-html": "^3.34.0",
+		"@wordpress/global-styles-engine": "^1.1.0",
+		"@wordpress/hooks": "^4.34.0",
+		"@wordpress/html-entities": "^4.34.0",
+		"@wordpress/i18n": "^6.7.0",
+		"@wordpress/icons": "^11.1.0",
+		"@wordpress/is-shallow-equal": "^5.34.0",
+		"@wordpress/keyboard-shortcuts": "^5.34.0",
+		"@wordpress/keycodes": "^4.34.0",
+		"@wordpress/notices": "^5.34.0",
+		"@wordpress/preferences": "^4.34.0",
+		"@wordpress/priority-queue": "^3.34.0",
+		"@wordpress/private-apis": "^1.34.0",
+		"@wordpress/rich-text": "^7.34.0",
+		"@wordpress/style-engine": "^2.34.0",
+		"@wordpress/token-list": "^3.34.0",
+		"@wordpress/upload-media": "^0.19.0",
+		"@wordpress/url": "^4.34.0",
+		"@wordpress/warning": "^3.34.0",
+		"@wordpress/wordcount": "^4.34.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -112,5 +112,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b73a8a22e779c59efb8f911e32b681652f237d60"
+	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
 }

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

@@ -633,6 +633,7 @@ function BlockListBlockProvider( props ) {
 					: undefined,
 				blockTitle: blockType?.title,
 				isBlockHidden: attributes?.metadata?.blockVisibility === false,
+				bindableAttributes,
 			};
 
 			// When in preview mode, we can avoid a lot of selection and
@@ -718,7 +719,6 @@ function BlockListBlockProvider( props ) {
 					? blocksWithSameName[ 0 ]
 					: false,
 				isBlockHidden: _isBlockHidden( clientId ),
-				bindableAttributes,
 			};
 		},
 		[ clientId, rootClientId ]

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

@@ -184,7 +184,7 @@ function Items( {
 				getTemplateLock,
 				getBlockEditingMode,
 				isSectionBlock,
-				isContainerInsertableToInWriteMode,
+				isContainerInsertableToInContentOnlyMode,
 				getBlockName,
 				isZoomOut: _isZoomOut,
 				canInsertBlockType,
@@ -223,7 +223,7 @@ function Items( {
 				isZoomOut: _isZoomOut(),
 				shouldRenderAppender:
 					( ! isSectionBlock( rootClientId ) ||
-						isContainerInsertableToInWriteMode(
+						isContainerInsertableToInContentOnlyMode(
 							getBlockName( selectedBlockClientId ),
 							rootClientId
 						) ) &&

package/src/components/block-toolbar/switch-section-style.js

@@ -10,7 +10,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,7 +17,6 @@ import { useContext } from '@wordpress/element';
 import useStylesForBlocks from '../block-styles/use-styles-for-block';
 import { replaceActiveStyle } from '../block-styles/utils';
 import { store as blockEditorStore } from '../../store';
-import { GlobalStylesContext } from '../global-styles';
 import { globalStylesDataKey } from '../../store/private-keys';
 import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
 
@@ -47,7 +45,6 @@ function SwitchSectionStyle( { clientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	// Get global styles data
-	const { merged: mergedConfig } = useContext( GlobalStylesContext );
 	const { globalSettings, globalStyles, blockName } = useSelect(
 		( select ) => {
 			const settings = select( blockEditorStore ).getSettings();
@@ -64,8 +61,8 @@ function SwitchSectionStyle( { clientId } ) {
 	const activeStyleBackground = activeStyle?.name
 		? getVariationStylesWithRefValues(
 				{
-					settings: mergedConfig?.settings ?? globalSettings,
-					styles: mergedConfig?.styles ?? globalStyles,
+					settings: globalSettings,
+					styles: globalStyles,
 				},
 				blockName,
 				activeStyle.name

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

@@ -1,136 +1,16 @@
-/**
- * External dependencies
- */
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
-import { useContext, useCallback, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 import { _x } from '@wordpress/i18n';
-import {
-	getSetting,
-	getStyle,
-	getPresetVariableFromValue,
-} from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
-import { setImmutably } from '../../utils/object';
-import { GlobalStylesContext } from './context';
 import { unlock } from '../../lock-unlock';
 
-const EMPTY_CONFIG = { settings: {}, styles: {} };
-
-export const useGlobalStylesReset = () => {
-	const { user, setUserConfig } = useContext( GlobalStylesContext );
-	const config = {
-		settings: user.settings,
-		styles: user.styles,
-	};
-	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
-	return [
-		canReset,
-		useCallback( () => setUserConfig( EMPTY_CONFIG ), [ setUserConfig ] ),
-	];
-};
-
-export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
-	const { setUserConfig, ...configs } = useContext( GlobalStylesContext );
-	const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
-	const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
-	const contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;
-	const sourceKey = source === 'all' ? 'merged' : source;
-
-	const settingValue = useMemo( () => {
-		const configToUse = configs[ sourceKey ];
-		if ( ! configToUse ) {
-			throw 'Unsupported source';
-		}
-
-		// Use engine's getSetting instead of duplicating logic
-		return getSetting( configToUse, propertyPath, blockName );
-	}, [ configs, sourceKey, propertyPath, blockName ] );
-
-	const setSetting = ( newValue ) => {
-		setUserConfig( ( currentConfig ) =>
-			setImmutably( currentConfig, contextualPath.split( '.' ), newValue )
-		);
-	};
-	return [ settingValue, setSetting ];
-}
-
-export function useGlobalStyle(
-	path,
-	blockName,
-	source = 'all',
-	{ shouldDecodeEncode = true } = {}
-) {
-	const {
-		merged: mergedConfig,
-		base: baseConfig,
-		user: userConfig,
-		setUserConfig,
-	} = useContext( GlobalStylesContext );
-	const appendedPath = path ? '.' + path : '';
-	const finalPath = ! blockName
-		? `styles${ appendedPath }`
-		: `styles.blocks.${ blockName }${ appendedPath }`;
-
-	const setStyle = ( newValue ) => {
-		setUserConfig( ( currentConfig ) =>
-			setImmutably(
-				currentConfig,
-				finalPath.split( '.' ),
-				shouldDecodeEncode
-					? getPresetVariableFromValue(
-							mergedConfig.settings,
-							blockName,
-							path,
-							newValue
-					  )
-					: newValue
-			)
-		);
-	};
-
-	let result;
-	// Use engine's getStyle instead of duplicating logic
-	switch ( source ) {
-		case 'all':
-			result = getStyle(
-				mergedConfig,
-				path,
-				blockName,
-				shouldDecodeEncode
-			);
-			break;
-		case 'user':
-			result = getStyle(
-				userConfig,
-				path,
-				blockName,
-				shouldDecodeEncode
-			);
-			break;
-		case 'base':
-			result = getStyle(
-				baseConfig,
-				path,
-				blockName,
-				shouldDecodeEncode
-			);
-			break;
-		default:
-			throw 'Unsupported source';
-	}
-
-	return [ result, setStyle ];
-}
-
 /**
  * React hook that overrides a global settings object with block and element specific settings.
  *

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

@@ -1,10 +1,4 @@
-export {
-	useGlobalStylesReset,
-	useGlobalSetting,
-	useGlobalStyle,
-	useSettingsForBlockElement,
-} from './hooks';
-export { GlobalStylesContext } from './context';
+export { useSettingsForBlockElement } from './hooks';
 export {
 	default as TypographyPanel,
 	useHasTypographyPanel,
@@ -29,5 +23,3 @@ export {
 	default as BackgroundPanel,
 	useHasBackgroundPanel,
 } from './background-panel';
-export { areGlobalStyleConfigsEqual } from './utils';
-export { default as getGlobalStylesChanges } from './get-global-styles-changes';

package/src/components/global-styles/typography-panel.js

@@ -213,6 +213,30 @@ export default function TypographyPanel( {
 	const mergedFontSizes = getMergedFontSizes( settings );
 
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
+
+	// Extract the slug from the CSS custom property if it exists
+	const currentFontSizeSlug = ( () => {
+		const rawValue = inheritedValue?.typography?.fontSize;
+		if ( ! rawValue || typeof rawValue !== 'string' ) {
+			return undefined;
+		}
+
+		// Block supports use `var:preset` format.
+		if ( rawValue.startsWith( 'var:preset|font-size|' ) ) {
+			return rawValue.replace( 'var:preset|font-size|', '' );
+		}
+
+		// Global styles data uses `var(--wp--preset)` format.
+		const cssVarMatch = rawValue.match(
+			/^var\(--wp--preset--font-size--([^)]+)\)$/
+		);
+		if ( cssVarMatch ) {
+			return cssVarMatch[ 1 ];
+		}
+
+		return undefined;
+	} )();
+
 	const setFontSize = ( newValue, metadata ) => {
 		const actualValue = !! metadata?.slug
 			? `var:preset|font-size|${ metadata?.slug }`
@@ -433,7 +457,8 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<FontSizePicker
-						value={ fontSize }
+						value={ currentFontSizeSlug || fontSize }
+						valueMode={ currentFontSizeSlug ? 'slug' : 'literal' }
 						onChange={ setFontSize }
 						fontSizes={ mergedFontSizes }
 						disableCustomFontSizes={ disableCustomFontSizes }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
@@ -55,29 +50,3 @@ export function scopeSelector( scope, selector ) {
 
 	return selectorsScoped.join( ', ' );
 }
-
-/**
- * Compares global style variations according to their styles and settings properties.
- *
- * @example
- * ```js
- * const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };
- * const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };
- * const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );
- * // false
- * ```
- *
- * @param {Object} original  A global styles object.
- * @param {Object} variation A global styles object.
- *
- * @return {boolean} Whether `original` and `variation` match.
- */
-export function areGlobalStyleConfigsEqual( original, variation ) {
-	if ( typeof original !== 'object' || typeof variation !== 'object' ) {
-		return original === variation;
-	}
-	return (
-		fastDeepEqual( original?.styles, variation?.styles ) &&
-		fastDeepEqual( original?.settings, variation?.settings )
-	);
-}

package/src/components/inserter/media-tab/media-tab.js

@@ -4,7 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,14 +13,55 @@ import { useCallback, useMemo } from '@wordpress/element';
 import { MediaCategoryPanel } from './media-panel';
 import MediaUploadCheck from '../../media-upload/check';
 import MediaUpload from '../../media-upload';
+import MediaUploadModal from '../../media-upload-modal';
 import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
+import { store as blockEditorStore } from '../../../store';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
+/**
+ * Conditional Media component that uses MediaUploadModal when experiment is enabled,
+ * otherwise falls back to MediaUpload.
+ *
+ * @param {Object}   root0        Component props.
+ * @param {Function} root0.render Render prop function that receives { open } object.
+ * @return {JSX.Element} The component.
+ */
+function ConditionalMediaUpload( { render, ...props } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const mediaUpload = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().mediaUpload;
+	}, [] );
+
+	if ( window.__experimentalDataViewsMediaModal ) {
+		return (
+			<>
+				{ render && render( { open: () => setIsModalOpen( true ) } ) }
+				<MediaUploadModal
+					{ ...props }
+					isOpen={ isModalOpen }
+					onClose={ () => {
+						setIsModalOpen( false );
+						props.onClose?.();
+					} }
+					onSelect={ ( media ) => {
+						setIsModalOpen( false );
+						props.onSelect?.( media );
+					} }
+					onUpload={ mediaUpload }
+				/>
+			</>
+		);
+	}
+
+	return <MediaUpload { ...props } render={ render } />;
+}
+
 function MediaTab( {
 	rootClientId,
 	selectedCategory,
@@ -65,7 +107,7 @@ function MediaTab( {
 						{ children }
 					</CategoryTabs>
 					<MediaUploadCheck>
-						<MediaUpload
+						<ConditionalMediaUpload
 							multiple={ false }
 							onSelect={ onSelectMedia }
 							allowedTypes={ ALLOWED_MEDIA_TYPES }

package/src/components/inserter/tips.js

@@ -30,8 +30,6 @@ const globalTips = [
 
 function Tips() {
 	const [ randomIndex ] = useState(
-		// Disable Reason: I'm not generating an HTML id.
-		// eslint-disable-next-line no-restricted-syntax
 		Math.floor( Math.random() * globalTips.length )
 	);
 

package/src/components/media-placeholder/index.js

@@ -25,6 +25,7 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import MediaUpload from '../media-upload';
+import MediaUploadModal from '../media-upload-modal';
 import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
@@ -32,6 +33,45 @@ import { parseDropEvent } from '../use-on-block-drop';
 
 const noop = () => {};
 
+/**
+ * Conditional Media component that uses MediaUploadModal when experiment is enabled,
+ * otherwise falls back to MediaUpload.
+ *
+ * @param {Object}   root0        Component props.
+ * @param {Function} root0.render Render prop function that receives { open } object.
+ * @return {JSX.Element} The component.
+ */
+function ConditionalMediaUpload( { render, ...props } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const mediaUpload = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().mediaUpload;
+	}, [] );
+
+	if ( window.__experimentalDataViewsMediaModal ) {
+		return (
+			<>
+				{ render && render( { open: () => setIsModalOpen( true ) } ) }
+				<MediaUploadModal
+					{ ...props }
+					isOpen={ isModalOpen }
+					onClose={ () => {
+						setIsModalOpen( false );
+						props.onClose?.();
+					} }
+					onSelect={ ( media ) => {
+						setIsModalOpen( false );
+						props.onSelect?.( media );
+					} }
+					onUpload={ mediaUpload }
+				/>
+			</>
+		);
+	}
+
+	return <MediaUpload { ...props } render={ render } />;
+}
+
 const InsertFromURLPopover = ( {
 	src,
 	onChange,
@@ -448,7 +488,7 @@ export function MediaPlaceholder( {
 		};
 		const libraryButton = mediaLibraryButton ?? defaultButton;
 		const uploadMediaLibraryButton = (
-			<MediaUpload
+			<ConditionalMediaUpload
 				addToGallery={ addToGallery }
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }