@wordpress/block-editor 15.19.1-next.v.202605131032.0 → 15.20.0

package/build-module/store/utils.mjs

@@ -1,7 +1,10 @@
 // packages/block-editor/src/store/utils.js
 import { parse } from "@wordpress/blocks";
 import { parse as grammarParse } from "@wordpress/block-serialization-default-parser";
-import { selectBlockPatternsKey } from "./private-keys.mjs";
+import {
+  selectBlockPatternsKey,
+  userPatternCategoriesSelectKey
+} from "./private-keys.mjs";
 import { unlock } from "../lock-unlock.mjs";
 import { STORE_NAME } from "./constants.mjs";
 import {
@@ -103,7 +106,7 @@ var checkAllowListRecursive = (blocks, allowedBlockTypes) => {
 var getAllPatternsDependants = (select) => (state) => {
   return [
     state.settings.__experimentalBlockPatterns,
-    state.settings.__experimentalUserPatternCategories,
+    state.settings[userPatternCategoriesSelectKey]?.(select) ?? state.settings.__experimentalUserPatternCategories,
     state.settings.__experimentalReusableBlocks,
     state.settings[selectBlockPatternsKey]?.(select),
     state.blockPatterns,

package/build-module/store/utils.mjs.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 {\n\tgetSectionRootClientId,\n\tisSectionBlock,\n\tgetParentSectionBlock,\n} 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.get( rootClientId ),\n\t\tstate.blocks.byClientId.get( rootClientId ),\n\t\tstate.blocks.order.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\tgetParentSectionBlock( state, rootClientId ),\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 {\n\tselectBlockPatternsKey,\n\tuserPatternCategoriesSelectKey,\n} from './private-keys';\nimport { unlock } from '../lock-unlock';\nimport { STORE_NAME } from './constants';\nimport {\n\tgetSectionRootClientId,\n\tisSectionBlock,\n\tgetParentSectionBlock,\n} 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[ userPatternCategoriesSelectKey ]?.( select ) ??\n\t\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.get( rootClientId ),\n\t\tstate.blocks.byClientId.get( rootClientId ),\n\t\tstate.blocks.order.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\tgetParentSectionBlock( state, rootClientId ),\n\t];\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/utils/color-values.mjs

@@ -0,0 +1,19 @@
+// packages/block-editor/src/utils/color-values.js
+function extractPresetSlug(rawValue, type) {
+  if (typeof rawValue !== "string") {
+    return void 0;
+  }
+  const userPrefix = `var:preset|${type}|`;
+  if (rawValue.startsWith(userPrefix)) {
+    return rawValue.slice(userPrefix.length);
+  }
+  const cssVarPrefix = `--wp--preset--${type}--`;
+  const themeFormatMatch = rawValue.match(
+    new RegExp(`^var\\(${cssVarPrefix}([^)]+)\\)$`)
+  );
+  return themeFormatMatch?.[1];
+}
+export {
+  extractPresetSlug
+};
+//# sourceMappingURL=color-values.mjs.map

package/build-module/utils/color-values.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/color-values.js"],
+  "sourcesContent": ["/**\n * Extracts the palette slug from a style value for any preset type, supporting\n * both the user preset format and the theme CSS-variable format:\n *\n * - User format:  `var:preset|<type>|slug`\n * - Theme format: `var(--wp--preset--<type>--slug)`\n *\n * Returns `undefined` for plain values, non-strings, or any other\n * unrecognised format.\n *\n * @param {*}                  rawValue Raw style value stored in the style object.\n * @param {'color'|'gradient'} type     Preset type, e.g. `'color'` or `'gradient'`.\n * @return {string|undefined} The palette slug, or undefined.\n */\nexport function extractPresetSlug( rawValue, type ) {\n\tif ( typeof rawValue !== 'string' ) {\n\t\treturn undefined;\n\t}\n\tconst userPrefix = `var:preset|${ type }|`;\n\tif ( rawValue.startsWith( userPrefix ) ) {\n\t\treturn rawValue.slice( userPrefix.length );\n\t}\n\tconst cssVarPrefix = `--wp--preset--${ type }--`;\n\tconst themeFormatMatch = rawValue.match(\n\t\tnew RegExp( `^var\\\\(${ cssVarPrefix }([^)]+)\\\\)$` )\n\t);\n\treturn themeFormatMatch?.[ 1 ];\n}\n"],
+  "mappings": ";AAcO,SAAS,kBAAmB,UAAU,MAAO;AACnD,MAAK,OAAO,aAAa,UAAW;AACnC,WAAO;AAAA,EACR;AACA,QAAM,aAAa,cAAe,IAAK;AACvC,MAAK,SAAS,WAAY,UAAW,GAAI;AACxC,WAAO,SAAS,MAAO,WAAW,MAAO;AAAA,EAC1C;AACA,QAAM,eAAe,iBAAkB,IAAK;AAC5C,QAAM,mBAAmB,SAAS;AAAA,IACjC,IAAI,OAAQ,UAAW,YAAa,aAAc;AAAA,EACnD;AACA,SAAO,mBAAoB,CAAE;AAC9B;",
+  "names": []
+}

package/build-style/content-rtl.css

@@ -248,9 +248,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   margin: 0 0 12px 0;
   width: 100%;
 }
-.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
-  font-size: 13px;
-}
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
   min-height: 48px;
 }
