@wordpress/block-editor 15.7.1-next.2f1c7c01b.0 → 15.8.1-next.16d95556a.0

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

@@ -19,6 +19,7 @@ store("core/fit-text", {
           context.fontSize = optimizeFitText(ref, applyFontSize);
         });
         resizeObserver.observe(ref.parentElement);
+        resizeObserver.observe(ref);
         return () => {
           if (resizeObserver) {
             resizeObserver.disconnect();

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/fit-text-frontend.js"],
-  "sourcesContent": ["/**\n * Frontend fit text functionality.\n * Automatically detects and initializes fit text on blocks with the has-fit-text class.\n * Supports both initial page load and Interactivity API client-side navigation.\n */\n\n/**\n * WordPress dependencies\n */\nimport { store, getElement, getContext } from '@wordpress/interactivity';\n\n/**\n * Internal dependencies\n */\nimport { optimizeFitText } from './fit-text-utils';\n\n// Initialize via Interactivity API for client-side navigation\nstore( 'core/fit-text', {\n\tcallbacks: {\n\t\tinit() {\n\t\t\tconst context = getContext();\n\t\t\tconst { ref } = getElement();\n\n\t\t\tconst applyFontSize = ( fontSize ) => {\n\t\t\t\tif ( fontSize === 0 ) {\n\t\t\t\t\tref.style.fontSize = '';\n\t\t\t\t} else {\n\t\t\t\t\tref.style.fontSize = `${ fontSize }px`;\n\t\t\t\t}\n\t\t\t};\n\n\t\t\t// Initial fit text optimization.\n\t\t\tcontext.fontSize = optimizeFitText( ref, applyFontSize );\n\n\t\t\t// Starts ResizeObserver to handle dynamic resizing.\n\t\t\tif ( window.ResizeObserver && ref.parentElement ) {\n\t\t\t\tconst resizeObserver = new window.ResizeObserver( () => {\n\t\t\t\t\tcontext.fontSize = optimizeFitText( ref, applyFontSize );\n\t\t\t\t} );\n\t\t\t\tresizeObserver.observe( ref.parentElement );\n\n\t\t\t\t// Return cleanup function to be called when element is removed.\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserver ) {\n\t\t\t\t\t\tresizeObserver.disconnect();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\t\t},\n\t},\n} );\n"],
-  "mappings": ";AASA,SAAS,OAAO,YAAY,kBAAkB;AAK9C,SAAS,uBAAuB;AAGhC,MAAO,iBAAiB;AAAA,EACvB,WAAW;AAAA,IACV,OAAO;AACN,YAAM,UAAU,WAAW;AAC3B,YAAM,EAAE,IAAI,IAAI,WAAW;AAE3B,YAAM,gBAAgB,CAAE,aAAc;AACrC,YAAK,aAAa,GAAI;AACrB,cAAI,MAAM,WAAW;AAAA,QACtB,OAAO;AACN,cAAI,MAAM,WAAW,GAAI,QAAS;AAAA,QACnC;AAAA,MACD;AAGA,cAAQ,WAAW,gBAAiB,KAAK,aAAc;AAGvD,UAAK,OAAO,kBAAkB,IAAI,eAAgB;AACjD,cAAM,iBAAiB,IAAI,OAAO,eAAgB,MAAM;AACvD,kBAAQ,WAAW,gBAAiB,KAAK,aAAc;AAAA,QACxD,CAAE;AACF,uBAAe,QAAS,IAAI,aAAc;AAG1C,eAAO,MAAM;AACZ,cAAK,gBAAiB;AACrB,2BAAe,WAAW;AAAA,UAC3B;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAE;",
+  "sourcesContent": ["/**\n * Frontend fit text functionality.\n * Automatically detects and initializes fit text on blocks with the has-fit-text class.\n * Supports both initial page load and Interactivity API client-side navigation.\n */\n\n/**\n * WordPress dependencies\n */\nimport { store, getElement, getContext } from '@wordpress/interactivity';\n\n/**\n * Internal dependencies\n */\nimport { optimizeFitText } from './fit-text-utils';\n\n// Initialize via Interactivity API for client-side navigation\nstore( 'core/fit-text', {\n\tcallbacks: {\n\t\tinit() {\n\t\t\tconst context = getContext();\n\t\t\tconst { ref } = getElement();\n\n\t\t\tconst applyFontSize = ( fontSize ) => {\n\t\t\t\tif ( fontSize === 0 ) {\n\t\t\t\t\tref.style.fontSize = '';\n\t\t\t\t} else {\n\t\t\t\t\tref.style.fontSize = `${ fontSize }px`;\n\t\t\t\t}\n\t\t\t};\n\n\t\t\t// Initial fit text optimization.\n\t\t\tcontext.fontSize = optimizeFitText( ref, applyFontSize );\n\n\t\t\t// Starts ResizeObserver to handle dynamic resizing.\n\t\t\tif ( window.ResizeObserver && ref.parentElement ) {\n\t\t\t\tconst resizeObserver = new window.ResizeObserver( () => {\n\t\t\t\t\tcontext.fontSize = optimizeFitText( ref, applyFontSize );\n\t\t\t\t} );\n\t\t\t\tresizeObserver.observe( ref.parentElement );\n\t\t\t\tresizeObserver.observe( ref );\n\n\t\t\t\t// Return cleanup function to be called when element is removed.\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserver ) {\n\t\t\t\t\t\tresizeObserver.disconnect();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\t\t},\n\t},\n} );\n"],
+  "mappings": ";AASA,SAAS,OAAO,YAAY,kBAAkB;AAK9C,SAAS,uBAAuB;AAGhC,MAAO,iBAAiB;AAAA,EACvB,WAAW;AAAA,IACV,OAAO;AACN,YAAM,UAAU,WAAW;AAC3B,YAAM,EAAE,IAAI,IAAI,WAAW;AAE3B,YAAM,gBAAgB,CAAE,aAAc;AACrC,YAAK,aAAa,GAAI;AACrB,cAAI,MAAM,WAAW;AAAA,QACtB,OAAO;AACN,cAAI,MAAM,WAAW,GAAI,QAAS;AAAA,QACnC;AAAA,MACD;AAGA,cAAQ,WAAW,gBAAiB,KAAK,aAAc;AAGvD,UAAK,OAAO,kBAAkB,IAAI,eAAgB;AACjD,cAAM,iBAAiB,IAAI,OAAO,eAAgB,MAAM;AACvD,kBAAQ,WAAW,gBAAiB,KAAK,aAAc;AAAA,QACxD,CAAE;AACF,uBAAe,QAAS,IAAI,aAAc;AAC1C,uBAAe,QAAS,GAAI;AAG5B,eAAO,MAAM;AACZ,cAAK,gBAAiB;AACrB,2BAAe,WAAW;AAAA,UAC3B;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAE;",
   "names": []
 }

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

@@ -2,7 +2,7 @@
 function findOptimalFontSize(textElement, applyFontSize) {
   const alreadyHasScrollableHeight = textElement.scrollHeight > textElement.clientHeight;
   let minSize = 5;
-  let maxSize = 600;
+  let maxSize = 2400;
   let bestSize = minSize;
   while (minSize <= maxSize) {
     const midSize = Math.floor((minSize + maxSize) / 2);

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 * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement   The text element\n * @param {Function}    applyFontSize Function that receives font size in pixels\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, applyFontSize ) {\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\tapplyFontSize( 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 font size application.\n *\n * @param {HTMLElement} textElement   The text element (paragraph, heading, etc.)\n * @param {Function}    applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)\n */\nexport function optimizeFitText( textElement, applyFontSize ) {\n\tif ( ! textElement ) {\n\t\treturn;\n\t}\n\n\tapplyFontSize( 0 );\n\n\tconst optimalSize = findOptimalFontSize( textElement, applyFontSize );\n\n\tapplyFontSize( optimalSize );\n\treturn optimalSize;\n}\n"],
+  "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 * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement   The text element\n * @param {Function}    applyFontSize Function that receives font size in pixels\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, applyFontSize ) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\n\tlet maxSize = 2400;\n\tlet bestSize = minSize;\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( 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 font size application.\n *\n * @param {HTMLElement} textElement   The text element (paragraph, heading, etc.)\n * @param {Function}    applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)\n */\nexport function optimizeFitText( textElement, applyFontSize ) {\n\tif ( ! textElement ) {\n\t\treturn;\n\t}\n\n\tapplyFontSize( 0 );\n\n\tconst optimalSize = findOptimalFontSize( textElement, applyFontSize );\n\n\tapplyFontSize( optimalSize );\n\treturn optimalSize;\n}\n"],
   "mappings": ";AAYA,SAAS,oBAAqB,aAAa,eAAgB;AAC1D,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,OAAQ;AAEvB,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;AASO,SAAS,gBAAiB,aAAa,eAAgB;AAC7D,MAAK,CAAE,aAAc;AACpB;AAAA,EACD;AAEA,gBAAe,CAAE;AAEjB,QAAM,cAAc,oBAAqB,aAAa,aAAc;AAEpE,gBAAe,WAAY;AAC3B,SAAO;AACR;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -360,8 +360,10 @@ iframe[name=editor-canvas] {
   border-top: 1px solid #ddd;
 }
 
-.block-editor-block-inspector-edit-contents-button {
-  margin-top: 8px;
+.block-editor-block-inspector-edit-contents {
+  margin: 0 16px 16px 16px;
+}
+.block-editor-block-inspector-edit-contents .block-editor-block-inspector-edit-contents__button {
   justify-content: center;
 }
 
@@ -659,6 +661,19 @@ iframe[name=editor-canvas] {
   display: flex;
   padding: 16px;
 }
+.block-editor-block-card.is-parent {
+  padding-bottom: 4px;
+}
+.block-editor-block-card.is-child {
+  padding-top: 4px;
+}
+
+.block-editor-block-card__parent-select-button {
+  padding: 0;
+  align-items: start;
+  text-align: start;
+  height: auto !important;
+}
 
 .block-editor-block-card__title {
   font-weight: 499;
@@ -677,7 +692,8 @@ iframe[name=editor-canvas] {
   padding: 3px 0;
 }
 
-.block-editor-block-card .block-editor-block-icon {
+.block-editor-block-card .block-editor-block-icon,
+.block-editor-block-card__child-indicator-icon {
   flex: 0 0 24px;
   margin-right: 0;
   margin-left: 12px;
@@ -1192,45 +1208,6 @@ iframe[name=editor-canvas] {
   box-sizing: border-box !important;
 }
 
-.block-editor-block-switcher {
-  position: relative;
-}
-.block-editor-block-switcher .components-button.components-dropdown-menu__toggle.has-icon.has-icon {
-  min-width: 36px;
-}
-
-.block-editor-block-switcher__no-switcher-icon,
-.block-editor-block-switcher__toggle {
-  position: relative;
-}
-
-.components-button.block-editor-block-switcher__toggle,
-.components-button.block-editor-block-switcher__no-switcher-icon {
-  margin: 0;
-  display: block;
-  height: 48px;
-}
-.components-button.block-editor-block-switcher__toggle .block-editor-block-icon,
-.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
-  margin: auto;
-}
-
-.components-button.block-editor-block-switcher__no-switcher-icon {
-  display: flex;
-}
-.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
-  margin-left: auto;
-  margin-right: auto;
-  min-width: 24px !important;
-}
-
-.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true] {
-  color: #1e1e1e;
-}
-.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true]:hover {
-  color: #1e1e1e;
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
   min-width: 300px;
 }
@@ -1274,25 +1251,6 @@ iframe[name=editor-canvas] {
   font-weight: 499;
 }
 
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon {
-  min-width: 36px;
-}
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle {
-  height: 48px;
-}
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-icon,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
-  width: 48px;
-  height: 48px;
-}
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
-  padding: 12px;
-}
-
 .block-editor-block-switcher__preview-patterns-container {
   padding-bottom: 16px;
 }
