@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/build-module/hooks/block-renaming.js

@@ -1,10 +1,9 @@
-import { createElement, Fragment } from "react";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 
@@ -12,7 +11,6 @@ import { TextControl } from '@wordpress/components';
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
-import { useBlockRename } from '../components/block-rename';
 
 /**
  * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
@@ -46,35 +44,33 @@ export function addLabelCallback(settings) {
   }
   return settings;
 }
-export const withBlockRenameControl = createHigherOrderComponent(BlockEdit => props => {
-  const {
-    name,
-    attributes,
-    setAttributes,
-    isSelected
-  } = props;
-  const {
-    canRename
-  } = useBlockRename(name);
-  return createElement(Fragment, null, isSelected && canRename && createElement(InspectorControls, {
+function BlockRenameControlPure({
+  metadata,
+  setAttributes
+}) {
+  return createElement(InspectorControls, {
     group: "advanced"
   }, createElement(TextControl, {
     __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
     label: __('Block name'),
-    value: attributes?.metadata?.name || '',
+    value: metadata?.name || '',
     onChange: newName => {
       setAttributes({
         metadata: {
-          ...attributes?.metadata,
+          ...metadata,
           name: newName
         }
       });
     }
-  })), createElement(BlockEdit, {
-    key: "edit",
-    ...props
   }));
-}, 'withToolbarControls');
-addFilter('editor.BlockEdit', 'core/block-rename-ui/with-block-rename-control', withBlockRenameControl);
+}
+export default {
+  edit: BlockRenameControlPure,
+  attributeKeys: ['metadata'],
+  hasSupport(name) {
+    return hasBlockSupport(name, 'renaming', true);
+  }
+};
 addFilter('blocks.registerBlockType', 'core/metadata/addLabelCallback', addLabelCallback);
 //# sourceMappingURL=block-renaming.js.map

package/build-module/hooks/block-renaming.js.map

@@ -1 +1 @@
-{"version":3,"names":["addFilter","hasBlockSupport","createHigherOrderComponent","__","TextControl","InspectorControls","useBlockRename","addLabelCallback","settings","__experimentalLabel","supportsBlockNaming","attributes","context","metadata","name","withBlockRenameControl","BlockEdit","props","setAttributes","isSelected","canRename","createElement","Fragment","group","__nextHasNoMarginBottom","label","value","onChange","newName","key"],"sources":["@wordpress/block-editor/src/hooks/block-renaming.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { TextControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\nimport { useBlockRename } from '../components/block-rename';\n\n/**\n * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addLabelCallback( settings ) {\n\t// If blocks provide their own label callback, do not override it.\n\tif ( settings.__experimentalLabel ) {\n\t\treturn settings;\n\t}\n\n\tconst supportsBlockNaming = hasBlockSupport(\n\t\tsettings,\n\t\t'renaming',\n\t\ttrue // default value\n\t);\n\n\t// Check whether block metadata is supported before using it.\n\tif ( supportsBlockNaming ) {\n\t\tsettings.__experimentalLabel = ( attributes, { context } ) => {\n\t\t\tconst { metadata } = attributes;\n\n\t\t\t// In the list view, use the block's name attribute as the label.\n\t\t\tif ( context === 'list-view' && metadata?.name ) {\n\t\t\t\treturn metadata.name;\n\t\t\t}\n\t\t};\n\t}\n\n\treturn settings;\n}\n\nexport const withBlockRenameControl = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tconst { name, attributes, setAttributes, isSelected } = props;\n\n\t\tconst { canRename } = useBlockRename( name );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ isSelected && canRename && (\n\t\t\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ __( 'Block name' ) }\n\t\t\t\t\t\t\tvalue={ attributes?.metadata?.name || '' }\n\t\t\t\t\t\t\tonChange={ ( newName ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tmetadata: {\n\t\t\t\t\t\t\t\t\t\t...attributes?.metadata,\n\t\t\t\t\t\t\t\t\t\tname: newName,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InspectorControls>\n\t\t\t\t) }\n\t\t\t\t<BlockEdit key=\"edit\" { ...props } />\n\t\t\t</>\n\t\t);\n\t},\n\t'withToolbarControls'\n);\n\naddFilter(\n\t'editor.BlockEdit',\n\t'core/block-rename-ui/with-block-rename-control',\n\twithBlockRenameControl\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/metadata/addLabelCallback',\n\taddLabelCallback\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,0BAA0B,QAAQ,oBAAoB;AAC/D,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,QAAQ,uBAAuB;;AAEnD;AACA;AACA;AACA,SAASC,iBAAiB,QAAQ,eAAe;AACjD,SAASC,cAAc,QAAQ,4BAA4B;;AAE3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAEC,QAAQ,EAAG;EAC5C;EACA,IAAKA,QAAQ,CAACC,mBAAmB,EAAG;IACnC,OAAOD,QAAQ;EAChB;EAEA,MAAME,mBAAmB,GAAGT,eAAe,CAC1CO,QAAQ,EACR,UAAU,EACV,IAAI,CAAC;EACN,CAAC;;EAED;EACA,IAAKE,mBAAmB,EAAG;IAC1BF,QAAQ,CAACC,mBAAmB,GAAG,CAAEE,UAAU,EAAE;MAAEC;IAAQ,CAAC,KAAM;MAC7D,MAAM;QAAEC;MAAS,CAAC,GAAGF,UAAU;;MAE/B;MACA,IAAKC,OAAO,KAAK,WAAW,IAAIC,QAAQ,EAAEC,IAAI,EAAG;QAChD,OAAOD,QAAQ,CAACC,IAAI;MACrB;IACD,CAAC;EACF;EAEA,OAAON,QAAQ;AAChB;AAEA,OAAO,MAAMO,sBAAsB,GAAGb,0BAA0B,CAC7Dc,SAAS,IAAQC,KAAK,IAAM;EAC7B,MAAM;IAAEH,IAAI;IAAEH,UAAU;IAAEO,aAAa;IAAEC;EAAW,CAAC,GAAGF,KAAK;EAE7D,MAAM;IAAEG;EAAU,CAAC,GAAGd,cAAc,CAAEQ,IAAK,CAAC;EAE5C,OACCO,aAAA,CAAAC,QAAA,QACGH,UAAU,IAAIC,SAAS,IACxBC,aAAA,CAAChB,iBAAiB;IAACkB,KAAK,EAAC;EAAU,GAClCF,aAAA,CAACjB,WAAW;IACXoB,uBAAuB;IACvBC,KAAK,EAAGtB,EAAE,CAAE,YAAa,CAAG;IAC5BuB,KAAK,EAAGf,UAAU,EAAEE,QAAQ,EAAEC,IAAI,IAAI,EAAI;IAC1Ca,QAAQ,EAAKC,OAAO,IAAM;MACzBV,aAAa,CAAE;QACdL,QAAQ,EAAE;UACT,GAAGF,UAAU,EAAEE,QAAQ;UACvBC,IAAI,EAAEc;QACP;MACD,CAAE,CAAC;IACJ;EAAG,CACH,CACiB,CACnB,EACDP,aAAA,CAACL,SAAS;IAACa,GAAG,EAAC,MAAM;IAAA,GAAMZ;EAAK,CAAI,CACnC,CAAC;AAEL,CAAC,EACD,qBACD,CAAC;AAEDjB,SAAS,CACR,kBAAkB,EAClB,gDAAgD,EAChDe,sBACD,CAAC;AAEDf,SAAS,CACR,0BAA0B,EAC1B,gCAAgC,EAChCO,gBACD,CAAC"}
+{"version":3,"names":["addFilter","hasBlockSupport","__","TextControl","InspectorControls","addLabelCallback","settings","__experimentalLabel","supportsBlockNaming","attributes","context","metadata","name","BlockRenameControlPure","setAttributes","createElement","group","__nextHasNoMarginBottom","__next40pxDefaultSize","label","value","onChange","newName","edit","attributeKeys","hasSupport"],"sources":["@wordpress/block-editor/src/hooks/block-renaming.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport { TextControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\n\n/**\n * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addLabelCallback( settings ) {\n\t// If blocks provide their own label callback, do not override it.\n\tif ( settings.__experimentalLabel ) {\n\t\treturn settings;\n\t}\n\n\tconst supportsBlockNaming = hasBlockSupport(\n\t\tsettings,\n\t\t'renaming',\n\t\ttrue // default value\n\t);\n\n\t// Check whether block metadata is supported before using it.\n\tif ( supportsBlockNaming ) {\n\t\tsettings.__experimentalLabel = ( attributes, { context } ) => {\n\t\t\tconst { metadata } = attributes;\n\n\t\t\t// In the list view, use the block's name attribute as the label.\n\t\t\tif ( context === 'list-view' && metadata?.name ) {\n\t\t\t\treturn metadata.name;\n\t\t\t}\n\t\t};\n\t}\n\n\treturn settings;\n}\n\nfunction BlockRenameControlPure( { metadata, setAttributes } ) {\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<TextControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'Block name' ) }\n\t\t\t\tvalue={ metadata?.name || '' }\n\t\t\t\tonChange={ ( newName ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tmetadata: { ...metadata, name: newName },\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nexport default {\n\tedit: BlockRenameControlPure,\n\tattributeKeys: [ 'metadata' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'renaming', true );\n\t},\n};\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/metadata/addLabelCallback',\n\taddLabelCallback\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,QAAQ,uBAAuB;;AAEnD;AACA;AACA;AACA,SAASC,iBAAiB,QAAQ,eAAe;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAEC,QAAQ,EAAG;EAC5C;EACA,IAAKA,QAAQ,CAACC,mBAAmB,EAAG;IACnC,OAAOD,QAAQ;EAChB;EAEA,MAAME,mBAAmB,GAAGP,eAAe,CAC1CK,QAAQ,EACR,UAAU,EACV,IAAI,CAAC;EACN,CAAC;;EAED;EACA,IAAKE,mBAAmB,EAAG;IAC1BF,QAAQ,CAACC,mBAAmB,GAAG,CAAEE,UAAU,EAAE;MAAEC;IAAQ,CAAC,KAAM;MAC7D,MAAM;QAAEC;MAAS,CAAC,GAAGF,UAAU;;MAE/B;MACA,IAAKC,OAAO,KAAK,WAAW,IAAIC,QAAQ,EAAEC,IAAI,EAAG;QAChD,OAAOD,QAAQ,CAACC,IAAI;MACrB;IACD,CAAC;EACF;EAEA,OAAON,QAAQ;AAChB;AAEA,SAASO,sBAAsBA,CAAE;EAAEF,QAAQ;EAAEG;AAAc,CAAC,EAAG;EAC9D,OACCC,aAAA,CAACX,iBAAiB;IAACY,KAAK,EAAC;EAAU,GAClCD,aAAA,CAACZ,WAAW;IACXc,uBAAuB;IACvBC,qBAAqB;IACrBC,KAAK,EAAGjB,EAAE,CAAE,YAAa,CAAG;IAC5BkB,KAAK,EAAGT,QAAQ,EAAEC,IAAI,IAAI,EAAI;IAC9BS,QAAQ,EAAKC,OAAO,IAAM;MACzBR,aAAa,CAAE;QACdH,QAAQ,EAAE;UAAE,GAAGA,QAAQ;UAAEC,IAAI,EAAEU;QAAQ;MACxC,CAAE,CAAC;IACJ;EAAG,CACH,CACiB,CAAC;AAEtB;AAEA,eAAe;EACdC,IAAI,EAAEV,sBAAsB;EAC5BW,aAAa,EAAE,CAAE,UAAU,CAAE;EAC7BC,UAAUA,CAAEb,IAAI,EAAG;IAClB,OAAOX,eAAe,CAAEW,IAAI,EAAE,UAAU,EAAE,IAAK,CAAC;EACjD;AACD,CAAC;AAEDZ,SAAS,CACR,0BAA0B,EAC1B,gCAAgC,EAChCK,gBACD,CAAC"}

package/build-module/hooks/border.js

@@ -9,9 +9,9 @@ import classnames from 'classnames';
  */
 import { getBlockSupport } from '@wordpress/blocks';
 import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -19,8 +19,9 @@ import { addFilter } from '@wordpress/hooks';
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import { cleanEmptyObject, shouldSkipSerialization, useBlockSettings } from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 import { useHasBorderPanel, BorderPanel as StylesBorderPanel } from '../components/global-styles';
+import { store as blockEditorStore } from '../store';
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 const getColorByProperty = (colors, property, value) => {
   let matchedColor;
@@ -116,28 +117,40 @@ function BordersInspectorControl({
     resetAllFilter: attributesResetAllFilter
   }, children);
 }