@@ -698,6 +695,14 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   color: #fff;
   background: var(--wp-admin-theme-color);
 }
+@media not (prefers-reduced-motion) {
+  .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon svg {
+    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+  }
+}
+.block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
+  transform: rotate(-45deg);
+}
 
 .block-editor-default-block-appender .block-editor-inserter {
   position: absolute;
@@ -746,6 +751,16 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   color: #fff;
   background: var(--wp-admin-theme-color);
 }
+@media not (prefers-reduced-motion) {
+  .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon svg,
+  .block-editor-block-list__block .block-list-appender .block-list-appender__toggle svg {
+    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+  }
+}
+.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
+.block-editor-block-list__block .block-list-appender .block-list-appender__toggle.is-pressed svg {
+  transform: rotate(-45deg);
+}
 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
   flex-direction: row;

package/build-style/content.css

@@ -248,9 +248,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   margin: 0 0 12px 0;
   width: 100%;
 }
-.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
-  font-size: 13px;
-}
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
   min-height: 48px;
 }
@@ -699,6 +696,14 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   color: #fff;
   background: var(--wp-admin-theme-color);
 }
+@media not (prefers-reduced-motion) {
+  .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon svg {
+    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+  }
+}
+.block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
+  transform: rotate(45deg);
+}
 
 .block-editor-default-block-appender .block-editor-inserter {
   position: absolute;
@@ -747,6 +752,16 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   color: #fff;
   background: var(--wp-admin-theme-color);
 }
+@media not (prefers-reduced-motion) {
+  .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon svg,
+  .block-editor-block-list__block .block-list-appender .block-list-appender__toggle svg {
+    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+  }
+}
+.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
+.block-editor-block-list__block .block-list-appender .block-list-appender__toggle.is-pressed svg {
+  transform: rotate(45deg);
+}
 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
   flex-direction: row;

package/build-style/style-rtl.css

@@ -419,6 +419,16 @@ iframe[name=editor-canvas] {
   color: #fff;
   background: var(--wp-admin-theme-color);
 }
+@media not (prefers-reduced-motion) {
+  .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon svg,
+  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon svg {
+    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+  }
+}
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
+.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
+  transform: rotate(-45deg);
+}
 
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: var(--wp-admin-theme-color);
@@ -1000,7 +1010,6 @@ iframe[name=editor-canvas] {
 }
 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
   flex-grow: 1;
-  font-size: 12px;
   text-align: right;
 }
 .block-editor-block-patterns-list__item .block-editor-block-preview__container {
@@ -3042,22 +3051,6 @@ iframe[name=editor-canvas] {
   padding: 8px 0 0;
 }
 
-.block-editor-media-flow__error {
-  padding: 0 20px 20px 20px;
-  max-width: 255px;
-}
-.block-editor-media-flow__error .components-with-notices-ui {
-  max-width: 255px;
-}
-.block-editor-media-flow__error .components-with-notices-ui .components-notice__content {
-  overflow: hidden;
-  word-wrap: break-word;
-}
-.block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss {
-  position: absolute;
-  left: 10px;
-}
-
 .block-editor-multi-selection-inspector__card {
   padding: 16px;
 }
@@ -3665,6 +3658,10 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-bottom: 0;
 }
 