@@ -3552,10 +3510,13 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
   border-radius: 2px;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
-  color: var(--wp-block-synced-color);
+.block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true] {
+  color: #1e1e1e;
+}
+.block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true]:hover {
+  color: #1e1e1e;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher__no-switcher-icon[aria-disabled=true] .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher__no-switcher-icon[aria-disabled=true] .block-editor-block-icon {
+.block-editor-block-toolbar.is-synced .block-editor-block-toolbar__block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-toolbar__block-icon {
   color: var(--wp-block-synced-color);
 }
 .block-editor-block-toolbar > :last-child,
@@ -3649,15 +3610,15 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   width: 2px;
 }
 
-.block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
-.block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
-  width: 24px !important;
-  margin: 0 !important;
-}
 .block-editor-block-toolbar__block-controls .components-toolbar-group {
   padding: 0;
 }
 
+.block-editor-block-toolbar__pattern-overrides-popover .components-popover__content {
+  min-width: 260px;
+  padding: 16px;
+}
+
 .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-toolbar .components-toolbar,
 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group,
@@ -3684,8 +3645,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   padding-right: 6px;
   padding-left: 6px;
 }
-.show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
-.show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
+.show-icon-labels .block-editor-block-icon {
   width: 0 !important;
   height: 0 !important;
   min-width: 0 !important;

package/build-style/style.css

@@ -360,8 +360,10 @@ iframe[name=editor-canvas] {
   border-top: 1px solid #ddd;
 }
 
-.block-editor-block-inspector-edit-contents-button {
-  margin-top: 8px;
+.block-editor-block-inspector-edit-contents {
+  margin: 0 16px 16px 16px;
+}
+.block-editor-block-inspector-edit-contents .block-editor-block-inspector-edit-contents__button {
   justify-content: center;
 }
 
@@ -659,6 +661,19 @@ iframe[name=editor-canvas] {
   display: flex;
   padding: 16px;
 }
+.block-editor-block-card.is-parent {
+  padding-bottom: 4px;
+}
+.block-editor-block-card.is-child {
+  padding-top: 4px;
+}
+
+.block-editor-block-card__parent-select-button {
+  padding: 0;
+  align-items: start;
+  text-align: start;
+  height: auto !important;
+}
 
 .block-editor-block-card__title {
   font-weight: 499;
@@ -677,7 +692,8 @@ iframe[name=editor-canvas] {
   padding: 3px 0;
 }
 
-.block-editor-block-card .block-editor-block-icon {
+.block-editor-block-card .block-editor-block-icon,
+.block-editor-block-card__child-indicator-icon {
   flex: 0 0 24px;
   margin-left: 0;
   margin-right: 12px;
@@ -1192,45 +1208,6 @@ iframe[name=editor-canvas] {
   box-sizing: border-box !important;
 }
 
-.block-editor-block-switcher {
-  position: relative;
-}
-.block-editor-block-switcher .components-button.components-dropdown-menu__toggle.has-icon.has-icon {
-  min-width: 36px;
-}
-
-.block-editor-block-switcher__no-switcher-icon,
-.block-editor-block-switcher__toggle {
-  position: relative;
-}
-
-.components-button.block-editor-block-switcher__toggle,
-.components-button.block-editor-block-switcher__no-switcher-icon {
-  margin: 0;
-  display: block;
-  height: 48px;
-}
-.components-button.block-editor-block-switcher__toggle .block-editor-block-icon,
-.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
-  margin: auto;
-}
-
-.components-button.block-editor-block-switcher__no-switcher-icon {
-  display: flex;
-}
-.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
-  margin-right: auto;
-  margin-left: auto;
-  min-width: 24px !important;
-}
-
-.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true] {
-  color: #1e1e1e;
-}
-.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true]:hover {
-  color: #1e1e1e;
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
   min-width: 300px;
 }
@@ -1274,25 +1251,6 @@ iframe[name=editor-canvas] {
   font-weight: 499;
 }
 
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon {
-  min-width: 36px;
-}
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle {
-  height: 48px;
-}
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-icon,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
-  width: 48px;
-  height: 48px;
-}
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform,
-.block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
-  padding: 12px;
-}
-
 .block-editor-block-switcher__preview-patterns-container {
   padding-bottom: 16px;
 }
