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

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

@@ -9,13 +9,17 @@ function findOptimalFontSize(textElement, applyFontSize) {
   const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
   const range = document.createRange();
   range.selectNodeContents(textElement);
+  let maxclientHeight = textElement.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 fitsHeight = alreadyHasScrollableHeight || textElement.scrollHeight <= textElement.clientHeight || textElement.scrollHeight <= maxclientHeight;
+    if (textElement.clientHeight > maxclientHeight) {
+      maxclientHeight = textElement.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\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;",
   "names": []
 }

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.10.1-next.v.0+500f87dd8",
+	"version": "15.11.1-next.v.0+b8934fcf9",
 	"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.37.1-next.v.0+500f87dd8",
-		"@wordpress/api-fetch": "^7.37.1-next.v.0+500f87dd8",
-		"@wordpress/base-styles": "^6.13.2-next.v.0+500f87dd8",
-		"@wordpress/blob": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/block-serialization-default-parser": "^5.37.1-next.v.0+500f87dd8",
-		"@wordpress/blocks": "^15.10.1-next.v.0+500f87dd8",
-		"@wordpress/commands": "^1.37.1-next.v.0+500f87dd8",
-		"@wordpress/components": "^32.0.1-next.v.0+500f87dd8",
-		"@wordpress/compose": "^7.37.1-next.v.0+500f87dd8",
-		"@wordpress/data": "^10.37.1-next.v.0+500f87dd8",
-		"@wordpress/dataviews": "^11.2.1-next.v.0+500f87dd8",
-		"@wordpress/date": "^5.37.2-next.v.0+500f87dd8",
-		"@wordpress/deprecated": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/dom": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/element": "^6.37.1-next.v.0+500f87dd8",
-		"@wordpress/escape-html": "^3.37.1-next.v.0+500f87dd8",
-		"@wordpress/global-styles-engine": "^1.4.1-next.v.0+500f87dd8",
-		"@wordpress/hooks": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/html-entities": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/i18n": "^6.10.1-next.v.0+500f87dd8",
-		"@wordpress/icons": "^11.4.1-next.v.0+500f87dd8",
-		"@wordpress/image-cropper": "^1.1.1-next.v.0+500f87dd8",
-		"@wordpress/interactivity": "^6.37.2-next.v.0+500f87dd8",
-		"@wordpress/is-shallow-equal": "^5.37.1-next.v.0+500f87dd8",
-		"@wordpress/keyboard-shortcuts": "^5.37.1-next.v.0+500f87dd8",
-		"@wordpress/keycodes": "^4.38.1-next.v.0+500f87dd8",
-		"@wordpress/notices": "^5.38.1-next.v.0+500f87dd8",
-		"@wordpress/preferences": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/priority-queue": "^3.37.1-next.v.0+500f87dd8",
-		"@wordpress/private-apis": "^1.37.1-next.v.0+500f87dd8",
-		"@wordpress/rich-text": "^7.37.1-next.v.0+500f87dd8",
-		"@wordpress/style-engine": "^2.37.1-next.v.0+500f87dd8",
-		"@wordpress/token-list": "^3.37.1-next.v.0+500f87dd8",
-		"@wordpress/upload-media": "^0.22.1-next.v.0+500f87dd8",
-		"@wordpress/url": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/warning": "^3.37.1-next.v.0+500f87dd8",
-		"@wordpress/wordcount": "^4.37.1-next.v.0+500f87dd8",
+		"@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",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ca0db0ee8ac2116cd307650136027d26d0cdd9bd"
+	"gitHead": "17529010285784fd2e735348a28391c79de87c88"
 }

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/context.js

@@ -5,6 +5,9 @@ import { createContext, useContext } from '@wordpress/element';
 
 export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
 export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
+export const mayDisplayPatternEditingControlsKey = Symbol(
+	'mayDisplayPatternEditingControls'
+);
 export const blockEditingModeKey = Symbol( 'blockEditingMode' );
 export const blockBindingsKey = Symbol( 'blockBindings' );
 export const isPreviewModeKey = Symbol( 'isPreviewMode' );

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

