@wordpress/block-editor 15.11.1-next.v.0 → 15.12.0

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

@@ -5,20 +5,30 @@ 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 maxclientHeight = textElement.clientHeight;
+  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 || textElement.scrollHeight <= maxclientHeight;
-    if (textElement.clientHeight > maxclientHeight) {
-      maxclientHeight = 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;

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\tlet maxclientHeight = textElement.clientHeight;\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\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 ( textElement.clientHeight > maxclientHeight ) {\n\t\t\tmaxclientHeight = textElement.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,QAAM,cAAc,WAAY,cAAc,WAAY,KAAK;AAC/D,QAAM,eAAe,WAAY,cAAc,YAAa,KAAK;AACjE,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAoB,WAAY;AACtC,MAAI,kBAAkB,YAAY;AAClC,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,gBACxC,YAAY,gBAAgB;AAO7B,QAAK,YAAY,eAAe,iBAAkB;AACjD,wBAAkB,YAAY;AAAA,IAC/B;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;",
+  "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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.11.1-next.v.0+b8934fcf9",
+	"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.1-next.v.0+b8934fcf9",
-		"@wordpress/api-fetch": "^7.38.1-next.v.0+b8934fcf9",
-		"@wordpress/base-styles": "^6.14.1-next.v.0+b8934fcf9",
-		"@wordpress/blob": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/block-serialization-default-parser": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/blocks": "^15.11.1-next.v.0+b8934fcf9",
-		"@wordpress/commands": "^1.38.1-next.v.0+b8934fcf9",
-		"@wordpress/components": "^32.0.2-next.v.0+b8934fcf9",
-		"@wordpress/compose": "^7.38.1-next.v.0+b8934fcf9",
-		"@wordpress/data": "^10.38.1-next.v.0+b8934fcf9",
-		"@wordpress/dataviews": "^11.3.1-next.v.0+b8934fcf9",
-		"@wordpress/date": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/deprecated": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/dom": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/element": "^6.38.1-next.v.0+b8934fcf9",
-		"@wordpress/escape-html": "^3.38.1-next.v.0+b8934fcf9",
-		"@wordpress/global-styles-engine": "^1.5.1-next.v.0+b8934fcf9",
-		"@wordpress/hooks": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/html-entities": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/i18n": "^6.11.1-next.v.0+b8934fcf9",
-		"@wordpress/icons": "^11.5.1-next.v.0+b8934fcf9",
-		"@wordpress/image-cropper": "^1.2.1-next.v.0+b8934fcf9",
-		"@wordpress/interactivity": "^6.38.1-next.v.0+b8934fcf9",
-		"@wordpress/is-shallow-equal": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/keyboard-shortcuts": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/keycodes": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/notices": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/preferences": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/priority-queue": "^3.38.1-next.v.0+b8934fcf9",
-		"@wordpress/private-apis": "^1.38.1-next.v.0+b8934fcf9",
-		"@wordpress/rich-text": "^7.38.1-next.v.0+b8934fcf9",
-		"@wordpress/style-engine": "^2.38.1-next.v.0+b8934fcf9",
-		"@wordpress/token-list": "^3.38.1-next.v.0+b8934fcf9",
-		"@wordpress/upload-media": "^0.23.1-next.v.0+b8934fcf9",
-		"@wordpress/url": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/warning": "^3.38.1-next.v.0+b8934fcf9",
-		"@wordpress/wordcount": "^4.38.1-next.v.0+b8934fcf9",
+		"@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": "17529010285784fd2e735348a28391c79de87c88"
+	"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-inspector/index.js

@@ -315,7 +315,6 @@ const BlockInspectorSingleBlock = ( {
 } ) => {
 	const hasMultipleTabs = availableTabs?.length > 1;
 	const hasParentChildBlockCards =
-		window?.__experimentalContentOnlyPatternInsertion &&
 		editedContentOnlySection &&
 		editedContentOnlySection !== renderedBlockClientId;
 	const parentBlockInformation = useBlockDisplayInformation(
@@ -343,9 +342,7 @@ const BlockInspectorSingleBlock = ( {
 				clientId={ renderedBlockClientId }
 			/>
 			<ViewportVisibilityInfo clientId={ renderedBlockClientId } />
-			{ window?.__experimentalContentOnlyPatternInsertion && (
-				<EditContents clientId={ renderedBlockClientId } />
-			) }
+			<EditContents clientId={ renderedBlockClientId } />
 			<BlockVariationTransforms blockClientId={ renderedBlockClientId } />
 			{ hasMultipleTabs && (
 				<>

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

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -319,17 +319,12 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				editContentOnlySection( clientId );
 			}
 
-			// Only add double-click listener if experimental flag is enabled
-			if ( window?.__experimentalContentOnlyPatternInsertion ) {
-				node.addEventListener( 'dblclick', onDoubleClick );
-			}
+			node.addEventListener( 'dblclick', onDoubleClick );
 
 			return () => {
 				node.removeEventListener( 'keydown', onKeyDown );
 				node.removeEventListener( 'dragstart', onDragStart );
-				if ( window?.__experimentalContentOnlyPatternInsertion ) {
-					node.removeEventListener( 'dblclick', onDoubleClick );
-				}
+				node.removeEventListener( 'dblclick', onDoubleClick );
 			};
 		},
 		[

package/src/components/block-list/use-in-between-inserter.js

@@ -15,12 +15,14 @@ import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
-	const isInBetweenInserterDisabled = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().isDistractionFree ||
-			unlock( select( blockEditorStore ) ).isZoomOut(),
-		[]
-	);
+	const isInBetweenInserterDisabled = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return (
+			settings.isDistractionFree ||
+			settings.isPreviewMode ||
+			unlock( select( blockEditorStore ) ).isZoomOut()
+		);
+	}, [] );
 	const {
 		getBlockListSettings,
 		getBlockIndex,

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -87,6 +87,7 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		isContentOnly,
 		isZoomOut,
+		canEdit,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -97,6 +98,7 @@ export function BlockSettingsDropdown( {
 				getBlockAttributes,
 				getBlockEditingMode,
 				isZoomOut: _isZoomOut,
+				canEditBlock,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -121,6 +123,7 @@ export function BlockSettingsDropdown( {
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
 				isZoomOut: _isZoomOut(),
+				canEdit: canEditBlock( firstBlockClientId ),
 			};
 		},
 		[ firstBlockClientId ]
@@ -240,7 +243,7 @@ export function BlockSettingsDropdown( {
 											parentBlockType={ parentBlockType }
 										/>
 									) }
-									{ count === 1 && (
+									{ canEdit && count === 1 && (
 										<BlockHTMLConvertButton
 											clientId={ firstBlockClientId }
 										/>
@@ -252,7 +255,7 @@ export function BlockSettingsDropdown( {
 											shortcut={ shortcuts.copy }
 										/>
 									) }
-									{ ! isContentOnly && (
+									{ canRemove && ! isContentOnly && (
 										<CopyMenuItem
 											clientIds={ clientIds }
 											label={ __( 'Cut' ) }
@@ -301,7 +304,7 @@ export function BlockSettingsDropdown( {
 											</MenuItem>
 										</>
 									) }
-									{ count === 1 && (
+									{ canEdit && count === 1 && (
 										<CommentIconSlotFill.Slot
 											fillProps={ {
 												clientId: firstBlockClientId,
@@ -318,9 +321,11 @@ export function BlockSettingsDropdown( {
 											label={ __( 'Copy styles' ) }
 											eventType="copyStyles"
 										/>
-										<MenuItem onClick={ onPasteStyles }>
-											{ __( 'Paste styles' ) }
-										</MenuItem>
+										{ canEdit && (
+											<MenuItem onClick={ onPasteStyles }>
+												{ __( 'Paste styles' ) }
+											</MenuItem>
+										) }
 									</MenuGroup>
 								) }
 								{ ! isContentOnly && (

package/src/components/block-settings-menu-controls/edit-section-menu-item.js

@@ -31,13 +31,7 @@ export function EditSectionMenuItem( { clientId, onClose } ) {
 		[ clientId ]
 	);
 
-	// Only show when the experiment is enabled, the block is a section block,
-	// and we're not already editing it
-	if (
-		! window?.__experimentalContentOnlyPatternInsertion ||
-		! isSectionBlock ||
-		isEditingContentOnlySection
-	) {
+	if ( ! isSectionBlock || isEditingContentOnlySection ) {
 		return null;
 	}
 

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

@@ -19,7 +19,6 @@ import {
 import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
-import { ModifyContentOnlySectionMenuItem } from '../content-lock';
 import { BlockRenameControl, useBlockRename } from '../block-rename';
 import { BlockVisibilityViewportMenuItem } from '../block-visibility';
 import { EditSectionMenuItem } from './edit-section-menu-item';
@@ -32,6 +31,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 		selectedClientIds,
 		isContentOnly,
 		canToggleSelectedBlocksVisibility,
+		canEdit,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -39,6 +39,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				getBlockNamesByClientId,
 				getSelectedBlockClientIds,
 				getBlockEditingMode,
+				canEditBlock,
 			} = select( blockEditorStore );
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
@@ -52,6 +53,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				).every( ( block ) =>
 					hasBlockSupport( block.name, 'visibility', true )
 				),
+				canEdit: canEditBlock( ids[ 0 ] ),
 			};
 		},
 		[ clientIds ]
@@ -105,34 +107,30 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 								onClose={ fillProps?.onClose }
 							/>
 						) }
-						{ showLockButton && (
+						{ canEdit && showLockButton && (
 							<BlockLockMenuItem
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
-						{ showRenameButton && (
+						{ canEdit && showRenameButton && (
 							<BlockRenameControl
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
-						{ showVisibilityButton && (
+						{ canEdit && showVisibilityButton && (
 							<BlockVisibilityViewportMenuItem
 								clientIds={ selectedClientIds }
 							/>
 						) }
 						{ fills }
-						{ selectedClientIds.length === 1 && (
-							<ModifyContentOnlySectionMenuItem
-								clientId={ selectedClientIds[ 0 ] }
-								onClose={ fillProps?.onClose }
-							/>
-						) }
-						{ fillProps?.count === 1 && ! isContentOnly && (
-							<BlockModeToggle
-								clientId={ fillProps?.firstBlockClientId }
-								onToggle={ fillProps?.onClose }
-							/>
-						) }
+						{ canEdit &&
+							fillProps?.count === 1 &&
+							! isContentOnly && (
+								<BlockModeToggle
+									clientId={ fillProps?.firstBlockClientId }
+									onToggle={ fillProps?.onClose }
+								/>
+							) }
 					</MenuGroup>
 				);
 			} }

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

@@ -27,6 +27,7 @@ function getBlockIconVariant( { select, clientIds } ) {
 		canRemoveBlocks,
 		getTemplateLock,
 		getBlockEditingMode,
+		canEditBlock,
 	} = unlock( select( blockEditorStore ) );
 	const { getBlockStyles } = select( blocksStore );
 
@@ -53,17 +54,16 @@ function getBlockIconVariant( { select, clientIds } ) {
 			0
 	);
 	const canRemove = canRemoveBlocks( clientIds );
-
+	const canEdit = clientIds.every( ( clientId ) => canEditBlock( clientId ) );
 	const isDefaultEditingMode =
 		getBlockEditingMode( clientIds[ 0 ] ) === 'default';
-	const _hideTransformsForSections =
-		window?.__experimentalContentOnlyPatternInsertion &&
-		hasPatternNameInSelection;
+	const _hideTransformsForSections = hasPatternNameInSelection;
 	const _showBlockSwitcher =
 		! _hideTransformsForSections &&
 		isDefaultEditingMode &&
 		( hasBlockStyles || canRemove ) &&
-		! hasTemplateLock;
+		! hasTemplateLock &&
+		canEdit;
 
 	const _showPatternOverrides = hasPatternOverrides && hasParentPattern;
 
@@ -84,11 +84,7 @@ function getBlockIcon( { select, clientIds } ) {
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
 	const blockAttributes = getBlockAttributes( firstClientId );
-	if (
-		_isSingleBlock &&
-		blockAttributes?.metadata?.patternName &&
-		window?.__experimentalContentOnlyPatternInsertion
-	) {
+	if ( _isSingleBlock && blockAttributes?.metadata?.patternName ) {
 		return symbol;
 	}
 

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

@@ -116,14 +116,8 @@ export function PrivateBlockToolbar( {
 		);
 
 		const _isZoomOut = isZoomOut();
-
 		const _isSectionBlock = isSectionBlock( selectedBlockClientId );
-
-		// The switch style button appears more prominently with the
-		// content only pattern experiment.
-		const _showSwitchSectionStyleButton =
-			window?.__experimentalContentOnlyPatternInsertion &&
-			( _isZoomOut || _isSectionBlock );
+		const _showSwitchSectionStyleButton = _isZoomOut || _isSectionBlock;
 
 		return {
 			blockClientId: selectedBlockClientId,

package/src/components/block-variation-transforms/index.js

@@ -205,10 +205,7 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	const hideVariationsForSections =
-		window?.__experimentalContentOnlyPatternInsertion && isSection;
-
-	if ( ! variations?.length || isContentOnly || hideVariationsForSections ) {
+	if ( ! variations?.length || isContentOnly || isSection ) {
 		return null;
 	}
 

package/src/components/inserter/index.js

@@ -176,6 +176,7 @@ class Inserter extends Component {
 				onSelect={ () => {
 					onClose();
 				} }
+				onClose={ onClose }
 				rootClientId={ rootClientId }
 				clientId={ clientId }
 				isAppender={ isAppender }