@@ -3554,10 +3512,13 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
   border-radius: 2px;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
-  color: var(--wp-block-synced-color);
+.block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true] {
+  color: #1e1e1e;
+}
+.block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true]:hover {
+  color: #1e1e1e;
 }
-.block-editor-block-toolbar.is-synced .block-editor-block-switcher__no-switcher-icon[aria-disabled=true] .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher__no-switcher-icon[aria-disabled=true] .block-editor-block-icon {
+.block-editor-block-toolbar.is-synced .block-editor-block-toolbar__block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-toolbar__block-icon {
   color: var(--wp-block-synced-color);
 }
 .block-editor-block-toolbar > :last-child,
@@ -3651,15 +3612,15 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   width: 2px;
 }
 
-.block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
-.block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
-  width: 24px !important;
-  margin: 0 !important;
-}
 .block-editor-block-toolbar__block-controls .components-toolbar-group {
   padding: 0;
 }
 
+.block-editor-block-toolbar__pattern-overrides-popover .components-popover__content {
+  min-width: 260px;
+  padding: 16px;
+}
+
 .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-toolbar .components-toolbar,
 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group,
@@ -3686,8 +3647,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   padding-left: 6px;
   padding-right: 6px;
 }
-.show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
-.show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
+.show-icon-labels .block-editor-block-icon {
   width: 0 !important;
   height: 0 !important;
   min-width: 0 !important;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.7.1-next.2f1c7c01b.0",
+	"version": "15.8.1-next.16d95556a.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -55,41 +55,41 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/api-fetch": "^7.34.1-next.2f1c7c01b.0",
-		"@wordpress/base-styles": "^6.10.1-next.2f1c7c01b.0",
-		"@wordpress/blob": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/block-serialization-default-parser": "^5.34.1-next.2f1c7c01b.0",
-		"@wordpress/blocks": "^15.7.1-next.2f1c7c01b.0",
-		"@wordpress/commands": "^1.34.1-next.2f1c7c01b.0",
-		"@wordpress/components": "^30.7.2-next.2f1c7c01b.0",
-		"@wordpress/compose": "^7.34.1-next.2f1c7c01b.0",
-		"@wordpress/data": "^10.34.1-next.2f1c7c01b.0",
-		"@wordpress/date": "^5.34.1-next.2f1c7c01b.0",
-		"@wordpress/deprecated": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/dom": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/element": "^6.34.1-next.2f1c7c01b.0",
-		"@wordpress/escape-html": "^3.34.1-next.2f1c7c01b.0",
-		"@wordpress/global-styles-engine": "^1.1.1-next.2f1c7c01b.0",
-		"@wordpress/hooks": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/html-entities": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/i18n": "^6.7.1-next.2f1c7c01b.0",
-		"@wordpress/icons": "^11.1.1-next.2f1c7c01b.0",
-		"@wordpress/interactivity": "^6.34.1-next.2f1c7c01b.0",
-		"@wordpress/is-shallow-equal": "^5.34.1-next.2f1c7c01b.0",
-		"@wordpress/keyboard-shortcuts": "^5.34.1-next.2f1c7c01b.0",
-		"@wordpress/keycodes": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/notices": "^5.34.1-next.2f1c7c01b.0",
-		"@wordpress/preferences": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/priority-queue": "^3.34.1-next.2f1c7c01b.0",
-		"@wordpress/private-apis": "^1.34.1-next.2f1c7c01b.0",
-		"@wordpress/rich-text": "^7.34.1-next.2f1c7c01b.0",
-		"@wordpress/style-engine": "^2.34.1-next.2f1c7c01b.0",
-		"@wordpress/token-list": "^3.34.1-next.2f1c7c01b.0",
-		"@wordpress/upload-media": "^0.19.1-next.2f1c7c01b.0",
-		"@wordpress/url": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/warning": "^3.34.1-next.2f1c7c01b.0",
-		"@wordpress/wordcount": "^4.34.1-next.2f1c7c01b.0",
+		"@wordpress/a11y": "^4.35.1-next.16d95556a.0",
+		"@wordpress/api-fetch": "^7.35.1-next.16d95556a.0",
+		"@wordpress/base-styles": "^6.11.1-next.16d95556a.0",
+		"@wordpress/blob": "^4.35.1-next.16d95556a.0",
+		"@wordpress/block-serialization-default-parser": "^5.35.1-next.16d95556a.0",
+		"@wordpress/blocks": "^15.8.1-next.16d95556a.0",
+		"@wordpress/commands": "^1.35.1-next.16d95556a.0",
+		"@wordpress/components": "^30.8.1-next.16d95556a.0",
+		"@wordpress/compose": "^7.35.1-next.16d95556a.0",
+		"@wordpress/data": "^10.35.1-next.16d95556a.0",
+		"@wordpress/date": "^5.35.1-next.16d95556a.0",
+		"@wordpress/deprecated": "^4.35.1-next.16d95556a.0",
+		"@wordpress/dom": "^4.35.1-next.16d95556a.0",
+		"@wordpress/element": "^6.35.1-next.16d95556a.0",
+		"@wordpress/escape-html": "^3.35.1-next.16d95556a.0",
+		"@wordpress/global-styles-engine": "^1.2.1-next.16d95556a.0",
+		"@wordpress/hooks": "^4.35.1-next.16d95556a.0",
+		"@wordpress/html-entities": "^4.35.1-next.16d95556a.0",
+		"@wordpress/i18n": "^6.8.1-next.16d95556a.0",
+		"@wordpress/icons": "^11.2.1-next.16d95556a.0",
+		"@wordpress/interactivity": "^6.35.1-next.16d95556a.0",
+		"@wordpress/is-shallow-equal": "^5.35.1-next.16d95556a.0",
+		"@wordpress/keyboard-shortcuts": "^5.35.1-next.16d95556a.0",
+		"@wordpress/keycodes": "^4.35.1-next.16d95556a.0",
+		"@wordpress/notices": "^5.35.1-next.16d95556a.0",
+		"@wordpress/preferences": "^4.35.1-next.16d95556a.0",
+		"@wordpress/priority-queue": "^3.35.1-next.16d95556a.0",
+		"@wordpress/private-apis": "^1.35.1-next.16d95556a.0",
+		"@wordpress/rich-text": "^7.35.1-next.16d95556a.0",
+		"@wordpress/style-engine": "^2.35.1-next.16d95556a.0",
+		"@wordpress/token-list": "^3.35.1-next.16d95556a.0",
+		"@wordpress/upload-media": "^0.20.1-next.16d95556a.0",
+		"@wordpress/url": "^4.35.1-next.16d95556a.0",
+		"@wordpress/warning": "^3.35.1-next.16d95556a.0",
+		"@wordpress/wordcount": "^4.35.1-next.16d95556a.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -112,5 +112,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c6ddcdf455bc02567a2c9e03de6862a2061b85e8"
+	"gitHead": "59a9383612bbe16e21af84d13b035bfbca7fe833"
 }

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

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import {
 	Button,
+	Icon,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
@@ -15,7 +16,12 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { __, isRTL } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
+import {
+	chevronLeft,
+	chevronRight,
+	arrowRight,
+	arrowLeft,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -26,6 +32,22 @@ import BlockIcon from '../block-icon';
 
 const { Badge } = unlock( componentsPrivateApis );
 
+function OptionalParentSelectButton( { children, onClick } ) {
+	if ( ! onClick ) {
+		return children;
+	}
+
+	return (
+		<Button
+			__next40pxDefaultSize
+			className="block-editor-block-card__parent-select-button"
+			onClick={ onClick }
+		>
+			{ children }
+		</Button>
+	);
+}
+
 /**
  * A card component that displays block information including title, icon, and description.
  * Can be used to show block metadata and navigation controls for parent blocks.
@@ -54,6 +76,9 @@ const { Badge } = unlock( componentsPrivateApis );
  * @param {string}        [props.className]             Additional classes to apply to the card.
  * @param {string}        [props.name]                  Custom block name to display before the title.
  * @param {string}        [props.allowParentNavigation] Show a back arrow to the parent block in some situations.
+ * @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.children]              Children.
  * @return {Element}                        Block card component.
  */
@@ -65,7 +90,10 @@ function BlockCard( {
 	className,
 	name,
 	allowParentNavigation,
+	parentClientId,
+	isChild,
 	children,
+	clientId,
 } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
@@ -77,56 +105,85 @@ function BlockCard( {
 
 	const parentNavBlockClientId = useSelect(
 		( select ) => {
-			if ( ! allowParentNavigation ) {
+			if ( parentClientId || isChild || ! allowParentNavigation ) {
 				return;
 			}
-			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-				select( blockEditorStore );
-
-			const _selectedBlockClientId = getSelectedBlockClientId();
+			const { getBlockParentsByBlockName } = select( blockEditorStore );
 
 			return getBlockParentsByBlockName(
-				_selectedBlockClientId,
+				clientId,
 				'core/navigation',
 				true
 			)[ 0 ];
 		},
-		[ allowParentNavigation ]
+		[ clientId, allowParentNavigation, isChild, parentClientId ]
 	);
 
 	const { selectBlock } = useDispatch( blockEditorStore );
 
+	const TitleElement = parentClientId ? 'div' : 'h2';
+
 	return (
-		<div className={ clsx( 'block-editor-block-card', className ) }>
-			{ allowParentNavigation &&
-				parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
-					<Button
-						onClick={ () => selectBlock( parentNavBlockClientId ) }
-						label={ __( 'Go to parent Navigation 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"
-					/>
-				) }
-			<BlockIcon icon={ icon } showColors />
-			<VStack spacing={ 1 }>
-				<h2 className="block-editor-block-card__title">
-					<span className="block-editor-block-card__name">
-						{ !! name?.length ? name : title }
-					</span>
-					{ !! name?.length && <Badge>{ title }</Badge> }
-				</h2>
-				{ description && (
-					<Text className="block-editor-block-card__description">
-						{ description }
-					</Text>
-				) }
-				{ children }
-			</VStack>
+		<div
+			className={ clsx(
+				'block-editor-block-card',
+				{
+					'is-parent': parentClientId,
+					'is-child': isChild,
+				},
+				className
+			) }
+		>
+			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
+				<Button
+					onClick={ () => selectBlock( parentNavBlockClientId ) }
+					label={
+						parentNavBlockClientId
+							? __( 'Go to parent Navigation block' )
+							: // TODO - improve copy, not sure that we should use the term 'section'
+							  __( 'Go to parent section' )
+					}
+					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 && (
+							<Badge>{ title }</Badge>
+						) }
+					</TitleElement>
+					{ ! parentClientId && ! isChild && description && (
+						<Text className="block-editor-block-card__description">
+							{ description }
+						</Text>
+					) }
+					{ children }
+				</VStack>
+			</OptionalParentSelectButton>
 		</div>
 	);
 }