@@ -13,6 +13,7 @@ import {
 	useBlockEditContext,
 	mayDisplayControlsKey,
 	mayDisplayParentControlsKey,
+	mayDisplayPatternEditingControlsKey,
 	blockEditingModeKey,
 	blockBindingsKey,
 	isPreviewModeKey,
@@ -33,6 +34,7 @@ export { useBlockEditContext };
 export default function BlockEdit( {
 	mayDisplayControls,
 	mayDisplayParentControls,
+	mayDisplayPatternEditingControls,
 	blockEditingMode,
 	isPreviewMode,
 	// The remaining props are passed through the BlockEdit filters and are thus
@@ -69,6 +71,9 @@ export default function BlockEdit( {
 					// usage outside of the package (this context is exposed).
 					[ mayDisplayControlsKey ]: mayDisplayControls,
 					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
+					[ mayDisplayPatternEditingControlsKey ]:
+						mayDisplayPatternEditingControls &&
+						blockEditingMode !== 'disabled',
 					[ blockEditingModeKey ]: blockEditingMode,
 					[ blockBindingsKey ]: bindings,
 					[ isPreviewModeKey ]: isPreviewMode,
@@ -82,6 +87,7 @@ export default function BlockEdit( {
 					__unstableLayoutClassNames,
 					mayDisplayControls,
 					mayDisplayParentControls,
+					mayDisplayPatternEditingControls,
 					blockEditingMode,
 					bindings,
 					isPreviewMode,

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,21 +29,19 @@ 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( {
 	blockName,
 	showAdvancedControls = true,
 	showPositionControls = true,
-	showListControls = false,
 	showBindingsControls = true,
 } ) {
 	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 	return (
 		<>
 			<InspectorControls.Slot />
-			{ showListControls && <InspectorControls.Slot group="list" /> }
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }
@@ -79,7 +77,6 @@ function StyleInspectorSlots( {
 function BlockInspector() {
 	const {
 		selectedBlockCount,
-		selectedBlockClientId,
 		renderedBlockName,
 		renderedBlockClientId,
 		blockType,
@@ -121,7 +118,6 @@ function BlockInspector() {
 
 		return {
 			selectedBlockCount: getSelectedBlockCount(),
-			selectedBlockClientId: _selectedBlockClientId,
 			renderedBlockClientId: _renderedBlockClientId,
 			renderedBlockName: _renderedBlockName,
 			blockType: _blockType,
@@ -259,7 +255,6 @@ function BlockInspector() {
 		>
 			<BlockInspectorSingleBlock
 				renderedBlockClientId={ renderedBlockClientId }
-				selectedBlockClientId={ selectedBlockClientId }
 				blockName={ blockType.name }
 				isSectionBlock={ isSectionBlock }
 				availableTabs={ availableTabs }
@@ -311,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,
@@ -334,10 +325,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">
@@ -355,43 +342,34 @@ const BlockInspectorSingleBlock = ( {
 				isChild={ hasParentChildBlockCards }
 				clientId={ renderedBlockClientId }
 			/>
-			<BlockVisibilityInfo clientId={ renderedBlockClientId } />
+			<ViewportVisibilityInfo clientId={ renderedBlockClientId } />
 			{ window?.__experimentalContentOnlyPatternInsertion && (
 				<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 } />
 					) }
 					<ContentTab contentClientIds={ contentClientIds } />
 					<InspectorControls.Slot group="content" />
+					<InspectorControls.Slot group="list" />
 					{ ! isSectionBlock && (
-						<StyleInspectorSlots
-							blockName={ blockName }
-							showListControls
-						/>
+						<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

@@ -106,6 +106,7 @@ function BlockListBlock( {
 	const {
 		mayDisplayControls,
 		mayDisplayParentControls,
+		isSelectionWithinCurrentSection,
 		themeSupportsLayout,
 		...context
 	} = useContext( PrivateBlockContext );
@@ -135,6 +136,7 @@ function BlockListBlock( {
 			}
 			mayDisplayControls={ mayDisplayControls }
 			mayDisplayParentControls={ mayDisplayParentControls }
+			mayDisplayPatternEditingControls={ isSelectionWithinCurrentSection }
 			blockEditingMode={ context.blockEditingMode }
 			isPreviewMode={ context.isPreviewMode }
 		/>
@@ -231,6 +233,7 @@ function BlockListBlock( {
 			value={ {
 				wrapperProps: updatedWrapperProps,
 				isAligned,
+				isSelectionWithinCurrentSection,
 				...context,
 			} }
 		>

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

@@ -195,6 +195,7 @@ function BlockListBlock( {
 		isParentSelected,
 		order,
 		mayDisplayControls,
+		mayDisplayPatternEditingControls,
 		blockEditingMode,
 	} = useSelect(
 		( select ) => {
@@ -263,6 +264,7 @@ function BlockListBlock( {
 						getMultiSelectedBlockClientIds().every(
 							( id ) => getBlockName( id ) === name
 						) ),
+				mayDisplayPatternEditingControls: false, // Section/pattern editing not yet supported on native
 				blockEditingMode: getBlockEditingMode( clientId ),
 			};
 		},
@@ -403,6 +405,9 @@ function BlockListBlock( {
 							}
 							wrapperProps={ wrapperProps }
 							mayDisplayControls={ mayDisplayControls }
+							mayDisplayPatternEditingControls={
+								mayDisplayPatternEditingControls
+							}
 							blockEditingMode={ blockEditingMode }
 						/>
 						<View onLayout={ onLayout } />

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { isReusableBlock, isTemplatePart } from '@wordpress/blocks';
 import { isTextField } from '@wordpress/dom';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -31,6 +32,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 		hasMultiSelection,
 		isSectionBlock,
 		editedContentOnlySection,
+		getBlock,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		insertAfterBlock,
@@ -128,15 +130,13 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				const rect = node.getBoundingClientRect();
 
-				const clone = node.cloneNode( true );
-				clone.style.visibility = 'hidden';
-				// Maybe remove the clone now that it's relative?
-				clone.style.display = 'none';
-
-				// Remove the id and leave it on the clone so that drop target
-				// calculations are correct.
+				// Remove the id and leave it on a shallow clone so that drop
+				// target calculations are correct.
 				const id = node.id;
+				const clone = node.cloneNode();
+				clone.style.display = 'none';
 				node.id = null;
+				node.after( clone );
 
 				let _scale = 1;
 
@@ -154,8 +154,6 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				const inverted = 1 / _scale;
 
-				node.after( clone );
-
 				const originalNodeProperties = {};
 				for ( const property of [
 					'transform',
@@ -225,32 +223,41 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				}
 
 				let hasStarted = false;
+				let lastClientX = originClientX;
+				let lastClientY = originClientY;
+
+				function dragOver( e ) {
+					// Only trigger `over` if the mouse has moved.
+					if (
+						e.clientX === lastClientX &&
+						e.clientY === lastClientY
+					) {
+						return;
+					}
+					lastClientX = e.clientX;
+					lastClientY = e.clientY;
+					over();
+				}
 
-				function over( e ) {
+				function over() {
 					if ( ! hasStarted ) {
 						hasStarted = true;
 						node.style.pointerEvents = 'none';
 					}
+					const pointerYDelta = lastClientY - originClientY;
+					const pointerXDelta = lastClientX - originClientX;
 					const scrollTop = defaultView.scrollY;
 					const scrollLeft = defaultView.scrollX;
-					node.style.top = `${
-						( e.clientY -
-							originClientY +
-							scrollTop -
-							originScrollTop ) *
-						inverted
-					}px`;
-					node.style.left = `${
-						( e.clientX -
-							originClientX +
-							scrollLeft -
-							originScrollLeft ) *
-						inverted
-					}px`;
+					const scrollTopDelta = scrollTop - originScrollTop;
+					const scrollLeftDelta = scrollLeft - originScrollLeft;
+					const topDelta = pointerYDelta + scrollTopDelta;
+					const leftDelta = pointerXDelta + scrollLeftDelta;
+					node.style.top = `${ topDelta * inverted }px`;
+					node.style.left = `${ leftDelta * inverted }px`;
 				}
 
 				function end() {
-					ownerDocument.removeEventListener( 'dragover', over );
+					ownerDocument.removeEventListener( 'dragover', dragOver );
 					ownerDocument.removeEventListener( 'dragend', end );
 					ownerDocument.removeEventListener( 'drop', end );
 					ownerDocument.removeEventListener( 'scroll', over );
@@ -271,7 +278,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 					);
 				}
 
-				ownerDocument.addEventListener( 'dragover', over );
+				ownerDocument.addEventListener( 'dragover', dragOver );
 				ownerDocument.addEventListener( 'dragend', end );
 				ownerDocument.addEventListener( 'drop', end );
 				ownerDocument.addEventListener( 'scroll', over );
@@ -294,12 +301,22 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			 */
 			function onDoubleClick( event ) {
 				const isSection = isSectionBlock( clientId );
+				const block = getBlock( clientId );
+				const isSyncedPattern = isReusableBlock( block );
+				const isTemplatePartBlock = isTemplatePart( block );
 				const isAlreadyEditing = editedContentOnlySection === clientId;
 
-				if ( isSection && ! isAlreadyEditing ) {
-					event.preventDefault();
-					editContentOnlySection( clientId );
+				if (
+					! isSection ||
+					isAlreadyEditing ||
+					isSyncedPattern ||
+					isTemplatePartBlock
+				) {
+					return;
 				}
+
+				event.preventDefault();
+				editContentOnlySection( clientId );
 			}
 
 			// Only add double-click listener if experimental flag is enabled
@@ -319,6 +336,9 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			clientId,
 			isSelected,
 			getBlockRootClientId,
+			getBlock,
+			isReusableBlock,
+			isTemplatePart,
 			insertAfterBlock,
 			removeBlock,
 			isZoomOut,

package/src/components/block-patterns-list/stories/index.story.jsx

@@ -9,7 +9,7 @@ import { fn } from 'storybook/test';
 import BlockPatternsList from '../';
 import { ExperimentalBlockEditorProvider } from '../../provider';
 import patterns from './fixtures';
-import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-style/style.css';
+import blockLibraryStyles from '../../../../../block-library/build-style/style.css?raw';
 
 const blockEditorSettings = {
 	styles: [ { css: blockLibraryStyles } ],

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

@@ -16,22 +16,26 @@ import {
  * Internal dependencies
  */
 import { useBlockPreview } from '../';
+import { useBlockProps } from '../../block-list/use-block-props';
 
 describe( 'useBlockPreview', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			save: () => (
-				<div>
+				<div { ...useBlockProps.save() }>
 					Test block save view
 					<button>Button</button>
 				</div>
 			),
-			edit: () => (
-				<div>
-					Test block edit view
-					<button>Button</button>
-				</div>
-			),
+			edit: function Edit() {
+				return (
+					<div { ...useBlockProps() }>
+						Test block edit view
+						<button>Button</button>
+					</div>
+				);
+			},
 			category: 'text',
 			title: 'test block',
 		} );

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

@@ -21,7 +21,7 @@ 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 { BlockVisibilityMenuItem } from '../block-visibility';
+import { BlockVisibilityViewportMenuItem } from '../block-visibility';
 import { EditSectionMenuItem } from './edit-section-menu-item';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
@@ -116,7 +116,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 							/>
 						) }
 						{ showVisibilityButton && (
-							<BlockVisibilityMenuItem
+							<BlockVisibilityViewportMenuItem
 								clientIds={ selectedClientIds }
 							/>
 						) }