-export function BorderPanel(props) {
-  const {
-    clientId,
-    name,
-    attributes,
-    setAttributes
-  } = props;
-  const settings = useBlockSettings(name);
+export function BorderPanel({
+  clientId,
+  name,
+  setAttributes,
+  settings
+}) {
   const isEnabled = useHasBorderPanel(settings);
+  function selector(select) {
+    const {
+      style,
+      borderColor
+    } = select(blockEditorStore).getBlockAttributes(clientId) || {};
+    return {
+      style,
+      borderColor
+    };
+  }
+  const {
+    style,
+    borderColor
+  } = useSelect(selector, [clientId]);
   const value = useMemo(() => {
     return attributesToStyle({
-      style: attributes.style,
-      borderColor: attributes.borderColor
+      style,
+      borderColor
     });
-  }, [attributes.style, attributes.borderColor]);
+  }, [style, borderColor]);
   const onChange = newStyle => {
     setAttributes(styleToAttributes(newStyle));
   };
   if (!isEnabled) {
     return null;
   }
-  const defaultControls = getBlockSupport(props.name, [BORDER_SUPPORT_KEY, '__experimentalDefaultControls']);
+  const defaultControls = getBlockSupport(name, [BORDER_SUPPORT_KEY, '__experimentalDefaultControls']);
   return createElement(StylesBorderPanel, {
     as: BordersInspectorControl,
     panelId: clientId,
@@ -222,14 +235,14 @@ function addAttributes(settings) {
 /**
  * Override props assigned to save component to inject border color.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type definition.
- * @param {Object} attributes Block's attributes.
+ * @param {Object}        props           Additional props applied to save element.
+ * @param {Object|string} blockNameOrType Block type definition.
+ * @param {Object}        attributes      Block's attributes.
  *
  * @return {Object} Filtered props to apply to save element.
  */
-function addSaveProps(props, blockType, attributes) {
-  if (!hasBorderSupport(blockType, 'color') || shouldSkipSerialization(blockType, BORDER_SUPPORT_KEY, 'color')) {
+function addSaveProps(props, blockNameOrType, attributes) {
+  if (!hasBorderSupport(blockNameOrType, 'color') || shouldSkipSerialization(blockNameOrType, BORDER_SUPPORT_KEY, 'color')) {
     return props;
   }
   const borderClasses = getBorderClasses(attributes);
@@ -260,54 +273,16 @@ export function getBorderClasses(attributes) {
     [borderColorClass]: !!borderColorClass
   });
 }
-
-/**
- * Filters the registered block settings to apply border color styles and
- * classnames to the block edit wrapper.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addEditProps(settings) {
-  if (!hasBorderSupport(settings, 'color') || shouldSkipSerialization(settings, BORDER_SUPPORT_KEY, 'color')) {
-    return settings;
-  }
-  const existingGetEditWrapperProps = settings.getEditWrapperProps;
-  settings.getEditWrapperProps = attributes => {
-    let props = {};
-    if (existingGetEditWrapperProps) {
-      props = existingGetEditWrapperProps(attributes);
-    }
-    return addSaveProps(props, settings, attributes);
-  };
-  return settings;
-}
-
-/**
- * This adds inline styles for color palette colors.
- * Ideally, this is not needed and themes should load their palettes on the editor.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withBorderColorPaletteStyles = createHigherOrderComponent(BlockListBlock => props => {
-  const {
-    name,
-    attributes
-  } = props;
-  const {
-    borderColor,
-    style
-  } = attributes;
+function useBlockProps({
+  name,
+  borderColor,
+  style
+}) {
   const {
     colors
   } = useMultipleOriginColorsAndGradients();
   if (!hasBorderSupport(name, 'color') || shouldSkipSerialization(name, BORDER_SUPPORT_KEY, 'color')) {
-    return createElement(BlockListBlock, {
-      ...props
-    });
+    return {};
   }
   const {
     color: borderColorValue
@@ -345,22 +320,20 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent(BlockList
     borderBottomColor: borderBottomColor || borderColorValue,
     borderLeftColor: borderLeftColor || borderColorValue
   };
-  const cleanedExtraStyles = cleanEmptyObject(extraStyles) || {};
-  let wrapperProps = props.wrapperProps;
-  wrapperProps = {
-    ...props.wrapperProps,
-    style: {
-      ...props.wrapperProps?.style,
-      ...cleanedExtraStyles
-    }
-  };
-  return createElement(BlockListBlock, {
-    ...props,
-    wrapperProps: wrapperProps
+  return addSaveProps({
+    style: cleanEmptyObject(extraStyles) || {}
+  }, name, {
+    borderColor,
+    style
   });
-}, 'withBorderColorPaletteStyles');
+}
+export default {
+  useBlockProps,
+  addSaveProps,
+  attributeKeys: ['borderColor', 'style'],
+  hasSupport(name) {
+    return hasBorderSupport(name, 'color');
+  }
+};
 addFilter('blocks.registerBlockType', 'core/border/addAttributes', addAttributes);
-addFilter('blocks.getSaveContent.extraProps', 'core/border/addSaveProps', addSaveProps);
-addFilter('blocks.registerBlockType', 'core/border/addEditProps', addEditProps);
-addFilter('editor.BlockListBlock', 'core/border/with-border-color-palette-styles', withBorderColorPaletteStyles);
 //# sourceMappingURL=border.js.map

package/build-module/hooks/border.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","getBlockSupport","__experimentalHasSplitBorders","hasSplitBorders","createHigherOrderComponent","Platform","useCallback","useMemo","addFilter","getColorClassName","InspectorControls","useMultipleOriginColorsAndGradients","cleanEmptyObject","shouldSkipSerialization","useBlockSettings","useHasBorderPanel","BorderPanel","StylesBorderPanel","BORDER_SUPPORT_KEY","getColorByProperty","colors","property","value","matchedColor","some","origin","color","getMultiOriginColor","namedColor","customColor","colorObject","undefined","getColorSlugFromVariable","exec","styleToAttributes","style","border","borderColor","borderColorValue","borderColorSlug","startsWith","substring","length","updatedStyle","attributesToStyle","attributes","BordersInspectorControl","children","resetAllFilter","attributesResetAllFilter","existingStyle","createElement","group","props","clientId","name","setAttributes","settings","isEnabled","onChange","newStyle","defaultControls","as","panelId","hasBorderSupport","blockName","feature","OS","support","radius","width","removeBorderAttribute","attribute","addAttributes","type","addSaveProps","blockType","borderClasses","getBorderClasses","newClassName","className","borderColorClass","addEditProps","existingGetEditWrapperProps","getEditWrapperProps","withBorderColorPaletteStyles","BlockListBlock","borderTopColor","top","borderRightColor","right","borderBottomColor","bottom","borderLeftColor","left","extraStyles","cleanedExtraStyles","wrapperProps"],"sources":["@wordpress/block-editor/src/hooks/border.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { Platform, useCallback, useMemo } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\n\n/**\n * Internal dependencies\n */\nimport { getColorClassName } from '../components/colors';\nimport InspectorControls from '../components/inspector-controls';\nimport useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';\nimport {\n\tcleanEmptyObject,\n\tshouldSkipSerialization,\n\tuseBlockSettings,\n} from './utils';\nimport {\n\tuseHasBorderPanel,\n\tBorderPanel as StylesBorderPanel,\n} from '../components/global-styles';\n\nexport const BORDER_SUPPORT_KEY = '__experimentalBorder';\n\nconst getColorByProperty = ( colors, property, value ) => {\n\tlet matchedColor;\n\n\tcolors.some( ( origin ) =>\n\t\torigin.colors.some( ( color ) => {\n\t\t\tif ( color[ property ] === value ) {\n\t\t\t\tmatchedColor = color;\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\treturn false;\n\t\t} )\n\t);\n\n\treturn matchedColor;\n};\n\nexport const getMultiOriginColor = ( { colors, namedColor, customColor } ) => {\n\t// Search each origin (default, theme, or user) for matching color by name.\n\tif ( namedColor ) {\n\t\tconst colorObject = getColorByProperty( colors, 'slug', namedColor );\n\t\tif ( colorObject ) {\n\t\t\treturn colorObject;\n\t\t}\n\t}\n\n\t// Skip if no custom color or matching named color.\n\tif ( ! customColor ) {\n\t\treturn { color: undefined };\n\t}\n\n\t// Attempt to find color via custom color value or build new object.\n\tconst colorObject = getColorByProperty( colors, 'color', customColor );\n\treturn colorObject ? colorObject : { color: customColor };\n};\n\nfunction getColorSlugFromVariable( value ) {\n\tconst namedColor = /var:preset\\|color\\|(.+)/.exec( value );\n\tif ( namedColor && namedColor[ 1 ] ) {\n\t\treturn namedColor[ 1 ];\n\t}\n\treturn null;\n}\n\nfunction styleToAttributes( style ) {\n\tif ( hasSplitBorders( style?.border ) ) {\n\t\treturn {\n\t\t\tstyle,\n\t\t\tborderColor: undefined,\n\t\t};\n\t}\n\n\tconst borderColorValue = style?.border?.color;\n\tconst borderColorSlug = borderColorValue?.startsWith( 'var:preset|color|' )\n\t\t? borderColorValue.substring( 'var:preset|color|'.length )\n\t\t: undefined;\n\tconst updatedStyle = { ...style };\n\tupdatedStyle.border = {\n\t\t...updatedStyle.border,\n\t\tcolor: borderColorSlug ? undefined : borderColorValue,\n\t};\n\treturn {\n\t\tstyle: cleanEmptyObject( updatedStyle ),\n\t\tborderColor: borderColorSlug,\n\t};\n}\n\nfunction attributesToStyle( attributes ) {\n\tif ( hasSplitBorders( attributes.style?.border ) ) {\n\t\treturn attributes.style;\n\t}\n\treturn {\n\t\t...attributes.style,\n\t\tborder: {\n\t\t\t...attributes.style?.border,\n\t\t\tcolor: attributes.borderColor\n\t\t\t\t? 'var:preset|color|' + attributes.borderColor\n\t\t\t\t: attributes.style?.border?.color,\n\t\t},\n\t};\n}\n\nfunction BordersInspectorControl( { children, resetAllFilter } ) {\n\tconst attributesResetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst existingStyle = attributesToStyle( attributes );\n\t\t\tconst updatedStyle = resetAllFilter( existingStyle );\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\t...styleToAttributes( updatedStyle ),\n\t\t\t};\n\t\t},\n\t\t[ resetAllFilter ]\n\t);\n\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"border\"\n\t\t\tresetAllFilter={ attributesResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function BorderPanel( props ) {\n\tconst { clientId, name, attributes, setAttributes } = props;\n\tconst settings = useBlockSettings( name );\n\tconst isEnabled = useHasBorderPanel( settings );\n\tconst value = useMemo( () => {\n\t\treturn attributesToStyle( {\n\t\t\tstyle: attributes.style,\n\t\t\tborderColor: attributes.borderColor,\n\t\t} );\n\t}, [ attributes.style, attributes.borderColor ] );\n\n\tconst onChange = ( newStyle ) => {\n\t\tsetAttributes( styleToAttributes( newStyle ) );\n\t};\n\n\tif ( ! isEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst defaultControls = getBlockSupport( props.name, [\n\t\tBORDER_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\treturn (\n\t\t<StylesBorderPanel\n\t\t\tas={ BordersInspectorControl }\n\t\t\tpanelId={ clientId }\n\t\t\tsettings={ settings }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tdefaultControls={ defaultControls }\n\t\t/>\n\t);\n}\n\n/**\n * Determine whether there is block support for border properties.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Border feature to check support for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBorderSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn !! (\n\t\t\tsupport?.color ||\n\t\t\tsupport?.radius ||\n\t\t\tsupport?.width ||\n\t\t\tsupport?.style\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Returns a new style object where the specified border attribute has been\n * removed.\n *\n * @param {Object} style     Styles from block attributes.\n * @param {string} attribute The border style attribute to clear.\n *\n * @return {Object} Style object with the specified attribute removed.\n */\nexport function removeBorderAttribute( style, attribute ) {\n\treturn cleanEmptyObject( {\n\t\t...style,\n\t\tborder: {\n\t\t\t...style?.border,\n\t\t\t[ attribute ]: undefined,\n\t\t},\n\t} );\n}\n\n/**\n * Filters registered block settings, extending attributes to include\n * `borderColor` if needed.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Updated block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBorderSupport( settings, 'color' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify default value if needed.\n\tif ( settings.attributes.borderColor ) {\n\t\treturn settings;\n\t}\n\n\t// Add new borderColor attribute to block settings.\n\treturn {\n\t\t...settings,\n\t\tattributes: {\n\t\t\t...settings.attributes,\n\t\t\tborderColor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t},\n\t};\n}\n\n/**\n * Override props assigned to save component to inject border color.\n *\n * @param {Object} props      Additional props applied to save element.\n * @param {Object} blockType  Block type definition.\n * @param {Object} attributes Block's attributes.\n *\n * @return {Object} Filtered props to apply to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif (\n\t\t! hasBorderSupport( blockType, 'color' ) ||\n\t\tshouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' )\n\t) {\n\t\treturn props;\n\t}\n\n\tconst borderClasses = getBorderClasses( attributes );\n\tconst newClassName = classnames( props.className, borderClasses );\n\n\t// If we are clearing the last of the previous classes in `className`\n\t// set it to `undefined` to avoid rendering empty DOM attributes.\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Generates a CSS class name consisting of all the applicable border color\n * classes given the current block attributes.\n *\n * @param {Object} attributes Block's attributes.\n *\n * @return {string} CSS class name.\n */\nexport function getBorderClasses( attributes ) {\n\tconst { borderColor, style } = attributes;\n\tconst borderColorClass = getColorClassName( 'border-color', borderColor );\n\n\treturn classnames( {\n\t\t'has-border-color': borderColor || style?.border?.color,\n\t\t[ borderColorClass ]: !! borderColorClass,\n\t} );\n}\n\n/**\n * Filters the registered block settings to apply border color styles and\n * classnames to the block edit wrapper.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addEditProps( settings ) {\n\tif (\n\t\t! hasBorderSupport( settings, 'color' ) ||\n\t\tshouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' )\n\t) {\n\t\treturn settings;\n\t}\n\n\tconst existingGetEditWrapperProps = settings.getEditWrapperProps;\n\tsettings.getEditWrapperProps = ( attributes ) => {\n\t\tlet props = {};\n\n\t\tif ( existingGetEditWrapperProps ) {\n\t\t\tprops = existingGetEditWrapperProps( attributes );\n\t\t}\n\n\t\treturn addSaveProps( props, settings, attributes );\n\t};\n\n\treturn settings;\n}\n\n/**\n * This adds inline styles for color palette colors.\n * Ideally, this is not needed and themes should load their palettes on the editor.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nexport const withBorderColorPaletteStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst { name, attributes } = props;\n\t\tconst { borderColor, style } = attributes;\n\t\tconst { colors } = useMultipleOriginColorsAndGradients();\n\n\t\tif (\n\t\t\t! hasBorderSupport( name, 'color' ) ||\n\t\t\tshouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )\n\t\t) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst { color: borderColorValue } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: borderColor,\n\t\t} );\n\t\tconst { color: borderTopColor } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: getColorSlugFromVariable( style?.border?.top?.color ),\n\t\t} );\n\t\tconst { color: borderRightColor } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: getColorSlugFromVariable( style?.border?.right?.color ),\n\t\t} );\n\n\t\tconst { color: borderBottomColor } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: getColorSlugFromVariable(\n\t\t\t\tstyle?.border?.bottom?.color\n\t\t\t),\n\t\t} );\n\t\tconst { color: borderLeftColor } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: getColorSlugFromVariable( style?.border?.left?.color ),\n\t\t} );\n\n\t\tconst extraStyles = {\n\t\t\tborderTopColor: borderTopColor || borderColorValue,\n\t\t\tborderRightColor: borderRightColor || borderColorValue,\n\t\t\tborderBottomColor: borderBottomColor || borderColorValue,\n\t\t\tborderLeftColor: borderLeftColor || borderColorValue,\n\t\t};\n\t\tconst cleanedExtraStyles = cleanEmptyObject( extraStyles ) || {};\n\n\t\tlet wrapperProps = props.wrapperProps;\n\t\twrapperProps = {\n\t\t\t...props.wrapperProps,\n\t\t\tstyle: {\n\t\t\t\t...props.wrapperProps?.style,\n\t\t\t\t...cleanedExtraStyles,\n\t\t\t},\n\t\t};\n\n\t\treturn <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;\n\t},\n\t'withBorderColorPaletteStyles'\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/border/addAttributes',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/border/addSaveProps',\n\taddSaveProps\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/border/addEditProps',\n\taddEditProps\n);\n\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/border/with-border-color-palette-styles',\n\twithBorderColorPaletteStyles\n);\n"],"mappings":"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"}
+{"version":3,"names":["classnames","getBlockSupport","__experimentalHasSplitBorders","hasSplitBorders","Platform","useCallback","useMemo","addFilter","useSelect","getColorClassName","InspectorControls","useMultipleOriginColorsAndGradients","cleanEmptyObject","shouldSkipSerialization","useHasBorderPanel","BorderPanel","StylesBorderPanel","store","blockEditorStore","BORDER_SUPPORT_KEY","getColorByProperty","colors","property","value","matchedColor","some","origin","color","getMultiOriginColor","namedColor","customColor","colorObject","undefined","getColorSlugFromVariable","exec","styleToAttributes","style","border","borderColor","borderColorValue","borderColorSlug","startsWith","substring","length","updatedStyle","attributesToStyle","attributes","BordersInspectorControl","children","resetAllFilter","attributesResetAllFilter","existingStyle","createElement","group","clientId","name","setAttributes","settings","isEnabled","selector","select","getBlockAttributes","onChange","newStyle","defaultControls","as","panelId","hasBorderSupport","blockName","feature","OS","support","radius","width","removeBorderAttribute","attribute","addAttributes","type","addSaveProps","props","blockNameOrType","borderClasses","getBorderClasses","newClassName","className","borderColorClass","useBlockProps","borderTopColor","top","borderRightColor","right","borderBottomColor","bottom","borderLeftColor","left","extraStyles","attributeKeys","hasSupport"],"sources":["@wordpress/block-editor/src/hooks/border.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';\nimport { Platform, useCallback, useMemo } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { getColorClassName } from '../components/colors';\nimport InspectorControls from '../components/inspector-controls';\nimport useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';\nimport { cleanEmptyObject, shouldSkipSerialization } from './utils';\nimport {\n\tuseHasBorderPanel,\n\tBorderPanel as StylesBorderPanel,\n} from '../components/global-styles';\nimport { store as blockEditorStore } from '../store';\n\nexport const BORDER_SUPPORT_KEY = '__experimentalBorder';\n\nconst getColorByProperty = ( colors, property, value ) => {\n\tlet matchedColor;\n\n\tcolors.some( ( origin ) =>\n\t\torigin.colors.some( ( color ) => {\n\t\t\tif ( color[ property ] === value ) {\n\t\t\t\tmatchedColor = color;\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\treturn false;\n\t\t} )\n\t);\n\n\treturn matchedColor;\n};\n\nexport const getMultiOriginColor = ( { colors, namedColor, customColor } ) => {\n\t// Search each origin (default, theme, or user) for matching color by name.\n\tif ( namedColor ) {\n\t\tconst colorObject = getColorByProperty( colors, 'slug', namedColor );\n\t\tif ( colorObject ) {\n\t\t\treturn colorObject;\n\t\t}\n\t}\n\n\t// Skip if no custom color or matching named color.\n\tif ( ! customColor ) {\n\t\treturn { color: undefined };\n\t}\n\n\t// Attempt to find color via custom color value or build new object.\n\tconst colorObject = getColorByProperty( colors, 'color', customColor );\n\treturn colorObject ? colorObject : { color: customColor };\n};\n\nfunction getColorSlugFromVariable( value ) {\n\tconst namedColor = /var:preset\\|color\\|(.+)/.exec( value );\n\tif ( namedColor && namedColor[ 1 ] ) {\n\t\treturn namedColor[ 1 ];\n\t}\n\treturn null;\n}\n\nfunction styleToAttributes( style ) {\n\tif ( hasSplitBorders( style?.border ) ) {\n\t\treturn {\n\t\t\tstyle,\n\t\t\tborderColor: undefined,\n\t\t};\n\t}\n\n\tconst borderColorValue = style?.border?.color;\n\tconst borderColorSlug = borderColorValue?.startsWith( 'var:preset|color|' )\n\t\t? borderColorValue.substring( 'var:preset|color|'.length )\n\t\t: undefined;\n\tconst updatedStyle = { ...style };\n\tupdatedStyle.border = {\n\t\t...updatedStyle.border,\n\t\tcolor: borderColorSlug ? undefined : borderColorValue,\n\t};\n\treturn {\n\t\tstyle: cleanEmptyObject( updatedStyle ),\n\t\tborderColor: borderColorSlug,\n\t};\n}\n\nfunction attributesToStyle( attributes ) {\n\tif ( hasSplitBorders( attributes.style?.border ) ) {\n\t\treturn attributes.style;\n\t}\n\treturn {\n\t\t...attributes.style,\n\t\tborder: {\n\t\t\t...attributes.style?.border,\n\t\t\tcolor: attributes.borderColor\n\t\t\t\t? 'var:preset|color|' + attributes.borderColor\n\t\t\t\t: attributes.style?.border?.color,\n\t\t},\n\t};\n}\n\nfunction BordersInspectorControl( { children, resetAllFilter } ) {\n\tconst attributesResetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst existingStyle = attributesToStyle( attributes );\n\t\t\tconst updatedStyle = resetAllFilter( existingStyle );\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\t...styleToAttributes( updatedStyle ),\n\t\t\t};\n\t\t},\n\t\t[ resetAllFilter ]\n\t);\n\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"border\"\n\t\t\tresetAllFilter={ attributesResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function BorderPanel( { clientId, name, setAttributes, settings } ) {\n\tconst isEnabled = useHasBorderPanel( settings );\n\tfunction selector( select ) {\n\t\tconst { style, borderColor } =\n\t\t\tselect( blockEditorStore ).getBlockAttributes( clientId ) || {};\n\t\treturn { style, borderColor };\n\t}\n\tconst { style, borderColor } = useSelect( selector, [ clientId ] );\n\tconst value = useMemo( () => {\n\t\treturn attributesToStyle( { style, borderColor } );\n\t}, [ style, borderColor ] );\n\n\tconst onChange = ( newStyle ) => {\n\t\tsetAttributes( styleToAttributes( newStyle ) );\n\t};\n\n\tif ( ! isEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst defaultControls = getBlockSupport( name, [\n\t\tBORDER_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\treturn (\n\t\t<StylesBorderPanel\n\t\t\tas={ BordersInspectorControl }\n\t\t\tpanelId={ clientId }\n\t\t\tsettings={ settings }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tdefaultControls={ defaultControls }\n\t\t/>\n\t);\n}\n\n/**\n * Determine whether there is block support for border properties.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Border feature to check support for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBorderSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn !! (\n\t\t\tsupport?.color ||\n\t\t\tsupport?.radius ||\n\t\t\tsupport?.width ||\n\t\t\tsupport?.style\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Returns a new style object where the specified border attribute has been\n * removed.\n *\n * @param {Object} style     Styles from block attributes.\n * @param {string} attribute The border style attribute to clear.\n *\n * @return {Object} Style object with the specified attribute removed.\n */\nexport function removeBorderAttribute( style, attribute ) {\n\treturn cleanEmptyObject( {\n\t\t...style,\n\t\tborder: {\n\t\t\t...style?.border,\n\t\t\t[ attribute ]: undefined,\n\t\t},\n\t} );\n}\n\n/**\n * Filters registered block settings, extending attributes to include\n * `borderColor` if needed.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Updated block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBorderSupport( settings, 'color' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify default value if needed.\n\tif ( settings.attributes.borderColor ) {\n\t\treturn settings;\n\t}\n\n\t// Add new borderColor attribute to block settings.\n\treturn {\n\t\t...settings,\n\t\tattributes: {\n\t\t\t...settings.attributes,\n\t\t\tborderColor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t},\n\t};\n}\n\n/**\n * Override props assigned to save component to inject border color.\n *\n * @param {Object}        props           Additional props applied to save element.\n * @param {Object|string} blockNameOrType Block type definition.\n * @param {Object}        attributes      Block's attributes.\n *\n * @return {Object} Filtered props to apply to save element.\n */\nfunction addSaveProps( props, blockNameOrType, attributes ) {\n\tif (\n\t\t! hasBorderSupport( blockNameOrType, 'color' ) ||\n\t\tshouldSkipSerialization( blockNameOrType, BORDER_SUPPORT_KEY, 'color' )\n\t) {\n\t\treturn props;\n\t}\n\n\tconst borderClasses = getBorderClasses( attributes );\n\tconst newClassName = classnames( props.className, borderClasses );\n\n\t// If we are clearing the last of the previous classes in `className`\n\t// set it to `undefined` to avoid rendering empty DOM attributes.\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Generates a CSS class name consisting of all the applicable border color\n * classes given the current block attributes.\n *\n * @param {Object} attributes Block's attributes.\n *\n * @return {string} CSS class name.\n */\nexport function getBorderClasses( attributes ) {\n\tconst { borderColor, style } = attributes;\n\tconst borderColorClass = getColorClassName( 'border-color', borderColor );\n\n\treturn classnames( {\n\t\t'has-border-color': borderColor || style?.border?.color,\n\t\t[ borderColorClass ]: !! borderColorClass,\n\t} );\n}\n\nfunction useBlockProps( { name, borderColor, style } ) {\n\tconst { colors } = useMultipleOriginColorsAndGradients();\n\n\tif (\n\t\t! hasBorderSupport( name, 'color' ) ||\n\t\tshouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )\n\t) {\n\t\treturn {};\n\t}\n\n\tconst { color: borderColorValue } = getMultiOriginColor( {\n\t\tcolors,\n\t\tnamedColor: borderColor,\n\t} );\n\tconst { color: borderTopColor } = getMultiOriginColor( {\n\t\tcolors,\n\t\tnamedColor: getColorSlugFromVariable( style?.border?.top?.color ),\n\t} );\n\tconst { color: borderRightColor } = getMultiOriginColor( {\n\t\tcolors,\n\t\tnamedColor: getColorSlugFromVariable( style?.border?.right?.color ),\n\t} );\n\n\tconst { color: borderBottomColor } = getMultiOriginColor( {\n\t\tcolors,\n\t\tnamedColor: getColorSlugFromVariable( style?.border?.bottom?.color ),\n\t} );\n\tconst { color: borderLeftColor } = getMultiOriginColor( {\n\t\tcolors,\n\t\tnamedColor: getColorSlugFromVariable( style?.border?.left?.color ),\n\t} );\n\n\tconst extraStyles = {\n\t\tborderTopColor: borderTopColor || borderColorValue,\n\t\tborderRightColor: borderRightColor || borderColorValue,\n\t\tborderBottomColor: borderBottomColor || borderColorValue,\n\t\tborderLeftColor: borderLeftColor || borderColorValue,\n\t};\n\n\treturn addSaveProps(\n\t\t{ style: cleanEmptyObject( extraStyles ) || {} },\n\t\tname,\n\t\t{ borderColor, style }\n\t);\n}\n\nexport default {\n\tuseBlockProps,\n\taddSaveProps,\n\tattributeKeys: [ 'borderColor', 'style' ],\n\thasSupport( name ) {\n\t\treturn hasBorderSupport( name, 'color' );\n\t},\n};\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/border/addAttributes',\n\taddAttributes\n);\n"],"mappings":"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"}

package/build-module/hooks/color.js

@@ -10,21 +10,23 @@ import classnames from 'classnames';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
 import { useMemo, Platform, useCallback } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { getColorClassName, getColorObjectByAttributeValues } from '../components/colors';
 import { __experimentalGetGradientClass } from '../components/gradients';
-import { cleanEmptyObject, transformStyles, shouldSkipSerialization, useBlockSettings } from './utils';
+import { cleanEmptyObject, transformStyles, shouldSkipSerialization } from './utils';
+import { getBackgroundImageClasses } from './background';
 import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import { useHasColorPanel, default as StylesColorPanel } from '../components/global-styles/color-panel';
 import BlockColorContrastChecker from './contrast-checker';
+import { store as blockEditorStore } from '../store';
 export const COLOR_SUPPORT_KEY = 'color';
-const hasColorSupport = blockType => {
-  const colorSupport = getBlockSupport(blockType, COLOR_SUPPORT_KEY);
+const hasColorSupport = blockNameOrType => {
+  const colorSupport = getBlockSupport(blockNameOrType, COLOR_SUPPORT_KEY);
   return colorSupport && (colorSupport.link === true || colorSupport.gradient === true || colorSupport.background !== false || colorSupport.text !== false);
 };
 const hasLinkColorSupport = blockType => {
@@ -34,8 +36,8 @@ const hasLinkColorSupport = blockType => {
   const colorSupport = getBlockSupport(blockType, COLOR_SUPPORT_KEY);
   return colorSupport !== null && typeof colorSupport === 'object' && !!colorSupport.link;
 };
-const hasGradientSupport = blockType => {
-  const colorSupport = getBlockSupport(blockType, COLOR_SUPPORT_KEY);
+const hasGradientSupport = blockNameOrType => {
+  const colorSupport = getBlockSupport(blockNameOrType, COLOR_SUPPORT_KEY);
   return colorSupport !== null && typeof colorSupport === 'object' && !!colorSupport.gradients;
 };
 const hasBackgroundColorSupport = blockType => {
@@ -88,17 +90,17 @@ function addAttributes(settings) {
 /**
  * Override props assigned to save component to inject colors classnames.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type.
- * @param {Object} attributes Block attributes.
+ * @param {Object}        props           Additional props applied to save element.
+ * @param {Object|string} blockNameOrType Block type.
+ * @param {Object}        attributes      Block attributes.
  *
  * @return {Object} Filtered props applied to save element.
  */
-export function addSaveProps(props, blockType, attributes) {
-  if (!hasColorSupport(blockType) || shouldSkipSerialization(blockType, COLOR_SUPPORT_KEY)) {
+export function addSaveProps(props, blockNameOrType, attributes) {
+  if (!hasColorSupport(blockNameOrType) || shouldSkipSerialization(blockNameOrType, COLOR_SUPPORT_KEY)) {
     return props;
   }
-  const hasGradient = hasGradientSupport(blockType);
+  const hasGradient = hasGradientSupport(blockNameOrType);
 
   // I'd have preferred to avoid the "style" attribute usage here
   const {
@@ -107,7 +109,7 @@ export function addSaveProps(props, blockType, attributes) {
     gradient,
     style
   } = attributes;
-  const shouldSerialize = feature => !shouldSkipSerialization(blockType, COLOR_SUPPORT_KEY, feature);
+  const shouldSerialize = feature => !shouldSkipSerialization(blockNameOrType, COLOR_SUPPORT_KEY, feature);
 
   // Primary color classes must come before the `has-text-color`,
   // `has-background` and `has-link-color` classes to maintain backwards
@@ -127,29 +129,6 @@ export function addSaveProps(props, blockType, attributes) {
   props.className = newClassName ? newClassName : undefined;
   return props;
 }
-
-/**
- * Filters registered block settings to extend the block edit wrapper
- * to apply the desired styles and classnames properly.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-export function addEditProps(settings) {
-  if (!hasColorSupport(settings) || shouldSkipSerialization(settings, COLOR_SUPPORT_KEY)) {
-    return settings;
-  }
-  const existingGetEditWrapperProps = settings.getEditWrapperProps;
-  settings.getEditWrapperProps = attributes => {
-    let props = {};
-    if (existingGetEditWrapperProps) {
-      props = existingGetEditWrapperProps(attributes);
-    }
-    return addSaveProps(props, settings, attributes);
-  };
-  return settings;
-}
 function styleToAttributes(style) {
   const textColorValue = style?.color?.text;
   const textColorSlug = textColorValue?.startsWith('var:preset|color|') ? textColorValue.substring('var:preset|color|'.length) : undefined;
@@ -201,35 +180,53 @@ function ColorInspectorControl({
     resetAllFilter: attributesResetAllFilter
   }, children);
 }
-export function ColorEdit(props) {
-  const {
-    clientId,
-    name,
-    attributes,
-    setAttributes
-  } = props;
-  const settings = useBlockSettings(name);
+export function ColorEdit({
+  clientId,
+  name,
+  setAttributes,
+  settings
+}) {
   const isEnabled = useHasColorPanel(settings);
+  function selector(select) {
+    const {
+      style,
+      textColor,
+      backgroundColor,
+      gradient
+    } = select(blockEditorStore).getBlockAttributes(clientId) || {};
+    return {
+      style,
+      textColor,
+      backgroundColor,
+      gradient
+    };
+  }
+  const {
+    style,
+    textColor,
+    backgroundColor,
+    gradient
+  } = useSelect(selector, [clientId]);
   const value = useMemo(() => {
     return attributesToStyle({
-      style: attributes.style,
-      textColor: attributes.textColor,
-      backgroundColor: attributes.backgroundColor,
-      gradient: attributes.gradient
+      style,
+      textColor,
+      backgroundColor,
+      gradient
     });
-  }, [attributes.style, attributes.textColor, attributes.backgroundColor, attributes.gradient]);
+  }, [style, textColor, backgroundColor, gradient]);
   const onChange = newStyle => {
     setAttributes(styleToAttributes(newStyle));
   };
   if (!isEnabled) {
     return null;
   }
-  const defaultControls = getBlockSupport(props.name, [COLOR_SUPPORT_KEY, '__experimentalDefaultControls']);
+  const defaultControls = getBlockSupport(name, [COLOR_SUPPORT_KEY, '__experimentalDefaultControls']);
   const enableContrastChecking = Platform.OS === 'web' && !value?.color?.gradient && (settings?.color?.text || settings?.color?.link) &&
   // Contrast checking is enabled by default.
   // Deactivating it requires `enableContrastChecker` to have
   // an explicit value of `false`.
-  false !== getBlockSupport(props.name, [COLOR_SUPPORT_KEY, 'enableContrastChecker']);
+  false !== getBlockSupport(name, [COLOR_SUPPORT_KEY, 'enableContrastChecker']);
   return createElement(StylesColorPanel, {
     as: ColorInspectorControl,
     panelId: clientId,
@@ -237,35 +234,22 @@ export function ColorEdit(props) {
     value: value,
     onChange: onChange,
     defaultControls: defaultControls,
-    enableContrastChecker: false !== getBlockSupport(props.name, [COLOR_SUPPORT_KEY, 'enableContrastChecker'])
+    enableContrastChecker: false !== getBlockSupport(name, [COLOR_SUPPORT_KEY, 'enableContrastChecker'])
   }, enableContrastChecking && createElement(BlockColorContrastChecker, {
     clientId: clientId
   }));
 }
-
-/**
- * This adds inline styles for color palette colors.
- * Ideally, this is not needed and themes should load their palettes on the editor.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withColorPaletteStyles = createHigherOrderComponent(BlockListBlock => props => {
-  const {
-    name,
-    attributes
-  } = props;
-  const {
-    backgroundColor,
-    textColor
-  } = attributes;
+function useBlockProps({
+  name,
+  backgroundColor,
+  textColor,
+  gradient,
+  style
+}) {
   const [userPalette, themePalette, defaultPalette] = useSettings('color.palette.custom', 'color.palette.theme', 'color.palette.default');
   const colors = useMemo(() => [...(userPalette || []), ...(themePalette || []), ...(defaultPalette || [])], [userPalette, themePalette, defaultPalette]);
   if (!hasColorSupport(name) || shouldSkipSerialization(name, COLOR_SUPPORT_KEY)) {
-    return createElement(BlockListBlock, {
-      ...props
-    });
+    return {};
   }
   const extraStyles = {};
   if (textColor && !shouldSkipSerialization(name, COLOR_SUPPORT_KEY, 'text')) {
@@ -274,19 +258,28 @@ export const withColorPaletteStyles = createHigherOrderComponent(BlockListBlock
   if (backgroundColor && !shouldSkipSerialization(name, COLOR_SUPPORT_KEY, 'background')) {
     extraStyles.backgroundColor = getColorObjectByAttributeValues(colors, backgroundColor)?.color;
   }
-  let wrapperProps = props.wrapperProps;
-  wrapperProps = {
-    ...props.wrapperProps,
-    style: {
-      ...extraStyles,
-      ...props.wrapperProps?.style
-    }
-  };
-  return createElement(BlockListBlock, {
-    ...props,
-    wrapperProps: wrapperProps
+  const saveProps = addSaveProps({
+    style: extraStyles
+  }, name, {
+    textColor,
+    backgroundColor,
+    gradient,
+    style
   });
-}, 'withColorPaletteStyles');
+  const hasBackgroundValue = backgroundColor || style?.color?.background || gradient || style?.color?.gradient;
+  return {
+    ...saveProps,
+    className: classnames(saveProps.className,
+    // Add background image classes in the editor, if not already handled by background color values.
+    !hasBackgroundValue && getBackgroundImageClasses(style))
+  };
+}
+export default {
+  useBlockProps,
+  addSaveProps,
+  attributeKeys: ['backgroundColor', 'textColor', 'gradient', 'style'],
+  hasSupport: hasColorSupport
+};
 const MIGRATION_PATHS = {
   linkColor: [['style', 'elements', 'link', 'color', 'text']],
   textColor: [['textColor'], ['style', 'color', 'text']],
@@ -304,8 +297,5 @@ export function addTransforms(result, source, index, results) {
   return transformStyles(activeSupports, MIGRATION_PATHS, result, source, index, results);
 }
 addFilter('blocks.registerBlockType', 'core/color/addAttribute', addAttributes);
-addFilter('blocks.getSaveContent.extraProps', 'core/color/addSaveProps', addSaveProps);
-addFilter('blocks.registerBlockType', 'core/color/addEditProps', addEditProps);
-addFilter('editor.BlockListBlock', 'core/color/with-color-palette-styles', withColorPaletteStyles);
 addFilter('blocks.switchToBlockType.transformedBlock', 'core/color/addTransforms', addTransforms);
 //# sourceMappingURL=color.js.map