@wordpress/block-editor 15.23.0 → 16.0.0

package/build/utils/block-bindings.cjs

@@ -20,12 +20,40 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/block-editor/src/utils/block-bindings.ts
 var block_bindings_exports = {};
 __export(block_bindings_exports, {
+  getBlockBindingsContext: () => getBlockBindingsContext,
   hasPatternOverridesDefaultBinding: () => hasPatternOverridesDefaultBinding,
   replacePatternOverridesDefaultBinding: () => replacePatternOverridesDefaultBinding
 });
 module.exports = __toCommonJS(block_bindings_exports);
 var DEFAULT_ATTRIBUTE = "__default";
 var PATTERN_OVERRIDES_SOURCE = "core/pattern-overrides";
+var EMPTY_CONTEXT = {};
+function getBlockBindingsContext(blockContext, blockTypeUsesContext, sources) {
+  let context;
+  if (blockTypeUsesContext) {
+    for (const [key, value] of Object.entries(blockContext)) {
+      if (blockTypeUsesContext.includes(key)) {
+        if (context === void 0) {
+          context = {};
+        }
+        context[key] = value;
+      }
+    }
+  }
+  if (sources) {
+    for (const source of sources) {
+      source?.usesContext?.forEach((key) => {
+        if (key in blockContext) {
+          if (context === void 0) {
+            context = {};
+          }
+          context[key] = blockContext[key];
+        }
+      });
+    }
+  }
+  return context ?? EMPTY_CONTEXT;
+}
 function hasPatternOverridesDefaultBinding(bindings) {
   return bindings?.[DEFAULT_ATTRIBUTE]?.source === PATTERN_OVERRIDES_SOURCE;
 }
@@ -42,6 +70,7 @@ function replacePatternOverridesDefaultBinding(bindings, supportedAttributes) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getBlockBindingsContext,
   hasPatternOverridesDefaultBinding,
   replacePatternOverridesDefaultBinding
 });

