@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.23.0

package/build-module/components/use-block-display-information/index.mjs

@@ -9,6 +9,8 @@ import {
 import { __ } from "@wordpress/i18n";
 import { symbol } from "@wordpress/icons";
 import { store as blockEditorStore } from "../../store/index.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+import { isIsolatedEditorKey } from "../../store/private-keys.mjs";
 function getPositionTypeLabel(attributes) {
   const positionType = attributes?.style?.position?.type;
   if (positionType === "sticky") {
@@ -25,11 +27,13 @@ function useBlockDisplayInformation(clientId) {
       if (!clientId) {
         return null;
       }
+      const blockEditorSelect = select(blockEditorStore);
       const {
         getBlockName,
         getBlockAttributes,
-        __experimentalGetParsedPattern
-      } = select(blockEditorStore);
+        __experimentalGetParsedPattern,
+        getSettings
+      } = blockEditorSelect;
       const { getBlockType, getActiveBlockVariation } = select(blocksStore);
       const blockName = getBlockName(clientId);
       const blockType = getBlockType(blockName);
@@ -37,8 +41,11 @@ function useBlockDisplayInformation(clientId) {
         return null;
       }
       const attributes = getBlockAttributes(clientId);
+      const { isWithinEditedContentOnlySection } = unlock(blockEditorSelect);
+      const isIsolatedEditor = !!getSettings()?.[isIsolatedEditorKey];
       const patternName = attributes?.metadata?.patternName;
-      if (patternName) {
+      const isEditedContentOnlySection = isWithinEditedContentOnlySection(clientId);
+      if (patternName && !isEditedContentOnlySection && !isIsolatedEditor) {
         const pattern = __experimentalGetParsedPattern(patternName);
         const positionLabel2 = getPositionTypeLabel(attributes);
         return {

package/build-module/components/use-block-display-information/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/use-block-display-information/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tstore as blocksStore,\n\tisReusableBlock,\n\tisTemplatePart,\n\t__experimentalGetBlockLabel as getBlockLabel,\n} from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport { symbol } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */\n\n/**\n * Contains basic block's information for display reasons.\n *\n * @typedef {Object} WPBlockDisplayInformation\n *\n * @property {boolean} isSynced    True if is a reusable block or template part\n * @property {string}  title       Human-readable block type label.\n * @property {WPIcon}  icon        Block type icon.\n * @property {string}  description A detailed block type description.\n * @property {string}  anchor      HTML anchor.\n * @property {name}    name        A custom, human readable name for the block.\n */\n\n/**\n * Get the display label for a block's position type.\n *\n * @param {Object} attributes Block attributes.\n * @return {string} The position type label.\n */\nfunction getPositionTypeLabel( attributes ) {\n\tconst positionType = attributes?.style?.position?.type;\n\n\tif ( positionType === 'sticky' ) {\n\t\treturn __( 'Sticky' );\n\t}\n\n\tif ( positionType === 'fixed' ) {\n\t\treturn __( 'Fixed' );\n\t}\n\n\treturn null;\n}\n\n/**\n * Hook used to try to find a matching block variation and return\n * the appropriate information for display reasons. In order to\n * to try to find a match we need to things:\n * 1. Block's client id to extract it's current attributes.\n * 2. A block variation should have set `isActive` prop to a proper function.\n *\n * If for any reason a block variation match cannot be found,\n * the returned information come from the Block Type.\n * If no blockType is found with the provided clientId, returns null.\n *\n * @param {string} clientId Block's client id.\n * @return {?WPBlockDisplayInformation} Block's display information, or `null` when the block or its type not found.\n */\n\nexport default function useBlockDisplayInformation( clientId ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\t__experimentalGetParsedPattern,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockType, getActiveBlockVariation } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst blockName = getBlockName( clientId );\n\t\t\tconst blockType = getBlockType( blockName );\n\t\t\tif ( ! blockType ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst attributes = getBlockAttributes( clientId );\n\n\t\t\t// Check if this block is a pattern\n\t\t\tconst patternName = attributes?.metadata?.patternName;\n\n\t\t\tif ( patternName ) {\n\t\t\t\tconst pattern = __experimentalGetParsedPattern( patternName );\n\t\t\t\tconst positionLabel = getPositionTypeLabel( attributes );\n\t\t\t\treturn {\n\t\t\t\t\tisSynced: false,\n\t\t\t\t\ttitle: __( 'Pattern' ),\n\t\t\t\t\ticon: symbol,\n\t\t\t\t\tdescription:\n\t\t\t\t\t\tpattern?.description || __( 'A block pattern.' ),\n\t\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\t\tpositionLabel,\n\t\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\t\tname: pattern?.title || attributes?.metadata?.name,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst match = getActiveBlockVariation( blockName, attributes );\n\t\t\tconst isSynced =\n\t\t\t\tisReusableBlock( blockType ) || isTemplatePart( blockType );\n\t\t\tconst syncedTitle = isSynced\n\t\t\t\t? getBlockLabel( blockType, attributes )\n\t\t\t\t: undefined;\n\t\t\tconst title = syncedTitle || blockType.title;\n\t\t\tconst positionLabel = getPositionTypeLabel( attributes );\n\t\t\tconst blockTypeInfo = {\n\t\t\t\tisSynced,\n\t\t\t\ttitle,\n\t\t\t\ticon: blockType.icon,\n\t\t\t\tdescription: blockType.description,\n\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\tpositionLabel,\n\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\tname: attributes?.metadata?.name,\n\t\t\t};\n\t\t\tif ( ! match ) {\n\t\t\t\treturn blockTypeInfo;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tisSynced,\n\t\t\t\ttitle: match.title || blockType.title,\n\t\t\t\ticon: match.icon || blockType.icon,\n\t\t\t\tdescription: match.description || blockType.description,\n\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\tpositionLabel,\n\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\tname: attributes?.metadata?.name,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B;AAAA,EACC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,+BAA+B;AAAA,OACzB;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAKvB,SAAS,SAAS,wBAAwB;AAuB1C,SAAS,qBAAsB,YAAa;AAC3C,QAAM,eAAe,YAAY,OAAO,UAAU;AAElD,MAAK,iBAAiB,UAAW;AAChC,WAAO,GAAI,QAAS;AAAA,EACrB;AAEA,MAAK,iBAAiB,SAAU;AAC/B,WAAO,GAAI,OAAQ;AAAA,EACpB;AAEA,SAAO;AACR;AAiBe,SAAR,2BAA6C,UAAW;AAC9D,SAAO;AAAA,IACN,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAC7B,YAAM,EAAE,cAAc,wBAAwB,IAC7C,OAAQ,WAAY;AACrB,YAAM,YAAY,aAAc,QAAS;AACzC,YAAM,YAAY,aAAc,SAAU;AAC1C,UAAK,CAAE,WAAY;AAClB,eAAO;AAAA,MACR;AACA,YAAM,aAAa,mBAAoB,QAAS;AAGhD,YAAM,cAAc,YAAY,UAAU;AAE1C,UAAK,aAAc;AAClB,cAAM,UAAU,+BAAgC,WAAY;AAC5D,cAAMA,iBAAgB,qBAAsB,UAAW;AACvD,eAAO;AAAA,UACN,UAAU;AAAA,UACV,OAAO,GAAI,SAAU;AAAA,UACrB,MAAM;AAAA,UACN,aACC,SAAS,eAAe,GAAI,kBAAmB;AAAA,UAChD,QAAQ,YAAY;AAAA,UACpB,eAAAA;AAAA,UACA,cAAc,YAAY,OAAO,UAAU;AAAA,UAC3C,MAAM,SAAS,SAAS,YAAY,UAAU;AAAA,QAC/C;AAAA,MACD;AAEA,YAAM,QAAQ,wBAAyB,WAAW,UAAW;AAC7D,YAAM,WACL,gBAAiB,SAAU,KAAK,eAAgB,SAAU;AAC3D,YAAM,cAAc,WACjB,cAAe,WAAW,UAAW,IACrC;AACH,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,gBAAgB,qBAAsB,UAAW;AACvD,YAAM,gBAAgB;AAAA,QACrB;AAAA,QACA;AAAA,QACA,MAAM,UAAU;AAAA,QAChB,aAAa,UAAU;AAAA,QACvB,QAAQ,YAAY;AAAA,QACpB;AAAA,QACA,cAAc,YAAY,OAAO,UAAU;AAAA,QAC3C,MAAM,YAAY,UAAU;AAAA,MAC7B;AACA,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,QACN;AAAA,QACA,OAAO,MAAM,SAAS,UAAU;AAAA,QAChC,MAAM,MAAM,QAAQ,UAAU;AAAA,QAC9B,aAAa,MAAM,eAAe,UAAU;AAAA,QAC5C,QAAQ,YAAY;AAAA,QACpB;AAAA,QACA,cAAc,YAAY,OAAO,UAAU;AAAA,QAC3C,MAAM,YAAY,UAAU;AAAA,MAC7B;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tstore as blocksStore,\n\tisReusableBlock,\n\tisTemplatePart,\n\t__experimentalGetBlockLabel as getBlockLabel,\n} from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport { symbol } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport { isIsolatedEditorKey } from '../../store/private-keys';\n\n/** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */\n\n/**\n * Contains basic block's information for display reasons.\n *\n * @typedef {Object} WPBlockDisplayInformation\n *\n * @property {boolean} isSynced    True if is a reusable block or template part\n * @property {string}  title       Human-readable block type label.\n * @property {WPIcon}  icon        Block type icon.\n * @property {string}  description A detailed block type description.\n * @property {string}  anchor      HTML anchor.\n * @property {name}    name        A custom, human readable name for the block.\n */\n\n/**\n * Get the display label for a block's position type.\n *\n * @param {Object} attributes Block attributes.\n * @return {string} The position type label.\n */\nfunction getPositionTypeLabel( attributes ) {\n\tconst positionType = attributes?.style?.position?.type;\n\n\tif ( positionType === 'sticky' ) {\n\t\treturn __( 'Sticky' );\n\t}\n\n\tif ( positionType === 'fixed' ) {\n\t\treturn __( 'Fixed' );\n\t}\n\n\treturn null;\n}\n\n/**\n * Hook used to try to find a matching block variation and return\n * the appropriate information for display reasons. In order to\n * to try to find a match we need to things:\n * 1. Block's client id to extract it's current attributes.\n * 2. A block variation should have set `isActive` prop to a proper function.\n *\n * If for any reason a block variation match cannot be found,\n * the returned information come from the Block Type.\n * If no blockType is found with the provided clientId, returns null.\n *\n * @param {string} clientId Block's client id.\n * @return {?WPBlockDisplayInformation} Block's display information, or `null` when the block or its type not found.\n */\n\nexport default function useBlockDisplayInformation( clientId ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst blockEditorSelect = select( blockEditorStore );\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\t__experimentalGetParsedPattern,\n\t\t\t\tgetSettings,\n\t\t\t} = blockEditorSelect;\n\t\t\tconst { getBlockType, getActiveBlockVariation } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst blockName = getBlockName( clientId );\n\t\t\tconst blockType = getBlockType( blockName );\n\t\t\tif ( ! blockType ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst attributes = getBlockAttributes( clientId );\n\t\t\tconst { isWithinEditedContentOnlySection } =\n\t\t\t\tunlock( blockEditorSelect );\n\t\t\tconst isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];\n\n\t\t\t// Check if this block is a pattern\n\t\t\tconst patternName = attributes?.metadata?.patternName;\n\t\t\tconst isEditedContentOnlySection =\n\t\t\t\tisWithinEditedContentOnlySection( clientId );\n\n\t\t\tif (\n\t\t\t\tpatternName &&\n\t\t\t\t! isEditedContentOnlySection &&\n\t\t\t\t! isIsolatedEditor\n\t\t\t) {\n\t\t\t\tconst pattern = __experimentalGetParsedPattern( patternName );\n\t\t\t\tconst positionLabel = getPositionTypeLabel( attributes );\n\t\t\t\treturn {\n\t\t\t\t\tisSynced: false,\n\t\t\t\t\ttitle: __( 'Pattern' ),\n\t\t\t\t\ticon: symbol,\n\t\t\t\t\tdescription:\n\t\t\t\t\t\tpattern?.description || __( 'A block pattern.' ),\n\t\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\t\tpositionLabel,\n\t\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\t\tname: pattern?.title || attributes?.metadata?.name,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst match = getActiveBlockVariation( blockName, attributes );\n\t\t\tconst isSynced =\n\t\t\t\tisReusableBlock( blockType ) || isTemplatePart( blockType );\n\t\t\tconst syncedTitle = isSynced\n\t\t\t\t? getBlockLabel( blockType, attributes )\n\t\t\t\t: undefined;\n\t\t\tconst title = syncedTitle || blockType.title;\n\t\t\tconst positionLabel = getPositionTypeLabel( attributes );\n\t\t\tconst blockTypeInfo = {\n\t\t\t\tisSynced,\n\t\t\t\ttitle,\n\t\t\t\ticon: blockType.icon,\n\t\t\t\tdescription: blockType.description,\n\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\tpositionLabel,\n\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\tname: attributes?.metadata?.name,\n\t\t\t};\n\t\t\tif ( ! match ) {\n\t\t\t\treturn blockTypeInfo;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tisSynced,\n\t\t\t\ttitle: match.title || blockType.title,\n\t\t\t\ticon: match.icon || blockType.icon,\n\t\t\t\tdescription: match.description || blockType.description,\n\t\t\t\tanchor: attributes?.anchor,\n\t\t\t\tpositionLabel,\n\t\t\t\tpositionType: attributes?.style?.position?.type,\n\t\t\t\tname: attributes?.metadata?.name,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B;AAAA,EACC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,+BAA+B;AAAA,OACzB;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAKvB,SAAS,SAAS,wBAAwB;AAC1C,SAAS,cAAc;AACvB,SAAS,2BAA2B;AAuBpC,SAAS,qBAAsB,YAAa;AAC3C,QAAM,eAAe,YAAY,OAAO,UAAU;AAElD,MAAK,iBAAiB,UAAW;AAChC,WAAO,GAAI,QAAS;AAAA,EACrB;AAEA,MAAK,iBAAiB,SAAU;AAC/B,WAAO,GAAI,OAAQ;AAAA,EACpB;AAEA,SAAO;AACR;AAiBe,SAAR,2BAA6C,UAAW;AAC9D,SAAO;AAAA,IACN,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM,oBAAoB,OAAQ,gBAAiB;AACnD,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI;AACJ,YAAM,EAAE,cAAc,wBAAwB,IAC7C,OAAQ,WAAY;AACrB,YAAM,YAAY,aAAc,QAAS;AACzC,YAAM,YAAY,aAAc,SAAU;AAC1C,UAAK,CAAE,WAAY;AAClB,eAAO;AAAA,MACR;AACA,YAAM,aAAa,mBAAoB,QAAS;AAChD,YAAM,EAAE,iCAAiC,IACxC,OAAQ,iBAAkB;AAC3B,YAAM,mBAAmB,CAAC,CAAE,YAAY,IAAK,mBAAoB;AAGjE,YAAM,cAAc,YAAY,UAAU;AAC1C,YAAM,6BACL,iCAAkC,QAAS;AAE5C,UACC,eACA,CAAE,8BACF,CAAE,kBACD;AACD,cAAM,UAAU,+BAAgC,WAAY;AAC5D,cAAMA,iBAAgB,qBAAsB,UAAW;AACvD,eAAO;AAAA,UACN,UAAU;AAAA,UACV,OAAO,GAAI,SAAU;AAAA,UACrB,MAAM;AAAA,UACN,aACC,SAAS,eAAe,GAAI,kBAAmB;AAAA,UAChD,QAAQ,YAAY;AAAA,UACpB,eAAAA;AAAA,UACA,cAAc,YAAY,OAAO,UAAU;AAAA,UAC3C,MAAM,SAAS,SAAS,YAAY,UAAU;AAAA,QAC/C;AAAA,MACD;AAEA,YAAM,QAAQ,wBAAyB,WAAW,UAAW;AAC7D,YAAM,WACL,gBAAiB,SAAU,KAAK,eAAgB,SAAU;AAC3D,YAAM,cAAc,WACjB,cAAe,WAAW,UAAW,IACrC;AACH,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,gBAAgB,qBAAsB,UAAW;AACvD,YAAM,gBAAgB;AAAA,QACrB;AAAA,QACA;AAAA,QACA,MAAM,UAAU;AAAA,QAChB,aAAa,UAAU;AAAA,QACvB,QAAQ,YAAY;AAAA,QACpB;AAAA,QACA,cAAc,YAAY,OAAO,UAAU;AAAA,QAC3C,MAAM,YAAY,UAAU;AAAA,MAC7B;AACA,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,QACN;AAAA,QACA,OAAO,MAAM,SAAS,UAAU;AAAA,QAChC,MAAM,MAAM,QAAQ,UAAU;AAAA,QAC9B,aAAa,MAAM,eAAe,UAAU;AAAA,QAC5C,QAAQ,YAAY;AAAA,QACpB;AAAA,QACA,cAAc,YAAY,OAAO,UAAU;AAAA,QAC3C,MAAM,YAAY,UAAU;AAAA,MAC7B;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AACD;",
   "names": ["positionLabel"]
 }

package/build-module/components/use-resize-canvas/index.mjs

@@ -1,57 +1,10 @@
 // packages/block-editor/src/components/use-resize-canvas/index.js
-import { useEffect, useState } from "@wordpress/element";
-function useResizeCanvas(deviceType) {
-  const [actualWidth, updateActualWidth] = useState(window.innerWidth);
-  useEffect(() => {
-    if (deviceType === "Desktop") {
-      return;
-    }
-    const resizeListener = () => updateActualWidth(window.innerWidth);
-    window.addEventListener("resize", resizeListener);
-    return () => {
-      window.removeEventListener("resize", resizeListener);
-    };
-  }, [deviceType]);
-  const getCanvasWidth = (device) => {
-    let deviceWidth;
-    switch (device) {
-      case "Tablet":
-        deviceWidth = 782 - 1;
-        break;
-      case "Mobile":
-        deviceWidth = 480 - 1;
-        break;
-      default:
-        return null;
-    }
-    return deviceWidth < actualWidth ? deviceWidth : actualWidth;
-  };
-  const contentInlineStyles = (device) => {
-    const height = device === "Mobile" ? "768px" : "1024px";
-    const marginVertical = "40px";
-    const marginHorizontal = "auto";
-    switch (device) {
-      case "Tablet":
-      case "Mobile":
-        return {
-          width: getCanvasWidth(device),
-          // Keeping margin styles separate to avoid warnings
-          // when those props get overridden in the iframe component
-          marginTop: marginVertical,
-          marginBottom: marginVertical,
-          marginLeft: marginHorizontal,
-          marginRight: marginHorizontal,
-          height,
-          overflowY: "auto"
-        };
-      default:
-        return {
-          marginLeft: marginHorizontal,
-          marginRight: marginHorizontal
-        };
-    }
-  };
-  return contentInlineStyles(deviceType);
+import deprecated from "@wordpress/deprecated";
+function useResizeCanvas() {
+  deprecated("wp.blockEditor.useResizeCanvas", {
+    since: "7.1",
+    hint: "Device preview is now handled by the editor canvas. This hook no longer does anything."
+  });
 }
 export {
   useResizeCanvas as default

package/build-module/components/use-resize-canvas/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/use-resize-canvas/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\n/**\n * Function to resize the editor window.\n *\n * @param {string} deviceType Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)\n *\n * @return {Object} Inline styles to be added to resizable container.\n */\nexport default function useResizeCanvas( deviceType ) {\n\tconst [ actualWidth, updateActualWidth ] = useState( window.innerWidth );\n\n\tuseEffect( () => {\n\t\tif ( deviceType === 'Desktop' ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeListener = () => updateActualWidth( window.innerWidth );\n\t\twindow.addEventListener( 'resize', resizeListener );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'resize', resizeListener );\n\t\t};\n\t}, [ deviceType ] );\n\n\tconst getCanvasWidth = ( device ) => {\n\t\tlet deviceWidth;\n\n\t\t/*\n\t\t * Matches the breakpoints in packages/base-styles/_breakpoints.scss,\n\t\t * and breakpoints in packages/compose/src/hooks/use-viewport-match/index.js.\n\t\t * minus 1 to trigger the media query for device preview.\n\t\t */\n\t\tswitch ( device ) {\n\t\t\tcase 'Tablet':\n\t\t\t\tdeviceWidth = 782 - 1; // preview for useViewportMatch( 'medium', '<' )\n\t\t\t\tbreak;\n\t\t\tcase 'Mobile':\n\t\t\t\tdeviceWidth = 480 - 1; // preview for useViewportMatch( 'mobile', '<' )\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn null;\n\t\t}\n\n\t\treturn deviceWidth < actualWidth ? deviceWidth : actualWidth;\n\t};\n\n\tconst contentInlineStyles = ( device ) => {\n\t\tconst height = device === 'Mobile' ? '768px' : '1024px';\n\t\tconst marginVertical = '40px';\n\t\tconst marginHorizontal = 'auto';\n\n\t\tswitch ( device ) {\n\t\t\tcase 'Tablet':\n\t\t\tcase 'Mobile':\n\t\t\t\treturn {\n\t\t\t\t\twidth: getCanvasWidth( device ),\n\t\t\t\t\t// Keeping margin styles separate to avoid warnings\n\t\t\t\t\t// when those props get overridden in the iframe component\n\t\t\t\t\tmarginTop: marginVertical,\n\t\t\t\t\tmarginBottom: marginVertical,\n\t\t\t\t\tmarginLeft: marginHorizontal,\n\t\t\t\t\tmarginRight: marginHorizontal,\n\t\t\t\t\theight,\n\t\t\t\t\toverflowY: 'auto',\n\t\t\t\t};\n\t\t\tdefault:\n\t\t\t\treturn {\n\t\t\t\t\tmarginLeft: marginHorizontal,\n\t\t\t\t\tmarginRight: marginHorizontal,\n\t\t\t\t};\n\t\t}\n\t};\n\n\treturn contentInlineStyles( deviceType );\n}\n"],
-  "mappings": ";AAGA,SAAS,WAAW,gBAAgB;AASrB,SAAR,gBAAkC,YAAa;AACrD,QAAM,CAAE,aAAa,iBAAkB,IAAI,SAAU,OAAO,UAAW;AAEvE,YAAW,MAAM;AAChB,QAAK,eAAe,WAAY;AAC/B;AAAA,IACD;AAEA,UAAM,iBAAiB,MAAM,kBAAmB,OAAO,UAAW;AAClE,WAAO,iBAAkB,UAAU,cAAe;AAElD,WAAO,MAAM;AACZ,aAAO,oBAAqB,UAAU,cAAe;AAAA,IACtD;AAAA,EACD,GAAG,CAAE,UAAW,CAAE;AAElB,QAAM,iBAAiB,CAAE,WAAY;AACpC,QAAI;AAOJ,YAAS,QAAS;AAAA,MACjB,KAAK;AACJ,sBAAc,MAAM;AACpB;AAAA,MACD,KAAK;AACJ,sBAAc,MAAM;AACpB;AAAA,MACD;AACC,eAAO;AAAA,IACT;AAEA,WAAO,cAAc,cAAc,cAAc;AAAA,EAClD;AAEA,QAAM,sBAAsB,CAAE,WAAY;AACzC,UAAM,SAAS,WAAW,WAAW,UAAU;AAC/C,UAAM,iBAAiB;AACvB,UAAM,mBAAmB;AAEzB,YAAS,QAAS;AAAA,MACjB,KAAK;AAAA,MACL,KAAK;AACJ,eAAO;AAAA,UACN,OAAO,eAAgB,MAAO;AAAA;AAAA;AAAA,UAG9B,WAAW;AAAA,UACX,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,aAAa;AAAA,UACb;AAAA,UACA,WAAW;AAAA,QACZ;AAAA,MACD;AACC,eAAO;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QACd;AAAA,IACF;AAAA,EACD;AAEA,SAAO,oBAAqB,UAAW;AACxC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Previously returned inline styles that sized the editor canvas to emulate a\n * device preview width. Device preview is now handled by the editor's resizable\n * canvas, so this hook is a no-op kept for backward compatibility.\n *\n * @deprecated\n */\nexport default function useResizeCanvas() {\n\tdeprecated( 'wp.blockEditor.useResizeCanvas', {\n\t\tsince: '7.1',\n\t\thint: 'Device preview is now handled by the editor canvas. This hook no longer does anything.',\n\t} );\n}\n"],
+  "mappings": ";AAGA,OAAO,gBAAgB;AASR,SAAR,kBAAmC;AACzC,aAAY,kCAAkC;AAAA,IAC7C,OAAO;AAAA,IACP,MAAM;AAAA,EACP,CAAE;AACH;",
   "names": []
 }

package/build-module/hooks/anchor.mjs

@@ -29,7 +29,6 @@ function BlockEditAnchorControlPure({ anchor, setAttributes }) {
   return /* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
     TextControl,
     {
-      __next40pxDefaultSize: true,
       className: "html-anchor-control",
       label: __("HTML anchor"),
       help: /* @__PURE__ */ jsxs(Fragment, { children: [

package/build-module/hooks/anchor.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/anchor.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { TextControl, ExternalLink } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\n\n/**\n * Regular expression matching invalid anchor characters for replacement.\n *\n * @type {RegExp}\n */\nconst ANCHOR_REGEX = /[\\s#]/g;\n\n/**\n * Filters registered block settings, extending attributes with anchor using ID\n * of the first node.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( 'type' in ( settings.attributes?.anchor ?? {} ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'anchor' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tanchor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\nfunction BlockEditAnchorControlPure( { anchor, setAttributes } ) {\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"html-anchor-control\"\n\t\t\t\tlabel={ __( 'HTML anchor' ) }\n\t\t\t\thelp={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Enter a word or two—without spaces—to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'\n\t\t\t\t\t\t) }{ ' ' }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/page-jumps/'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about anchors' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tvalue={ anchor || '' }\n\t\t\t\tplaceholder={ null }\n\t\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\t\tnextValue = nextValue.replace( ANCHOR_REGEX, '-' );\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tanchor: nextValue !== '' ? nextValue : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tautoCapitalize=\"none\"\n\t\t\t\tautoComplete=\"off\"\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nexport default {\n\taddSaveProps,\n\tedit: BlockEditAnchorControlPure,\n\tattributeKeys: [ 'anchor' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'anchor' );\n\t},\n};\n\n/**\n * Override props assigned to save component to inject anchor ID, if block\n * supports anchor. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif ( hasBlockSupport( blockType, 'anchor' ) ) {\n\t\textraProps.id = attributes.anchor === '' ? null : attributes.anchor;\n\t}\n\n\treturn extraProps;\n}\n\naddFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );\n"],
-  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAKhC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAiD/B,mBAIC,KAJD;AA1CL,IAAM,eAAe;AAUd,SAAS,aAAc,UAAW;AAExC,MAAK,WAAY,SAAS,YAAY,UAAU,CAAC,IAAM;AACtD,WAAO;AAAA,EACR;AACA,MAAK,gBAAiB,UAAU,QAAS,GAAI;AAE5C,aAAS,aAAa;AAAA,MACrB,GAAG,SAAS;AAAA,MACZ,QAAQ;AAAA,QACP,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,2BAA4B,EAAE,QAAQ,cAAc,GAAI;AAChE,QAAM,mBAAmB,oBAAoB;AAE7C,MAAK,qBAAqB,WAAY;AACrC,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,qBAAkB,OAAM,YACxB;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,WAAU;AAAA,MACV,OAAQ,GAAI,aAAc;AAAA,MAC1B,MACC,iCACG;AAAA;AAAA,UACD;AAAA,QACD;AAAA,QAAK;AAAA,QACL;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,cACN;AAAA,YACD;AAAA,YAEE,aAAI,0BAA2B;AAAA;AAAA,QAClC;AAAA,SACD;AAAA,MAED,OAAQ,UAAU;AAAA,MAClB,aAAc;AAAA,MACd,UAAW,CAAE,cAAe;AAC3B,oBAAY,UAAU,QAAS,cAAc,GAAI;AACjD,sBAAe;AAAA,UACd,QAAQ,cAAc,KAAK,YAAY;AAAA,QACxC,CAAE;AAAA,MACH;AAAA,MACA,gBAAe;AAAA,MACf,cAAa;AAAA;AAAA,EACd,GACD;AAEF;AAEA,IAAO,iBAAQ;AAAA,EACd;AAAA,EACA,MAAM;AAAA,EACN,eAAe,CAAE,QAAS;AAAA,EAC1B,WAAY,MAAO;AAClB,WAAO,gBAAiB,MAAM,QAAS;AAAA,EACxC;AACD;AAaO,SAAS,aAAc,YAAY,WAAW,YAAa;AACjE,MAAK,gBAAiB,WAAW,QAAS,GAAI;AAC7C,eAAW,KAAK,WAAW,WAAW,KAAK,OAAO,WAAW;AAAA,EAC9D;AAEA,SAAO;AACR;AAEA,UAAW,4BAA4B,yBAAyB,YAAa;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { TextControl, ExternalLink } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\n\n/**\n * Regular expression matching invalid anchor characters for replacement.\n *\n * @type {RegExp}\n */\nconst ANCHOR_REGEX = /[\\s#]/g;\n\n/**\n * Filters registered block settings, extending attributes with anchor using ID\n * of the first node.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( 'type' in ( settings.attributes?.anchor ?? {} ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'anchor' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tanchor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\nfunction BlockEditAnchorControlPure( { anchor, setAttributes } ) {\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<TextControl\n\t\t\t\tclassName=\"html-anchor-control\"\n\t\t\t\tlabel={ __( 'HTML anchor' ) }\n\t\t\t\thelp={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Enter a word or two—without spaces—to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'\n\t\t\t\t\t\t) }{ ' ' }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/page-jumps/'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about anchors' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tvalue={ anchor || '' }\n\t\t\t\tplaceholder={ null }\n\t\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\t\tnextValue = nextValue.replace( ANCHOR_REGEX, '-' );\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tanchor: nextValue !== '' ? nextValue : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tautoCapitalize=\"none\"\n\t\t\t\tautoComplete=\"off\"\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nexport default {\n\taddSaveProps,\n\tedit: BlockEditAnchorControlPure,\n\tattributeKeys: [ 'anchor' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'anchor' );\n\t},\n};\n\n/**\n * Override props assigned to save component to inject anchor ID, if block\n * supports anchor. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif ( hasBlockSupport( blockType, 'anchor' ) ) {\n\t\textraProps.id = attributes.anchor === '' ? null : attributes.anchor;\n\t}\n\n\treturn extraProps;\n}\n\naddFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );\n"],
+  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAKhC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAgD/B,mBAIC,KAJD;AAzCL,IAAM,eAAe;AAUd,SAAS,aAAc,UAAW;AAExC,MAAK,WAAY,SAAS,YAAY,UAAU,CAAC,IAAM;AACtD,WAAO;AAAA,EACR;AACA,MAAK,gBAAiB,UAAU,QAAS,GAAI;AAE5C,aAAS,aAAa;AAAA,MACrB,GAAG,SAAS;AAAA,MACZ,QAAQ;AAAA,QACP,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,2BAA4B,EAAE,QAAQ,cAAc,GAAI;AAChE,QAAM,mBAAmB,oBAAoB;AAE7C,MAAK,qBAAqB,WAAY;AACrC,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,qBAAkB,OAAM,YACxB;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ,GAAI,aAAc;AAAA,MAC1B,MACC,iCACG;AAAA;AAAA,UACD;AAAA,QACD;AAAA,QAAK;AAAA,QACL;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,cACN;AAAA,YACD;AAAA,YAEE,aAAI,0BAA2B;AAAA;AAAA,QAClC;AAAA,SACD;AAAA,MAED,OAAQ,UAAU;AAAA,MAClB,aAAc;AAAA,MACd,UAAW,CAAE,cAAe;AAC3B,oBAAY,UAAU,QAAS,cAAc,GAAI;AACjD,sBAAe;AAAA,UACd,QAAQ,cAAc,KAAK,YAAY;AAAA,QACxC,CAAE;AAAA,MACH;AAAA,MACA,gBAAe;AAAA,MACf,cAAa;AAAA;AAAA,EACd,GACD;AAEF;AAEA,IAAO,iBAAQ;AAAA,EACd;AAAA,EACA,MAAM;AAAA,EACN,eAAe,CAAE,QAAS;AAAA,EAC1B,WAAY,MAAO;AAClB,WAAO,gBAAiB,MAAM,QAAS;AAAA,EACxC;AACD;AAaO,SAAS,aAAc,YAAY,WAAW,YAAa;AACjE,MAAK,gBAAiB,WAAW,QAAS,GAAI;AAC7C,eAAW,KAAK,WAAW,WAAW,KAAK,OAAO,WAAW;AAAA,EAC9D;AAEA,SAAO;AACR;AAEA,UAAW,4BAA4B,yBAAyB,YAAa;",
   "names": []
 }

package/build-module/hooks/background.mjs

@@ -2,10 +2,12 @@
 import clsx from "clsx";
 import { getBlockSupport } from "@wordpress/blocks";
 import { useSelect } from "@wordpress/data";
-import { useCallback } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
 import InspectorControls from "../components/inspector-controls/index.mjs";
 import { cleanEmptyObject } from "./utils.mjs";
+import { extractPresetSlug } from "../utils/color-values.mjs";
 import { store as blockEditorStore } from "../store/index.mjs";
+import useBlockColorContrastWarning from "./contrast-checker.mjs";
 import {
   default as StylesBackgroundPanel,
   useHasBackgroundPanel,
@@ -70,40 +72,46 @@ function useBlockProps({ name, style }) {
 function getBackgroundImageClasses(style) {
   return hasBackgroundImageValue(style) || hasBackgroundGradientValue(style) ? "has-background" : "";
 }
-function BackgroundInspectorControl({
-  children,
-  backgroundGradientSupported = false
-}) {
-  const resetAllFilter = useCallback(
-    (attributes) => {
-      const updatedClassName = attributes.className?.includes(
-        "has-background"
-      ) ? attributes.className.split(" ").filter((c) => c !== "has-background").join(" ") || void 0 : attributes.className;
-      return {
-        ...attributes,
-        className: updatedClassName,
-        style: cleanEmptyObject({
-          ...attributes.style,
-          background: void 0,
-          color: backgroundGradientSupported ? {
-            ...attributes.style?.color,
-            gradient: void 0
-          } : attributes.style?.color
-        })
-      };
-    },
-    [backgroundGradientSupported]
+function backgroundResetAllFilter(attributes) {
+  const updatedClassName = attributes.className?.includes("has-background") ? attributes.className.split(" ").filter((c) => c !== "has-background").join(" ") || void 0 : attributes.className;
+  return {
+    ...attributes,
+    className: updatedClassName,
+    backgroundColor: void 0,
+    gradient: void 0,
+    style: cleanEmptyObject({
+      ...attributes.style,
+      background: void 0,
+      color: {
+        ...attributes.style?.color,
+        background: void 0,
+        gradient: void 0
+      }
+    })
+  };
+}
+function BackgroundInspectorControl({ children }) {
+  return /* @__PURE__ */ jsx(
+    InspectorControls,
+    {
+      group: "background",
+      resetAllFilter: backgroundResetAllFilter,
+      children
+    }
   );
-  return /* @__PURE__ */ jsx(InspectorControls, { group: "background", resetAllFilter, children });
 }
 function BackgroundImagePanel({
   clientId,
   name,
   setAttributes,
-  settings
+  settings,
+  // Allows rendering outside the `background` inspector group (e.g. section
+  // blocks direct-render this panel because their support fills are gated
+  // off by editing mode). Defaults to the slot-based wrapper.
+  asWrapper
 }) {
   const selectedState = useBlockStyleState();
-  const { style, className, inheritedValue } = useSelect(
+  const { style, className, backgroundColor, gradient, inheritedValue } = useSelect(
     (select) => {
       const { getBlockAttributes, getSettings } = select(blockEditorStore);
       const _settings = getSettings();
@@ -111,13 +119,8 @@ function BackgroundImagePanel({
       return {
         style: blockAttributes?.style,
         className: blockAttributes?.className,
-        /*
-         * To ensure we pass down the right inherited values:
-         * @TODO 1. Pass inherited value down to all block style controls,
-         *   See: packages/block-editor/src/hooks/style.js
-         * @TODO 2. Add support for block style variations,
-         *   See implementation: packages/block-editor/src/hooks/block-style-variation.js
-         */
+        backgroundColor: blockAttributes?.backgroundColor,
+        gradient: blockAttributes?.gradient,
         inheritedValue: _settings[globalStylesDataKey]?.blocks?.[name]
       };
     },
@@ -127,54 +130,85 @@ function BackgroundImagePanel({
     name,
     "gradient"
   );
-  const as = useCallback(
-    ({ children }) => /* @__PURE__ */ jsx(
-      BackgroundInspectorControl,
-      {
-        backgroundGradientSupported,
-        children
+  const colorSupport = getBlockSupport(name, "color");
+  const hasColorBackgroundSupport = colorSupport && colorSupport.background !== false;
+  const hasColorGradientSupport = !!colorSupport?.gradients;
+  const isStateSelected = !isDefaultBlockStyleState(selectedState);
+  const styleValue = {
+    ...style,
+    color: {
+      ...style?.color,
+      background: backgroundColor ? "var:preset|color|" + backgroundColor : style?.color?.background,
+      gradient: !backgroundGradientSupported && gradient ? "var:preset|gradient|" + gradient : style?.color?.gradient
+    },
+    ...backgroundGradientSupported && {
+      background: {
+        ...style?.background,
+        gradient: gradient ? "var:preset|gradient|" + gradient : style?.background?.gradient ?? style?.color?.gradient
       }
-    ),
-    [backgroundGradientSupported]
-  );
-  if (!useHasBackgroundPanel(settings) || !hasBackgroundSupport(name)) {
+    }
+  };
+  const enableContrastChecking = !isStateSelected && !styleValue?.color?.gradient && !styleValue?.background?.gradient && !!styleValue?.color?.background && (settings?.color?.text || settings?.color?.link) && false !== getBlockSupport(name, ["color", "enableContrastChecker"]);
+  const contrastWarning = useBlockColorContrastWarning({
+    clientId,
+    name,
+    enabled: !!enableContrastChecking,
+    messageOverride: __(
+      "This color combination has poor contrast. Consider increasing contrast between background and foreground."
+    )
+  });
+  if (!useHasBackgroundPanel(settings) || !hasBackgroundSupport(name) && !hasColorBackgroundSupport && !hasColorGradientSupport) {
     return null;
   }
-  const isStateSelected = !isDefaultBlockStyleState(selectedState);
-  const onChange = isStateSelected ? (newStyle) => {
-    setAttributes({
-      style: setStyleForState(style, selectedState, newStyle)
-    });
-  } : (newStyle) => {
+  const onChange = (newStyle) => {
+    if (isStateSelected) {
+      setAttributes({
+        style: setStyleForState(style, selectedState, newStyle)
+      });
+      return;
+    }
+    const newBackgroundColorValue = newStyle?.color?.background;
+    const newBackgroundColorSlug = extractPresetSlug(
+      newBackgroundColorValue,
+      "color"
+    );
+    const newGradientValue = backgroundGradientSupported ? newStyle?.background?.gradient : newStyle?.color?.gradient;
+    const newGradientSlug = extractPresetSlug(
+      newGradientValue,
+      "gradient"
+    );
+    const cleanedColorGradient = newGradientSlug ? void 0 : newStyle?.color?.gradient;
+    const cleanedStyle = {
+      ...newStyle,
+      color: {
+        ...newStyle?.color,
+        background: newBackgroundColorSlug ? void 0 : newBackgroundColorValue,
+        gradient: backgroundGradientSupported ? void 0 : cleanedColorGradient
+      }
+    };
+    if (backgroundGradientSupported) {
+      cleanedStyle.background = {
+        ...cleanedStyle.background,
+        gradient: newStyle?.background?.gradient
+      };
+    }
     const isMigrating = backgroundGradientSupported && !!style?.color?.gradient;
     const newAttributes = {
-      style: cleanEmptyObject(
-        backgroundGradientSupported ? {
-          ...newStyle,
-          color: {
-            ...newStyle?.color,
-            gradient: void 0
-          }
-        } : newStyle
-      )
+      style: cleanEmptyObject(cleanedStyle),
+      backgroundColor: newBackgroundColorSlug,
+      // The legacy `gradient` attribute is only used when the block does
+      // not support `background.gradient`; otherwise the gradient is
+      // stored in `style.background.gradient` above.
+      gradient: backgroundGradientSupported ? void 0 : newGradientSlug
     };
-    if (isMigrating && !!newStyle?.background?.gradient) {
-      newAttributes.className = clsx(
-        className,
-        "has-background"
-      );
-    } else if (!newStyle?.background?.gradient && className?.includes("has-background")) {
+    const hasNewGradient = !!newGradientSlug || !!newGradientValue;
+    if (isMigrating && hasNewGradient) {
+      newAttributes.className = clsx(className, "has-background");
+    } else if (!hasNewGradient && className?.includes("has-background")) {
       newAttributes.className = className.split(" ").filter((c) => c !== "has-background").join(" ") || void 0;
     }
     setAttributes(newAttributes);
   };
-  const styleValue = backgroundGradientSupported && !style?.background?.gradient && style?.color?.gradient ? {
-    ...style,
-    background: {
-      ...style?.background,
-      gradient: style?.color?.gradient
-    }
-  } : style;
   const updatedSettings = {
     ...settings,
     background: {
@@ -182,21 +216,34 @@ function BackgroundImagePanel({
       backgroundSize: settings?.background?.backgroundSize && hasBackgroundSupport(name, "backgroundSize")
     }
   };
-  const defaultControls = getBlockSupport(name, [
+  const backgroundDefaultControls = getBlockSupport(name, [
     BACKGROUND_SUPPORT_KEY,
     "__experimentalDefaultControls"
   ]);
+  const colorDefaultControls = getBlockSupport(name, [
+    "color",
+    "__experimentalDefaultControls"
+  ]);
+  const defaultControls = {
+    ...backgroundDefaultControls,
+    backgroundColor: colorDefaultControls?.background,
+    // Mirror the old combined control: show the gradient item by default
+    // when background color was shown by default.
+    gradient: backgroundDefaultControls?.gradient ?? colorDefaultControls?.background
+  };
+  const Wrapper = asWrapper || BackgroundInspectorControl;
   return /* @__PURE__ */ jsx(
     StylesBackgroundPanel,
     {
       inheritedValue,
-      as,
+      as: Wrapper,
       panelId: clientId,
       defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES,
       settings: updatedSettings,
       onChange,
       defaultControls,
-      value: isStateSelected ? getStyleForState(style, selectedState) : styleValue
+      value: isStateSelected ? getStyleForState(style, selectedState) : styleValue,
+      contrastWarning
     }
   );
 }
@@ -209,6 +256,7 @@ export {
   BACKGROUND_BLOCK_DEFAULT_VALUES,
   BACKGROUND_SUPPORT_KEY,
   BackgroundImagePanel,
+  backgroundResetAllFilter,
   background_default as default,
   getBackgroundImageClasses,
   hasBackgroundSupport,

package/build-module/hooks/background.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/background.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport { cleanEmptyObject } from './utils';\nimport { store as blockEditorStore } from '../store';\nimport {\n\tdefault as StylesBackgroundPanel,\n\tuseHasBackgroundPanel,\n\thasBackgroundImageValue,\n\thasBackgroundGradientValue,\n} from '../components/global-styles/background-panel';\nimport { globalStylesDataKey } from '../store/private-keys';\nimport {\n\tgetStyleForState,\n\tisDefaultBlockStyleState,\n\tsetStyleForState,\n\tuseBlockStyleState,\n} from './block-style-state';\n\nexport const BACKGROUND_SUPPORT_KEY = 'background';\n\n// Initial control values.\nexport const BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n\tbackgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.\n};\n\n/**\n * Determine whether there is block support for background.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Background image feature to check for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBackgroundSupport( blockName, feature = 'any' ) {\n\tconst support = getBlockSupport( blockName, BACKGROUND_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn (\n\t\t\t!! support?.backgroundImage ||\n\t\t\t!! support?.backgroundSize ||\n\t\t\t!! support?.backgroundRepeat ||\n\t\t\t!! support?.gradient\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\nexport function setBackgroundStyleDefaults( backgroundStyle ) {\n\tif ( ! backgroundStyle || ! backgroundStyle?.backgroundImage?.url ) {\n\t\treturn;\n\t}\n\n\tlet backgroundStylesWithDefaults;\n\n\t// Set block background defaults.\n\tif ( ! backgroundStyle?.backgroundSize ) {\n\t\tbackgroundStylesWithDefaults = {\n\t\t\tbackgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,\n\t\t};\n\t}\n\n\tif (\n\t\t'contain' === backgroundStyle?.backgroundSize &&\n\t\t! backgroundStyle?.backgroundPosition\n\t) {\n\t\tbackgroundStylesWithDefaults = {\n\t\t\tbackgroundPosition:\n\t\t\t\tBACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,\n\t\t};\n\t}\n\treturn backgroundStylesWithDefaults;\n}\n\nfunction useBlockProps( { name, style } ) {\n\tif (\n\t\t! hasBackgroundSupport( name ) ||\n\t\t! style?.background?.backgroundImage\n\t) {\n\t\treturn;\n\t}\n\n\tconst backgroundStyles = setBackgroundStyleDefaults( style?.background );\n\n\tif ( ! backgroundStyles ) {\n\t\treturn;\n\t}\n\n\treturn {\n\t\tstyle: {\n\t\t\t...backgroundStyles,\n\t\t},\n\t};\n}\n\n/**\n * Generates a CSS class name if an background image is set.\n *\n * @param {Object} style A block's style attribute.\n *\n * @return {string} CSS class name.\n */\nexport function getBackgroundImageClasses( style ) {\n\treturn hasBackgroundImageValue( style ) ||\n\t\thasBackgroundGradientValue( style )\n\t\t? 'has-background'\n\t\t: '';\n}\n\nfunction BackgroundInspectorControl( {\n\tchildren,\n\tbackgroundGradientSupported = false,\n} ) {\n\tconst resetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst updatedClassName = attributes.className?.includes(\n\t\t\t\t'has-background'\n\t\t\t)\n\t\t\t\t? attributes.className\n\t\t\t\t\t\t.split( ' ' )\n\t\t\t\t\t\t.filter( ( c ) => c !== 'has-background' )\n\t\t\t\t\t\t.join( ' ' ) || undefined\n\t\t\t\t: attributes.className;\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\tclassName: updatedClassName,\n\t\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t\t...attributes.style,\n\t\t\t\t\tbackground: undefined,\n\t\t\t\t\tcolor: backgroundGradientSupported\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...attributes.style?.color,\n\t\t\t\t\t\t\t\tgradient: undefined,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: attributes.style?.color,\n\t\t\t\t} ),\n\t\t\t};\n\t\t},\n\t\t[ backgroundGradientSupported ]\n\t);\n\treturn (\n\t\t<InspectorControls group=\"background\" resetAllFilter={ resetAllFilter }>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function BackgroundImagePanel( {\n\tclientId,\n\tname,\n\tsetAttributes,\n\tsettings,\n} ) {\n\tconst selectedState = useBlockStyleState();\n\tconst { style, className, inheritedValue } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getSettings } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst _settings = getSettings();\n\t\t\tconst blockAttributes = getBlockAttributes( clientId );\n\t\t\treturn {\n\t\t\t\tstyle: blockAttributes?.style,\n\t\t\t\tclassName: blockAttributes?.className,\n\t\t\t\t/*\n\t\t\t\t * To ensure we pass down the right inherited values:\n\t\t\t\t * @TODO 1. Pass inherited value down to all block style controls,\n\t\t\t\t *   See: packages/block-editor/src/hooks/style.js\n\t\t\t\t * @TODO 2. Add support for block style variations,\n\t\t\t\t *   See implementation: packages/block-editor/src/hooks/block-style-variation.js\n\t\t\t\t */\n\t\t\t\tinheritedValue:\n\t\t\t\t\t_settings[ globalStylesDataKey ]?.blocks?.[ name ],\n\t\t\t};\n\t\t},\n\t\t[ clientId, name ]\n\t);\n\n\tconst backgroundGradientSupported = hasBackgroundSupport(\n\t\tname,\n\t\t'gradient'\n\t);\n\n\t// Must be declared before the early return to follow Rules of Hooks.\n\t// Passes backgroundGradientSupported so that \"Reset All\" also clears\n\t// the legacy color.gradient value when background.gradient is supported.\n\tconst as = useCallback(\n\t\t( { children } ) => (\n\t\t\t<BackgroundInspectorControl\n\t\t\t\tbackgroundGradientSupported={ backgroundGradientSupported }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</BackgroundInspectorControl>\n\t\t),\n\t\t[ backgroundGradientSupported ]\n\t);\n\n\tif (\n\t\t! useHasBackgroundPanel( settings ) ||\n\t\t! hasBackgroundSupport( name )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst isStateSelected = ! isDefaultBlockStyleState( selectedState );\n\n\tconst onChange = isStateSelected\n\t\t? ( newStyle ) => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tstyle: setStyleForState( style, selectedState, newStyle ),\n\t\t\t\t} );\n\t\t  }\n\t\t: ( newStyle ) => {\n\t\t\t\tconst isMigrating =\n\t\t\t\t\tbackgroundGradientSupported && !! style?.color?.gradient;\n\t\t\t\tconst newAttributes = {\n\t\t\t\t\tstyle: cleanEmptyObject(\n\t\t\t\t\t\tbackgroundGradientSupported\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t...newStyle,\n\t\t\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\t\t\t...newStyle?.color,\n\t\t\t\t\t\t\t\t\t\tgradient: undefined,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: newStyle\n\t\t\t\t\t),\n\t\t\t\t};\n\n\t\t\t\t// When migrating from color.gradient to background.gradient, preserve\n\t\t\t\t// the has-background class so existing styles relying on it (e.g.\n\t\t\t\t// theme padding) are not silently broken. Only add the class when a\n\t\t\t\t// gradient value is being set — not when it is being cleared/reset.\n\t\t\t\t// Conversely, if the gradient is cleared and has-background was added\n\t\t\t\t// during a previous migration, remove it so it does not linger.\n\t\t\t\tif ( isMigrating && !! newStyle?.background?.gradient ) {\n\t\t\t\t\tnewAttributes.className = clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t'has-background'\n\t\t\t\t\t);\n\t\t\t\t} else if (\n\t\t\t\t\t! newStyle?.background?.gradient &&\n\t\t\t\t\tclassName?.includes( 'has-background' )\n\t\t\t\t) {\n\t\t\t\t\tnewAttributes.className =\n\t\t\t\t\t\tclassName\n\t\t\t\t\t\t\t.split( ' ' )\n\t\t\t\t\t\t\t.filter( ( c ) => c !== 'has-background' )\n\t\t\t\t\t\t\t.join( ' ' ) || undefined;\n\t\t\t\t}\n\n\t\t\t\tsetAttributes( newAttributes );\n\t\t  };\n\n\t// When background.gradient is supported but not yet explicitly set, fall\n\t// back to color.gradient for display. Any write from this panel migrates\n\t// the value to background.gradient and clears color.gradient atomically.\n\tconst styleValue =\n\t\tbackgroundGradientSupported &&\n\t\t! style?.background?.gradient &&\n\t\tstyle?.color?.gradient\n\t\t\t? {\n\t\t\t\t\t...style,\n\t\t\t\t\tbackground: {\n\t\t\t\t\t\t...style?.background,\n\t\t\t\t\t\tgradient: style?.color?.gradient,\n\t\t\t\t\t},\n\t\t\t  }\n\t\t\t: style;\n\n\tconst updatedSettings = {\n\t\t...settings,\n\t\tbackground: {\n\t\t\t...settings.background,\n\t\t\tbackgroundSize:\n\t\t\t\tsettings?.background?.backgroundSize &&\n\t\t\t\thasBackgroundSupport( name, 'backgroundSize' ),\n\t\t},\n\t};\n\n\tconst defaultControls = getBlockSupport( name, [\n\t\tBACKGROUND_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\treturn (\n\t\t<StylesBackgroundPanel\n\t\t\tinheritedValue={ inheritedValue }\n\t\t\tas={ as }\n\t\t\tpanelId={ clientId }\n\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\tsettings={ updatedSettings }\n\t\t\tonChange={ onChange }\n\t\t\tdefaultControls={ defaultControls }\n\t\t\tvalue={\n\t\t\t\tisStateSelected\n\t\t\t\t\t? getStyleForState( style, selectedState )\n\t\t\t\t\t: styleValue\n\t\t\t}\n\t\t/>\n\t);\n}\n\nexport default {\n\tuseBlockProps,\n\tattributeKeys: [ 'style' ],\n\thasSupport: hasBackgroundSupport,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport { cleanEmptyObject } from './utils';\nimport { extractPresetSlug } from '../utils/color-values';\nimport { store as blockEditorStore } from '../store';\nimport useBlockColorContrastWarning from './contrast-checker';\nimport {\n\tdefault as StylesBackgroundPanel,\n\tuseHasBackgroundPanel,\n\thasBackgroundImageValue,\n\thasBackgroundGradientValue,\n} from '../components/global-styles/background-panel';\nimport { globalStylesDataKey } from '../store/private-keys';\nimport {\n\tgetStyleForState,\n\tisDefaultBlockStyleState,\n\tsetStyleForState,\n\tuseBlockStyleState,\n} from './block-style-state';\n\nexport const BACKGROUND_SUPPORT_KEY = 'background';\n\n// Initial control values.\nexport const BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n\tbackgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.\n};\n\n/**\n * Determine whether there is block support for background.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Background image feature to check for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBackgroundSupport( blockName, feature = 'any' ) {\n\tconst support = getBlockSupport( blockName, BACKGROUND_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn (\n\t\t\t!! support?.backgroundImage ||\n\t\t\t!! support?.backgroundSize ||\n\t\t\t!! support?.backgroundRepeat ||\n\t\t\t!! support?.gradient\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\nexport function setBackgroundStyleDefaults( backgroundStyle ) {\n\tif ( ! backgroundStyle || ! backgroundStyle?.backgroundImage?.url ) {\n\t\treturn;\n\t}\n\n\tlet backgroundStylesWithDefaults;\n\n\t// Set block background defaults.\n\tif ( ! backgroundStyle?.backgroundSize ) {\n\t\tbackgroundStylesWithDefaults = {\n\t\t\tbackgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,\n\t\t};\n\t}\n\n\tif (\n\t\t'contain' === backgroundStyle?.backgroundSize &&\n\t\t! backgroundStyle?.backgroundPosition\n\t) {\n\t\tbackgroundStylesWithDefaults = {\n\t\t\tbackgroundPosition:\n\t\t\t\tBACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,\n\t\t};\n\t}\n\treturn backgroundStylesWithDefaults;\n}\n\nfunction useBlockProps( { name, style } ) {\n\tif (\n\t\t! hasBackgroundSupport( name ) ||\n\t\t! style?.background?.backgroundImage\n\t) {\n\t\treturn;\n\t}\n\n\tconst backgroundStyles = setBackgroundStyleDefaults( style?.background );\n\n\tif ( ! backgroundStyles ) {\n\t\treturn;\n\t}\n\n\treturn {\n\t\tstyle: {\n\t\t\t...backgroundStyles,\n\t\t},\n\t};\n}\n\n/**\n * Generates a CSS class name if an background image is set.\n *\n * @param {Object} style A block's style attribute.\n *\n * @return {string} CSS class name.\n */\nexport function getBackgroundImageClasses( style ) {\n\treturn hasBackgroundImageValue( style ) ||\n\t\thasBackgroundGradientValue( style )\n\t\t? 'has-background'\n\t\t: '';\n}\n\n// Clears every control the Background panel owns: the background image,\n// background color, and the gradient. The Background panel owns the gradient\n// control for both the newer `background.gradient` support and the legacy\n// `color.gradient` path, so \"Reset all\" clears the legacy value too,\n// regardless of which path stored it.\nexport function backgroundResetAllFilter( attributes ) {\n\tconst updatedClassName = attributes.className?.includes( 'has-background' )\n\t\t? attributes.className\n\t\t\t\t.split( ' ' )\n\t\t\t\t.filter( ( c ) => c !== 'has-background' )\n\t\t\t\t.join( ' ' ) || undefined\n\t\t: attributes.className;\n\treturn {\n\t\t...attributes,\n\t\tclassName: updatedClassName,\n\t\tbackgroundColor: undefined,\n\t\tgradient: undefined,\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...attributes.style,\n\t\t\tbackground: undefined,\n\t\t\tcolor: {\n\t\t\t\t...attributes.style?.color,\n\t\t\t\tbackground: undefined,\n\t\t\t\tgradient: undefined,\n\t\t\t},\n\t\t} ),\n\t};\n}\n\nfunction BackgroundInspectorControl( { children } ) {\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"background\"\n\t\t\tresetAllFilter={ backgroundResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function BackgroundImagePanel( {\n\tclientId,\n\tname,\n\tsetAttributes,\n\tsettings,\n\t// Allows rendering outside the `background` inspector group (e.g. section\n\t// blocks direct-render this panel because their support fills are gated\n\t// off by editing mode). Defaults to the slot-based wrapper.\n\tasWrapper,\n} ) {\n\tconst selectedState = useBlockStyleState();\n\tconst { style, className, backgroundColor, gradient, inheritedValue } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { getBlockAttributes, getSettings } =\n\t\t\t\t\tselect( blockEditorStore );\n\t\t\t\tconst _settings = getSettings();\n\t\t\t\tconst blockAttributes = getBlockAttributes( clientId );\n\t\t\t\treturn {\n\t\t\t\t\tstyle: blockAttributes?.style,\n\t\t\t\t\tclassName: blockAttributes?.className,\n\t\t\t\t\tbackgroundColor: blockAttributes?.backgroundColor,\n\t\t\t\t\tgradient: blockAttributes?.gradient,\n\t\t\t\t\tinheritedValue:\n\t\t\t\t\t\t_settings[ globalStylesDataKey ]?.blocks?.[ name ],\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ clientId, name ]\n\t\t);\n\n\tconst backgroundGradientSupported = hasBackgroundSupport(\n\t\tname,\n\t\t'gradient'\n\t);\n\n\tconst colorSupport = getBlockSupport( name, 'color' );\n\tconst hasColorBackgroundSupport =\n\t\tcolorSupport && colorSupport.background !== false;\n\tconst hasColorGradientSupport = !! colorSupport?.gradients;\n\n\tconst isStateSelected = ! isDefaultBlockStyleState( selectedState );\n\n\t// Fold the backgroundColor / gradient attribute slugs back into the style\n\t// object the panel consumes. When background.gradient is supported but not\n\t// yet explicitly set, fall back to color.gradient for display.\n\tconst styleValue = {\n\t\t...style,\n\t\tcolor: {\n\t\t\t...style?.color,\n\t\t\tbackground: backgroundColor\n\t\t\t\t? 'var:preset|color|' + backgroundColor\n\t\t\t\t: style?.color?.background,\n\t\t\tgradient:\n\t\t\t\t! backgroundGradientSupported && gradient\n\t\t\t\t\t? 'var:preset|gradient|' + gradient\n\t\t\t\t\t: style?.color?.gradient,\n\t\t},\n\t\t...( backgroundGradientSupported && {\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tgradient: gradient\n\t\t\t\t\t? 'var:preset|gradient|' + gradient\n\t\t\t\t\t: style?.background?.gradient ?? style?.color?.gradient,\n\t\t\t},\n\t\t} ),\n\t};\n\n\t// Skipped for gradients, which can't be reliably evaluated for contrast.\n\tconst enableContrastChecking =\n\t\t! isStateSelected &&\n\t\t! styleValue?.color?.gradient &&\n\t\t! styleValue?.background?.gradient &&\n\t\t!! styleValue?.color?.background &&\n\t\t( settings?.color?.text || settings?.color?.link ) &&\n\t\tfalse !== getBlockSupport( name, [ 'color', 'enableContrastChecker' ] );\n\n\tconst contrastWarning = useBlockColorContrastWarning( {\n\t\tclientId,\n\t\tname,\n\t\tenabled: !! enableContrastChecking,\n\t\tmessageOverride: __(\n\t\t\t'This color combination has poor contrast. Consider increasing contrast between background and foreground.'\n\t\t),\n\t} );\n\n\tif (\n\t\t! useHasBackgroundPanel( settings ) ||\n\t\t( ! hasBackgroundSupport( name ) &&\n\t\t\t! hasColorBackgroundSupport &&\n\t\t\t! hasColorGradientSupport )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( newStyle ) => {\n\t\tif ( isStateSelected ) {\n\t\t\tsetAttributes( {\n\t\t\t\tstyle: setStyleForState( style, selectedState, newStyle ),\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\t// Extract background color slug from style.color.background.\n\t\tconst newBackgroundColorValue = newStyle?.color?.background;\n\t\tconst newBackgroundColorSlug = extractPresetSlug(\n\t\t\tnewBackgroundColorValue,\n\t\t\t'color'\n\t\t);\n\n\t\t// Extract gradient slug — prefer the new background.gradient path\n\t\t// when backgroundGradientSupported, fall back to color.gradient.\n\t\tconst newGradientValue = backgroundGradientSupported\n\t\t\t? newStyle?.background?.gradient\n\t\t\t: newStyle?.color?.gradient;\n\t\tconst newGradientSlug = extractPresetSlug(\n\t\t\tnewGradientValue,\n\t\t\t'gradient'\n\t\t);\n\t\tconst cleanedColorGradient = newGradientSlug\n\t\t\t? undefined\n\t\t\t: newStyle?.color?.gradient;\n\n\t\t// Drop slug-resolved values so they aren't persisted inline alongside\n\t\t// the attribute slugs.\n\t\tconst cleanedStyle = {\n\t\t\t...newStyle,\n\t\t\tcolor: {\n\t\t\t\t...newStyle?.color,\n\t\t\t\tbackground: newBackgroundColorSlug\n\t\t\t\t\t? undefined\n\t\t\t\t\t: newBackgroundColorValue,\n\t\t\t\tgradient: backgroundGradientSupported\n\t\t\t\t\t? undefined\n\t\t\t\t\t: cleanedColorGradient,\n\t\t\t},\n\t\t};\n\t\tif ( backgroundGradientSupported ) {\n\t\t\t// Background gradients are kept whole in `style.background.gradient`\n\t\t\t// rather than extracted to the legacy `gradient` attribute.\n\t\t\tcleanedStyle.background = {\n\t\t\t\t...cleanedStyle.background,\n\t\t\t\tgradient: newStyle?.background?.gradient,\n\t\t\t};\n\t\t}\n\n\t\tconst isMigrating =\n\t\t\tbackgroundGradientSupported && !! style?.color?.gradient;\n\t\tconst newAttributes = {\n\t\t\tstyle: cleanEmptyObject( cleanedStyle ),\n\t\t\tbackgroundColor: newBackgroundColorSlug,\n\t\t\t// The legacy `gradient` attribute is only used when the block does\n\t\t\t// not support `background.gradient`; otherwise the gradient is\n\t\t\t// stored in `style.background.gradient` above.\n\t\t\tgradient: backgroundGradientSupported ? undefined : newGradientSlug,\n\t\t};\n\n\t\t// When migrating from color.gradient to background.gradient, preserve\n\t\t// the has-background class so existing styles relying on it (e.g.\n\t\t// theme padding) are not silently broken. Only add the class when a\n\t\t// gradient value is being set — not when it is being cleared/reset.\n\t\t// Conversely, if the gradient is cleared and has-background was added\n\t\t// during a previous migration, remove it so it does not linger.\n\t\tconst hasNewGradient = !! newGradientSlug || !! newGradientValue;\n\t\tif ( isMigrating && hasNewGradient ) {\n\t\t\tnewAttributes.className = clsx( className, 'has-background' );\n\t\t} else if (\n\t\t\t! hasNewGradient &&\n\t\t\tclassName?.includes( 'has-background' )\n\t\t) {\n\t\t\tnewAttributes.className =\n\t\t\t\tclassName\n\t\t\t\t\t.split( ' ' )\n\t\t\t\t\t.filter( ( c ) => c !== 'has-background' )\n\t\t\t\t\t.join( ' ' ) || undefined;\n\t\t}\n\n\t\tsetAttributes( newAttributes );\n\t};\n\n\tconst updatedSettings = {\n\t\t...settings,\n\t\tbackground: {\n\t\t\t...settings.background,\n\t\t\tbackgroundSize:\n\t\t\t\tsettings?.background?.backgroundSize &&\n\t\t\t\thasBackgroundSupport( name, 'backgroundSize' ),\n\t\t},\n\t};\n\n\tconst backgroundDefaultControls = getBlockSupport( name, [\n\t\tBACKGROUND_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst colorDefaultControls = getBlockSupport( name, [\n\t\t'color',\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst defaultControls = {\n\t\t...backgroundDefaultControls,\n\t\tbackgroundColor: colorDefaultControls?.background,\n\t\t// Mirror the old combined control: show the gradient item by default\n\t\t// when background color was shown by default.\n\t\tgradient:\n\t\t\tbackgroundDefaultControls?.gradient ??\n\t\t\tcolorDefaultControls?.background,\n\t};\n\n\tconst Wrapper = asWrapper || BackgroundInspectorControl;\n\n\treturn (\n\t\t<StylesBackgroundPanel\n\t\t\tinheritedValue={ inheritedValue }\n\t\t\tas={ Wrapper }\n\t\t\tpanelId={ clientId }\n\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\tsettings={ updatedSettings }\n\t\t\tonChange={ onChange }\n\t\t\tdefaultControls={ defaultControls }\n\t\t\tvalue={\n\t\t\t\tisStateSelected\n\t\t\t\t\t? getStyleForState( style, selectedState )\n\t\t\t\t\t: styleValue\n\t\t\t}\n\t\t\tcontrastWarning={ contrastWarning }\n\t\t/>\n\t);\n}\n\nexport default {\n\tuseBlockProps,\n\tattributeKeys: [ 'style' ],\n\thasSupport: hasBackgroundSupport,\n};\n"],
+  "mappings": "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",
   "names": []
 }