+.layout-block-support-panel .block-editor-hooks__flex-layout-controls {
+  grid-column: 1/-1;
+}
+
 .block-editor-hooks__flex-layout-justification-controls,
 .block-editor-hooks__flex-layout-orientation-controls {
   margin-bottom: 12px;

package/build-style/style.css

@@ -419,6 +419,16 @@ iframe[name=editor-canvas] {
   color: #fff;
   background: var(--wp-admin-theme-color);
 }
+@media not (prefers-reduced-motion) {
+  .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon svg,
+  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon svg {
+    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+  }
+}
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
+.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
+  transform: rotate(45deg);
+}
 
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: var(--wp-admin-theme-color);
@@ -1000,7 +1010,6 @@ iframe[name=editor-canvas] {
 }
 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
   flex-grow: 1;
-  font-size: 12px;
   text-align: left;
 }
 .block-editor-block-patterns-list__item .block-editor-block-preview__container {
@@ -3044,22 +3053,6 @@ iframe[name=editor-canvas] {
   padding: 8px 0 0;
 }
 
-.block-editor-media-flow__error {
-  padding: 0 20px 20px 20px;
-  max-width: 255px;
-}
-.block-editor-media-flow__error .components-with-notices-ui {
-  max-width: 255px;
-}
-.block-editor-media-flow__error .components-with-notices-ui .components-notice__content {
-  overflow: hidden;
-  word-wrap: break-word;
-}
-.block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss {
-  position: absolute;
-  right: 10px;
-}
-
 .block-editor-multi-selection-inspector__card {
   padding: 16px;
 }
@@ -3667,6 +3660,10 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-bottom: 0;
 }
 
+.layout-block-support-panel .block-editor-hooks__flex-layout-controls {
+  grid-column: 1/-1;
+}
+
 .block-editor-hooks__flex-layout-justification-controls,
 .block-editor-hooks__flex-layout-orientation-controls {
   margin-bottom: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.19.1-next.v.202605131032.0+f6d6e7149",
+	"version": "15.20.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/base-styles": "^8.0.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/blob": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/block-serialization-default-parser": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/blocks": "^15.18.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/commands": "^1.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/components": "^33.1.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/compose": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/data": "^10.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/dataviews": "^14.2.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/date": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/deprecated": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/dom": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/element": "^6.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/escape-html": "^3.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/global-styles-engine": "^1.12.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/hooks": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/html-entities": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/i18n": "^6.18.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/icons": "^13.0.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/image-cropper": "^1.9.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/interactivity": "^6.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/is-shallow-equal": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/keyboard-shortcuts": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/keycodes": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/notices": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/preferences": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/priority-queue": "^3.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/private-apis": "^1.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/rich-text": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/style-engine": "^2.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/token-list": "^3.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/ui": "^0.13.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/upload-media": "^0.30.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/url": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/warning": "^3.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/wordcount": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/a11y": "^4.47.0",
+		"@wordpress/base-styles": "^9.0.0",
+		"@wordpress/blob": "^4.47.0",
+		"@wordpress/block-serialization-default-parser": "^5.47.0",
+		"@wordpress/blocks": "^15.20.0",
+		"@wordpress/commands": "^1.47.0",
+		"@wordpress/components": "^34.0.0",
+		"@wordpress/compose": "^8.0.0",
+		"@wordpress/data": "^10.47.0",
+		"@wordpress/dataviews": "^15.0.0",
+		"@wordpress/date": "^5.47.0",
+		"@wordpress/deprecated": "^4.47.0",
+		"@wordpress/dom": "^4.47.0",
+		"@wordpress/element": "^7.0.0",
+		"@wordpress/escape-html": "^3.47.0",
+		"@wordpress/global-styles-engine": "^1.14.0",
+		"@wordpress/hooks": "^4.47.0",
+		"@wordpress/html-entities": "^4.47.0",
+		"@wordpress/i18n": "^6.20.0",
+		"@wordpress/icons": "^13.2.0",
+		"@wordpress/image-cropper": "^1.11.0",
+		"@wordpress/interactivity": "^6.47.0",
+		"@wordpress/is-shallow-equal": "^5.47.0",
+		"@wordpress/keyboard-shortcuts": "^5.47.0",
+		"@wordpress/keycodes": "^4.47.0",
+		"@wordpress/notices": "^5.47.0",
+		"@wordpress/preferences": "^4.47.0",
+		"@wordpress/priority-queue": "^3.47.0",
+		"@wordpress/private-apis": "^1.47.0",
+		"@wordpress/rich-text": "^7.47.0",
+		"@wordpress/style-engine": "^2.47.0",
+		"@wordpress/token-list": "^3.47.0",
+		"@wordpress/ui": "^0.14.0",
+		"@wordpress/upload-media": "^0.32.0",
+		"@wordpress/url": "^4.47.0",
+		"@wordpress/warning": "^3.47.0",
+		"@wordpress/wordcount": "^4.47.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -118,11 +118,11 @@
 		"deep-freeze": "0.0.1"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0e198c7ac7ca634e73ded9220ce048c0302174dd"
+	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
 }

