@wordpress/block-editor 15.22.1 → 16.0.0

package/build-module/utils/block-bindings.mjs

@@ -1,6 +1,33 @@
 // packages/block-editor/src/utils/block-bindings.ts
 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;
 }
@@ -16,6 +43,7 @@ function replacePatternOverridesDefaultBinding(bindings, supportedAttributes) {
   return bindingsWithDefaults;
 }
 export {
+  getBlockBindingsContext,
   hasPatternOverridesDefaultBinding,
   replacePatternOverridesDefaultBinding
 };

package/build-module/utils/block-bindings.mjs.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": ";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": ";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-module/utils/dom.mjs

@@ -11,6 +11,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;
@@ -98,6 +110,7 @@ export {
   WITH_OVERFLOW_ELEMENT_BLOCKS,
   getBlockClientId,
   getElementBounds,
+  getSelectionEditableElement,
   isElementVisible,
   isInSameBlock,
   isInsideRootBlock,

package/build-module/utils/dom.mjs.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-style/content-rtl.css

@@ -67,6 +67,12 @@
 /**
  * Focus styles.
  */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
 /**
  * Applies editor left position to the selector passed as argument
  */
@@ -461,7 +467,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   justify-content: center;
   overflow: hidden;
   font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #000;
   font-weight: normal;
 }
@@ -611,18 +617,13 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   width: 100%;
   height: auto;
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
+  border-color: currentColor;
 }
 .is-dark-theme .block-editor-button-block-appender {
   color: rgba(255, 255, 255, 0.65);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
 }
 .block-editor-button-block-appender:hover {
   color: var(--wp-admin-theme-color);
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
-}
-.block-editor-button-block-appender:focus {
-  box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 }
 .block-editor-button-block-appender:active {
   color: #000;
@@ -819,7 +820,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   position: fixed;
   right: 0;
   left: 0;
-  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
+  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0px));
   bottom: 0;
   overflow-y: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
 }
@@ -827,12 +828,12 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   transform: translateX(calc(-1*((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale, 1))));
   scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
   background-color: var(--wp-editor-canvas-background);
-  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
-  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
+  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body {
-  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
   flex: 1;
@@ -922,7 +923,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 1em;
   border: 1px solid #1e1e1e;
   border-radius: 2px;
@@ -930,7 +931,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .block-editor-warning .block-editor-warning__message {
   line-height: 1.4;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   color: #1e1e1e;
   margin: 0;

package/build-style/content.css

@@ -67,6 +67,12 @@
 /**
  * Focus styles.
  */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
 /**
  * Applies editor left position to the selector passed as argument
  */
@@ -462,7 +468,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   justify-content: center;
   overflow: hidden;
   font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #000;
   font-weight: normal;
 }
@@ -612,18 +618,13 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   width: 100%;
   height: auto;
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
+  border-color: currentColor;
 }
 .is-dark-theme .block-editor-button-block-appender {
   color: rgba(255, 255, 255, 0.65);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
 }
 .block-editor-button-block-appender:hover {
   color: var(--wp-admin-theme-color);
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
-}
-.block-editor-button-block-appender:focus {
-  box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 }
 .block-editor-button-block-appender:active {
   color: #000;
@@ -820,7 +821,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   position: fixed;
   left: 0;
   right: 0;
-  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
+  top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0px));
   bottom: 0;
   overflow-y: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
 }
@@ -828,12 +829,12 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   transform: translateX(calc((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
   scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
   background-color: var(--wp-editor-canvas-background);
-  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
-  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
+  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body {
-  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 }
 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
   flex: 1;
@@ -923,7 +924,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 1em;
   border: 1px solid #1e1e1e;
   border-radius: 2px;
@@ -931,7 +932,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .block-editor-warning .block-editor-warning__message {
   line-height: 1.4;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   color: #1e1e1e;
   margin: 0;

package/build-style/default-editor-styles-rtl.css

@@ -50,7 +50,7 @@
  * a theme.json file, or has toggled off "Use theme styles" in preferences.
  */
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 18px;
   line-height: 1.5;
   --wp--style--block-gap: 2em;

package/build-style/default-editor-styles.css

@@ -50,7 +50,7 @@
  * a theme.json file, or has toggled off "Use theme styles" in preferences.
  */
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 18px;
   line-height: 1.5;
   --wp--style--block-gap: 2em;