@wordpress/block-editor 15.11.0 → 15.12.0

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

@@ -5,17 +5,31 @@ function findOptimalFontSize(textElement, applyFontSize) {
   let maxSize = 2400;
   let bestSize = minSize;
   const computedStyle = window.getComputedStyle(textElement);
-  const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
-  const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+  let paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+  let paddingRight = parseFloat(computedStyle.paddingRight) || 0;
   const range = document.createRange();
   range.selectNodeContents(textElement);
+  let referenceElement = textElement;
+  const parentElement = textElement.parentElement;
+  if (parentElement) {
+    const parentElementComputedStyle = window.getComputedStyle(parentElement);
+    if (parentElementComputedStyle?.display === "flex") {
+      referenceElement = parentElement;
+      paddingLeft += parseFloat(parentElementComputedStyle.paddingLeft) || 0;
+      paddingRight += parseFloat(parentElementComputedStyle.paddingRight) || 0;
+    }
+  }
+  let maxclientHeight = referenceElement.clientHeight;
   while (minSize <= maxSize) {
     const midSize = Math.floor((minSize + maxSize) / 2);
     applyFontSize(midSize);
     const rect = range.getBoundingClientRect();
     const textWidth = rect.width;
-    const fitsWidth = textElement.scrollWidth <= textElement.clientWidth && textWidth <= textElement.clientWidth - paddingLeft - paddingRight;
-    const fitsHeight = alreadyHasScrollableHeight || textElement.scrollHeight <= textElement.clientHeight;
+    const fitsWidth = textElement.scrollWidth <= referenceElement.clientWidth && textWidth <= referenceElement.clientWidth - paddingLeft - paddingRight;
+    const fitsHeight = alreadyHasScrollableHeight || textElement.scrollHeight <= referenceElement.clientHeight || textElement.scrollHeight <= maxclientHeight;
+    if (referenceElement.clientHeight > maxclientHeight) {
+      maxclientHeight = referenceElement.clientHeight;
+    }
     if (fitsWidth && fitsHeight) {
       bestSize = midSize;
       minSize = midSize + 1;

package/build-module/utils/fit-text-utils.mjs.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 0-2400px.\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 = 0;\n\tlet maxSize = 2400;\n\tlet bestSize = minSize;\n\n\tconst computedStyle = window.getComputedStyle( textElement );\n\tconst paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;\n\tconst paddingRight = parseFloat( computedStyle.paddingRight ) || 0;\n\tconst range = document.createRange();\n\trange.selectNodeContents( textElement );\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( midSize );\n\n\t\t// When there is padding if the text overflows to the\n\t\t// padding area, it should be considered overflowing.\n\t\t// Use Range API to measure actual text content dimensions.\n\t\tconst rect = range.getBoundingClientRect();\n\t\tconst textWidth = rect.width;\n\n\t\t// Check if text fits within the element's width and is not\n\t\t// overflowing into the padding area.\n\t\tconst fitsWidth =\n\t\t\ttextElement.scrollWidth <= textElement.clientWidth &&\n\t\t\ttextWidth <= textElement.clientWidth - paddingLeft - paddingRight;\n\t\t// Check if text fits within the element's height.\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\trange.detach();\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,QAAM,gBAAgB,OAAO,iBAAkB,WAAY;AAC3D,QAAM,cAAc,WAAY,cAAc,WAAY,KAAK;AAC/D,QAAM,eAAe,WAAY,cAAc,YAAa,KAAK;AACjE,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAoB,WAAY;AAEtC,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,OAAQ;AAKvB,UAAM,OAAO,MAAM,sBAAsB;AACzC,UAAM,YAAY,KAAK;AAIvB,UAAM,YACL,YAAY,eAAe,YAAY,eACvC,aAAa,YAAY,cAAc,cAAc;AAEtD,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;AACA,QAAM,OAAO;AAEb,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;",
+  "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 0-2400px.\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 = 0;\n\tlet maxSize = 2400;\n\tlet bestSize = minSize;\n\n\tconst computedStyle = window.getComputedStyle( textElement );\n\tlet paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;\n\tlet paddingRight = parseFloat( computedStyle.paddingRight ) || 0;\n\tconst range = document.createRange();\n\trange.selectNodeContents( textElement );\n\n\tlet referenceElement = textElement;\n\tconst parentElement = textElement.parentElement;\n\tif ( parentElement ) {\n\t\tconst parentElementComputedStyle =\n\t\t\twindow.getComputedStyle( parentElement );\n\t\tif ( parentElementComputedStyle?.display === 'flex' ) {\n\t\t\treferenceElement = parentElement;\n\t\t\tpaddingLeft +=\n\t\t\t\tparseFloat( parentElementComputedStyle.paddingLeft ) || 0;\n\t\t\tpaddingRight +=\n\t\t\t\tparseFloat( parentElementComputedStyle.paddingRight ) || 0;\n\t\t}\n\t}\n\tlet maxclientHeight = referenceElement.clientHeight;\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( midSize );\n\n\t\t// When there is padding if the text overflows to the\n\t\t// padding area, it should be considered overflowing.\n\t\t// Use Range API to measure actual text content dimensions.\n\t\tconst rect = range.getBoundingClientRect();\n\t\tconst textWidth = rect.width;\n\n\t\t// Check if text fits within the element's width and is not\n\t\t// overflowing into the padding area.\n\t\tconst fitsWidth =\n\t\t\ttextElement.scrollWidth <= referenceElement.clientWidth &&\n\t\t\ttextWidth <=\n\t\t\t\treferenceElement.clientWidth - paddingLeft - paddingRight;\n\t\t// Check if text fits within the element's height.\n\t\tconst fitsHeight =\n\t\t\talreadyHasScrollableHeight ||\n\t\t\ttextElement.scrollHeight <= referenceElement.clientHeight ||\n\t\t\ttextElement.scrollHeight <= maxclientHeight;\n\n\t\t// When there are calculated line heights, text may jump in height\n\t\t// the available space may decrease while the font size decreases,\n\t\t// making text not fit.\n\t\t// We store a maximum reference height: the maximum reference element height that was observed\n\t\t// during the loop to avoid issues with such jumps.\n\t\tif ( referenceElement.clientHeight > maxclientHeight ) {\n\t\t\tmaxclientHeight = referenceElement.clientHeight;\n\t\t}\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\trange.detach();\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,QAAM,gBAAgB,OAAO,iBAAkB,WAAY;AAC3D,MAAI,cAAc,WAAY,cAAc,WAAY,KAAK;AAC7D,MAAI,eAAe,WAAY,cAAc,YAAa,KAAK;AAC/D,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAoB,WAAY;AAEtC,MAAI,mBAAmB;AACvB,QAAM,gBAAgB,YAAY;AAClC,MAAK,eAAgB;AACpB,UAAM,6BACL,OAAO,iBAAkB,aAAc;AACxC,QAAK,4BAA4B,YAAY,QAAS;AACrD,yBAAmB;AACnB,qBACC,WAAY,2BAA2B,WAAY,KAAK;AACzD,sBACC,WAAY,2BAA2B,YAAa,KAAK;AAAA,IAC3D;AAAA,EACD;AACA,MAAI,kBAAkB,iBAAiB;AAEvC,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,OAAQ;AAKvB,UAAM,OAAO,MAAM,sBAAsB;AACzC,UAAM,YAAY,KAAK;AAIvB,UAAM,YACL,YAAY,eAAe,iBAAiB,eAC5C,aACC,iBAAiB,cAAc,cAAc;AAE/C,UAAM,aACL,8BACA,YAAY,gBAAgB,iBAAiB,gBAC7C,YAAY,gBAAgB;AAO7B,QAAK,iBAAiB,eAAe,iBAAkB;AACtD,wBAAkB,iBAAiB;AAAA,IACpC;AAEA,QAAK,aAAa,YAAa;AAC9B,iBAAW;AACX,gBAAU,UAAU;AAAA,IACrB,OAAO;AACN,gBAAU,UAAU;AAAA,IACrB;AAAA,EACD;AACA,QAAM,OAAO;AAEb,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/content-rtl.css

@@ -503,6 +503,16 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   cursor: grabbing;
 }
 
+.is-preview-mode {
+  pointer-events: none;
+}
+.is-preview-mode .block-editor-block-list__block {
+  pointer-events: auto;
+}
+.is-preview-mode .block-editor-block-list__block > *:not(.block-editor-block-list__block) {
+  pointer-events: none;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-left: auto;

package/build-style/content.css

@@ -503,6 +503,16 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   cursor: grabbing;
 }
 
+.is-preview-mode {
+  pointer-events: none;
+}
+.is-preview-mode .block-editor-block-list__block {
+  pointer-events: auto;
+}
+.is-preview-mode .block-editor-block-list__block > *:not(.block-editor-block-list__block) {
+  pointer-events: none;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-right: auto;

package/build-style/style-rtl.css

@@ -1760,6 +1760,9 @@ iframe[name=editor-canvas] {
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
+.block-editor-global-styles-advanced-panel__custom-css-input {
+  margin-bottom: 16px;
+}
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
   font-family: Menlo, Consolas, monaco, monospace;
   direction: ltr;

package/build-style/style.css

@@ -1760,6 +1760,9 @@ iframe[name=editor-canvas] {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
+.block-editor-global-styles-advanced-panel__custom-css-input {
+  margin-bottom: 16px;
+}
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
   font-family: Menlo, Consolas, monaco, monospace;
   /*rtl:ignore*/

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.11.0",
+	"version": "15.12.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.38.0",
-		"@wordpress/api-fetch": "^7.38.0",
-		"@wordpress/base-styles": "^6.14.0",
-		"@wordpress/blob": "^4.38.0",
-		"@wordpress/block-serialization-default-parser": "^5.38.0",
-		"@wordpress/blocks": "^15.11.0",
-		"@wordpress/commands": "^1.38.0",
-		"@wordpress/components": "^32.0.0",
-		"@wordpress/compose": "^7.38.0",
-		"@wordpress/data": "^10.38.0",
-		"@wordpress/dataviews": "^11.2.0",
-		"@wordpress/date": "^5.38.0",
-		"@wordpress/deprecated": "^4.38.0",
-		"@wordpress/dom": "^4.38.0",
-		"@wordpress/element": "^6.38.0",
-		"@wordpress/escape-html": "^3.38.0",
-		"@wordpress/global-styles-engine": "^1.5.0",
-		"@wordpress/hooks": "^4.38.0",
-		"@wordpress/html-entities": "^4.38.0",
-		"@wordpress/i18n": "^6.11.0",
-		"@wordpress/icons": "^11.5.0",
-		"@wordpress/image-cropper": "^1.2.0",
-		"@wordpress/interactivity": "^6.38.0",
-		"@wordpress/is-shallow-equal": "^5.38.0",
-		"@wordpress/keyboard-shortcuts": "^5.38.0",
-		"@wordpress/keycodes": "^4.38.0",
-		"@wordpress/notices": "^5.38.0",
-		"@wordpress/preferences": "^4.38.0",
-		"@wordpress/priority-queue": "^3.38.0",
-		"@wordpress/private-apis": "^1.38.0",
-		"@wordpress/rich-text": "^7.38.0",
-		"@wordpress/style-engine": "^2.38.0",
-		"@wordpress/token-list": "^3.38.0",
-		"@wordpress/upload-media": "^0.23.0",
-		"@wordpress/url": "^4.38.0",
-		"@wordpress/warning": "^3.38.0",
-		"@wordpress/wordcount": "^4.38.0",
+		"@wordpress/a11y": "^4.39.0",
+		"@wordpress/api-fetch": "^7.39.0",
+		"@wordpress/base-styles": "^6.15.0",
+		"@wordpress/blob": "^4.39.0",
+		"@wordpress/block-serialization-default-parser": "^5.39.0",
+		"@wordpress/blocks": "^15.12.0",
+		"@wordpress/commands": "^1.39.0",
+		"@wordpress/components": "^32.1.0",
+		"@wordpress/compose": "^7.39.0",
+		"@wordpress/data": "^10.39.0",
+		"@wordpress/dataviews": "^11.3.0",
+		"@wordpress/date": "^5.39.0",
+		"@wordpress/deprecated": "^4.39.0",
+		"@wordpress/dom": "^4.39.0",
+		"@wordpress/element": "^6.39.0",
+		"@wordpress/escape-html": "^3.39.0",
+		"@wordpress/global-styles-engine": "^1.6.0",
+		"@wordpress/hooks": "^4.39.0",
+		"@wordpress/html-entities": "^4.39.0",
+		"@wordpress/i18n": "^6.12.0",
+		"@wordpress/icons": "^11.6.0",
+		"@wordpress/image-cropper": "^1.3.0",
+		"@wordpress/interactivity": "^6.39.0",
+		"@wordpress/is-shallow-equal": "^5.39.0",
+		"@wordpress/keyboard-shortcuts": "^5.39.0",
+		"@wordpress/keycodes": "^4.39.0",
+		"@wordpress/notices": "^5.39.0",
+		"@wordpress/preferences": "^4.39.0",
+		"@wordpress/priority-queue": "^3.39.0",
+		"@wordpress/private-apis": "^1.39.0",
+		"@wordpress/rich-text": "^7.39.0",
+		"@wordpress/style-engine": "^2.39.0",
+		"@wordpress/token-list": "^3.39.0",
+		"@wordpress/upload-media": "^0.24.0",
+		"@wordpress/url": "^4.39.0",
+		"@wordpress/warning": "^3.39.0",
+		"@wordpress/wordcount": "^4.39.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "50c4c0f51e4797c217946ce42adfaa5eb026f33f"
+	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
 }

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

@@ -103,6 +103,7 @@ function BlockBreadcrumb( { rootLabelText } ) {
 						<BlockTitle
 							clientId={ parentClientId }
 							maximumLength={ 35 }
+							context="breadcrumb"
 						/>
 					</Button>
 					<Icon
@@ -116,7 +117,11 @@ function BlockBreadcrumb( { rootLabelText } ) {
 					className="block-editor-block-breadcrumb__current"
 					aria-current="true"
 				>
-					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
+					<BlockTitle
+						clientId={ clientId }
+						maximumLength={ 35 }
+						context="breadcrumb"
+					/>
 				</li>
 			) }
 		</ul>

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

@@ -12,7 +12,7 @@ BlockControls.Slot = BlockControlsSlot;
 export const BlockFormatControls = ( props ) => {
 	return <BlockControlsFill group="inline" { ...props } />;
 };
-BlockFormatControls.Slot = ( props ) => {
+BlockFormatControls.Slot = function Slot( props ) {
 	return <BlockControlsSlot group="inline" { ...props } />;
 };
 

package/src/components/block-controls/test/index.js

@@ -43,6 +43,7 @@ describe( 'BlockControls', () => {
 		const edit = ( { children } ) => <>{ children }</>;
 
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			save: () => {},
 			category: 'text',
 			title: 'block title',

package/src/components/block-edit/test/edit.js

@@ -37,6 +37,7 @@ describe( 'Edit', () => {
 		const edit = () => <div data-testid="foo-bar" />;
 
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			save: noop,
 			category: 'text',
 			title: 'block title',
@@ -52,6 +53,7 @@ describe( 'Edit', () => {
 		const save = () => <div data-testid="foo-bar" />;
 
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			save,
 			category: 'text',
 			title: 'block title',
@@ -79,6 +81,13 @@ describe( 'Edit', () => {
 
 		render( <Edit name="core/test-block" attributes={ attributes } /> );
 
+		// This test is for API version 1 blocks, so the console warning is intentional.
+		// API version 1 blocks automatically receive the default block class name,
+		// while API version 2+ blocks require useBlockProps() to be used explicitly.
+		expect( console ).toHaveWarnedWith(
+			'Block with API version 2 or lower is deprecated since version 6.9. See: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/block-migration-for-iframe-editor-compatibility/ Note: The block "core/test-block" is registered with API version 1. This means that the post editor may work as a non-iframe editor. Since all editors are planned to work as iframes in the future, set the `apiVersion` field to 3 and test the block inside the iframe editor.'
+		);
+
 		const editElement = screen.getByTestId( 'foo-bar' );
 		expect( editElement ).toHaveClass( 'wp-block-test-block' );
 		expect( editElement ).toHaveClass( 'my-class' );
@@ -87,6 +96,7 @@ describe( 'Edit', () => {
 	it( 'should assign context', () => {
 		const edit = ( { context } ) => context.value;
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			category: 'text',
 			title: 'block title',
 			usesContext: [ 'value' ],

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

@@ -29,7 +29,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import { useBorderPanelLabel } from '../../hooks/border';
 import ContentTab from '../inspector-controls-tabs/content-tab';
-import BlockVisibilityInfo from '../block-visibility/block-visibility-info';
+import ViewportVisibilityInfo from '../block-visibility/viewport-visibility-info';
 import { unlock } from '../../lock-unlock';
 
 function StyleInspectorSlots( {
@@ -77,7 +77,6 @@ function StyleInspectorSlots( {
 function BlockInspector() {
 	const {
 		selectedBlockCount,
-		selectedBlockClientId,
 		renderedBlockName,
 		renderedBlockClientId,
 		blockType,
@@ -119,7 +118,6 @@ function BlockInspector() {
 
 		return {
 			selectedBlockCount: getSelectedBlockCount(),
-			selectedBlockClientId: _selectedBlockClientId,
 			renderedBlockClientId: _renderedBlockClientId,
 			renderedBlockName: _renderedBlockName,
 			blockType: _blockType,
@@ -257,7 +255,6 @@ function BlockInspector() {
 		>
 			<BlockInspectorSingleBlock
 				renderedBlockClientId={ renderedBlockClientId }
-				selectedBlockClientId={ selectedBlockClientId }
 				blockName={ blockType.name }
 				isSectionBlock={ isSectionBlock }
 				availableTabs={ availableTabs }
@@ -309,10 +306,6 @@ const BlockInspectorSingleBlock = ( {
 	// The block that is displayed in the inspector. This is the block whose
 	// controls and information are shown to the user.
 	renderedBlockClientId,
-	// The actual block that is selected in the editor. This may or may not
-	// be the same as the rendered block (e.g., when a child block is selected
-	// but its parent section block is the main one rendered in the inspector).
-	selectedBlockClientId,
 	blockName,
 	isSectionBlock,
 	availableTabs,
@@ -322,7 +315,6 @@ const BlockInspectorSingleBlock = ( {
 } ) => {
 	const hasMultipleTabs = availableTabs?.length > 1;
 	const hasParentChildBlockCards =
-		window?.__experimentalContentOnlyPatternInsertion &&
 		editedContentOnlySection &&
 		editedContentOnlySection !== renderedBlockClientId;
 	const parentBlockInformation = useBlockDisplayInformation(
@@ -332,10 +324,6 @@ const BlockInspectorSingleBlock = ( {
 		renderedBlockClientId
 	);
 	const isBlockSynced = blockInformation.isSynced;
-	const shouldShowTabs = ! isBlockSynced && hasMultipleTabs;
-	const isSectionBlockSelected =
-		window?.__experimentalContentOnlyPatternInsertion &&
-		selectedBlockClientId === renderedBlockClientId;
 
 	return (
 		<div className="block-editor-block-inspector">
@@ -353,22 +341,22 @@ const BlockInspectorSingleBlock = ( {
 				isChild={ hasParentChildBlockCards }
 				clientId={ renderedBlockClientId }
 			/>
-			<BlockVisibilityInfo clientId={ renderedBlockClientId } />
-			{ window?.__experimentalContentOnlyPatternInsertion && (
-				<EditContents clientId={ renderedBlockClientId } />
-			) }
+			<ViewportVisibilityInfo clientId={ renderedBlockClientId } />
+			<EditContents clientId={ renderedBlockClientId } />
 			<BlockVariationTransforms blockClientId={ renderedBlockClientId } />
-			{ shouldShowTabs && (
-				<InspectorControlsTabs
-					hasBlockStyles={ hasBlockStyles }
-					clientId={ renderedBlockClientId }
-					blockName={ blockName }
-					tabs={ availableTabs }
-					isSectionBlock={ isSectionBlock }
-					contentClientIds={ contentClientIds }
-				/>
+			{ hasMultipleTabs && (
+				<>
+					<InspectorControlsTabs
+						hasBlockStyles={ hasBlockStyles }
+						clientId={ renderedBlockClientId }
+						blockName={ blockName }
+						tabs={ availableTabs }
+						isSectionBlock={ isSectionBlock }
+						contentClientIds={ contentClientIds }
+					/>
+				</>
 			) }
-			{ ! shouldShowTabs && (
+			{ ! hasMultipleTabs && (
 				<>
 					{ hasBlockStyles && (
 						<BlockStyles clientId={ renderedBlockClientId } />
@@ -379,15 +367,6 @@ const BlockInspectorSingleBlock = ( {
 					{ ! isSectionBlock && (
 						<StyleInspectorSlots blockName={ blockName } />
 					) }
-					{ isSectionBlock &&
-						isBlockSynced &&
-						isSectionBlockSelected && (
-							<>
-								<InspectorControls.Slot />
-								{ /* Allow AdvancedControls so users can adjust local attributes (e.g. additional CSS classes, HTML element). */ }
-								<AdvancedControls />
-							</>
-						) }
 				</>
 			) }
 			<SkipToSelectedBlock key="back" />

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

@@ -624,6 +624,8 @@ function BlockListBlockProvider( props ) {
 				settings?.[ deviceTypeKey ]?.toLowerCase() || 'desktop';
 
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
+			const isMultiSelected = isBlockMultiSelected( clientId );
+			const blockEditingMode = getBlockEditingMode( clientId );
 			const previewContext = {
 				isPreviewMode,
 				blockWithoutAttributes,
@@ -643,6 +645,9 @@ function BlockListBlockProvider( props ) {
 				bindableAttributes,
 				blockVisibility,
 				deviceType,
+				isMultiSelected,
+				blockEditingMode,
+				isEditingDisabled: blockEditingMode === 'disabled',
 			};
 
 			// When in preview mode, we can avoid a lot of selection and
@@ -654,13 +659,11 @@ function BlockListBlockProvider( props ) {
 			const canRemove = canRemoveBlock( clientId );
 			const canMove = canMoveBlock( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
-			const isMultiSelected = isBlockMultiSelected( clientId );
 			const checkDeep = true;
 			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
 				clientId,
 				checkDeep
 			);
-			const blockEditingMode = getBlockEditingMode( clientId );
 			const sectionBlockClientId = _isSectionBlock( clientId )
 				? clientId
 				: getParentSectionBlock( clientId );

package/src/components/block-list/content.scss

@@ -476,3 +476,14 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	cursor: grabbing;
 }
 
+.is-preview-mode {
+	pointer-events: none;
+
+	.block-editor-block-list__block {
+		pointer-events: auto;
+
+		> *:not(.block-editor-block-list__block) {
+			pointer-events: none;
+		}
+	}
+}

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

@@ -48,23 +48,30 @@ const delayedBlockVisibilityDebounceOptions = {
 };
 
 function Root( { className, ...settings } ) {
-	const { isOutlineMode, isFocusMode, editedContentOnlySection } = useSelect(
-		( select ) => {
-			const {
-				getSettings,
-				isTyping,
-				hasBlockSpotlight,
-				getEditedContentOnlySection,
-			} = unlock( select( blockEditorStore ) );
-			const { outlineMode, focusMode } = getSettings();
-			return {
-				isOutlineMode: outlineMode && ! isTyping(),
-				isFocusMode: focusMode || hasBlockSpotlight(),
-				editedContentOnlySection: getEditedContentOnlySection(),
-			};
-		},
-		[]
-	);
+	const {
+		isOutlineMode,
+		isFocusMode,
+		isPreviewMode,
+		editedContentOnlySection,
+	} = useSelect( ( select ) => {
+		const {
+			getSettings,
+			isTyping,
+			hasBlockSpotlight,
+			getEditedContentOnlySection,
+		} = unlock( select( blockEditorStore ) );
+		const {
+			outlineMode,
+			focusMode,
+			isPreviewMode: _isPreviewMode,
+		} = getSettings();
+		return {
+			isOutlineMode: outlineMode && ! isTyping(),
+			isFocusMode: focusMode || hasBlockSpotlight(),
+			isPreviewMode: _isPreviewMode,
+			editedContentOnlySection: getEditedContentOnlySection(),
+		};
+	}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -111,6 +118,7 @@ function Root( { className, ...settings } ) {
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode,
+				'is-preview-mode': isPreviewMode,
 			} ),
 		},
 		settings