package/src/components/audio-player/index.native.js

@@ -14,7 +14,7 @@ import { default as VideoPlayer } from 'react-native-video';
  * WordPress dependencies
  */
 import { View } from '@wordpress/primitives';
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { audio, cautionFilled } from '@wordpress/icons';
@@ -160,13 +160,17 @@ function Player( {
 		>
 			<View style={ containerStyle }>
 				<View style={ iconContainerStyle }>
-					<Icon icon={ audio } style={ finalIconStyle } size={ 24 } />
+					<WCIcon
+						icon={ audio }
+						style={ finalIconStyle }
+						size={ 24 }
+					/>
 				</View>
 				<View style={ titleContainerStyle }>
 					<Text style={ titleStyle }>{ title }</Text>
 					<View style={ styles.subtitleContainer }>
 						{ isUploadFailed && (
-							<Icon
+							<WCIcon
 								icon={ cautionFilled }
 								style={ {
 									...styles.errorIcon,

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

@@ -8,12 +8,10 @@ import clsx from 'clsx';
  */
 import {
 	Button,
-	Icon,
-	__experimentalText as WCText,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
+	Icon as WCIcon,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { Text, Stack } from '@wordpress/ui';
 import { useDispatch, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -81,6 +79,7 @@ function OptionalParentSelectButton( { children, onClick } ) {
  * @param {string}        [props.parentClientId]        The parent clientId, if this card is for a parent block.
  * @param {string}        [props.isChild]               Whether the block card is for a child block, in which case, indent the block using an arrow.
  * @param {string}        [props.clientId]              Whether the block card is for a child block, in which case, indent the block using an arrow.
+ * @param {Element}       [props.controls]              Controls rendered beside the block title.
  * @param {Element}       [props.children]              Children.
  * @return {Element}                        Block card component.
  */
@@ -96,6 +95,7 @@ function BlockCard( {
 	isChild,
 	children,
 	clientId,
+	controls,
 } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
@@ -150,66 +150,73 @@ function BlockCard( {
 				className
 			) }
 		>
-			<VStack>
-				<HStack justify="flex-start" spacing={ 0 }>
-					{ parentBlockClientId && (
-						<Button
-							onClick={ () => selectBlock( parentBlockClientId ) }
-							label={
-								parentBlockName
-									? sprintf(
-											/* translators: %s: The name of the parent block. */
-											__( 'Go to "%s" block' ),
-											getBlockType( parentBlockName )
-												?.title
-									  )
-									: __( 'Go to parent block' )
+			<Stack direction="column" gap="sm">
+				<Stack direction="row" align="center" justify="space-between">
+					<Stack direction="row" align="center" justify="flex-start">
+						{ parentBlockClientId && (
+							<Button
+								onClick={ () =>
+									selectBlock( parentBlockClientId )
+								}
+								label={
+									parentBlockName
+										? sprintf(
+												/* translators: %s: The name of the parent block. */
+												__( 'Go to "%s" block' ),
+												getBlockType( parentBlockName )
+													?.title
+										  )
+										: __( 'Go to parent block' )
+								}
+								style={
+									// TODO: This style override is also used in ToolsPanelHeader.
+									// It should be supported out-of-the-box by Button.
+									{ minWidth: 24, padding: 0 }
+								}
+								icon={ isRTL() ? chevronRight : chevronLeft }
+								size="small"
+							/>
+						) }
+						{ isChild && (
+							<span className="block-editor-block-card__child-indicator-icon">
+								<WCIcon
+									icon={ isRTL() ? arrowLeft : arrowRight }
+								/>
+							</span>
+						) }
+						<OptionalParentSelectButton
+							onClick={
+								parentClientId
+									? () => {
+											selectBlock( parentClientId );
+									  }
+									: undefined
 							}
-							style={
-								// TODO: This style override is also used in ToolsPanelHeader.
-								// It should be supported out-of-the-box by Button.
-								{ minWidth: 24, padding: 0 }
-							}
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							size="small"
-						/>
-					) }
-					{ isChild && (
-						<span className="block-editor-block-card__child-indicator-icon">
-							<Icon icon={ isRTL() ? arrowLeft : arrowRight } />
-						</span>
-					) }
-					<OptionalParentSelectButton
-						onClick={
-							parentClientId
-								? () => {
-										selectBlock( parentClientId );
-								  }
-								: undefined
-						}
-					>
-						<BlockIcon icon={ icon } showColors />
-						<VStack spacing={ 1 }>
-							<TitleElement className="block-editor-block-card__title">
-								<span className="block-editor-block-card__name">
-									{ !! name?.length ? name : title }
-								</span>
-								{ ! parentClientId &&
-									! isChild &&
-									!! name?.length && (
-										<WCBadge>{ title }</WCBadge>
-									) }
-							</TitleElement>
-							{ children }
-						</VStack>
-					</OptionalParentSelectButton>
-				</HStack>
+						>
+							<BlockIcon icon={ icon } showColors />
+							<Stack direction="column" gap="xs">
+								<TitleElement className="block-editor-block-card__title">
+									<span className="block-editor-block-card__name">
+										{ !! name?.length ? name : title }
+									</span>
+									{ ! parentClientId &&
+										! isChild &&
+										!! name?.length && (
+											<WCBadge>{ title }</WCBadge>
+										) }
+								</TitleElement>
+								{ children }
+							</Stack>
+						</OptionalParentSelectButton>
+					</Stack>
+					{ controls }
+				</Stack>
 				{ ! parentClientId && ! isChild && description && (
-					<WCText className="block-editor-block-card__description">
+					<Text className="block-editor-block-card__description">
 						{ description }
-					</WCText>
+					</Text>
 				) }
-			</VStack>
+			</Stack>
 		</div>
 	);
 }

package/src/components/block-heading-level-dropdown/heading-level-icon.js

@@ -10,7 +10,7 @@ import {
 	headingLevel6,
 	paragraph,
 } from '@wordpress/icons';
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 
 /** @typedef {React.ComponentType} ComponentType */
 
@@ -41,7 +41,7 @@ const LEVEL_TO_PATH = {
  */
 export default function HeadingLevelIcon( { level } ) {
 	if ( LEVEL_TO_PATH[ level ] ) {
-		return <Icon icon={ LEVEL_TO_PATH[ level ] } />;
+		return <WCIcon icon={ LEVEL_TO_PATH[ level ] } />;
 	}
 
 	return null;

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
 import { memo } from '@wordpress/element';
 
@@ -18,7 +18,10 @@ function BlockIcon( { icon, showColors = false, className, context } ) {
 	}
 
 	const renderedIcon = (
-		<Icon icon={ icon && icon.src ? icon.src : icon } context={ context } />
+		<WCIcon
+			icon={ icon && icon.src ? icon.src : icon }
+			context={ context }
+		/>
 	);
 	const style = showColors
 		? {

package/src/components/block-icon/index.native.js

@@ -6,7 +6,7 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -29,7 +29,7 @@ export function BlockIcon( { icon, fill, size, showColors = false } ) {
 	const iconForeground = showColors ? icon?.foreground : undefined;
 
 	const renderedIcon = (
-		<Icon
+		<WCIcon
 			icon={ icon && icon.src ? icon.src : icon }
 			fill={ fill || iconForeground || defaultFill }
 			{ ...( size && { size } ) }