package/build/utils/block-bindings.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/block-bindings.ts"],
-  "sourcesContent": ["type Binding = { source?: string };\ntype Bindings = Record< string, Binding >;\n\nconst DEFAULT_ATTRIBUTE = '__default';\nconst PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';\n\n/**\n * Checks if the block has the `__default` binding for pattern overrides.\n *\n * @param bindings A block's bindings from the metadata attribute.\n *\n * @return Whether the block has the `__default` binding for pattern overrides.\n */\nexport function hasPatternOverridesDefaultBinding(\n\tbindings: Bindings | undefined | null\n): bindings is Bindings {\n\treturn bindings?.[ DEFAULT_ATTRIBUTE ]?.source === PATTERN_OVERRIDES_SOURCE;\n}\n\n/**\n * Returns the bindings with the `__default` binding for pattern overrides\n * replaced with the full-set of supported attributes. e.g.:\n *\n * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`\n * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`\n *\n * @param bindings            A block's bindings from the metadata attribute.\n * @param supportedAttributes The block's attributes which are supported by block bindings.\n *\n * @return The bindings with default replaced for pattern overrides.\n */\nexport function replacePatternOverridesDefaultBinding(\n\tbindings: Bindings | undefined | null,\n\tsupportedAttributes: string[]\n) {\n\t// The `__default` binding currently only works for pattern overrides.\n\tif ( ! hasPatternOverridesDefaultBinding( bindings ) ) {\n\t\treturn bindings;\n\t}\n\n\tconst bindingsWithDefaults: Bindings = {};\n\tfor ( const attributeName of supportedAttributes ) {\n\t\t// If the block has mixed binding sources, retain any non pattern override bindings.\n\t\tconst bindingSource = bindings[ attributeName ]\n\t\t\t? bindings[ attributeName ]\n\t\t\t: { source: PATTERN_OVERRIDES_SOURCE };\n\t\tbindingsWithDefaults[ attributeName ] = bindingSource;\n\t}\n\n\treturn bindingsWithDefaults;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,IAAM,oBAAoB;AAC1B,IAAM,2BAA2B;AAS1B,SAAS,kCACf,UACuB;AACvB,SAAO,WAAY,iBAAkB,GAAG,WAAW;AACpD;AAcO,SAAS,sCACf,UACA,qBACC;AAED,MAAK,CAAE,kCAAmC,QAAS,GAAI;AACtD,WAAO;AAAA,EACR;AAEA,QAAM,uBAAiC,CAAC;AACxC,aAAY,iBAAiB,qBAAsB;AAElD,UAAM,gBAAgB,SAAU,aAAc,IAC3C,SAAU,aAAc,IACxB,EAAE,QAAQ,yBAAyB;AACtC,yBAAsB,aAAc,IAAI;AAAA,EACzC;AAEA,SAAO;AACR;",
+  "sourcesContent": ["type Binding = { source?: string };\ntype Bindings = Record< string, Binding >;\ntype BlockBindingsSource = { usesContext?: readonly string[] };\n\nconst DEFAULT_ATTRIBUTE = '__default';\nconst PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';\nconst EMPTY_CONTEXT: Record< string, unknown > = {};\n\n/**\n * Assembles the context made available to a block's bindings sources: the\n * entries of the surrounding block context declared by the block type's\n * `usesContext`, plus the entries declared by the given sources' `usesContext`.\n *\n * Only entries present in the surrounding block context are copied — a\n * declared key with no provider never becomes an own (undefined-valued) key\n * of the result, so `key in context` checks stay meaningful.\n *\n * @param blockContext         The surrounding block context.\n * @param blockTypeUsesContext The block type's declared context needs.\n * @param sources              Block-bindings sources whose declared context to add.\n *\n * @return The context for resolving the block's bindings.\n */\nexport function getBlockBindingsContext(\n\tblockContext: Record< string, unknown >,\n\tblockTypeUsesContext: readonly string[] | undefined,\n\tsources: readonly ( BlockBindingsSource | undefined )[] | undefined\n): Record< string, unknown > {\n\tlet context: Record< string, unknown > | undefined;\n\tif ( blockTypeUsesContext ) {\n\t\tfor ( const [ key, value ] of Object.entries( blockContext ) ) {\n\t\t\tif ( blockTypeUsesContext.includes( key ) ) {\n\t\t\t\tif ( context === undefined ) {\n\t\t\t\t\tcontext = {};\n\t\t\t\t}\n\t\t\t\tcontext[ key ] = value;\n\t\t\t}\n\t\t}\n\t}\n\tif ( sources ) {\n\t\tfor ( const source of sources ) {\n\t\t\tsource?.usesContext?.forEach( ( key ) => {\n\t\t\t\tif ( key in blockContext ) {\n\t\t\t\t\tif ( context === undefined ) {\n\t\t\t\t\t\tcontext = {};\n\t\t\t\t\t}\n\t\t\t\t\tcontext[ key ] = blockContext[ key ];\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\t// A stable empty object avoids re-renders for consumers that compare the\n\t// context by reference.\n\treturn context ?? EMPTY_CONTEXT;\n}\n\n/**\n * Checks if the block has the `__default` binding for pattern overrides.\n *\n * @param bindings A block's bindings from the metadata attribute.\n *\n * @return Whether the block has the `__default` binding for pattern overrides.\n */\nexport function hasPatternOverridesDefaultBinding(\n\tbindings: Bindings | undefined | null\n): bindings is Bindings {\n\treturn bindings?.[ DEFAULT_ATTRIBUTE ]?.source === PATTERN_OVERRIDES_SOURCE;\n}\n\n/**\n * Returns the bindings with the `__default` binding for pattern overrides\n * replaced with the full-set of supported attributes. e.g.:\n *\n * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`\n * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`\n *\n * @param bindings            A block's bindings from the metadata attribute.\n * @param supportedAttributes The block's attributes which are supported by block bindings.\n *\n * @return The bindings with default replaced for pattern overrides.\n */\nexport function replacePatternOverridesDefaultBinding(\n\tbindings: Bindings | undefined | null,\n\tsupportedAttributes: string[]\n) {\n\t// The `__default` binding currently only works for pattern overrides.\n\tif ( ! hasPatternOverridesDefaultBinding( bindings ) ) {\n\t\treturn bindings;\n\t}\n\n\tconst bindingsWithDefaults: Bindings = {};\n\tfor ( const attributeName of supportedAttributes ) {\n\t\t// If the block has mixed binding sources, retain any non pattern override bindings.\n\t\tconst bindingSource = bindings[ attributeName ]\n\t\t\t? bindings[ attributeName ]\n\t\t\t: { source: PATTERN_OVERRIDES_SOURCE };\n\t\tbindingsWithDefaults[ attributeName ] = bindingSource;\n\t}\n\n\treturn bindingsWithDefaults;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,IAAM,oBAAoB;AAC1B,IAAM,2BAA2B;AACjC,IAAM,gBAA2C,CAAC;AAiB3C,SAAS,wBACf,cACA,sBACA,SAC4B;AAC5B,MAAI;AACJ,MAAK,sBAAuB;AAC3B,eAAY,CAAE,KAAK,KAAM,KAAK,OAAO,QAAS,YAAa,GAAI;AAC9D,UAAK,qBAAqB,SAAU,GAAI,GAAI;AAC3C,YAAK,YAAY,QAAY;AAC5B,oBAAU,CAAC;AAAA,QACZ;AACA,gBAAS,GAAI,IAAI;AAAA,MAClB;AAAA,IACD;AAAA,EACD;AACA,MAAK,SAAU;AACd,eAAY,UAAU,SAAU;AAC/B,cAAQ,aAAa,QAAS,CAAE,QAAS;AACxC,YAAK,OAAO,cAAe;AAC1B,cAAK,YAAY,QAAY;AAC5B,sBAAU,CAAC;AAAA,UACZ;AACA,kBAAS,GAAI,IAAI,aAAc,GAAI;AAAA,QACpC;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD;AAGA,SAAO,WAAW;AACnB;AASO,SAAS,kCACf,UACuB;AACvB,SAAO,WAAY,iBAAkB,GAAG,WAAW;AACpD;AAcO,SAAS,sCACf,UACA,qBACC;AAED,MAAK,CAAE,kCAAmC,QAAS,GAAI;AACtD,WAAO;AAAA,EACR;AAEA,QAAM,uBAAiC,CAAC;AACxC,aAAY,iBAAiB,qBAAsB;AAElD,UAAM,gBAAgB,SAAU,aAAc,IAC3C,SAAU,aAAc,IACxB,EAAE,QAAQ,yBAAyB;AACtC,yBAAsB,aAAc,IAAI;AAAA,EACzC;AAEA,SAAO;AACR;",
   "names": []
 }

package/build/utils/dom.cjs

@@ -23,6 +23,7 @@ __export(dom_exports, {
   WITH_OVERFLOW_ELEMENT_BLOCKS: () => WITH_OVERFLOW_ELEMENT_BLOCKS,
   getBlockClientId: () => getBlockClientId,
   getElementBounds: () => getElementBounds,
+  getSelectionEditableElement: () => getSelectionEditableElement,
   isElementVisible: () => isElementVisible,
   isInSameBlock: () => isInSameBlock,
   isInsideRootBlock: () => isInsideRootBlock,
@@ -41,6 +42,18 @@ function isInsideRootBlock(blockElement, element) {
   );
   return parentBlock === blockElement;
 }
+function getSelectionEditableElement(selection, root) {
+  const { anchorNode, focusNode } = selection;
+  if (!anchorNode || !focusNode) {
+    return;
+  }
+  const element = anchorNode.nodeType === anchorNode.ELEMENT_NODE ? anchorNode : anchorNode.parentElement;
+  const editable = element?.closest('[contenteditable="true"]');
+  if (!editable || editable === root || !editable.contains(focusNode)) {
+    return;
+  }
+  return editable;
+}
 function getBlockClientId(node) {
   while (node && node.nodeType !== node.ELEMENT_NODE) {
     node = node.parentNode;
@@ -129,6 +142,7 @@ function getElementBounds(element) {
   WITH_OVERFLOW_ELEMENT_BLOCKS,
   getBlockClientId,
   getElementBounds,
+  getSelectionEditableElement,
   isElementVisible,
   isInSameBlock,
   isInsideRootBlock,

package/build/utils/dom.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/dom.ts"],
-  "sourcesContent": ["const BLOCK_SELECTOR = '.block-editor-block-list__block';\nconst APPENDER_SELECTOR = '.block-list-appender';\nconst BLOCK_APPENDER_CLASS = '.block-editor-button-block-appender';\n\n/**\n * Returns true if two elements are contained within the same block.\n *\n * @param a First element.\n * @param b Second element.\n *\n * @return Whether elements are in the same block.\n */\nexport function isInSameBlock( a: Element, b: Element ) {\n\treturn a.closest( BLOCK_SELECTOR ) === b.closest( BLOCK_SELECTOR );\n}\n\n/**\n * Returns true if an element is considered part of the block and not its inner\n * blocks or appender.\n *\n * @param blockElement Block container element.\n * @param element      Element.\n *\n * @return Whether an element is considered part of the block and not\n *         its inner blocks or appender.\n */\nexport function isInsideRootBlock( blockElement: Element, element: Element ) {\n\tconst parentBlock = element.closest(\n\t\t[ BLOCK_SELECTOR, APPENDER_SELECTOR, BLOCK_APPENDER_CLASS ].join( ',' )\n\t);\n\treturn parentBlock === blockElement;\n}\n\n/**\n * Finds the block client ID given any DOM node inside the block.\n *\n * @param node DOM node.\n *\n * @return Client ID or undefined if the node is not part of\n *         a block.\n */\nexport function getBlockClientId( node: Node | null ) {\n\twhile ( node && node.nodeType !== node.ELEMENT_NODE ) {\n\t\tnode = node.parentNode;\n\t}\n\n\tif ( ! node ) {\n\t\treturn;\n\t}\n\n\tconst elementNode = node as Element;\n\tconst blockNode = elementNode.closest( BLOCK_SELECTOR );\n\n\tif ( ! blockNode ) {\n\t\treturn;\n\t}\n\n\treturn blockNode.id.slice( 'block-'.length );\n}\n\n/**\n * Calculates the union of two rectangles.\n *\n * @param rect1 First rectangle.\n * @param rect2 Second rectangle.\n * @return Union of the two rectangles.\n */\nexport function rectUnion( rect1: DOMRect, rect2: DOMRect ) {\n\tconst left = Math.min( rect1.left, rect2.left );\n\tconst right = Math.max( rect1.right, rect2.right );\n\tconst bottom = Math.max( rect1.bottom, rect2.bottom );\n\tconst top = Math.min( rect1.top, rect2.top );\n\n\treturn new window.DOMRectReadOnly( left, top, right - left, bottom - top );\n}\n\n/**\n * Returns whether an element is visible.\n *\n * @param element Element.\n * @return Whether the element is visible.\n */\nexport function isElementVisible( element: Element ) {\n\tconst viewport = element.ownerDocument.defaultView;\n\tif ( ! viewport ) {\n\t\treturn false;\n\t}\n\n\t// Check for <VisuallyHidden> components.\n\tif ( element.hasAttribute( 'data-visually-hidden' ) ) {\n\t\treturn false;\n\t}\n\n\tconst bounds = element.getBoundingClientRect();\n\tif ( bounds.width === 0 || bounds.height === 0 ) {\n\t\treturn false;\n\t}\n\n\t// Older browsers, e.g. Safari < 17.4 may not support the `checkVisibility` method.\n\tif ( element.checkVisibility ) {\n\t\treturn element.checkVisibility?.( {\n\t\t\topacityProperty: true,\n\t\t\tcontentVisibilityAuto: true,\n\t\t\tvisibilityProperty: true,\n\t\t} );\n\t}\n\n\tconst style = viewport.getComputedStyle( element );\n\n\tif (\n\t\tstyle.display === 'none' ||\n\t\tstyle.visibility === 'hidden' ||\n\t\tstyle.opacity === '0'\n\t) {\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n\n/**\n * Checks if the element is scrollable.\n *\n * @param element Element.\n * @return True if the element is scrollable.\n */\nfunction isScrollable( element: Element ) {\n\tconst style = window.getComputedStyle( element );\n\treturn (\n\t\tstyle.overflowX === 'auto' ||\n\t\tstyle.overflowX === 'scroll' ||\n\t\tstyle.overflowY === 'auto' ||\n\t\tstyle.overflowY === 'scroll'\n\t);\n}\n\nexport const WITH_OVERFLOW_ELEMENT_BLOCKS = [ 'core/navigation' ];\n/**\n * Returns the bounding rectangle of an element, with special handling for blocks\n * that have visible overflowing children (defined in WITH_OVERFLOW_ELEMENT_BLOCKS).\n *\n * For blocks like Navigation that can have overflowing elements (e.g. submenus),\n * this function calculates the combined bounds of both the parent and its visible\n * children. The returned rect may extend beyond the viewport.\n * The returned rect represents the full extent of the element and its visible\n * children, which may extend beyond the viewport.\n *\n * @param element Element.\n * @return Bounding client rect of the element and its visible children.\n */\nexport function getElementBounds( element: Element ) {\n\tconst viewport = element.ownerDocument.defaultView;\n\n\tif ( ! viewport ) {\n\t\treturn new window.DOMRectReadOnly();\n\t}\n\n\tlet bounds = element.getBoundingClientRect();\n\tconst dataType = element.getAttribute( 'data-type' );\n\n\t/*\n\t * For blocks with overflowing elements (like Navigation), include the bounds\n\t * of visible children that extend beyond the parent container.\n\t */\n\tif ( dataType && WITH_OVERFLOW_ELEMENT_BLOCKS.includes( dataType ) ) {\n\t\tconst stack = [ element ];\n\t\tlet currentElement;\n\n\t\twhile ( ( currentElement = stack.pop() ) ) {\n\t\t\t// Children won’t affect bounds unless the element is not scrollable.\n\t\t\tif ( ! isScrollable( currentElement ) ) {\n\t\t\t\tfor ( const child of currentElement.children ) {\n\t\t\t\t\tif ( isElementVisible( child ) ) {\n\t\t\t\t\t\tconst childBounds = child.getBoundingClientRect();\n\t\t\t\t\t\tbounds = rectUnion( bounds, childBounds );\n\t\t\t\t\t\tstack.push( child );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/*\n\t * Take into account the outer horizontal limits of the container in which\n\t * an element is supposed to be \"visible\". For example, if an element is\n\t * positioned -10px to the left of the window x value (0), this function\n\t * discounts the negative overhang because it's not visible and therefore\n\t * not to be counted in the visibility calculations. Top and bottom values\n\t * are not accounted for to accommodate vertical scroll.\n\t */\n\tconst left = Math.max( bounds.left, 0 );\n\tconst right = Math.min( bounds.right, viewport.innerWidth );\n\tbounds = new window.DOMRectReadOnly(\n\t\tleft,\n\t\tbounds.top,\n\t\tright - left,\n\t\tbounds.height\n\t);\n\n\treturn bounds;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["const BLOCK_SELECTOR = '.block-editor-block-list__block';\nconst APPENDER_SELECTOR = '.block-list-appender';\nconst BLOCK_APPENDER_CLASS = '.block-editor-button-block-appender';\n\n/**\n * Returns true if two elements are contained within the same block.\n *\n * @param a First element.\n * @param b Second element.\n *\n * @return Whether elements are in the same block.\n */\nexport function isInSameBlock( a: Element, b: Element ) {\n\treturn a.closest( BLOCK_SELECTOR ) === b.closest( BLOCK_SELECTOR );\n}\n\n/**\n * Returns true if an element is considered part of the block and not its inner\n * blocks or appender.\n *\n * @param blockElement Block container element.\n * @param element      Element.\n *\n * @return Whether an element is considered part of the block and not\n *         its inner blocks or appender.\n */\nexport function isInsideRootBlock( blockElement: Element, element: Element ) {\n\tconst parentBlock = element.closest(\n\t\t[ BLOCK_SELECTOR, APPENDER_SELECTOR, BLOCK_APPENDER_CLASS ].join( ',' )\n\t);\n\treturn parentBlock === blockElement;\n}\n\n/**\n * Returns the editable element containing the selection, if the selection is\n * fully contained within one. The root element (an editable wrapper) does not\n * count as a containing editable element.\n *\n * @param selection The selection.\n * @param root      The editable wrapper element.\n *\n * @return The editable element containing the selection.\n */\nexport function getSelectionEditableElement(\n\tselection: Selection,\n\troot: Element\n) {\n\tconst { anchorNode, focusNode } = selection;\n\n\tif ( ! anchorNode || ! focusNode ) {\n\t\treturn;\n\t}\n\n\tconst element =\n\t\tanchorNode.nodeType === anchorNode.ELEMENT_NODE\n\t\t\t? ( anchorNode as Element )\n\t\t\t: anchorNode.parentElement;\n\tconst editable = element?.closest( '[contenteditable=\"true\"]' );\n\n\tif ( ! editable || editable === root || ! editable.contains( focusNode ) ) {\n\t\treturn;\n\t}\n\n\treturn editable;\n}\n\n/**\n * Finds the block client ID given any DOM node inside the block.\n *\n * @param node DOM node.\n *\n * @return Client ID or undefined if the node is not part of\n *         a block.\n */\nexport function getBlockClientId( node: Node | null ) {\n\twhile ( node && node.nodeType !== node.ELEMENT_NODE ) {\n\t\tnode = node.parentNode;\n\t}\n\n\tif ( ! node ) {\n\t\treturn;\n\t}\n\n\tconst elementNode = node as Element;\n\tconst blockNode = elementNode.closest( BLOCK_SELECTOR );\n\n\tif ( ! blockNode ) {\n\t\treturn;\n\t}\n\n\treturn blockNode.id.slice( 'block-'.length );\n}\n\n/**\n * Calculates the union of two rectangles.\n *\n * @param rect1 First rectangle.\n * @param rect2 Second rectangle.\n * @return Union of the two rectangles.\n */\nexport function rectUnion( rect1: DOMRect, rect2: DOMRect ) {\n\tconst left = Math.min( rect1.left, rect2.left );\n\tconst right = Math.max( rect1.right, rect2.right );\n\tconst bottom = Math.max( rect1.bottom, rect2.bottom );\n\tconst top = Math.min( rect1.top, rect2.top );\n\n\treturn new window.DOMRectReadOnly( left, top, right - left, bottom - top );\n}\n\n/**\n * Returns whether an element is visible.\n *\n * @param element Element.\n * @return Whether the element is visible.\n */\nexport function isElementVisible( element: Element ) {\n\tconst viewport = element.ownerDocument.defaultView;\n\tif ( ! viewport ) {\n\t\treturn false;\n\t}\n\n\t// Check for <VisuallyHidden> components.\n\tif ( element.hasAttribute( 'data-visually-hidden' ) ) {\n\t\treturn false;\n\t}\n\n\tconst bounds = element.getBoundingClientRect();\n\tif ( bounds.width === 0 || bounds.height === 0 ) {\n\t\treturn false;\n\t}\n\n\t// Older browsers, e.g. Safari < 17.4 may not support the `checkVisibility` method.\n\tif ( element.checkVisibility ) {\n\t\treturn element.checkVisibility?.( {\n\t\t\topacityProperty: true,\n\t\t\tcontentVisibilityAuto: true,\n\t\t\tvisibilityProperty: true,\n\t\t} );\n\t}\n\n\tconst style = viewport.getComputedStyle( element );\n\n\tif (\n\t\tstyle.display === 'none' ||\n\t\tstyle.visibility === 'hidden' ||\n\t\tstyle.opacity === '0'\n\t) {\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n\n/**\n * Checks if the element is scrollable.\n *\n * @param element Element.\n * @return True if the element is scrollable.\n */\nfunction isScrollable( element: Element ) {\n\tconst style = window.getComputedStyle( element );\n\treturn (\n\t\tstyle.overflowX === 'auto' ||\n\t\tstyle.overflowX === 'scroll' ||\n\t\tstyle.overflowY === 'auto' ||\n\t\tstyle.overflowY === 'scroll'\n\t);\n}\n\nexport const WITH_OVERFLOW_ELEMENT_BLOCKS = [ 'core/navigation' ];\n/**\n * Returns the bounding rectangle of an element, with special handling for blocks\n * that have visible overflowing children (defined in WITH_OVERFLOW_ELEMENT_BLOCKS).\n *\n * For blocks like Navigation that can have overflowing elements (e.g. submenus),\n * this function calculates the combined bounds of both the parent and its visible\n * children. The returned rect may extend beyond the viewport.\n * The returned rect represents the full extent of the element and its visible\n * children, which may extend beyond the viewport.\n *\n * @param element Element.\n * @return Bounding client rect of the element and its visible children.\n */\nexport function getElementBounds( element: Element ) {\n\tconst viewport = element.ownerDocument.defaultView;\n\n\tif ( ! viewport ) {\n\t\treturn new window.DOMRectReadOnly();\n\t}\n\n\tlet bounds = element.getBoundingClientRect();\n\tconst dataType = element.getAttribute( 'data-type' );\n\n\t/*\n\t * For blocks with overflowing elements (like Navigation), include the bounds\n\t * of visible children that extend beyond the parent container.\n\t */\n\tif ( dataType && WITH_OVERFLOW_ELEMENT_BLOCKS.includes( dataType ) ) {\n\t\tconst stack = [ element ];\n\t\tlet currentElement;\n\n\t\twhile ( ( currentElement = stack.pop() ) ) {\n\t\t\t// Children won’t affect bounds unless the element is not scrollable.\n\t\t\tif ( ! isScrollable( currentElement ) ) {\n\t\t\t\tfor ( const child of currentElement.children ) {\n\t\t\t\t\tif ( isElementVisible( child ) ) {\n\t\t\t\t\t\tconst childBounds = child.getBoundingClientRect();\n\t\t\t\t\t\tbounds = rectUnion( bounds, childBounds );\n\t\t\t\t\t\tstack.push( child );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/*\n\t * Take into account the outer horizontal limits of the container in which\n\t * an element is supposed to be \"visible\". For example, if an element is\n\t * positioned -10px to the left of the window x value (0), this function\n\t * discounts the negative overhang because it's not visible and therefore\n\t * not to be counted in the visibility calculations. Top and bottom values\n\t * are not accounted for to accommodate vertical scroll.\n\t */\n\tconst left = Math.max( bounds.left, 0 );\n\tconst right = Math.min( bounds.right, viewport.innerWidth );\n\tbounds = new window.DOMRectReadOnly(\n\t\tleft,\n\t\tbounds.top,\n\t\tright - left,\n\t\tbounds.height\n\t);\n\n\treturn bounds;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/autocompleters/block.mjs

@@ -100,7 +100,14 @@ function createBlockCompleter() {
       return !(/\S/.test(before) || /\S/.test(after));
     },
     getOptionCompletion(inserterItem) {
-      const { name, initialAttributes, innerBlocks, syncStatus, blocks } = inserterItem;
+      const {
+        name,
+        initialAttributes,
+        innerBlocks,
+        innerContent,
+        syncStatus,
+        blocks
+      } = inserterItem;
       return {
         action: "replace",
         value: syncStatus === "unsynced" ? (blocks ?? []).map(
@@ -110,7 +117,8 @@ function createBlockCompleter() {
           initialAttributes,
           createBlocksFromInnerBlocksTemplate(
             innerBlocks
-          )
+          ),
+          innerContent
         )
       };
     }

package/build-module/autocompleters/block.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/autocompleters/block.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tcloneBlock,\n\tcreateBlock,\n\tcreateBlocksFromInnerBlocksTemplate,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { searchBlockItems } from '../components/inserter/search-items';\nimport useBlockTypesState from '../components/inserter/hooks/use-block-types-state';\nimport BlockIcon from '../components/block-icon';\nimport { store as blockEditorStore } from '../store';\nimport { orderBy } from '../utils/sorting';\nimport { orderInserterBlockItems } from '../utils/order-inserter-block-items';\n\nconst noop = () => {};\nconst SHOWN_BLOCK_TYPES = 9;\n\n/**\n * Creates a blocks repeater for replacing the current block with a selected block type.\n *\n * @return {Object} A blocks completer.\n */\nfunction createBlockCompleter() {\n\treturn {\n\t\tname: 'blocks',\n\t\tclassName: 'block-editor-autocompleters__block',\n\t\ttriggerPrefix: '/',\n\n\t\tuseItems( filterValue ) {\n\t\t\tconst { rootClientId, selectedBlockId, prioritizedBlocks } =\n\t\t\t\tuseSelect( ( select ) => {\n\t\t\t\t\tconst {\n\t\t\t\t\t\tgetSelectedBlockClientId,\n\t\t\t\t\t\tgetBlock,\n\t\t\t\t\t\tgetBlockListSettings,\n\t\t\t\t\t\tgetBlockRootClientId,\n\t\t\t\t\t} = select( blockEditorStore );\n\t\t\t\t\tconst { getActiveBlockVariation } = select( blocksStore );\n\t\t\t\t\tconst selectedBlockClientId = getSelectedBlockClientId();\n\t\t\t\t\tconst { name: blockName, attributes } = getBlock(\n\t\t\t\t\t\tselectedBlockClientId\n\t\t\t\t\t);\n\t\t\t\t\tconst activeBlockVariation = getActiveBlockVariation(\n\t\t\t\t\t\tblockName,\n\t\t\t\t\t\tattributes\n\t\t\t\t\t);\n\t\t\t\t\tconst _rootClientId = getBlockRootClientId(\n\t\t\t\t\t\tselectedBlockClientId\n\t\t\t\t\t);\n\t\t\t\t\treturn {\n\t\t\t\t\t\tselectedBlockId: activeBlockVariation\n\t\t\t\t\t\t\t? `${ blockName }/${ activeBlockVariation.name }`\n\t\t\t\t\t\t\t: blockName,\n\t\t\t\t\t\trootClientId: _rootClientId,\n\t\t\t\t\t\tprioritizedBlocks:\n\t\t\t\t\t\t\tgetBlockListSettings( _rootClientId )\n\t\t\t\t\t\t\t\t?.prioritizedInserterBlocks,\n\t\t\t\t\t};\n\t\t\t\t}, [] );\n\t\t\tconst [ items, categories, collections ] = useBlockTypesState(\n\t\t\t\trootClientId,\n\t\t\t\tnoop,\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\tconst filteredItems = useMemo( () => {\n\t\t\t\tconst initialFilteredItems = !! filterValue.trim()\n\t\t\t\t\t? searchBlockItems(\n\t\t\t\t\t\t\titems,\n\t\t\t\t\t\t\tcategories,\n\t\t\t\t\t\t\tcollections,\n\t\t\t\t\t\t\tfilterValue\n\t\t\t\t\t  )\n\t\t\t\t\t: orderInserterBlockItems(\n\t\t\t\t\t\t\torderBy( items, 'frecency', 'desc' ),\n\t\t\t\t\t\t\tprioritizedBlocks\n\t\t\t\t\t  );\n\n\t\t\t\treturn initialFilteredItems\n\t\t\t\t\t.filter( ( item ) => item.id !== selectedBlockId )\n\t\t\t\t\t.slice( 0, SHOWN_BLOCK_TYPES );\n\t\t\t}, [\n\t\t\t\tfilterValue,\n\t\t\t\tselectedBlockId,\n\t\t\t\titems,\n\t\t\t\tcategories,\n\t\t\t\tcollections,\n\t\t\t\tprioritizedBlocks,\n\t\t\t] );\n\n\t\t\tconst options = useMemo(\n\t\t\t\t() =>\n\t\t\t\t\tfilteredItems.map( ( blockItem ) => {\n\t\t\t\t\t\tconst { title, icon, isDisabled } = blockItem;\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tkey: `block-${ blockItem.id }`,\n\t\t\t\t\t\t\tvalue: blockItem,\n\t\t\t\t\t\t\tlabel: (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<BlockIcon\n\t\t\t\t\t\t\t\t\t\tkey=\"icon\"\n\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\tshowColors\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tisDisabled,\n\t\t\t\t\t\t};\n\t\t\t\t\t} ),\n\t\t\t\t[ filteredItems ]\n\t\t\t);\n\n\t\t\treturn [ options ];\n\t\t},\n\t\tallowContext( before, after ) {\n\t\t\treturn ! ( /\\S/.test( before ) || /\\S/.test( after ) );\n\t\t},\n\t\tgetOptionCompletion( inserterItem ) {\n\t\t\tconst { name, initialAttributes, innerBlocks, syncStatus, blocks } =\n\t\t\t\tinserterItem;\n\n\t\t\treturn {\n\t\t\t\taction: 'replace',\n\t\t\t\tvalue:\n\t\t\t\t\tsyncStatus === 'unsynced'\n\t\t\t\t\t\t? ( blocks ?? [] ).map( ( block ) =>\n\t\t\t\t\t\t\t\tcloneBlock( block )\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: createBlock(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tinitialAttributes,\n\t\t\t\t\t\t\t\tcreateBlocksFromInnerBlocksTemplate(\n\t\t\t\t\t\t\t\t\tinnerBlocks\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t  ),\n\t\t\t};\n\t\t},\n\t};\n}\n\n/**\n * Creates a blocks repeater for replacing the current block with a selected block type.\n *\n * @return {Object} A blocks completer.\n */\nexport default createBlockCompleter();\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tcloneBlock,\n\tcreateBlock,\n\tcreateBlocksFromInnerBlocksTemplate,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { searchBlockItems } from '../components/inserter/search-items';\nimport useBlockTypesState from '../components/inserter/hooks/use-block-types-state';\nimport BlockIcon from '../components/block-icon';\nimport { store as blockEditorStore } from '../store';\nimport { orderBy } from '../utils/sorting';\nimport { orderInserterBlockItems } from '../utils/order-inserter-block-items';\n\nconst noop = () => {};\nconst SHOWN_BLOCK_TYPES = 9;\n\n/**\n * Creates a blocks repeater for replacing the current block with a selected block type.\n *\n * @return {Object} A blocks completer.\n */\nfunction createBlockCompleter() {\n\treturn {\n\t\tname: 'blocks',\n\t\tclassName: 'block-editor-autocompleters__block',\n\t\ttriggerPrefix: '/',\n\n\t\tuseItems( filterValue ) {\n\t\t\tconst { rootClientId, selectedBlockId, prioritizedBlocks } =\n\t\t\t\tuseSelect( ( select ) => {\n\t\t\t\t\tconst {\n\t\t\t\t\t\tgetSelectedBlockClientId,\n\t\t\t\t\t\tgetBlock,\n\t\t\t\t\t\tgetBlockListSettings,\n\t\t\t\t\t\tgetBlockRootClientId,\n\t\t\t\t\t} = select( blockEditorStore );\n\t\t\t\t\tconst { getActiveBlockVariation } = select( blocksStore );\n\t\t\t\t\tconst selectedBlockClientId = getSelectedBlockClientId();\n\t\t\t\t\tconst { name: blockName, attributes } = getBlock(\n\t\t\t\t\t\tselectedBlockClientId\n\t\t\t\t\t);\n\t\t\t\t\tconst activeBlockVariation = getActiveBlockVariation(\n\t\t\t\t\t\tblockName,\n\t\t\t\t\t\tattributes\n\t\t\t\t\t);\n\t\t\t\t\tconst _rootClientId = getBlockRootClientId(\n\t\t\t\t\t\tselectedBlockClientId\n\t\t\t\t\t);\n\t\t\t\t\treturn {\n\t\t\t\t\t\tselectedBlockId: activeBlockVariation\n\t\t\t\t\t\t\t? `${ blockName }/${ activeBlockVariation.name }`\n\t\t\t\t\t\t\t: blockName,\n\t\t\t\t\t\trootClientId: _rootClientId,\n\t\t\t\t\t\tprioritizedBlocks:\n\t\t\t\t\t\t\tgetBlockListSettings( _rootClientId )\n\t\t\t\t\t\t\t\t?.prioritizedInserterBlocks,\n\t\t\t\t\t};\n\t\t\t\t}, [] );\n\t\t\tconst [ items, categories, collections ] = useBlockTypesState(\n\t\t\t\trootClientId,\n\t\t\t\tnoop,\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\tconst filteredItems = useMemo( () => {\n\t\t\t\tconst initialFilteredItems = !! filterValue.trim()\n\t\t\t\t\t? searchBlockItems(\n\t\t\t\t\t\t\titems,\n\t\t\t\t\t\t\tcategories,\n\t\t\t\t\t\t\tcollections,\n\t\t\t\t\t\t\tfilterValue\n\t\t\t\t\t  )\n\t\t\t\t\t: orderInserterBlockItems(\n\t\t\t\t\t\t\torderBy( items, 'frecency', 'desc' ),\n\t\t\t\t\t\t\tprioritizedBlocks\n\t\t\t\t\t  );\n\n\t\t\t\treturn initialFilteredItems\n\t\t\t\t\t.filter( ( item ) => item.id !== selectedBlockId )\n\t\t\t\t\t.slice( 0, SHOWN_BLOCK_TYPES );\n\t\t\t}, [\n\t\t\t\tfilterValue,\n\t\t\t\tselectedBlockId,\n\t\t\t\titems,\n\t\t\t\tcategories,\n\t\t\t\tcollections,\n\t\t\t\tprioritizedBlocks,\n\t\t\t] );\n\n\t\t\tconst options = useMemo(\n\t\t\t\t() =>\n\t\t\t\t\tfilteredItems.map( ( blockItem ) => {\n\t\t\t\t\t\tconst { title, icon, isDisabled } = blockItem;\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tkey: `block-${ blockItem.id }`,\n\t\t\t\t\t\t\tvalue: blockItem,\n\t\t\t\t\t\t\tlabel: (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<BlockIcon\n\t\t\t\t\t\t\t\t\t\tkey=\"icon\"\n\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\tshowColors\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tisDisabled,\n\t\t\t\t\t\t};\n\t\t\t\t\t} ),\n\t\t\t\t[ filteredItems ]\n\t\t\t);\n\n\t\t\treturn [ options ];\n\t\t},\n\t\tallowContext( before, after ) {\n\t\t\treturn ! ( /\\S/.test( before ) || /\\S/.test( after ) );\n\t\t},\n\t\tgetOptionCompletion( inserterItem ) {\n\t\t\tconst {\n\t\t\t\tname,\n\t\t\t\tinitialAttributes,\n\t\t\t\tinnerBlocks,\n\t\t\t\tinnerContent,\n\t\t\t\tsyncStatus,\n\t\t\t\tblocks,\n\t\t\t} = inserterItem;\n\n\t\t\treturn {\n\t\t\t\taction: 'replace',\n\t\t\t\tvalue:\n\t\t\t\t\tsyncStatus === 'unsynced'\n\t\t\t\t\t\t? ( blocks ?? [] ).map( ( block ) =>\n\t\t\t\t\t\t\t\tcloneBlock( block )\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: createBlock(\n\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\tinitialAttributes,\n\t\t\t\t\t\t\t\tcreateBlocksFromInnerBlocksTemplate(\n\t\t\t\t\t\t\t\t\tinnerBlocks\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tinnerContent\n\t\t\t\t\t\t  ),\n\t\t\t};\n\t\t},\n\t};\n}\n\n/**\n * Creates a blocks repeater for replacing the current block with a selected block type.\n *\n * @return {Object} A blocks completer.\n */\nexport default createBlockCompleter();\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/background-image-control/index.mjs

@@ -428,7 +428,6 @@ function BackgroundSizeControls({
     /* @__PURE__ */ jsxs(
       ToggleGroupControl,
       {
-        size: "__unstable-large",
         label: __("Size"),
         value: currentValueForToggle,
         onChange: updateBackgroundSize,
@@ -480,7 +479,6 @@ function BackgroundSizeControls({
           "aria-label": __("Background image width"),
           onChange: updateBackgroundSize,
           value: sizeValue,
-          size: "__unstable-large",
           __unstableInputWidth: "100px",
           min: 0,
           placeholder: __("Auto"),

package/build-module/components/background-image-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/background-image-control/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tToggleControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalVStack as VStack,\n\tDropZone,\n\tFlexBlock,\n\tFocalPointPicker,\n\tMenuItem,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n\tDropdown,\n\tPlaceholder,\n\tSpinner,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tButton,\n} from '@wordpress/components';\nimport { VisuallyHidden } from '@wordpress/ui';\nimport { reset as resetIcon } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { getFilename } from '@wordpress/url';\nimport { useRef, useState, useEffect, useMemo } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { focus } from '@wordpress/dom';\nimport { isBlobURL } from '@wordpress/blob';\nimport { getResolvedValue } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { hasBackgroundImageValue } from '../global-styles/background-panel';\nimport { setImmutably } from '../../utils/object';\nimport MediaReplaceFlow from '../media-replace-flow';\nimport { store as blockEditorStore } from '../../store';\n\nimport {\n\tglobalStylesDataKey,\n\tglobalStylesLinksDataKey,\n} from '../../store/private-keys';\n\nconst IMAGE_BACKGROUND_TYPE = 'image';\n\nconst BACKGROUND_POPOVER_PROPS = {\n\tplacement: 'left-start',\n\toffset: 36,\n\tshift: true,\n\tclassName: 'block-editor-global-styles-background-panel__popover',\n};\nconst noop = () => {};\n\n/**\n * Focuses the toggle button.\n * @param {Object} containerRef - ref object containing current element\n */\nconst focusToggleButton = ( containerRef ) => {\n\t// Use requestAnimationFrame to ensure DOM updates are complete\n\twindow.requestAnimationFrame( () => {\n\t\tconst [ toggleButton ] = focus.tabbable.find( containerRef?.current );\n\t\tif ( ! toggleButton ) {\n\t\t\treturn;\n\t\t}\n\t\t// Focus the toggle button and close the dropdown menu.\n\t\t// This ensures similar behaviour as to selecting an image, where the dropdown is\n\t\t// closed and focus is redirected to the dropdown toggle button.\n\t\ttoggleButton.focus();\n\t} );\n};\n\n/**\n * Get the help text for the background size control.\n *\n * @param {string} value backgroundSize value.\n * @return {string}      Translated help text.\n */\nfunction backgroundSizeHelpText( value ) {\n\tif ( value === 'cover' || value === undefined ) {\n\t\treturn __( 'Image covers the space evenly.' );\n\t}\n\tif ( value === 'contain' ) {\n\t\treturn __( 'Image is contained without distortion.' );\n\t}\n\treturn __( 'Image has a fixed width.' );\n}\n\n/**\n * Converts decimal x and y coords from FocalPointPicker to percentage-based values\n * to use as backgroundPosition value.\n *\n * @param {{x?:number, y?:number}} value FocalPointPicker coords.\n * @return {string}      \t\t\t\t backgroundPosition value.\n */\nexport const coordsToBackgroundPosition = ( value ) => {\n\tif ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {\n\t\treturn undefined;\n\t}\n\n\tconst x = isNaN( value.x ) ? 0.5 : value.x;\n\tconst y = isNaN( value.y ) ? 0.5 : value.y;\n\n\treturn `${ x * 100 }% ${ y * 100 }%`;\n};\n\n/**\n * Converts backgroundPosition value to x and y coords for FocalPointPicker.\n *\n * @param {string} value backgroundPosition value.\n * @return {{x?:number, y?:number}}       FocalPointPicker coords.\n */\nexport const backgroundPositionToCoords = ( value ) => {\n\tif ( ! value ) {\n\t\treturn { x: undefined, y: undefined };\n\t}\n\n\tlet [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );\n\tx = isNaN( x ) ? undefined : x;\n\ty = isNaN( y ) ? x : y;\n\n\treturn { x, y };\n};\n\nfunction InspectorImagePreviewItem( {\n\tas = 'span',\n\timgUrl,\n\ttoggleProps = {},\n\tfilename,\n\tlabel,\n\tonToggleCallback = noop,\n} ) {\n\tconst { isOpen, ...restToggleProps } = toggleProps;\n\n\tuseEffect( () => {\n\t\tif ( typeof isOpen !== 'undefined' ) {\n\t\t\tonToggleCallback( isOpen );\n\t\t}\n\t}, [ isOpen, onToggleCallback ] );\n\n\tconst renderPreviewContent = () => {\n\t\treturn (\n\t\t\t<HStack className=\"block-editor-global-styles-background-panel__inspector-preview-inner\">\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-image-indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tbackgroundImage: imgUrl\n\t\t\t\t\t\t\t? `url(${ imgUrl })`\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock>\n\t\t\t\t\t<Truncate\n\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-media-replace-title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Truncate>\n\t\t\t\t\t<VisuallyHidden render={ <span /> }>\n\t\t\t\t\t\t{ imgUrl\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: file name */\n\t\t\t\t\t\t\t\t\t__( 'Background image: %s' ),\n\t\t\t\t\t\t\t\t\tfilename || label\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'No background image selected' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t);\n\t};\n\n\treturn as === 'button' ? (\n\t\t<Button __next40pxDefaultSize { ...restToggleProps }>\n\t\t\t{ renderPreviewContent() }\n\t\t</Button>\n\t) : (\n\t\trenderPreviewContent()\n\t);\n}\n\nfunction BackgroundControlsPanel( {\n\tlabel,\n\tfilename,\n\turl: imgUrl,\n\tchildren,\n\tonToggle: onToggleCallback = noop,\n\thasImageValue,\n\tonReset,\n\tcontainerRef,\n} ) {\n\tif ( ! hasImageValue ) {\n\t\treturn;\n\t}\n\n\tconst imgLabel = label || getFilename( imgUrl ) || __( 'Image' );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ BACKGROUND_POPOVER_PROPS }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst toggleProps = {\n\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\tclassName:\n\t\t\t\t\t\t'block-editor-global-styles-background-panel__dropdown-toggle',\n\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t'aria-label': __(\n\t\t\t\t\t\t'Background size, position and repeat options.'\n\t\t\t\t\t),\n\t\t\t\t\tisOpen,\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<InspectorImagePreviewItem\n\t\t\t\t\t\t\timgUrl={ imgUrl }\n\t\t\t\t\t\t\tfilename={ filename }\n\t\t\t\t\t\t\tlabel={ imgLabel }\n\t\t\t\t\t\t\ttoggleProps={ toggleProps }\n\t\t\t\t\t\t\tas=\"button\"\n\t\t\t\t\t\t\tonToggleCallback={ onToggleCallback }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ onReset && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__reset\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\t// Close the dropdown if open.\n\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// Focus the toggle button.\n\t\t\t\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__dropdown-content-wrapper\"\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction LoadingSpinner() {\n\treturn (\n\t\t<Placeholder className=\"block-editor-global-styles-background-panel__loading\">\n\t\t\t<Spinner />\n\t\t</Placeholder>\n\t);\n}\n\nfunction BackgroundImageControls( {\n\tonChange,\n\tstyle,\n\tinheritedValue,\n\tonRemoveImage = noop,\n\tonResetImage = noop,\n\tdisplayInPanel,\n\tdefaultValues,\n\tcontainerRef,\n} ) {\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\tconst { getSettings } = useSelect( blockEditorStore );\n\n\tconst { id, title, url } = style?.background?.backgroundImage || {\n\t\t...inheritedValue?.background?.backgroundImage,\n\t};\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t\tsetIsUploading( false );\n\t};\n\n\tconst resetBackgroundImage = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t\tundefined\n\t\t\t)\n\t\t);\n\n\tconst onSelectMedia = ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tresetBackgroundImage();\n\t\t\tsetIsUploading( false );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tsetIsUploading( true );\n\t\t\treturn;\n\t\t}\n\n\t\t// For media selections originated from a file upload.\n\t\tif (\n\t\t\t( media.media_type &&\n\t\t\t\tmedia.media_type !== IMAGE_BACKGROUND_TYPE ) ||\n\t\t\t( ! media.media_type &&\n\t\t\t\tmedia.type &&\n\t\t\t\tmedia.type !== IMAGE_BACKGROUND_TYPE )\n\t\t) {\n\t\t\tonUploadError(\n\t\t\t\t__( 'Only images can be used as a background image.' )\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tconst sizeValue =\n\t\t\tstyle?.background?.backgroundSize || defaultValues?.backgroundSize;\n\t\tconst positionValue = style?.background?.backgroundPosition;\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: {\n\t\t\t\t\turl: media.url,\n\t\t\t\t\tid: media.id,\n\t\t\t\t\tsource: 'file',\n\t\t\t\t\ttitle: media.title || undefined,\n\t\t\t\t},\n\t\t\t\tbackgroundPosition:\n\t\t\t\t\t/*\n\t\t\t\t\t * A background image uploaded and set in the editor receives a default background position of '50% 0',\n\t\t\t\t\t * when the background image size is the equivalent of \"Tile\".\n\t\t\t\t\t * This is to increase the chance that the image's focus point is visible.\n\t\t\t\t\t * This is in-editor only to assist with the user experience.\n\t\t\t\t\t */\n\t\t\t\t\t! positionValue && ( 'auto' === sizeValue || ! sizeValue )\n\t\t\t\t\t\t? '50% 0'\n\t\t\t\t\t\t: positionValue,\n\t\t\t\tbackgroundSize: sizeValue,\n\t\t\t} )\n\t\t);\n\t\tsetIsUploading( false );\n\t\t// Close the dropdown and focus the toggle button.\n\t\tfocusToggleButton( containerRef );\n\t};\n\n\t// Drag and drop callback, restricting image to one.\n\tconst onFilesDrop = ( filesList ) => {\n\t\tgetSettings().mediaUpload( {\n\t\t\tallowedTypes: [ IMAGE_BACKGROUND_TYPE ],\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tonSelectMedia( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\n\tconst hasValue = hasBackgroundImageValue( style );\n\n\tconst onRemove = () =>\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\tbackgroundImage: 'none',\n\t\t\t} )\n\t\t);\n\tconst canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );\n\tconst imgLabel = title || getFilename( url ) || __( 'Image' );\n\n\treturn (\n\t\t<div className=\"block-editor-global-styles-background-panel__image-tools-panel-item\">\n\t\t\t{ isUploading && <LoadingSpinner /> }\n\t\t\t<MediaReplaceFlow\n\t\t\t\tmediaId={ id }\n\t\t\t\tmediaURL={ url }\n\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\taccept=\"image/*\"\n\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tclassName: clsx( {\n\t\t\t\t\t\t'block-editor-global-styles-background-panel__media-replace-popover':\n\t\t\t\t\t\t\tdisplayInPanel,\n\t\t\t\t\t} ),\n\t\t\t\t} }\n\t\t\t\tname={\n\t\t\t\t\t<InspectorImagePreviewItem\n\t\t\t\t\t\timgUrl={ url }\n\t\t\t\t\t\tfilename={ title }\n\t\t\t\t\t\tlabel={ imgLabel }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\trenderToggle={ ( props ) => (\n\t\t\t\t\t<Button { ...props } __next40pxDefaultSize />\n\t\t\t\t) }\n\t\t\t\tonError={ onUploadError }\n\t\t\t\tonReset={ () => {\n\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\tonResetImage();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ canRemove && (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t\t\tonRemove();\n\t\t\t\t\t\t\tonRemoveImage();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Remove' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) }\n\t\t\t</MediaReplaceFlow>\n\t\t\t<DropZone\n\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\tlabel={ __( 'Drop to upload' ) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction BackgroundSizeControls( {\n\tonChange,\n\tstyle,\n\tinheritedValue,\n\tdefaultValues,\n} ) {\n\tconst sizeValue =\n\t\tstyle?.background?.backgroundSize ||\n\t\tinheritedValue?.background?.backgroundSize;\n\tconst repeatValue =\n\t\tstyle?.background?.backgroundRepeat ||\n\t\tinheritedValue?.background?.backgroundRepeat;\n\tconst imageValue =\n\t\tstyle?.background?.backgroundImage?.url ||\n\t\tinheritedValue?.background?.backgroundImage?.url;\n\tconst isUploadedImage = style?.background?.backgroundImage?.id;\n\tconst positionValue =\n\t\tstyle?.background?.backgroundPosition ||\n\t\tinheritedValue?.background?.backgroundPosition;\n\tconst attachmentValue =\n\t\tstyle?.background?.backgroundAttachment ||\n\t\tinheritedValue?.background?.backgroundAttachment;\n\n\t/*\n\t * Set default values for uploaded images.\n\t * The default values are passed by the consumer.\n\t * Block-level controls may have different defaults to root-level controls.\n\t * A falsy value is treated by default as `auto` (Tile).\n\t */\n\tlet currentValueForToggle =\n\t\t! sizeValue && isUploadedImage\n\t\t\t? defaultValues?.backgroundSize\n\t\t\t: sizeValue || 'auto';\n\t/*\n\t * The incoming value could be a value + unit, e.g. '20px'.\n\t * In this case set the value to 'tile'.\n\t */\n\tcurrentValueForToggle = ! [ 'cover', 'contain', 'auto' ].includes(\n\t\tcurrentValueForToggle\n\t)\n\t\t? 'auto'\n\t\t: currentValueForToggle;\n\t/*\n\t * If the current value is `cover` and the repeat value is `undefined`, then\n\t * the toggle should be unchecked as the default state. Otherwise, the toggle\n\t * should reflect the current repeat value.\n\t */\n\tconst repeatCheckedValue = ! (\n\t\trepeatValue === 'no-repeat' ||\n\t\t( currentValueForToggle === 'cover' && repeatValue === undefined )\n\t);\n\n\tconst updateBackgroundSize = ( next ) => {\n\t\t// When switching to 'contain' toggle the repeat off.\n\t\tlet nextRepeat = repeatValue;\n\t\tlet nextPosition = positionValue;\n\n\t\tif ( next === 'contain' ) {\n\t\t\tnextRepeat = 'no-repeat';\n\t\t\tnextPosition = undefined;\n\t\t}\n\n\t\tif ( next === 'cover' ) {\n\t\t\tnextRepeat = undefined;\n\t\t\tnextPosition = undefined;\n\t\t}\n\n\t\tif (\n\t\t\t( currentValueForToggle === 'cover' ||\n\t\t\t\tcurrentValueForToggle === 'contain' ) &&\n\t\t\tnext === 'auto'\n\t\t) {\n\t\t\tnextRepeat = undefined;\n\t\t\t/*\n\t\t\t * A background image uploaded and set in the editor (an image with a record id),\n\t\t\t * receives a default background position of '50% 0',\n\t\t\t * when the toggle switches to \"Tile\". This is to increase the chance that\n\t\t\t * the image's focus point is visible.\n\t\t\t * This is in-editor only to assist with the user experience.\n\t\t\t */\n\t\t\tif ( !! style?.background?.backgroundImage?.id ) {\n\t\t\t\tnextPosition = '50% 0';\n\t\t\t}\n\t\t}\n\n\t\t/*\n\t\t * Next will be null when the input is cleared,\n\t\t * in which case the value should be 'auto'.\n\t\t */\n\t\tif ( ! next && currentValueForToggle === 'auto' ) {\n\t\t\tnext = 'auto';\n\t\t}\n\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundPosition: nextPosition,\n\t\t\t\tbackgroundRepeat: nextRepeat,\n\t\t\t\tbackgroundSize: next,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst updateBackgroundPosition = ( next ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t\tcoordsToBackgroundPosition( next )\n\t\t\t)\n\t\t);\n\t};\n\n\tconst toggleIsRepeated = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t\trepeatCheckedValue === true ? 'no-repeat' : 'repeat'\n\t\t\t)\n\t\t);\n\n\tconst toggleScrollWithPage = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t\tattachmentValue === 'fixed' ? 'scroll' : 'fixed'\n\t\t\t)\n\t\t);\n\n\t// Set a default background position for non-site-wide, uploaded images with a size of 'contain'.\n\tconst backgroundPositionValue =\n\t\t! positionValue && isUploadedImage && 'contain' === sizeValue\n\t\t\t? defaultValues?.backgroundPosition\n\t\t\t: positionValue;\n\n\treturn (\n\t\t<VStack spacing={ 3 } className=\"single-column\">\n\t\t\t<FocalPointPicker\n\t\t\t\tlabel={ __( 'Focal point' ) }\n\t\t\t\turl={ imageValue }\n\t\t\t\tvalue={ backgroundPositionToCoords( backgroundPositionValue ) }\n\t\t\t\tonChange={ updateBackgroundPosition }\n\t\t\t/>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Fixed background' ) }\n\t\t\t\tchecked={ attachmentValue === 'fixed' }\n\t\t\t\tonChange={ toggleScrollWithPage }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\tvalue={ currentValueForToggle }\n\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\tisBlock\n\t\t\t\thelp={ backgroundSizeHelpText(\n\t\t\t\t\tsizeValue || defaultValues?.backgroundSize\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"cover\"\n\t\t\t\t\tvalue=\"cover\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Cover',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"contain\"\n\t\t\t\t\tvalue=\"contain\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Contain',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"tile\"\n\t\t\t\t\tvalue=\"auto\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Tile',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 2 } as=\"span\">\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ __( 'Background image width' ) }\n\t\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\t\tvalue={ sizeValue }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t__unstableInputWidth=\"100px\"\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tplaceholder={ __( 'Auto' ) }\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tcurrentValueForToggle !== 'auto' ||\n\t\t\t\t\t\tcurrentValueForToggle === undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Repeat' ) }\n\t\t\t\t\tchecked={ repeatCheckedValue }\n\t\t\t\t\tonChange={ toggleIsRepeated }\n\t\t\t\t\tdisabled={ currentValueForToggle === 'cover' }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tdefaultValues = {},\n} ) {\n\t/*\n\t * Resolve any inherited \"ref\" pointers.\n\t * Should the block editor need resolved, inherited values\n\t * across all controls, this could be abstracted into a hook,\n\t * e.g., useResolveGlobalStyle\n\t */\n\tconst { globalStyles, _links } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst _settings = getSettings();\n\t\treturn {\n\t\t\tglobalStyles: _settings[ globalStylesDataKey ],\n\t\t\t_links: _settings[ globalStylesLinksDataKey ],\n\t\t};\n\t}, [] );\n\tconst resolvedInheritedValue = useMemo( () => {\n\t\tconst resolvedValues = {\n\t\t\tbackground: {},\n\t\t};\n\n\t\tif ( ! inheritedValue?.background ) {\n\t\t\treturn inheritedValue;\n\t\t}\n\n\t\tObject.entries( inheritedValue?.background ).forEach(\n\t\t\t( [ key, backgroundValue ] ) => {\n\t\t\t\tresolvedValues.background[ key ] = getResolvedValue(\n\t\t\t\t\tbackgroundValue,\n\t\t\t\t\t{\n\t\t\t\t\t\tstyles: globalStyles,\n\t\t\t\t\t\t_links,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t);\n\t\treturn resolvedValues;\n\t}, [ globalStyles, _links, inheritedValue ] );\n\n\tconst resetBackground = () =>\n\t\tonChange( setImmutably( value, [ 'background' ], {} ) );\n\n\tconst { title, url } = value?.background?.backgroundImage || {\n\t\t...resolvedInheritedValue?.background?.backgroundImage,\n\t};\n\tconst hasImageValue =\n\t\thasBackgroundImageValue( value ) ||\n\t\thasBackgroundImageValue( resolvedInheritedValue );\n\n\tconst imageValue =\n\t\tvalue?.background?.backgroundImage ||\n\t\tinheritedValue?.background?.backgroundImage;\n\n\tconst shouldShowBackgroundImageControls =\n\t\thasImageValue &&\n\t\t'none' !== imageValue &&\n\t\t( settings?.background?.backgroundSize ||\n\t\t\tsettings?.background?.backgroundPosition ||\n\t\t\tsettings?.background?.backgroundRepeat );\n\n\tconst [ isDropDownOpen, setIsDropDownOpen ] = useState( false );\n\tconst containerRef = useRef();\n\n\treturn (\n\t\t<div\n\t\t\tref={ containerRef }\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-global-styles-background-panel__inspector-media-replace-container',\n\t\t\t\t{\n\t\t\t\t\t'is-open': isDropDownOpen,\n\t\t\t\t}\n\t\t\t) }\n\t\t>\n\t\t\t{ shouldShowBackgroundImageControls ? (\n\t\t\t\t<BackgroundControlsPanel\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tfilename={ title }\n\t\t\t\t\turl={ url }\n\t\t\t\t\tonToggle={ setIsDropDownOpen }\n\t\t\t\t\thasImageValue={ hasImageValue }\n\t\t\t\t\tonReset={ resetBackground }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 3 } className=\"single-column\">\n\t\t\t\t\t\t<BackgroundImageControls\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tstyle={ value }\n\t\t\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\t\t\tdisplayInPanel\n\t\t\t\t\t\t\tonResetImage={ () => {\n\t\t\t\t\t\t\t\tsetIsDropDownOpen( false );\n\t\t\t\t\t\t\t\tresetBackground();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonRemoveImage={ () => setIsDropDownOpen( false ) }\n\t\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BackgroundSizeControls\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tstyle={ value }\n\t\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t</BackgroundControlsPanel>\n\t\t\t) : (\n\t\t\t\t<BackgroundImageControls\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tstyle={ value }\n\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\tonResetImage={ () => {\n\t\t\t\t\t\tsetIsDropDownOpen( false );\n\t\t\t\t\t\tresetBackground();\n\t\t\t\t\t} }\n\t\t\t\t\tonRemoveImage={ () => setIsDropDownOpen( false ) }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tToggleControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalVStack as VStack,\n\tDropZone,\n\tFlexBlock,\n\tFocalPointPicker,\n\tMenuItem,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n\tDropdown,\n\tPlaceholder,\n\tSpinner,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tButton,\n} from '@wordpress/components';\nimport { VisuallyHidden } from '@wordpress/ui';\nimport { reset as resetIcon } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { getFilename } from '@wordpress/url';\nimport { useRef, useState, useEffect, useMemo } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { focus } from '@wordpress/dom';\nimport { isBlobURL } from '@wordpress/blob';\nimport { getResolvedValue } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { hasBackgroundImageValue } from '../global-styles/background-panel';\nimport { setImmutably } from '../../utils/object';\nimport MediaReplaceFlow from '../media-replace-flow';\nimport { store as blockEditorStore } from '../../store';\n\nimport {\n\tglobalStylesDataKey,\n\tglobalStylesLinksDataKey,\n} from '../../store/private-keys';\n\nconst IMAGE_BACKGROUND_TYPE = 'image';\n\nconst BACKGROUND_POPOVER_PROPS = {\n\tplacement: 'left-start',\n\toffset: 36,\n\tshift: true,\n\tclassName: 'block-editor-global-styles-background-panel__popover',\n};\nconst noop = () => {};\n\n/**\n * Focuses the toggle button.\n * @param {Object} containerRef - ref object containing current element\n */\nconst focusToggleButton = ( containerRef ) => {\n\t// Use requestAnimationFrame to ensure DOM updates are complete\n\twindow.requestAnimationFrame( () => {\n\t\tconst [ toggleButton ] = focus.tabbable.find( containerRef?.current );\n\t\tif ( ! toggleButton ) {\n\t\t\treturn;\n\t\t}\n\t\t// Focus the toggle button and close the dropdown menu.\n\t\t// This ensures similar behaviour as to selecting an image, where the dropdown is\n\t\t// closed and focus is redirected to the dropdown toggle button.\n\t\ttoggleButton.focus();\n\t} );\n};\n\n/**\n * Get the help text for the background size control.\n *\n * @param {string} value backgroundSize value.\n * @return {string}      Translated help text.\n */\nfunction backgroundSizeHelpText( value ) {\n\tif ( value === 'cover' || value === undefined ) {\n\t\treturn __( 'Image covers the space evenly.' );\n\t}\n\tif ( value === 'contain' ) {\n\t\treturn __( 'Image is contained without distortion.' );\n\t}\n\treturn __( 'Image has a fixed width.' );\n}\n\n/**\n * Converts decimal x and y coords from FocalPointPicker to percentage-based values\n * to use as backgroundPosition value.\n *\n * @param {{x?:number, y?:number}} value FocalPointPicker coords.\n * @return {string}      \t\t\t\t backgroundPosition value.\n */\nexport const coordsToBackgroundPosition = ( value ) => {\n\tif ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {\n\t\treturn undefined;\n\t}\n\n\tconst x = isNaN( value.x ) ? 0.5 : value.x;\n\tconst y = isNaN( value.y ) ? 0.5 : value.y;\n\n\treturn `${ x * 100 }% ${ y * 100 }%`;\n};\n\n/**\n * Converts backgroundPosition value to x and y coords for FocalPointPicker.\n *\n * @param {string} value backgroundPosition value.\n * @return {{x?:number, y?:number}}       FocalPointPicker coords.\n */\nexport const backgroundPositionToCoords = ( value ) => {\n\tif ( ! value ) {\n\t\treturn { x: undefined, y: undefined };\n\t}\n\n\tlet [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );\n\tx = isNaN( x ) ? undefined : x;\n\ty = isNaN( y ) ? x : y;\n\n\treturn { x, y };\n};\n\nfunction InspectorImagePreviewItem( {\n\tas = 'span',\n\timgUrl,\n\ttoggleProps = {},\n\tfilename,\n\tlabel,\n\tonToggleCallback = noop,\n} ) {\n\tconst { isOpen, ...restToggleProps } = toggleProps;\n\n\tuseEffect( () => {\n\t\tif ( typeof isOpen !== 'undefined' ) {\n\t\t\tonToggleCallback( isOpen );\n\t\t}\n\t}, [ isOpen, onToggleCallback ] );\n\n\tconst renderPreviewContent = () => {\n\t\treturn (\n\t\t\t<HStack className=\"block-editor-global-styles-background-panel__inspector-preview-inner\">\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-image-indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tbackgroundImage: imgUrl\n\t\t\t\t\t\t\t? `url(${ imgUrl })`\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock>\n\t\t\t\t\t<Truncate\n\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-media-replace-title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Truncate>\n\t\t\t\t\t<VisuallyHidden render={ <span /> }>\n\t\t\t\t\t\t{ imgUrl\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: file name */\n\t\t\t\t\t\t\t\t\t__( 'Background image: %s' ),\n\t\t\t\t\t\t\t\t\tfilename || label\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'No background image selected' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t);\n\t};\n\n\treturn as === 'button' ? (\n\t\t<Button __next40pxDefaultSize { ...restToggleProps }>\n\t\t\t{ renderPreviewContent() }\n\t\t</Button>\n\t) : (\n\t\trenderPreviewContent()\n\t);\n}\n\nfunction BackgroundControlsPanel( {\n\tlabel,\n\tfilename,\n\turl: imgUrl,\n\tchildren,\n\tonToggle: onToggleCallback = noop,\n\thasImageValue,\n\tonReset,\n\tcontainerRef,\n} ) {\n\tif ( ! hasImageValue ) {\n\t\treturn;\n\t}\n\n\tconst imgLabel = label || getFilename( imgUrl ) || __( 'Image' );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ BACKGROUND_POPOVER_PROPS }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst toggleProps = {\n\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\tclassName:\n\t\t\t\t\t\t'block-editor-global-styles-background-panel__dropdown-toggle',\n\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t'aria-label': __(\n\t\t\t\t\t\t'Background size, position and repeat options.'\n\t\t\t\t\t),\n\t\t\t\t\tisOpen,\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<InspectorImagePreviewItem\n\t\t\t\t\t\t\timgUrl={ imgUrl }\n\t\t\t\t\t\t\tfilename={ filename }\n\t\t\t\t\t\t\tlabel={ imgLabel }\n\t\t\t\t\t\t\ttoggleProps={ toggleProps }\n\t\t\t\t\t\t\tas=\"button\"\n\t\t\t\t\t\t\tonToggleCallback={ onToggleCallback }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ onReset && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__reset\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\t// Close the dropdown if open.\n\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// Focus the toggle button.\n\t\t\t\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__dropdown-content-wrapper\"\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction LoadingSpinner() {\n\treturn (\n\t\t<Placeholder className=\"block-editor-global-styles-background-panel__loading\">\n\t\t\t<Spinner />\n\t\t</Placeholder>\n\t);\n}\n\nfunction BackgroundImageControls( {\n\tonChange,\n\tstyle,\n\tinheritedValue,\n\tonRemoveImage = noop,\n\tonResetImage = noop,\n\tdisplayInPanel,\n\tdefaultValues,\n\tcontainerRef,\n} ) {\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\tconst { getSettings } = useSelect( blockEditorStore );\n\n\tconst { id, title, url } = style?.background?.backgroundImage || {\n\t\t...inheritedValue?.background?.backgroundImage,\n\t};\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t\tsetIsUploading( false );\n\t};\n\n\tconst resetBackgroundImage = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t\tundefined\n\t\t\t)\n\t\t);\n\n\tconst onSelectMedia = ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tresetBackgroundImage();\n\t\t\tsetIsUploading( false );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tsetIsUploading( true );\n\t\t\treturn;\n\t\t}\n\n\t\t// For media selections originated from a file upload.\n\t\tif (\n\t\t\t( media.media_type &&\n\t\t\t\tmedia.media_type !== IMAGE_BACKGROUND_TYPE ) ||\n\t\t\t( ! media.media_type &&\n\t\t\t\tmedia.type &&\n\t\t\t\tmedia.type !== IMAGE_BACKGROUND_TYPE )\n\t\t) {\n\t\t\tonUploadError(\n\t\t\t\t__( 'Only images can be used as a background image.' )\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tconst sizeValue =\n\t\t\tstyle?.background?.backgroundSize || defaultValues?.backgroundSize;\n\t\tconst positionValue = style?.background?.backgroundPosition;\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: {\n\t\t\t\t\turl: media.url,\n\t\t\t\t\tid: media.id,\n\t\t\t\t\tsource: 'file',\n\t\t\t\t\ttitle: media.title || undefined,\n\t\t\t\t},\n\t\t\t\tbackgroundPosition:\n\t\t\t\t\t/*\n\t\t\t\t\t * A background image uploaded and set in the editor receives a default background position of '50% 0',\n\t\t\t\t\t * when the background image size is the equivalent of \"Tile\".\n\t\t\t\t\t * This is to increase the chance that the image's focus point is visible.\n\t\t\t\t\t * This is in-editor only to assist with the user experience.\n\t\t\t\t\t */\n\t\t\t\t\t! positionValue && ( 'auto' === sizeValue || ! sizeValue )\n\t\t\t\t\t\t? '50% 0'\n\t\t\t\t\t\t: positionValue,\n\t\t\t\tbackgroundSize: sizeValue,\n\t\t\t} )\n\t\t);\n\t\tsetIsUploading( false );\n\t\t// Close the dropdown and focus the toggle button.\n\t\tfocusToggleButton( containerRef );\n\t};\n\n\t// Drag and drop callback, restricting image to one.\n\tconst onFilesDrop = ( filesList ) => {\n\t\tgetSettings().mediaUpload( {\n\t\t\tallowedTypes: [ IMAGE_BACKGROUND_TYPE ],\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tonSelectMedia( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\n\tconst hasValue = hasBackgroundImageValue( style );\n\n\tconst onRemove = () =>\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\tbackgroundImage: 'none',\n\t\t\t} )\n\t\t);\n\tconst canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );\n\tconst imgLabel = title || getFilename( url ) || __( 'Image' );\n\n\treturn (\n\t\t<div className=\"block-editor-global-styles-background-panel__image-tools-panel-item\">\n\t\t\t{ isUploading && <LoadingSpinner /> }\n\t\t\t<MediaReplaceFlow\n\t\t\t\tmediaId={ id }\n\t\t\t\tmediaURL={ url }\n\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\taccept=\"image/*\"\n\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tclassName: clsx( {\n\t\t\t\t\t\t'block-editor-global-styles-background-panel__media-replace-popover':\n\t\t\t\t\t\t\tdisplayInPanel,\n\t\t\t\t\t} ),\n\t\t\t\t} }\n\t\t\t\tname={\n\t\t\t\t\t<InspectorImagePreviewItem\n\t\t\t\t\t\timgUrl={ url }\n\t\t\t\t\t\tfilename={ title }\n\t\t\t\t\t\tlabel={ imgLabel }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\trenderToggle={ ( props ) => (\n\t\t\t\t\t<Button { ...props } __next40pxDefaultSize />\n\t\t\t\t) }\n\t\t\t\tonError={ onUploadError }\n\t\t\t\tonReset={ () => {\n\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\tonResetImage();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ canRemove && (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t\t\tonRemove();\n\t\t\t\t\t\t\tonRemoveImage();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Remove' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) }\n\t\t\t</MediaReplaceFlow>\n\t\t\t<DropZone\n\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\tlabel={ __( 'Drop to upload' ) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction BackgroundSizeControls( {\n\tonChange,\n\tstyle,\n\tinheritedValue,\n\tdefaultValues,\n} ) {\n\tconst sizeValue =\n\t\tstyle?.background?.backgroundSize ||\n\t\tinheritedValue?.background?.backgroundSize;\n\tconst repeatValue =\n\t\tstyle?.background?.backgroundRepeat ||\n\t\tinheritedValue?.background?.backgroundRepeat;\n\tconst imageValue =\n\t\tstyle?.background?.backgroundImage?.url ||\n\t\tinheritedValue?.background?.backgroundImage?.url;\n\tconst isUploadedImage = style?.background?.backgroundImage?.id;\n\tconst positionValue =\n\t\tstyle?.background?.backgroundPosition ||\n\t\tinheritedValue?.background?.backgroundPosition;\n\tconst attachmentValue =\n\t\tstyle?.background?.backgroundAttachment ||\n\t\tinheritedValue?.background?.backgroundAttachment;\n\n\t/*\n\t * Set default values for uploaded images.\n\t * The default values are passed by the consumer.\n\t * Block-level controls may have different defaults to root-level controls.\n\t * A falsy value is treated by default as `auto` (Tile).\n\t */\n\tlet currentValueForToggle =\n\t\t! sizeValue && isUploadedImage\n\t\t\t? defaultValues?.backgroundSize\n\t\t\t: sizeValue || 'auto';\n\t/*\n\t * The incoming value could be a value + unit, e.g. '20px'.\n\t * In this case set the value to 'tile'.\n\t */\n\tcurrentValueForToggle = ! [ 'cover', 'contain', 'auto' ].includes(\n\t\tcurrentValueForToggle\n\t)\n\t\t? 'auto'\n\t\t: currentValueForToggle;\n\t/*\n\t * If the current value is `cover` and the repeat value is `undefined`, then\n\t * the toggle should be unchecked as the default state. Otherwise, the toggle\n\t * should reflect the current repeat value.\n\t */\n\tconst repeatCheckedValue = ! (\n\t\trepeatValue === 'no-repeat' ||\n\t\t( currentValueForToggle === 'cover' && repeatValue === undefined )\n\t);\n\n\tconst updateBackgroundSize = ( next ) => {\n\t\t// When switching to 'contain' toggle the repeat off.\n\t\tlet nextRepeat = repeatValue;\n\t\tlet nextPosition = positionValue;\n\n\t\tif ( next === 'contain' ) {\n\t\t\tnextRepeat = 'no-repeat';\n\t\t\tnextPosition = undefined;\n\t\t}\n\n\t\tif ( next === 'cover' ) {\n\t\t\tnextRepeat = undefined;\n\t\t\tnextPosition = undefined;\n\t\t}\n\n\t\tif (\n\t\t\t( currentValueForToggle === 'cover' ||\n\t\t\t\tcurrentValueForToggle === 'contain' ) &&\n\t\t\tnext === 'auto'\n\t\t) {\n\t\t\tnextRepeat = undefined;\n\t\t\t/*\n\t\t\t * A background image uploaded and set in the editor (an image with a record id),\n\t\t\t * receives a default background position of '50% 0',\n\t\t\t * when the toggle switches to \"Tile\". This is to increase the chance that\n\t\t\t * the image's focus point is visible.\n\t\t\t * This is in-editor only to assist with the user experience.\n\t\t\t */\n\t\t\tif ( !! style?.background?.backgroundImage?.id ) {\n\t\t\t\tnextPosition = '50% 0';\n\t\t\t}\n\t\t}\n\n\t\t/*\n\t\t * Next will be null when the input is cleared,\n\t\t * in which case the value should be 'auto'.\n\t\t */\n\t\tif ( ! next && currentValueForToggle === 'auto' ) {\n\t\t\tnext = 'auto';\n\t\t}\n\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundPosition: nextPosition,\n\t\t\t\tbackgroundRepeat: nextRepeat,\n\t\t\t\tbackgroundSize: next,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst updateBackgroundPosition = ( next ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t\tcoordsToBackgroundPosition( next )\n\t\t\t)\n\t\t);\n\t};\n\n\tconst toggleIsRepeated = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t\trepeatCheckedValue === true ? 'no-repeat' : 'repeat'\n\t\t\t)\n\t\t);\n\n\tconst toggleScrollWithPage = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t\tattachmentValue === 'fixed' ? 'scroll' : 'fixed'\n\t\t\t)\n\t\t);\n\n\t// Set a default background position for non-site-wide, uploaded images with a size of 'contain'.\n\tconst backgroundPositionValue =\n\t\t! positionValue && isUploadedImage && 'contain' === sizeValue\n\t\t\t? defaultValues?.backgroundPosition\n\t\t\t: positionValue;\n\n\treturn (\n\t\t<VStack spacing={ 3 } className=\"single-column\">\n\t\t\t<FocalPointPicker\n\t\t\t\tlabel={ __( 'Focal point' ) }\n\t\t\t\turl={ imageValue }\n\t\t\t\tvalue={ backgroundPositionToCoords( backgroundPositionValue ) }\n\t\t\t\tonChange={ updateBackgroundPosition }\n\t\t\t/>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Fixed background' ) }\n\t\t\t\tchecked={ attachmentValue === 'fixed' }\n\t\t\t\tonChange={ toggleScrollWithPage }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\tvalue={ currentValueForToggle }\n\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\tisBlock\n\t\t\t\thelp={ backgroundSizeHelpText(\n\t\t\t\t\tsizeValue || defaultValues?.backgroundSize\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"cover\"\n\t\t\t\t\tvalue=\"cover\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Cover',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"contain\"\n\t\t\t\t\tvalue=\"contain\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Contain',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"tile\"\n\t\t\t\t\tvalue=\"auto\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Tile',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 2 } as=\"span\">\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ __( 'Background image width' ) }\n\t\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\t\tvalue={ sizeValue }\n\t\t\t\t\t__unstableInputWidth=\"100px\"\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tplaceholder={ __( 'Auto' ) }\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tcurrentValueForToggle !== 'auto' ||\n\t\t\t\t\t\tcurrentValueForToggle === undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Repeat' ) }\n\t\t\t\t\tchecked={ repeatCheckedValue }\n\t\t\t\t\tonChange={ toggleIsRepeated }\n\t\t\t\t\tdisabled={ currentValueForToggle === 'cover' }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tdefaultValues = {},\n} ) {\n\t/*\n\t * Resolve any inherited \"ref\" pointers.\n\t * Should the block editor need resolved, inherited values\n\t * across all controls, this could be abstracted into a hook,\n\t * e.g., useResolveGlobalStyle\n\t */\n\tconst { globalStyles, _links } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst _settings = getSettings();\n\t\treturn {\n\t\t\tglobalStyles: _settings[ globalStylesDataKey ],\n\t\t\t_links: _settings[ globalStylesLinksDataKey ],\n\t\t};\n\t}, [] );\n\tconst resolvedInheritedValue = useMemo( () => {\n\t\tconst resolvedValues = {\n\t\t\tbackground: {},\n\t\t};\n\n\t\tif ( ! inheritedValue?.background ) {\n\t\t\treturn inheritedValue;\n\t\t}\n\n\t\tObject.entries( inheritedValue?.background ).forEach(\n\t\t\t( [ key, backgroundValue ] ) => {\n\t\t\t\tresolvedValues.background[ key ] = getResolvedValue(\n\t\t\t\t\tbackgroundValue,\n\t\t\t\t\t{\n\t\t\t\t\t\tstyles: globalStyles,\n\t\t\t\t\t\t_links,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t);\n\t\treturn resolvedValues;\n\t}, [ globalStyles, _links, inheritedValue ] );\n\n\tconst resetBackground = () =>\n\t\tonChange( setImmutably( value, [ 'background' ], {} ) );\n\n\tconst { title, url } = value?.background?.backgroundImage || {\n\t\t...resolvedInheritedValue?.background?.backgroundImage,\n\t};\n\tconst hasImageValue =\n\t\thasBackgroundImageValue( value ) ||\n\t\thasBackgroundImageValue( resolvedInheritedValue );\n\n\tconst imageValue =\n\t\tvalue?.background?.backgroundImage ||\n\t\tinheritedValue?.background?.backgroundImage;\n\n\tconst shouldShowBackgroundImageControls =\n\t\thasImageValue &&\n\t\t'none' !== imageValue &&\n\t\t( settings?.background?.backgroundSize ||\n\t\t\tsettings?.background?.backgroundPosition ||\n\t\t\tsettings?.background?.backgroundRepeat );\n\n\tconst [ isDropDownOpen, setIsDropDownOpen ] = useState( false );\n\tconst containerRef = useRef();\n\n\treturn (\n\t\t<div\n\t\t\tref={ containerRef }\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-global-styles-background-panel__inspector-media-replace-container',\n\t\t\t\t{\n\t\t\t\t\t'is-open': isDropDownOpen,\n\t\t\t\t}\n\t\t\t) }\n\t\t>\n\t\t\t{ shouldShowBackgroundImageControls ? (\n\t\t\t\t<BackgroundControlsPanel\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tfilename={ title }\n\t\t\t\t\turl={ url }\n\t\t\t\t\tonToggle={ setIsDropDownOpen }\n\t\t\t\t\thasImageValue={ hasImageValue }\n\t\t\t\t\tonReset={ resetBackground }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 3 } className=\"single-column\">\n\t\t\t\t\t\t<BackgroundImageControls\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tstyle={ value }\n\t\t\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\t\t\tdisplayInPanel\n\t\t\t\t\t\t\tonResetImage={ () => {\n\t\t\t\t\t\t\t\tsetIsDropDownOpen( false );\n\t\t\t\t\t\t\t\tresetBackground();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonRemoveImage={ () => setIsDropDownOpen( false ) }\n\t\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BackgroundSizeControls\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tstyle={ value }\n\t\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t</BackgroundControlsPanel>\n\t\t\t) : (\n\t\t\t\t<BackgroundImageControls\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tstyle={ value }\n\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\tonResetImage={ () => {\n\t\t\t\t\t\tsetIsDropDownOpen( false );\n\t\t\t\t\t\tresetBackground();\n\t\t\t\t\t} }\n\t\t\t\t\tonRemoveImage={ () => setIsDropDownOpen( false ) }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/block-canvas/index.mjs

@@ -8,7 +8,7 @@ import BlockTools from "../block-tools/index.mjs";
 import EditorStyles from "../editor-styles/index.mjs";
 import Iframe from "../iframe/index.mjs";
 import WritingFlow from "../writing-flow/index.mjs";
-import { useMouseMoveTypingReset } from "../observe-typing/index.mjs";
+import { useMouseMoveTypingReset, useTypingObserver } from "../observe-typing/index.mjs";
 import { useBlockSelectionClearer } from "../block-selection-clearer/index.mjs";
 import { useBlockCommands } from "../use-block-commands/index.mjs";
 import { store as blockEditorStore } from "../../store/index.mjs";
@@ -49,7 +49,12 @@ function ExperimentalBlockCanvas({
   const resetTypingRef = useMouseMoveTypingReset();
   const clearerRef = useBlockSelectionClearer();
   const localRef = useRef();
-  const contentRef = useMergeRefs([contentRefProp, clearerRef, localRef]);
+  const contentRef = useMergeRefs([
+    contentRefProp,
+    clearerRef,
+    localRef,
+    useTypingObserver()
+  ]);
   const zoomLevel = useSelect(
     (select) => unlock(select(blockEditorStore)).getZoomLevel(),
     []

package/build-module/components/block-canvas/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-canvas/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs, useViewportMatch } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { createSlotFill } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport BlockTools from '../block-tools';\nimport EditorStyles from '../editor-styles';\nimport Iframe from '../iframe';\nimport WritingFlow from '../writing-flow';\nimport { useMouseMoveTypingReset } from '../observe-typing';\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\nimport { useBlockCommands } from '../use-block-commands';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nexport const BlockCanvasCover = createSlotFill( Symbol( 'BlockCanvasCover' ) );\n\nfunction BlockCanvasCoverWrapper( { children } ) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-canvas-cover\"\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\twidth: '100%',\n\t\t\t\theight: '100%',\n\t\t\t\tpointerEvents: 'none',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n// EditorStyles is a memoized component, so avoid passing a new\n// object reference on each render.\nconst EDITOR_STYLE_TRANSFORM_OPTIONS = {\n\t// Don't transform selectors that already specify `.editor-styles-wrapper`.\n\tignoredSelectors: [ /\\.editor-styles-wrapper/gi ],\n};\n\nexport function ExperimentalBlockCanvas( {\n\tshouldIframe = true,\n\theight = '300px',\n\tchildren = <BlockList />,\n\tstyles,\n\tcontentRef: contentRefProp,\n\tiframeProps,\n} ) {\n\tuseBlockCommands();\n\tconst isTabletViewport = useViewportMatch( 'medium', '<' );\n\tconst resetTypingRef = useMouseMoveTypingReset();\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst localRef = useRef();\n\tconst contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );\n\tconst zoomLevel = useSelect(\n\t\t( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(),\n\t\t[]\n\t);\n\tconst zoomOutIframeProps =\n\t\tzoomLevel !== 100 && ! isTabletViewport\n\t\t\t? {\n\t\t\t\t\tscale: zoomLevel,\n\t\t\t\t\tframeSize: '40px',\n\t\t\t  }\n\t\t\t: {};\n\n\tif ( ! shouldIframe ) {\n\t\treturn (\n\t\t\t<BlockTools\n\t\t\t\t__unstableContentRef={ localRef }\n\t\t\t\tstyle={ { height, display: 'flex' } }\n\t\t\t>\n\t\t\t\t<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>\n\t\t\t\t\t{ ( covers ) =>\n\t\t\t\t\t\tcovers.map( ( cover, index ) => (\n\t\t\t\t\t\t\t<BlockCanvasCoverWrapper key={ index }>\n\t\t\t\t\t\t\t\t{ cover }\n\t\t\t\t\t\t\t</BlockCanvasCoverWrapper>\n\t\t\t\t\t\t) )\n\t\t\t\t\t}\n\t\t\t\t</BlockCanvasCover.Slot>\n\t\t\t\t<EditorStyles\n\t\t\t\t\tstyles={ styles }\n\t\t\t\t\tscope=\":where(.editor-styles-wrapper)\"\n\t\t\t\t\ttransformOptions={ EDITOR_STYLE_TRANSFORM_OPTIONS }\n\t\t\t\t/>\n\t\t\t\t<WritingFlow\n\t\t\t\t\tref={ contentRef }\n\t\t\t\t\tclassName=\"editor-styles-wrapper\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</WritingFlow>\n\t\t\t</BlockTools>\n\t\t);\n\t}\n\n\treturn (\n\t\t<BlockTools\n\t\t\t__unstableContentRef={ localRef }\n\t\t\tstyle={ { height, display: 'flex' } }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\t{ ...iframeProps }\n\t\t\t\t{ ...zoomOutIframeProps }\n\t\t\t\tref={ resetTypingRef }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\tstyle={ {\n\t\t\t\t\t...iframeProps?.style,\n\t\t\t\t} }\n\t\t\t\tname=\"editor-canvas\"\n\t\t\t>\n\t\t\t\t<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>\n\t\t\t\t\t{ ( covers ) =>\n\t\t\t\t\t\tcovers.map( ( cover, index ) => (\n\t\t\t\t\t\t\t<BlockCanvasCoverWrapper key={ index }>\n\t\t\t\t\t\t\t\t{ cover }\n\t\t\t\t\t\t\t</BlockCanvasCoverWrapper>\n\t\t\t\t\t\t) )\n\t\t\t\t\t}\n\t\t\t\t</BlockCanvasCover.Slot>\n\t\t\t\t<EditorStyles styles={ styles } />\n\t\t\t\t{ children }\n\t\t\t</Iframe>\n\t\t</BlockTools>\n\t);\n}\n\n/**\n * BlockCanvas component is a component used to display the canvas of the block editor.\n * What we call the canvas is an iframe containing the block list that you can manipulate.\n * The component is also responsible of wiring up all the necessary hooks to enable\n * the keyboard navigation across blocks in the editor and inject content styles into the iframe.\n *\n * @example\n *\n * ```jsx\n * function MyBlockEditor() {\n *   const [ blocks, updateBlocks ] = useState([]);\n *   return (\n *     <BlockEditorProvider\n *       value={ blocks }\n *       onInput={ updateBlocks }\n *       onChange={ persistBlocks }\n *      >\n *        <BlockCanvas height=\"400px\" />\n *      </BlockEditorProvider>\n *    );\n * }\n * ```\n *\n * @param {Object}  props          Component props.\n * @param {string}  props.height   Canvas height, defaults to 300px.\n * @param {Array}   props.styles   Content styles to inject into the iframe.\n * @param {Element} props.children Content of the canvas, defaults to the BlockList component.\n * @return {Element}               Block Breadcrumb.\n */\nfunction BlockCanvas( { children, height, styles } ) {\n\treturn (\n\t\t<ExperimentalBlockCanvas height={ height } styles={ styles }>\n\t\t\t{ children }\n\t\t</ExperimentalBlockCanvas>\n\t);\n}\n\nexport default BlockCanvas;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMergeRefs, useViewportMatch } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { createSlotFill } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport BlockTools from '../block-tools';\nimport EditorStyles from '../editor-styles';\nimport Iframe from '../iframe';\nimport WritingFlow from '../writing-flow';\nimport { useMouseMoveTypingReset, useTypingObserver } from '../observe-typing';\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\nimport { useBlockCommands } from '../use-block-commands';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nexport const BlockCanvasCover = createSlotFill( Symbol( 'BlockCanvasCover' ) );\n\nfunction BlockCanvasCoverWrapper( { children } ) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-canvas-cover\"\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\twidth: '100%',\n\t\t\t\theight: '100%',\n\t\t\t\tpointerEvents: 'none',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n// EditorStyles is a memoized component, so avoid passing a new\n// object reference on each render.\nconst EDITOR_STYLE_TRANSFORM_OPTIONS = {\n\t// Don't transform selectors that already specify `.editor-styles-wrapper`.\n\tignoredSelectors: [ /\\.editor-styles-wrapper/gi ],\n};\n\nexport function ExperimentalBlockCanvas( {\n\tshouldIframe = true,\n\theight = '300px',\n\tchildren = <BlockList />,\n\tstyles,\n\tcontentRef: contentRefProp,\n\tiframeProps,\n} ) {\n\tuseBlockCommands();\n\tconst isTabletViewport = useViewportMatch( 'medium', '<' );\n\tconst resetTypingRef = useMouseMoveTypingReset();\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst localRef = useRef();\n\t// Attached to the same node as the writing flow ref: the iframe body,\n\t// or the WritingFlow element when the canvas is not iframed.\n\tconst contentRef = useMergeRefs( [\n\t\tcontentRefProp,\n\t\tclearerRef,\n\t\tlocalRef,\n\t\tuseTypingObserver(),\n\t] );\n\tconst zoomLevel = useSelect(\n\t\t( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(),\n\t\t[]\n\t);\n\tconst zoomOutIframeProps =\n\t\tzoomLevel !== 100 && ! isTabletViewport\n\t\t\t? {\n\t\t\t\t\tscale: zoomLevel,\n\t\t\t\t\tframeSize: '40px',\n\t\t\t  }\n\t\t\t: {};\n\n\tif ( ! shouldIframe ) {\n\t\treturn (\n\t\t\t<BlockTools\n\t\t\t\t__unstableContentRef={ localRef }\n\t\t\t\tstyle={ { height, display: 'flex' } }\n\t\t\t>\n\t\t\t\t<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>\n\t\t\t\t\t{ ( covers ) =>\n\t\t\t\t\t\tcovers.map( ( cover, index ) => (\n\t\t\t\t\t\t\t<BlockCanvasCoverWrapper key={ index }>\n\t\t\t\t\t\t\t\t{ cover }\n\t\t\t\t\t\t\t</BlockCanvasCoverWrapper>\n\t\t\t\t\t\t) )\n\t\t\t\t\t}\n\t\t\t\t</BlockCanvasCover.Slot>\n\t\t\t\t<EditorStyles\n\t\t\t\t\tstyles={ styles }\n\t\t\t\t\tscope=\":where(.editor-styles-wrapper)\"\n\t\t\t\t\ttransformOptions={ EDITOR_STYLE_TRANSFORM_OPTIONS }\n\t\t\t\t/>\n\t\t\t\t<WritingFlow\n\t\t\t\t\tref={ contentRef }\n\t\t\t\t\tclassName=\"editor-styles-wrapper\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</WritingFlow>\n\t\t\t</BlockTools>\n\t\t);\n\t}\n\n\treturn (\n\t\t<BlockTools\n\t\t\t__unstableContentRef={ localRef }\n\t\t\tstyle={ { height, display: 'flex' } }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\t{ ...iframeProps }\n\t\t\t\t{ ...zoomOutIframeProps }\n\t\t\t\tref={ resetTypingRef }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\tstyle={ {\n\t\t\t\t\t...iframeProps?.style,\n\t\t\t\t} }\n\t\t\t\tname=\"editor-canvas\"\n\t\t\t>\n\t\t\t\t<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>\n\t\t\t\t\t{ ( covers ) =>\n\t\t\t\t\t\tcovers.map( ( cover, index ) => (\n\t\t\t\t\t\t\t<BlockCanvasCoverWrapper key={ index }>\n\t\t\t\t\t\t\t\t{ cover }\n\t\t\t\t\t\t\t</BlockCanvasCoverWrapper>\n\t\t\t\t\t\t) )\n\t\t\t\t\t}\n\t\t\t\t</BlockCanvasCover.Slot>\n\t\t\t\t<EditorStyles styles={ styles } />\n\t\t\t\t{ children }\n\t\t\t</Iframe>\n\t\t</BlockTools>\n\t);\n}\n\n/**\n * BlockCanvas component is a component used to display the canvas of the block editor.\n * What we call the canvas is an iframe containing the block list that you can manipulate.\n * The component is also responsible of wiring up all the necessary hooks to enable\n * the keyboard navigation across blocks in the editor and inject content styles into the iframe.\n *\n * @example\n *\n * ```jsx\n * function MyBlockEditor() {\n *   const [ blocks, updateBlocks ] = useState([]);\n *   return (\n *     <BlockEditorProvider\n *       value={ blocks }\n *       onInput={ updateBlocks }\n *       onChange={ persistBlocks }\n *      >\n *        <BlockCanvas height=\"400px\" />\n *      </BlockEditorProvider>\n *    );\n * }\n * ```\n *\n * @param {Object}  props          Component props.\n * @param {string}  props.height   Canvas height, defaults to 300px.\n * @param {Array}   props.styles   Content styles to inject into the iframe.\n * @param {Element} props.children Content of the canvas, defaults to the BlockList component.\n * @return {Element}               Block Breadcrumb.\n */\nfunction BlockCanvas( { children, height, styles } ) {\n\treturn (\n\t\t<ExperimentalBlockCanvas height={ height } styles={ styles }>\n\t\t\t{ children }\n\t\t</ExperimentalBlockCanvas>\n\t);\n}\n\nexport default BlockCanvas;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/block-controls/groups.mjs

@@ -5,12 +5,14 @@ var BlockControlsBlock = createSlotFill("BlockControlsBlock");
 var BlockControlsInline = createSlotFill("BlockFormatControls");
 var BlockControlsOther = createSlotFill("BlockControlsOther");
 var BlockControlsParent = createSlotFill("BlockControlsParent");
+var BlockControlsStyleState = createSlotFill("BlockControlsStyleState");
 var groups = {
   default: BlockControlsDefault,
   block: BlockControlsBlock,
   inline: BlockControlsInline,
   other: BlockControlsOther,
-  parent: BlockControlsParent
+  parent: BlockControlsParent,
+  "style-state": BlockControlsStyleState
 };
 var groups_default = groups;
 export {

package/build-module/components/block-controls/groups.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-controls/groups.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst BlockControlsDefault = createSlotFill( 'BlockControls' );\nconst BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );\nconst BlockControlsInline = createSlotFill( 'BlockFormatControls' );\nconst BlockControlsOther = createSlotFill( 'BlockControlsOther' );\nconst BlockControlsParent = createSlotFill( 'BlockControlsParent' );\n\nconst groups = {\n\tdefault: BlockControlsDefault,\n\tblock: BlockControlsBlock,\n\tinline: BlockControlsInline,\n\tother: BlockControlsOther,\n\tparent: BlockControlsParent,\n};\n\nexport default groups;\n"],
-  "mappings": ";AAGA,SAAS,sBAAsB;AAE/B,IAAM,uBAAuB,eAAgB,eAAgB;AAC7D,IAAM,qBAAqB,eAAgB,oBAAqB;AAChE,IAAM,sBAAsB,eAAgB,qBAAsB;AAClE,IAAM,qBAAqB,eAAgB,oBAAqB;AAChE,IAAM,sBAAsB,eAAgB,qBAAsB;AAElE,IAAM,SAAS;AAAA,EACd,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACT;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst BlockControlsDefault = createSlotFill( 'BlockControls' );\nconst BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );\nconst BlockControlsInline = createSlotFill( 'BlockFormatControls' );\nconst BlockControlsOther = createSlotFill( 'BlockControlsOther' );\nconst BlockControlsParent = createSlotFill( 'BlockControlsParent' );\nconst BlockControlsStyleState = createSlotFill( 'BlockControlsStyleState' );\n\nconst groups = {\n\tdefault: BlockControlsDefault,\n\tblock: BlockControlsBlock,\n\tinline: BlockControlsInline,\n\tother: BlockControlsOther,\n\tparent: BlockControlsParent,\n\t'style-state': BlockControlsStyleState,\n};\n\nexport default groups;\n"],
+  "mappings": ";AAGA,SAAS,sBAAsB;AAE/B,IAAM,uBAAuB,eAAgB,eAAgB;AAC7D,IAAM,qBAAqB,eAAgB,oBAAqB;AAChE,IAAM,sBAAsB,eAAgB,qBAAsB;AAClE,IAAM,qBAAqB,eAAgB,oBAAqB;AAChE,IAAM,sBAAsB,eAAgB,qBAAsB;AAClE,IAAM,0BAA0B,eAAgB,yBAA0B;AAE1E,IAAM,SAAS;AAAA,EACd,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AAChB;AAEA,IAAO,iBAAQ;",
   "names": []
 }

package/build-module/components/block-edit/edit.mjs

@@ -12,13 +12,13 @@ import { useCallback, useContext, useMemo } from "@wordpress/element";
 import BlockContext from "../block-context/index.mjs";
 import isURLLike from "../link-control/is-url-like.mjs";
 import {
+  getBlockBindingsContext,
   hasPatternOverridesDefaultBinding,
   replacePatternOverridesDefaultBinding
 } from "../../utils/block-bindings.mjs";
 import { unlock } from "../../lock-unlock.mjs";
 import { PrivateBlockContext } from "../block-list/private-block-context.mjs";
 import { jsx } from "react/jsx-runtime";
-var DEFAULT_BLOCK_CONTEXT = {};
 var Edit = (props) => {
   const { name } = props;
   const blockType = getBlockType(name);
@@ -40,28 +40,21 @@ var EditWithGeneratedProps = (props) => {
   );
   const { bindableAttributes } = useContext(PrivateBlockContext);
   const { blockBindings, context, hasPatternOverrides } = useMemo(() => {
-    const computedContext = blockType?.usesContext ? Object.fromEntries(
-      Object.entries(blockContext).filter(
-        ([key]) => blockType.usesContext.includes(key)
-      )
-    ) : DEFAULT_BLOCK_CONTEXT;
-    if (attributes?.metadata?.bindings) {
-      Object.values(attributes?.metadata?.bindings || {}).forEach(
-        (binding) => {
-          registeredSources[binding?.source]?.usesContext?.forEach(
-            (key) => {
-              computedContext[key] = blockContext[key];
-            }
-          );
-        }
-      );
-    }
     return {
       blockBindings: replacePatternOverridesDefaultBinding(
         attributes?.metadata?.bindings,
         bindableAttributes
       ),
-      context: computedContext,
+      // Assign context values using the block type's declared context
+      // needs, plus the context requested by the block's bindings
+      // sources.
+      context: getBlockBindingsContext(
+        blockContext,
+        blockType?.usesContext,
+        attributes?.metadata?.bindings ? Object.values(attributes.metadata.bindings).map(
+          (binding) => registeredSources[binding?.source]
+        ) : void 0
+      ),
       hasPatternOverrides: hasPatternOverridesDefaultBinding(
         attributes?.metadata?.bindings
       )