@wordpress/block-editor 12.16.0 → 12.17.0

package/build/hooks/background.js

@@ -4,8 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IMAGE_BACKGROUND_TYPE = exports.BackgroundImagePanel = exports.BACKGROUND_SUPPORT_KEY = void 0;
+exports.BACKGROUND_SUPPORT_KEY = void 0;
+exports.BackgroundImagePanel = BackgroundImagePanel;
+exports.IMAGE_BACKGROUND_TYPE = void 0;
+exports.getBackgroundImageClasses = getBackgroundImageClasses;
 exports.hasBackgroundImageValue = hasBackgroundImageValue;
+exports.hasBackgroundSizeValue = hasBackgroundSizeValue;
 exports.hasBackgroundSupport = hasBackgroundSupport;
 exports.resetBackgroundImage = resetBackgroundImage;
 var _react = require("react");
@@ -19,7 +23,6 @@ var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _notices = require("@wordpress/notices");
 var _url = require("@wordpress/url");
-var _compose = require("@wordpress/compose");
 var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));
 var _mediaReplaceFlow = _interopRequireDefault(require("../components/media-replace-flow"));
 var _useSettings = require("../components/use-settings");
@@ -54,6 +57,17 @@ function hasBackgroundImageValue(style) {
   return hasValue;
 }
 
+/**
+ * Checks if there is a current value in the background size block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether or not the block has a background size value set.
+ */
+function hasBackgroundSizeValue(style) {
+  return style?.background?.backgroundSize !== undefined;
+}
+
 /**
  * Determine whether there is block support for background.
  *
@@ -71,7 +85,7 @@ function hasBackgroundSupport(blockName, feature = 'any') {
     return true;
   }
   if (feature === 'any') {
-    return !!support?.backgroundImage;
+    return !!support?.backgroundImage || !!support?.backgroundSize || !!support?.backgroundRepeat;
   }
   return !!support?.[feature];
 }
@@ -94,6 +108,37 @@ function resetBackgroundImage(style = {}, setAttributes) {
     })
   });
 }
+
+/**
+ * Resets the background size block support attributes. This can be used when disabling
+ * the background size controls for a block via a `ToolsPanel`.
+ *
+ * @param {Object}   style         Style attribute.
+ * @param {Function} setAttributes Function to set block's attributes.
+ */
+function resetBackgroundSize(style = {}, setAttributes) {
+  setAttributes({
+    style: (0, _utils.cleanEmptyObject)({
+      ...style,
+      background: {
+        ...style?.background,
+        backgroundRepeat: undefined,
+        backgroundSize: undefined
+      }
+    })
+  });
+}
+
+/**
+ * Generates a CSS class name if an background image is set.
+ *
+ * @param {Object} style A block's style attribute.
+ *
+ * @return {string} CSS class name.
+ */
+function getBackgroundImageClasses(style) {
+  return hasBackgroundImageValue(style) ? 'has-background' : '';
+}
 function InspectorImagePreview({
   label,
   filename,
@@ -127,22 +172,28 @@ function InspectorImagePreview({
 }
 function BackgroundImagePanelItem({
   clientId,
+  isShownByDefault,
   setAttributes
 }) {
-  const style = (0, _data.useSelect)(select => select(_store.store).getBlockAttributes(clientId)?.style, [clientId]);
+  const {
+    style,
+    mediaUpload
+  } = (0, _data.useSelect)(select => {
+    const {
+      getBlockAttributes,
+      getSettings
+    } = select(_store.store);
+    return {
+      style: getBlockAttributes(clientId)?.style,
+      mediaUpload: getSettings().mediaUpload
+    };
+  }, [clientId]);
   const {
     id,
     title,
     url
   } = style?.background?.backgroundImage || {};
   const replaceContainerRef = (0, _element.useRef)();
-  const {
-    mediaUpload
-  } = (0, _data.useSelect)(select => {
-    return {
-      mediaUpload: select(_store.store).getSettings().mediaUpload
-    };
-  });
   const {
     createErrorNotice
   } = (0, _data.useDispatch)(_notices.store);
@@ -220,7 +271,7 @@ function BackgroundImagePanelItem({
     hasValue: () => hasValue,
     label: (0, _i18n.__)('Background image'),
     onDeselect: () => resetBackgroundImage(style, setAttributes),
-    isShownByDefault: true,
+    isShownByDefault: isShownByDefault,
     resetAllFilter: resetAllFilter,
     panelId: clientId
   }, (0, _react.createElement)("div", {
@@ -253,21 +304,135 @@ function BackgroundImagePanelItem({
     label: (0, _i18n.__)('Drop to upload')
   })));
 }
-function BackgroundImagePanelPure(props) {
-  const [backgroundImage] = (0, _useSettings.useSettings)('background.backgroundImage');
+function backgroundSizeHelpText(value) {
+  if (value === 'cover' || value === undefined) {
+    return (0, _i18n.__)('Stretch image to cover the block.');
+  }
+  if (value === 'contain') {
+    return (0, _i18n.__)('Resize image to fit without cropping.');
+  }
+  return (0, _i18n.__)('Set a fixed width.');
+}
+function BackgroundSizePanelItem({
+  clientId,
+  isShownByDefault,
+  setAttributes
+}) {
+  const style = (0, _data.useSelect)(select => select(_store.store).getBlockAttributes(clientId)?.style, [clientId]);
+  const sizeValue = style?.background?.backgroundSize;
+  const repeatValue = style?.background?.backgroundRepeat;
+
+  // An `undefined` value is treated as `cover` by the toggle group control.
+  // An empty string is treated as `auto` by the toggle group control. This
+  // allows a user to select "Size" and then enter a custom value, with an
+  // empty value being treated as `auto`.
+  const currentValueForToggle = sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' || sizeValue === '' ? 'auto' : sizeValue || 'cover';
+
+  // If the current value is `cover` and the repeat value is `undefined`, then
+  // the toggle should be unchecked as the default state. Otherwise, the toggle
+  // should reflect the current repeat value.
+  const repeatCheckedValue = repeatValue === 'no-repeat' || currentValueForToggle === 'cover' && repeatValue === undefined ? false : true;
+  const hasValue = hasBackgroundSizeValue(style);
+  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+    return {
+      ...previousValue,
+      style: {
+        ...previousValue.style,
+        background: {
+          ...previousValue.style?.background,
+          backgroundRepeat: undefined,
+          backgroundSize: undefined
+        }
+      }
+    };
+  }, []);
+  const updateBackgroundSize = next => {
+    // When switching to 'contain' toggle the repeat off.
+    let nextRepeat = repeatValue;
+    if (next === 'contain') {
+      nextRepeat = 'no-repeat';
+    }
+    if ((currentValueForToggle === 'cover' || currentValueForToggle === 'contain') && next === 'auto') {
+      nextRepeat = undefined;
+    }
+    setAttributes({
+      style: (0, _utils.cleanEmptyObject)({
+        ...style,
+        background: {
+          ...style?.background,
+          backgroundRepeat: nextRepeat,
+          backgroundSize: next
+        }
+      })
+    });
+  };
+  const toggleIsRepeated = () => {
+    setAttributes({
+      style: (0, _utils.cleanEmptyObject)({
+        ...style,
+        background: {
+          ...style?.background,
+          backgroundRepeat: repeatCheckedValue === true ? 'no-repeat' : undefined
+        }
+      })
+    });
+  };
+  return (0, _react.createElement)(_components.__experimentalVStack, {
+    as: _components.__experimentalToolsPanelItem,
+    spacing: 2,
+    className: "single-column",
+    hasValue: () => hasValue,
+    label: (0, _i18n.__)('Size'),
+    onDeselect: () => resetBackgroundSize(style, setAttributes),
+    isShownByDefault: isShownByDefault,
+    resetAllFilter: resetAllFilter,
+    panelId: clientId
+  }, (0, _react.createElement)(_components.__experimentalToggleGroupControl, {
+    __nextHasNoMarginBottom: true,
+    size: '__unstable-large',
+    label: (0, _i18n.__)('Size'),
+    value: currentValueForToggle,
+    onChange: updateBackgroundSize,
+    isBlock: true,
+    help: backgroundSizeHelpText(sizeValue)
+  }, (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
+    key: 'cover',
+    value: 'cover',
+    label: (0, _i18n.__)('Cover')
+  }), (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
+    key: 'contain',
+    value: 'contain',
+    label: (0, _i18n.__)('Contain')
+  }), (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
+    key: 'fixed',
+    value: 'auto',
+    label: (0, _i18n.__)('Fixed')
+  })), sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' ? (0, _react.createElement)(_components.__experimentalUnitControl, {
+    size: '__unstable-large',
+    onChange: updateBackgroundSize,
+    value: sizeValue
+  }) : null, currentValueForToggle !== 'cover' && (0, _react.createElement)(_components.ToggleControl, {
+    __nextHasNoMarginBottom: true,
+    label: (0, _i18n.__)('Repeat image'),
+    checked: repeatCheckedValue,
+    onChange: toggleIsRepeated
+  }));
+}
+function BackgroundImagePanel(props) {
+  const [backgroundImage, backgroundSize] = (0, _useSettings.useSettings)('background.backgroundImage', 'background.backgroundSize');
   if (!backgroundImage || !hasBackgroundSupport(props.name, 'backgroundImage')) {
     return null;
   }
+  const showBackgroundSize = !!(backgroundSize && hasBackgroundSupport(props.name, 'backgroundSize'));
+  const defaultControls = (0, _blocks.getBlockSupport)(props.name, [BACKGROUND_SUPPORT_KEY, '__experimentalDefaultControls']);
   return (0, _react.createElement)(_inspectorControls.default, {
     group: "background"
   }, (0, _react.createElement)(BackgroundImagePanelItem, {
+    isShownByDefault: defaultControls?.backgroundImage,
+    ...props
+  }), showBackgroundSize && (0, _react.createElement)(BackgroundSizePanelItem, {
+    isShownByDefault: defaultControls?.backgroundSize,
     ...props
   }));
 }
-
-// We don't want block controls to re-render when typing inside a block. `pure`
-// will prevent re-renders unless props change, so only pass the needed props
-// and not the whole attributes object.
-const BackgroundImagePanel = (0, _compose.pure)(BackgroundImagePanelPure);
-exports.BackgroundImagePanel = BackgroundImagePanel;
 //# sourceMappingURL=background.js.map

package/build/hooks/background.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_blob","_blocks","_dom","_components","_data","_element","_i18n","_notices","_url","_compose","_inspectorControls","_mediaReplaceFlow","_useSettings","_utils","_store","BACKGROUND_SUPPORT_KEY","exports","IMAGE_BACKGROUND_TYPE","hasBackgroundImageValue","style","hasValue","background","backgroundImage","id","url","hasBackgroundSupport","blockName","feature","Platform","OS","support","getBlockSupport","resetBackgroundImage","setAttributes","cleanEmptyObject","undefined","InspectorImagePreview","label","filename","imgUrl","imgLabel","getFilename","_react","createElement","__experimentalItemGroup","as","__experimentalHStack","justify","className","classnames","FlexItem","__experimentalTruncate","numberOfLines","VisuallyHidden","sprintf","__","BackgroundImagePanelItem","clientId","useSelect","select","blockEditorStore","getBlockAttributes","title","replaceContainerRef","useRef","mediaUpload","getSettings","createErrorNotice","useDispatch","noticesStore","onUploadError","message","type","onSelectMedia","media","newStyle","newAttributes","isBlobURL","media_type","source","onFilesDrop","filesList","allowedTypes","onFileChange","image","onError","resetAllFilter","useCallback","previousValue","__experimentalToolsPanelItem","onDeselect","isShownByDefault","panelId","ref","default","mediaId","mediaURL","accept","onSelect","name","variant","MenuItem","onClick","toggleButton","focus","tabbable","find","current","click","DropZone","BackgroundImagePanelPure","props","useSettings","group","BackgroundImagePanel","pure"],"sources":["@wordpress/block-editor/src/hooks/background.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { isBlobURL } from '@wordpress/blob';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { focus } from '@wordpress/dom';\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tDropZone,\n\tFlexItem,\n\tMenuItem,\n\tVisuallyHidden,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { Platform, useCallback, useRef } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { getFilename } from '@wordpress/url';\nimport { pure } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport MediaReplaceFlow from '../components/media-replace-flow';\nimport { useSettings } from '../components/use-settings';\nimport { cleanEmptyObject } from './utils';\nimport { store as blockEditorStore } from '../store';\n\nexport const BACKGROUND_SUPPORT_KEY = 'background';\nexport const IMAGE_BACKGROUND_TYPE = 'image';\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether or not the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\tconst hasValue =\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t!! style?.background?.backgroundImage?.url;\n\n\treturn hasValue;\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\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\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 !! support?.backgroundImage;\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Resets the background image block support attributes. This can be used when disabling\n * the background image controls for a block via a `ToolsPanel`.\n *\n * @param {Object}   style         Style attribute.\n * @param {Function} setAttributes Function to set block's attributes.\n */\nexport function resetBackgroundImage( style = {}, setAttributes ) {\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\nfunction InspectorImagePreview( { label, filename, url: imgUrl } ) {\n\tconst imgLabel = label || getFilename( imgUrl );\n\treturn (\n\t\t<ItemGroup as=\"span\">\n\t\t\t<HStack justify=\"flex-start\" as=\"span\">\n\t\t\t\t<span\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'block-editor-hooks__background__inspector-image-indicator-wrapper',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-image': imgUrl,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\taria-hidden\n\t\t\t\t>\n\t\t\t\t\t{ imgUrl && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"block-editor-hooks__background__inspector-image-indicator\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${ imgUrl })`,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</span>\n\t\t\t\t<FlexItem as=\"span\">\n\t\t\t\t\t<Truncate\n\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\tclassName=\"block-editor-hooks__background__inspector-media-replace-title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ imgLabel }\n\t\t\t\t\t</Truncate>\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ filename\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: file name */\n\t\t\t\t\t\t\t\t\t__( 'Selected image: %s' ),\n\t\t\t\t\t\t\t\t\tfilename\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'No image selected' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</ItemGroup>\n\t);\n}\n\nfunction BackgroundImagePanelItem( { clientId, setAttributes } ) {\n\tconst style = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlockAttributes( clientId )?.style,\n\t\t[ clientId ]\n\t);\n\tconst { id, title, url } = style?.background?.backgroundImage || {};\n\n\tconst replaceContainerRef = useRef();\n\n\tconst { mediaUpload } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tmediaUpload: select( blockEditorStore ).getSettings().mediaUpload,\n\t\t};\n\t} );\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t};\n\n\tconst onSelectMedia = ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tconst newStyle = {\n\t\t\t\t...style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...style?.background,\n\t\t\t\t\tbackgroundImage: undefined,\n\t\t\t\t},\n\t\t\t};\n\n\t\t\tconst newAttributes = {\n\t\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t\t};\n\n\t\t\tsetAttributes( newAttributes );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// For media selections originated from a file upload.\n\t\tif (\n\t\t\t( media.media_type &&\n\t\t\t\tmedia.media_type !== IMAGE_BACKGROUND_TYPE ) ||\n\t\t\t( ! media.media_type &&\n\t\t\t\tmedia.type &&\n\t\t\t\tmedia.type !== IMAGE_BACKGROUND_TYPE )\n\t\t) {\n\t\t\tonUploadError(\n\t\t\t\t__( 'Only images can be used as a background image.' )\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: {\n\t\t\t\t\turl: media.url,\n\t\t\t\t\tid: media.id,\n\t\t\t\t\tsource: 'file',\n\t\t\t\t\ttitle: media.title || undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\n\t\tconst newAttributes = {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t};\n\n\t\tsetAttributes( newAttributes );\n\t};\n\n\tconst onFilesDrop = ( filesList ) => {\n\t\tmediaUpload( {\n\t\t\tallowedTypes: [ 'image' ],\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tif ( isBlobURL( image?.url ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonSelectMedia( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t} );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tstyle: {\n\t\t\t\t...previousValue.style,\n\t\t\t\tbackground: undefined,\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\tconst hasValue = hasBackgroundImageValue( style );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tclassName=\"single-column\"\n\t\t\thasValue={ () => hasValue }\n\t\t\tlabel={ __( 'Background image' ) }\n\t\t\tonDeselect={ () => resetBackgroundImage( style, setAttributes ) }\n\t\t\tisShownByDefault={ true }\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tpanelId={ clientId }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"block-editor-hooks__background__inspector-media-replace-container\"\n\t\t\t\tref={ replaceContainerRef }\n\t\t\t>\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tmediaId={ id }\n\t\t\t\t\tmediaURL={ url }\n\t\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\t\taccept=\"image/*\"\n\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\tname={\n\t\t\t\t\t\t<InspectorImagePreview\n\t\t\t\t\t\t\tlabel={ __( 'Background image' ) }\n\t\t\t\t\t\t\tfilename={ title }\n\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t>\n\t\t\t\t\t{ hasValue && (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst [ toggleButton ] = focus.tabbable.find(\n\t\t\t\t\t\t\t\t\treplaceContainerRef.current\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t// Focus the toggle button and close the dropdown menu.\n\t\t\t\t\t\t\t\t// This ensures similar behaviour as to selecting an image, where the dropdown is\n\t\t\t\t\t\t\t\t// closed and focus is redirected to the dropdown toggle button.\n\t\t\t\t\t\t\t\ttoggleButton?.focus();\n\t\t\t\t\t\t\t\ttoggleButton?.click();\n\t\t\t\t\t\t\t\tresetBackgroundImage( style, setAttributes );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset ' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t) }\n\t\t\t\t</MediaReplaceFlow>\n\t\t\t\t<DropZone\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tlabel={ __( 'Drop to upload' ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nfunction BackgroundImagePanelPure( props ) {\n\tconst [ backgroundImage ] = useSettings( 'background.backgroundImage' );\n\tif (\n\t\t! backgroundImage ||\n\t\t! hasBackgroundSupport( props.name, 'backgroundImage' )\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"background\">\n\t\t\t<BackgroundImagePanelItem { ...props } />\n\t\t</InspectorControls>\n\t);\n}\n\n// We don't want block controls to re-render when typing inside a block. `pure`\n// will prevent re-renders unless props change, so only pass the needed props\n// and not the whole attributes object.\nexport const BackgroundImagePanel = pure( BackgroundImagePanelPure );\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_blob","_blocks","_dom","_components","_data","_element","_i18n","_notices","_url","_inspectorControls","_mediaReplaceFlow","_useSettings","_utils","_store","BACKGROUND_SUPPORT_KEY","exports","IMAGE_BACKGROUND_TYPE","hasBackgroundImageValue","style","hasValue","background","backgroundImage","id","url","hasBackgroundSizeValue","backgroundSize","undefined","hasBackgroundSupport","blockName","feature","Platform","OS","support","getBlockSupport","backgroundRepeat","resetBackgroundImage","setAttributes","cleanEmptyObject","resetBackgroundSize","getBackgroundImageClasses","InspectorImagePreview","label","filename","imgUrl","imgLabel","getFilename","_react","createElement","__experimentalItemGroup","as","__experimentalHStack","justify","className","classnames","FlexItem","__experimentalTruncate","numberOfLines","VisuallyHidden","sprintf","__","BackgroundImagePanelItem","clientId","isShownByDefault","mediaUpload","useSelect","select","getBlockAttributes","getSettings","blockEditorStore","title","replaceContainerRef","useRef","createErrorNotice","useDispatch","noticesStore","onUploadError","message","type","onSelectMedia","media","newStyle","newAttributes","isBlobURL","media_type","source","onFilesDrop","filesList","allowedTypes","onFileChange","image","onError","resetAllFilter","useCallback","previousValue","__experimentalToolsPanelItem","onDeselect","panelId","ref","default","mediaId","mediaURL","accept","onSelect","name","variant","MenuItem","onClick","toggleButton","focus","tabbable","find","current","click","DropZone","backgroundSizeHelpText","value","BackgroundSizePanelItem","sizeValue","repeatValue","currentValueForToggle","repeatCheckedValue","updateBackgroundSize","next","nextRepeat","toggleIsRepeated","__experimentalVStack","ToolsPanelItem","spacing","__experimentalToggleGroupControl","__nextHasNoMarginBottom","size","onChange","isBlock","help","__experimentalToggleGroupControlOption","key","__experimentalUnitControl","ToggleControl","checked","BackgroundImagePanel","props","useSettings","showBackgroundSize","defaultControls","group"],"sources":["@wordpress/block-editor/src/hooks/background.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { isBlobURL } from '@wordpress/blob';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { focus } from '@wordpress/dom';\nimport {\n\tToggleControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalVStack as VStack,\n\tDropZone,\n\tFlexItem,\n\tMenuItem,\n\tVisuallyHidden,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { Platform, useCallback, useRef } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { getFilename } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport MediaReplaceFlow from '../components/media-replace-flow';\nimport { useSettings } from '../components/use-settings';\nimport { cleanEmptyObject } from './utils';\nimport { store as blockEditorStore } from '../store';\n\nexport const BACKGROUND_SUPPORT_KEY = 'background';\nexport const IMAGE_BACKGROUND_TYPE = 'image';\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether or not the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\tconst hasValue =\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t!! style?.background?.backgroundImage?.url;\n\n\treturn hasValue;\n}\n\n/**\n * Checks if there is a current value in the background size block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether or not the block has a background size value set.\n */\nexport function hasBackgroundSizeValue( style ) {\n\treturn style?.background?.backgroundSize !== undefined;\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\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\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);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Resets the background image block support attributes. This can be used when disabling\n * the background image controls for a block via a `ToolsPanel`.\n *\n * @param {Object}   style         Style attribute.\n * @param {Function} setAttributes Function to set block's attributes.\n */\nexport function resetBackgroundImage( style = {}, setAttributes ) {\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Resets the background size block support attributes. This can be used when disabling\n * the background size controls for a block via a `ToolsPanel`.\n *\n * @param {Object}   style         Style attribute.\n * @param {Function} setAttributes Function to set block's attributes.\n */\nfunction resetBackgroundSize( style = {}, setAttributes ) {\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundRepeat: undefined,\n\t\t\t\tbackgroundSize: undefined,\n\t\t\t},\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 ) ? 'has-background' : '';\n}\n\nfunction InspectorImagePreview( { label, filename, url: imgUrl } ) {\n\tconst imgLabel = label || getFilename( imgUrl );\n\treturn (\n\t\t<ItemGroup as=\"span\">\n\t\t\t<HStack justify=\"flex-start\" as=\"span\">\n\t\t\t\t<span\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'block-editor-hooks__background__inspector-image-indicator-wrapper',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-image': imgUrl,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\taria-hidden\n\t\t\t\t>\n\t\t\t\t\t{ imgUrl && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"block-editor-hooks__background__inspector-image-indicator\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${ imgUrl })`,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</span>\n\t\t\t\t<FlexItem as=\"span\">\n\t\t\t\t\t<Truncate\n\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\tclassName=\"block-editor-hooks__background__inspector-media-replace-title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ imgLabel }\n\t\t\t\t\t</Truncate>\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ filename\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: file name */\n\t\t\t\t\t\t\t\t\t__( 'Selected image: %s' ),\n\t\t\t\t\t\t\t\t\tfilename\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'No image selected' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</ItemGroup>\n\t);\n}\n\nfunction BackgroundImagePanelItem( {\n\tclientId,\n\tisShownByDefault,\n\tsetAttributes,\n} ) {\n\tconst { style, mediaUpload } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getSettings } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\treturn {\n\t\t\t\tstyle: getBlockAttributes( clientId )?.style,\n\t\t\t\tmediaUpload: getSettings().mediaUpload,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { id, title, url } = style?.background?.backgroundImage || {};\n\n\tconst replaceContainerRef = useRef();\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t};\n\n\tconst onSelectMedia = ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tconst newStyle = {\n\t\t\t\t...style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...style?.background,\n\t\t\t\t\tbackgroundImage: undefined,\n\t\t\t\t},\n\t\t\t};\n\n\t\t\tconst newAttributes = {\n\t\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t\t};\n\n\t\t\tsetAttributes( newAttributes );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// For media selections originated from a file upload.\n\t\tif (\n\t\t\t( media.media_type &&\n\t\t\t\tmedia.media_type !== IMAGE_BACKGROUND_TYPE ) ||\n\t\t\t( ! media.media_type &&\n\t\t\t\tmedia.type &&\n\t\t\t\tmedia.type !== IMAGE_BACKGROUND_TYPE )\n\t\t) {\n\t\t\tonUploadError(\n\t\t\t\t__( 'Only images can be used as a background image.' )\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: {\n\t\t\t\t\turl: media.url,\n\t\t\t\t\tid: media.id,\n\t\t\t\t\tsource: 'file',\n\t\t\t\t\ttitle: media.title || undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\n\t\tconst newAttributes = {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t};\n\n\t\tsetAttributes( newAttributes );\n\t};\n\n\tconst onFilesDrop = ( filesList ) => {\n\t\tmediaUpload( {\n\t\t\tallowedTypes: [ 'image' ],\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tif ( isBlobURL( image?.url ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonSelectMedia( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t} );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tstyle: {\n\t\t\t\t...previousValue.style,\n\t\t\t\tbackground: undefined,\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\tconst hasValue = hasBackgroundImageValue( style );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tclassName=\"single-column\"\n\t\t\thasValue={ () => hasValue }\n\t\t\tlabel={ __( 'Background image' ) }\n\t\t\tonDeselect={ () => resetBackgroundImage( style, setAttributes ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tpanelId={ clientId }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"block-editor-hooks__background__inspector-media-replace-container\"\n\t\t\t\tref={ replaceContainerRef }\n\t\t\t>\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tmediaId={ id }\n\t\t\t\t\tmediaURL={ url }\n\t\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\t\taccept=\"image/*\"\n\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\tname={\n\t\t\t\t\t\t<InspectorImagePreview\n\t\t\t\t\t\t\tlabel={ __( 'Background image' ) }\n\t\t\t\t\t\t\tfilename={ title }\n\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t>\n\t\t\t\t\t{ hasValue && (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst [ toggleButton ] = focus.tabbable.find(\n\t\t\t\t\t\t\t\t\treplaceContainerRef.current\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t// Focus the toggle button and close the dropdown menu.\n\t\t\t\t\t\t\t\t// This ensures similar behaviour as to selecting an image, where the dropdown is\n\t\t\t\t\t\t\t\t// closed and focus is redirected to the dropdown toggle button.\n\t\t\t\t\t\t\t\ttoggleButton?.focus();\n\t\t\t\t\t\t\t\ttoggleButton?.click();\n\t\t\t\t\t\t\t\tresetBackgroundImage( style, setAttributes );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset ' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t) }\n\t\t\t\t</MediaReplaceFlow>\n\t\t\t\t<DropZone\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tlabel={ __( 'Drop to upload' ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nfunction backgroundSizeHelpText( value ) {\n\tif ( value === 'cover' || value === undefined ) {\n\t\treturn __( 'Stretch image to cover the block.' );\n\t}\n\tif ( value === 'contain' ) {\n\t\treturn __( 'Resize image to fit without cropping.' );\n\t}\n\treturn __( 'Set a fixed width.' );\n}\n\nfunction BackgroundSizePanelItem( {\n\tclientId,\n\tisShownByDefault,\n\tsetAttributes,\n} ) {\n\tconst style = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlockAttributes( clientId )?.style,\n\t\t[ clientId ]\n\t);\n\n\tconst sizeValue = style?.background?.backgroundSize;\n\tconst repeatValue = style?.background?.backgroundRepeat;\n\n\t// An `undefined` value is treated as `cover` by the toggle group control.\n\t// An empty string is treated as `auto` by the toggle group control. This\n\t// allows a user to select \"Size\" and then enter a custom value, with an\n\t// empty value being treated as `auto`.\n\tconst currentValueForToggle =\n\t\t( sizeValue !== undefined &&\n\t\t\tsizeValue !== 'cover' &&\n\t\t\tsizeValue !== 'contain' ) ||\n\t\tsizeValue === ''\n\t\t\t? 'auto'\n\t\t\t: sizeValue || 'cover';\n\n\t// If the current value is `cover` and the repeat value is `undefined`, then\n\t// the toggle should be unchecked as the default state. Otherwise, the toggle\n\t// should reflect the current repeat value.\n\tconst repeatCheckedValue =\n\t\trepeatValue === 'no-repeat' ||\n\t\t( currentValueForToggle === 'cover' && repeatValue === undefined )\n\t\t\t? false\n\t\t\t: true;\n\n\tconst hasValue = hasBackgroundSizeValue( style );\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tstyle: {\n\t\t\t\t...previousValue.style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...previousValue.style?.background,\n\t\t\t\t\tbackgroundRepeat: undefined,\n\t\t\t\t\tbackgroundSize: undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\tconst updateBackgroundSize = ( next ) => {\n\t\t// When switching to 'contain' toggle the repeat off.\n\t\tlet nextRepeat = repeatValue;\n\n\t\tif ( next === 'contain' ) {\n\t\t\tnextRepeat = 'no-repeat';\n\t\t}\n\n\t\tif (\n\t\t\t( currentValueForToggle === 'cover' ||\n\t\t\t\tcurrentValueForToggle === 'contain' ) &&\n\t\t\tnext === 'auto'\n\t\t) {\n\t\t\tnextRepeat = undefined;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...style?.background,\n\t\t\t\t\tbackgroundRepeat: nextRepeat,\n\t\t\t\t\tbackgroundSize: next,\n\t\t\t\t},\n\t\t\t} ),\n\t\t} );\n\t};\n\n\tconst toggleIsRepeated = () => {\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...style?.background,\n\t\t\t\t\tbackgroundRepeat:\n\t\t\t\t\t\trepeatCheckedValue === true ? 'no-repeat' : undefined,\n\t\t\t\t},\n\t\t\t} ),\n\t\t} );\n\t};\n\n\treturn (\n\t\t<VStack\n\t\t\tas={ ToolsPanelItem }\n\t\t\tspacing={ 2 }\n\t\t\tclassName=\"single-column\"\n\t\t\thasValue={ () => hasValue }\n\t\t\tlabel={ __( 'Size' ) }\n\t\t\tonDeselect={ () => resetBackgroundSize( style, setAttributes ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tpanelId={ clientId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\tvalue={ currentValueForToggle }\n\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\tisBlock={ true }\n\t\t\t\thelp={ backgroundSizeHelpText( sizeValue ) }\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'cover' }\n\t\t\t\t\tvalue={ 'cover' }\n\t\t\t\t\tlabel={ __( 'Cover' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'contain' }\n\t\t\t\t\tvalue={ 'contain' }\n\t\t\t\t\tlabel={ __( 'Contain' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fixed' }\n\t\t\t\t\tvalue={ 'auto' }\n\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ sizeValue !== undefined &&\n\t\t\tsizeValue !== 'cover' &&\n\t\t\tsizeValue !== 'contain' ? (\n\t\t\t\t<UnitControl\n\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\t\tvalue={ sizeValue }\n\t\t\t\t/>\n\t\t\t) : null }\n\t\t\t{ currentValueForToggle !== 'cover' && (\n\t\t\t\t<ToggleControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Repeat image' ) }\n\t\t\t\t\tchecked={ repeatCheckedValue }\n\t\t\t\t\tonChange={ toggleIsRepeated }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport function BackgroundImagePanel( props ) {\n\tconst [ backgroundImage, backgroundSize ] = useSettings(\n\t\t'background.backgroundImage',\n\t\t'background.backgroundSize'\n\t);\n\n\tif (\n\t\t! backgroundImage ||\n\t\t! hasBackgroundSupport( props.name, 'backgroundImage' )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst showBackgroundSize = !! (\n\t\tbackgroundSize && hasBackgroundSupport( props.name, 'backgroundSize' )\n\t);\n\n\tconst defaultControls = getBlockSupport( props.name, [\n\t\tBACKGROUND_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\treturn (\n\t\t<InspectorControls group=\"background\">\n\t\t\t<BackgroundImagePanelItem\n\t\t\t\tisShownByDefault={ defaultControls?.backgroundImage }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t\t{ showBackgroundSize && (\n\t\t\t\t<BackgroundSizePanelItem\n\t\t\t\t\tisShownByDefault={ defaultControls?.backgroundSize }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAeA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AACA,IAAAQ,QAAA,GAAAR,OAAA;AACA,IAAAS,IAAA,GAAAT,OAAA;AAKA,IAAAU,kBAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,iBAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,YAAA,GAAAZ,OAAA;AACA,IAAAa,MAAA,GAAAb,OAAA;AACA,IAAAc,MAAA,GAAAd,OAAA;AAvCA;AACA;AACA;;AAGA;AACA;AACA;;AAyBA;AACA;AACA;;AAOO,MAAMe,sBAAsB,GAAG,YAAY;AAACC,OAAA,CAAAD,sBAAA,GAAAA,sBAAA;AAC5C,MAAME,qBAAqB,GAAG,OAAO;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AANAD,OAAA,CAAAC,qBAAA,GAAAA,qBAAA;AAOO,SAASC,uBAAuBA,CAAEC,KAAK,EAAG;EAChD,MAAMC,QAAQ,GACb,CAAC,CAAED,KAAK,EAAEE,UAAU,EAAEC,eAAe,EAAEC,EAAE,IACzC,CAAC,CAAEJ,KAAK,EAAEE,UAAU,EAAEC,eAAe,EAAEE,GAAG;EAE3C,OAAOJ,QAAQ;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,sBAAsBA,CAAEN,KAAK,EAAG;EAC/C,OAAOA,KAAK,EAAEE,UAAU,EAAEK,cAAc,KAAKC,SAAS;AACvD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,oBAAoBA,CAAEC,SAAS,EAAEC,OAAO,GAAG,KAAK,EAAG;EAClE,IAAKC,iBAAQ,CAACC,EAAE,KAAK,KAAK,EAAG;IAC5B,OAAO,KAAK;EACb;EAEA,MAAMC,OAAO,GAAG,IAAAC,uBAAe,EAAEL,SAAS,EAAEd,sBAAuB,CAAC;EAEpE,IAAKkB,OAAO,KAAK,IAAI,EAAG;IACvB,OAAO,IAAI;EACZ;EAEA,IAAKH,OAAO,KAAK,KAAK,EAAG;IACxB,OACC,CAAC,CAAEG,OAAO,EAAEX,eAAe,IAC3B,CAAC,CAAEW,OAAO,EAAEP,cAAc,IAC1B,CAAC,CAAEO,OAAO,EAAEE,gBAAgB;EAE9B;EAEA,OAAO,CAAC,CAAEF,OAAO,GAAIH,OAAO,CAAE;AAC/B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASM,oBAAoBA,CAAEjB,KAAK,GAAG,CAAC,CAAC,EAAEkB,aAAa,EAAG;EACjEA,aAAa,CAAE;IACdlB,KAAK,EAAE,IAAAmB,uBAAgB,EAAE;MACxB,GAAGnB,KAAK;MACRE,UAAU,EAAE;QACX,GAAGF,KAAK,EAAEE,UAAU;QACpBC,eAAe,EAAEK;MAClB;IACD,CAAE;EACH,CAAE,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASY,mBAAmBA,CAAEpB,KAAK,GAAG,CAAC,CAAC,EAAEkB,aAAa,EAAG;EACzDA,aAAa,CAAE;IACdlB,KAAK,EAAE,IAAAmB,uBAAgB,EAAE;MACxB,GAAGnB,KAAK;MACRE,UAAU,EAAE;QACX,GAAGF,KAAK,EAAEE,UAAU;QACpBc,gBAAgB,EAAER,SAAS;QAC3BD,cAAc,EAAEC;MACjB;IACD,CAAE;EACH,CAAE,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASa,yBAAyBA,CAAErB,KAAK,EAAG;EAClD,OAAOD,uBAAuB,CAAEC,KAAM,CAAC,GAAG,gBAAgB,GAAG,EAAE;AAChE;AAEA,SAASsB,qBAAqBA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEnB,GAAG,EAAEoB;AAAO,CAAC,EAAG;EAClE,MAAMC,QAAQ,GAAGH,KAAK,IAAI,IAAAI,gBAAW,EAAEF,MAAO,CAAC;EAC/C,OACC,IAAAG,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAA6C,uBAAS;IAACC,EAAE,EAAC;EAAM,GACnB,IAAAH,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAA+C,oBAAM;IAACC,OAAO,EAAC,YAAY;IAACF,EAAE,EAAC;EAAM,GACrC,IAAAH,MAAA,CAAAC,aAAA;IACCK,SAAS,EAAG,IAAAC,mBAAU,EACrB,mEAAmE,EACnE;MACC,WAAW,EAAEV;IACd,CACD,CAAG;IACH;EAAW,GAETA,MAAM,IACP,IAAAG,MAAA,CAAAC,aAAA;IACCK,SAAS,EAAC,2DAA2D;IACrElC,KAAK,EAAG;MACPG,eAAe,EAAG,OAAOsB,MAAQ;IAClC;EAAG,CACH,CAEG,CAAC,EACP,IAAAG,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAAmD,QAAQ;IAACL,EAAE,EAAC;EAAM,GAClB,IAAAH,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAAoD,sBAAQ;IACRC,aAAa,EAAG,CAAG;IACnBJ,SAAS,EAAC;EAA+D,GAEvER,QACO,CAAC,EACX,IAAAE,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAAsD,cAAc;IAACR,EAAE,EAAC;EAAM,GACtBP,QAAQ,GACP,IAAAgB,aAAO,GACP;EACA,IAAAC,QAAE,EAAE,oBAAqB,CAAC,EAC1BjB,QACA,CAAC,GACD,IAAAiB,QAAE,EAAE,mBAAoB,CACZ,CACP,CACH,CACE,CAAC;AAEd;AAEA,SAASC,wBAAwBA,CAAE;EAClCC,QAAQ;EACRC,gBAAgB;EAChB1B;AACD,CAAC,EAAG;EACH,MAAM;IAAElB,KAAK;IAAE6C;EAAY,CAAC,GAAG,IAAAC,eAAS,EACrCC,MAAM,IAAM;IACb,MAAM;MAAEC,kBAAkB;MAAEC;IAAY,CAAC,GACxCF,MAAM,CAAEG,YAAiB,CAAC;IAE3B,OAAO;MACNlD,KAAK,EAAEgD,kBAAkB,CAAEL,QAAS,CAAC,EAAE3C,KAAK;MAC5C6C,WAAW,EAAEI,WAAW,CAAC,CAAC,CAACJ;IAC5B,CAAC;EACF,CAAC,EACD,CAAEF,QAAQ,CACX,CAAC;EACD,MAAM;IAAEvC,EAAE;IAAE+C,KAAK;IAAE9C;EAAI,CAAC,GAAGL,KAAK,EAAEE,UAAU,EAAEC,eAAe,IAAI,CAAC,CAAC;EAEnE,MAAMiD,mBAAmB,GAAG,IAAAC,eAAM,EAAC,CAAC;EAEpC,MAAM;IAAEC;EAAkB,CAAC,GAAG,IAAAC,iBAAW,EAAEC,cAAa,CAAC;EACzD,MAAMC,aAAa,GAAKC,OAAO,IAAM;IACpCJ,iBAAiB,CAAEI,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAW,CAAE,CAAC;EACnD,CAAC;EAED,MAAMC,aAAa,GAAKC,KAAK,IAAM;IAClC,IAAK,CAAEA,KAAK,IAAI,CAAEA,KAAK,CAACxD,GAAG,EAAG;MAC7B,MAAMyD,QAAQ,GAAG;QAChB,GAAG9D,KAAK;QACRE,UAAU,EAAE;UACX,GAAGF,KAAK,EAAEE,UAAU;UACpBC,eAAe,EAAEK;QAClB;MACD,CAAC;MAED,MAAMuD,aAAa,GAAG;QACrB/D,KAAK,EAAE,IAAAmB,uBAAgB,EAAE2C,QAAS;MACnC,CAAC;MAED5C,aAAa,CAAE6C,aAAc,CAAC;MAC9B;IACD;IAEA,IAAK,IAAAC,eAAS,EAAEH,KAAK,CAACxD,GAAI,CAAC,EAAG;MAC7B;IACD;;IAEA;IACA,IACGwD,KAAK,CAACI,UAAU,IACjBJ,KAAK,CAACI,UAAU,KAAKnE,qBAAqB,IACzC,CAAE+D,KAAK,CAACI,UAAU,IACnBJ,KAAK,CAACF,IAAI,IACVE,KAAK,CAACF,IAAI,KAAK7D,qBAAuB,EACtC;MACD2D,aAAa,CACZ,IAAAhB,QAAE,EAAE,gDAAiD,CACtD,CAAC;MACD;IACD;IAEA,MAAMqB,QAAQ,GAAG;MAChB,GAAG9D,KAAK;MACRE,UAAU,EAAE;QACX,GAAGF,KAAK,EAAEE,UAAU;QACpBC,eAAe,EAAE;UAChBE,GAAG,EAAEwD,KAAK,CAACxD,GAAG;UACdD,EAAE,EAAEyD,KAAK,CAACzD,EAAE;UACZ8D,MAAM,EAAE,MAAM;UACdf,KAAK,EAAEU,KAAK,CAACV,KAAK,IAAI3C;QACvB;MACD;IACD,CAAC;IAED,MAAMuD,aAAa,GAAG;MACrB/D,KAAK,EAAE,IAAAmB,uBAAgB,EAAE2C,QAAS;IACnC,CAAC;IAED5C,aAAa,CAAE6C,aAAc,CAAC;EAC/B,CAAC;EAED,MAAMI,WAAW,GAAKC,SAAS,IAAM;IACpCvB,WAAW,CAAE;MACZwB,YAAY,EAAE,CAAE,OAAO,CAAE;MACzBD,SAAS;MACTE,YAAYA,CAAE,CAAEC,KAAK,CAAE,EAAG;QACzB,IAAK,IAAAP,eAAS,EAAEO,KAAK,EAAElE,GAAI,CAAC,EAAG;UAC9B;QACD;QACAuD,aAAa,CAAEW,KAAM,CAAC;MACvB,CAAC;MACDC,OAAO,EAAEf;IACV,CAAE,CAAC;EACJ,CAAC;EAED,MAAMgB,cAAc,GAAG,IAAAC,oBAAW,EAAIC,aAAa,IAAM;IACxD,OAAO;MACN,GAAGA,aAAa;MAChB3E,KAAK,EAAE;QACN,GAAG2E,aAAa,CAAC3E,KAAK;QACtBE,UAAU,EAAEM;MACb;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMP,QAAQ,GAAGF,uBAAuB,CAAEC,KAAM,CAAC;EAEjD,OACC,IAAA4B,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAA2F,4BAAc;IACd1C,SAAS,EAAC,eAAe;IACzBjC,QAAQ,EAAGA,CAAA,KAAMA,QAAU;IAC3BsB,KAAK,EAAG,IAAAkB,QAAE,EAAE,kBAAmB,CAAG;IAClCoC,UAAU,EAAGA,CAAA,KAAM5D,oBAAoB,CAAEjB,KAAK,EAAEkB,aAAc,CAAG;IACjE0B,gBAAgB,EAAGA,gBAAkB;IACrC6B,cAAc,EAAGA,cAAgB;IACjCK,OAAO,EAAGnC;EAAU,GAEpB,IAAAf,MAAA,CAAAC,aAAA;IACCK,SAAS,EAAC,mEAAmE;IAC7E6C,GAAG,EAAG3B;EAAqB,GAE3B,IAAAxB,MAAA,CAAAC,aAAA,EAACrC,iBAAA,CAAAwF,OAAgB;IAChBC,OAAO,EAAG7E,EAAI;IACd8E,QAAQ,EAAG7E,GAAK;IAChBgE,YAAY,EAAG,CAAEvE,qBAAqB,CAAI;IAC1CqF,MAAM,EAAC,SAAS;IAChBC,QAAQ,EAAGxB,aAAe;IAC1ByB,IAAI,EACH,IAAAzD,MAAA,CAAAC,aAAA,EAACP,qBAAqB;MACrBC,KAAK,EAAG,IAAAkB,QAAE,EAAE,kBAAmB,CAAG;MAClCjB,QAAQ,EAAG2B,KAAO;MAClB9C,GAAG,EAAGA;IAAK,CACX,CACD;IACDiF,OAAO,EAAC;EAAW,GAEjBrF,QAAQ,IACT,IAAA2B,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAAsG,QAAQ;IACRC,OAAO,EAAGA,CAAA,KAAM;MACf,MAAM,CAAEC,YAAY,CAAE,GAAGC,UAAK,CAACC,QAAQ,CAACC,IAAI,CAC3CxC,mBAAmB,CAACyC,OACrB,CAAC;MACD;MACA;MACA;MACAJ,YAAY,EAAEC,KAAK,CAAC,CAAC;MACrBD,YAAY,EAAEK,KAAK,CAAC,CAAC;MACrB7E,oBAAoB,CAAEjB,KAAK,EAAEkB,aAAc,CAAC;IAC7C;EAAG,GAED,IAAAuB,QAAE,EAAE,QAAS,CACN,CAEM,CAAC,EACnB,IAAAb,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAA8G,QAAQ;IACR5B,WAAW,EAAGA,WAAa;IAC3B5C,KAAK,EAAG,IAAAkB,QAAE,EAAE,gBAAiB;EAAG,CAChC,CACG,CACU,CAAC;AAEnB;AAEA,SAASuD,sBAAsBA,CAAEC,KAAK,EAAG;EACxC,IAAKA,KAAK,KAAK,OAAO,IAAIA,KAAK,KAAKzF,SAAS,EAAG;IAC/C,OAAO,IAAAiC,QAAE,EAAE,mCAAoC,CAAC;EACjD;EACA,IAAKwD,KAAK,KAAK,SAAS,EAAG;IAC1B,OAAO,IAAAxD,QAAE,EAAE,uCAAwC,CAAC;EACrD;EACA,OAAO,IAAAA,QAAE,EAAE,oBAAqB,CAAC;AAClC;AAEA,SAASyD,uBAAuBA,CAAE;EACjCvD,QAAQ;EACRC,gBAAgB;EAChB1B;AACD,CAAC,EAAG;EACH,MAAMlB,KAAK,GAAG,IAAA8C,eAAS,EACpBC,MAAM,IACPA,MAAM,CAAEG,YAAiB,CAAC,CAACF,kBAAkB,CAAEL,QAAS,CAAC,EAAE3C,KAAK,EACjE,CAAE2C,QAAQ,CACX,CAAC;EAED,MAAMwD,SAAS,GAAGnG,KAAK,EAAEE,UAAU,EAAEK,cAAc;EACnD,MAAM6F,WAAW,GAAGpG,KAAK,EAAEE,UAAU,EAAEc,gBAAgB;;EAEvD;EACA;EACA;EACA;EACA,MAAMqF,qBAAqB,GACxBF,SAAS,KAAK3F,SAAS,IACxB2F,SAAS,KAAK,OAAO,IACrBA,SAAS,KAAK,SAAS,IACxBA,SAAS,KAAK,EAAE,GACb,MAAM,GACNA,SAAS,IAAI,OAAO;;EAExB;EACA;EACA;EACA,MAAMG,kBAAkB,GACvBF,WAAW,KAAK,WAAW,IACzBC,qBAAqB,KAAK,OAAO,IAAID,WAAW,KAAK5F,SAAW,GAC/D,KAAK,GACL,IAAI;EAER,MAAMP,QAAQ,GAAGK,sBAAsB,CAAEN,KAAM,CAAC;EAEhD,MAAMyE,cAAc,GAAG,IAAAC,oBAAW,EAAIC,aAAa,IAAM;IACxD,OAAO;MACN,GAAGA,aAAa;MAChB3E,KAAK,EAAE;QACN,GAAG2E,aAAa,CAAC3E,KAAK;QACtBE,UAAU,EAAE;UACX,GAAGyE,aAAa,CAAC3E,KAAK,EAAEE,UAAU;UAClCc,gBAAgB,EAAER,SAAS;UAC3BD,cAAc,EAAEC;QACjB;MACD;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAM+F,oBAAoB,GAAKC,IAAI,IAAM;IACxC;IACA,IAAIC,UAAU,GAAGL,WAAW;IAE5B,IAAKI,IAAI,KAAK,SAAS,EAAG;MACzBC,UAAU,GAAG,WAAW;IACzB;IAEA,IACC,CAAEJ,qBAAqB,KAAK,OAAO,IAClCA,qBAAqB,KAAK,SAAS,KACpCG,IAAI,KAAK,MAAM,EACd;MACDC,UAAU,GAAGjG,SAAS;IACvB;IAEAU,aAAa,CAAE;MACdlB,KAAK,EAAE,IAAAmB,uBAAgB,EAAE;QACxB,GAAGnB,KAAK;QACRE,UAAU,EAAE;UACX,GAAGF,KAAK,EAAEE,UAAU;UACpBc,gBAAgB,EAAEyF,UAAU;UAC5BlG,cAAc,EAAEiG;QACjB;MACD,CAAE;IACH,CAAE,CAAC;EACJ,CAAC;EAED,MAAME,gBAAgB,GAAGA,CAAA,KAAM;IAC9BxF,aAAa,CAAE;MACdlB,KAAK,EAAE,IAAAmB,uBAAgB,EAAE;QACxB,GAAGnB,KAAK;QACRE,UAAU,EAAE;UACX,GAAGF,KAAK,EAAEE,UAAU;UACpBc,gBAAgB,EACfsF,kBAAkB,KAAK,IAAI,GAAG,WAAW,GAAG9F;QAC9C;MACD,CAAE;IACH,CAAE,CAAC;EACJ,CAAC;EAED,OACC,IAAAoB,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAA0H,oBAAM;IACN5E,EAAE,EAAG6E,wCAAgB;IACrBC,OAAO,EAAG,CAAG;IACb3E,SAAS,EAAC,eAAe;IACzBjC,QAAQ,EAAGA,CAAA,KAAMA,QAAU;IAC3BsB,KAAK,EAAG,IAAAkB,QAAE,EAAE,MAAO,CAAG;IACtBoC,UAAU,EAAGA,CAAA,KAAMzD,mBAAmB,CAAEpB,KAAK,EAAEkB,aAAc,CAAG;IAChE0B,gBAAgB,EAAGA,gBAAkB;IACrC6B,cAAc,EAAGA,cAAgB;IACjCK,OAAO,EAAGnC;EAAU,GAEpB,IAAAf,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAA6H,gCAAkB;IAClBC,uBAAuB;IACvBC,IAAI,EAAG,kBAAoB;IAC3BzF,KAAK,EAAG,IAAAkB,QAAE,EAAE,MAAO,CAAG;IACtBwD,KAAK,EAAGI,qBAAuB;IAC/BY,QAAQ,EAAGV,oBAAsB;IACjCW,OAAO,EAAG,IAAM;IAChBC,IAAI,EAAGnB,sBAAsB,CAAEG,SAAU;EAAG,GAE5C,IAAAvE,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAAmI,sCAAwB;IACxBC,GAAG,EAAG,OAAS;IACfpB,KAAK,EAAG,OAAS;IACjB1E,KAAK,EAAG,IAAAkB,QAAE,EAAE,OAAQ;EAAG,CACvB,CAAC,EACF,IAAAb,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAAmI,sCAAwB;IACxBC,GAAG,EAAG,SAAW;IACjBpB,KAAK,EAAG,SAAW;IACnB1E,KAAK,EAAG,IAAAkB,QAAE,EAAE,SAAU;EAAG,CACzB,CAAC,EACF,IAAAb,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAAmI,sCAAwB;IACxBC,GAAG,EAAG,OAAS;IACfpB,KAAK,EAAG,MAAQ;IAChB1E,KAAK,EAAG,IAAAkB,QAAE,EAAE,OAAQ;EAAG,CACvB,CACkB,CAAC,EACnB0D,SAAS,KAAK3F,SAAS,IACzB2F,SAAS,KAAK,OAAO,IACrBA,SAAS,KAAK,SAAS,GACtB,IAAAvE,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAAqI,yBAAW;IACXN,IAAI,EAAG,kBAAoB;IAC3BC,QAAQ,EAAGV,oBAAsB;IACjCN,KAAK,EAAGE;EAAW,CACnB,CAAC,GACC,IAAI,EACNE,qBAAqB,KAAK,OAAO,IAClC,IAAAzE,MAAA,CAAAC,aAAA,EAAC5C,WAAA,CAAAsI,aAAa;IACbR,uBAAuB;IACvBxF,KAAK,EAAG,IAAAkB,QAAE,EAAE,cAAe,CAAG;IAC9B+E,OAAO,EAAGlB,kBAAoB;IAC9BW,QAAQ,EAAGP;EAAkB,CAC7B,CAEK,CAAC;AAEX;AAEO,SAASe,oBAAoBA,CAAEC,KAAK,EAAG;EAC7C,MAAM,CAAEvH,eAAe,EAAEI,cAAc,CAAE,GAAG,IAAAoH,wBAAW,EACtD,4BAA4B,EAC5B,2BACD,CAAC;EAED,IACC,CAAExH,eAAe,IACjB,CAAEM,oBAAoB,CAAEiH,KAAK,CAACrC,IAAI,EAAE,iBAAkB,CAAC,EACtD;IACD,OAAO,IAAI;EACZ;EAEA,MAAMuC,kBAAkB,GAAG,CAAC,EAC3BrH,cAAc,IAAIE,oBAAoB,CAAEiH,KAAK,CAACrC,IAAI,EAAE,gBAAiB,CAAC,CACtE;EAED,MAAMwC,eAAe,GAAG,IAAA9G,uBAAe,EAAE2G,KAAK,CAACrC,IAAI,EAAE,CACpDzF,sBAAsB,EACtB,+BAA+B,CAC9B,CAAC;EAEH,OACC,IAAAgC,MAAA,CAAAC,aAAA,EAACtC,kBAAA,CAAAyF,OAAiB;IAAC8C,KAAK,EAAC;EAAY,GACpC,IAAAlG,MAAA,CAAAC,aAAA,EAACa,wBAAwB;IACxBE,gBAAgB,EAAGiF,eAAe,EAAE1H,eAAiB;IAAA,GAChDuH;EAAK,CACV,CAAC,EACAE,kBAAkB,IACnB,IAAAhG,MAAA,CAAAC,aAAA,EAACqE,uBAAuB;IACvBtD,gBAAgB,EAAGiF,eAAe,EAAEtH,cAAgB;IAAA,GAC/CmH;EAAK,CACV,CAEgB,CAAC;AAEtB"}

package/build/hooks/border.js

@@ -4,7 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BorderPanel = exports.BORDER_SUPPORT_KEY = void 0;
+exports.BORDER_SUPPORT_KEY = void 0;
+exports.BorderPanel = BorderPanel;
+exports.default = void 0;
 exports.getBorderClasses = getBorderClasses;
 exports.getMultiOriginColor = void 0;
 exports.hasBorderSupport = hasBorderSupport;
@@ -13,7 +15,6 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _blocks = require("@wordpress/blocks");
 var _components = require("@wordpress/components");
-var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _hooks = require("@wordpress/hooks");
 var _data = require("@wordpress/data");
@@ -132,7 +133,7 @@ function BordersInspectorControl({
     resetAllFilter: attributesResetAllFilter
   }, children);
 }
-function BorderPanelPure({
+function BorderPanel({
   clientId,
   name,
   setAttributes,
@@ -176,11 +177,6 @@ function BorderPanelPure({
   });
 }
 
-// We don't want block controls to re-render when typing inside a block. `pure`
-// will prevent re-renders unless props change, so only pass the needed props
-// and not the whole attributes object.
-const BorderPanel = (0, _compose.pure)(BorderPanelPure);
-
 /**
  * Determine whether there is block support for border properties.
  *
@@ -189,7 +185,6 @@ const BorderPanel = (0, _compose.pure)(BorderPanelPure);
  *
  * @return {boolean} Whether there is support.
  */
-exports.BorderPanel = BorderPanel;
 function hasBorderSupport(blockName, feature = 'any') {
   if (_element.Platform.OS !== 'web') {
     return false;
@@ -350,6 +345,7 @@ function useBlockProps({
 }
 var _default = {
   useBlockProps,
+  addSaveProps,
   attributeKeys: ['borderColor', 'style'],
   hasSupport(name) {
     return hasBorderSupport(name, 'color');
@@ -357,5 +353,4 @@ var _default = {
 };
 exports.default = _default;
 (0, _hooks.addFilter)('blocks.registerBlockType', 'core/border/addAttributes', addAttributes);
-(0, _hooks.addFilter)('blocks.getSaveContent.extraProps', 'core/border/addSaveProps', addSaveProps);
 //# sourceMappingURL=border.js.map

package/build/hooks/border.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_blocks","_components","_compose","_element","_hooks","_data","_colors","_inspectorControls","_useMultipleOriginColorsAndGradients","_utils","_globalStyles","_store","BORDER_SUPPORT_KEY","exports","getColorByProperty","colors","property","value","matchedColor","some","origin","color","getMultiOriginColor","namedColor","customColor","colorObject","undefined","getColorSlugFromVariable","exec","styleToAttributes","style","hasSplitBorders","border","borderColor","borderColorValue","borderColorSlug","startsWith","substring","length","updatedStyle","cleanEmptyObject","attributesToStyle","attributes","BordersInspectorControl","children","resetAllFilter","attributesResetAllFilter","useCallback","existingStyle","_react","createElement","default","group","BorderPanelPure","clientId","name","setAttributes","settings","isEnabled","useHasBorderPanel","selector","select","blockEditorStore","getBlockAttributes","useSelect","useMemo","onChange","newStyle","defaultControls","getBlockSupport","BorderPanel","as","panelId","pure","hasBorderSupport","blockName","feature","Platform","OS","support","radius","width","removeBorderAttribute","attribute","addAttributes","type","addSaveProps","props","blockNameOrType","shouldSkipSerialization","borderClasses","getBorderClasses","newClassName","classnames","className","borderColorClass","getColorClassName","useBlockProps","useMultipleOriginColorsAndGradients","borderTopColor","top","borderRightColor","right","borderBottomColor","bottom","borderLeftColor","left","extraStyles","_default","attributeKeys","hasSupport","addFilter"],"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 { pure } from '@wordpress/compose';\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\nfunction BorderPanelPure( { 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// We don't want block controls to re-render when typing inside a block. `pure`\n// will prevent re-renders unless props change, so only pass the needed props\n// and not the whole attributes object.\nexport const BorderPanel = pure( BorderPanelPure );\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\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\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/border/addSaveProps',\n\taddSaveProps\n);\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_blocks","_components","_element","_hooks","_data","_colors","_inspectorControls","_useMultipleOriginColorsAndGradients","_utils","_globalStyles","_store","BORDER_SUPPORT_KEY","exports","getColorByProperty","colors","property","value","matchedColor","some","origin","color","getMultiOriginColor","namedColor","customColor","colorObject","undefined","getColorSlugFromVariable","exec","styleToAttributes","style","hasSplitBorders","border","borderColor","borderColorValue","borderColorSlug","startsWith","substring","length","updatedStyle","cleanEmptyObject","attributesToStyle","attributes","BordersInspectorControl","children","resetAllFilter","attributesResetAllFilter","useCallback","existingStyle","_react","createElement","default","group","BorderPanel","clientId","name","setAttributes","settings","isEnabled","useHasBorderPanel","selector","select","blockEditorStore","getBlockAttributes","useSelect","useMemo","onChange","newStyle","defaultControls","getBlockSupport","as","panelId","hasBorderSupport","blockName","feature","Platform","OS","support","radius","width","removeBorderAttribute","attribute","addAttributes","type","addSaveProps","props","blockNameOrType","shouldSkipSerialization","borderClasses","getBorderClasses","newClassName","classnames","className","borderColorClass","getColorClassName","useBlockProps","useMultipleOriginColorsAndGradients","borderTopColor","top","borderRightColor","right","borderBottomColor","bottom","borderLeftColor","left","extraStyles","_default","attributeKeys","hasSupport","addFilter"],"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/hooks/color.js

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColorEdit = exports.COLOR_SUPPORT_KEY = void 0;
+exports.COLOR_SUPPORT_KEY = void 0;
+exports.ColorEdit = ColorEdit;
 exports.addSaveProps = addSaveProps;
 exports.addTransforms = addTransforms;
 exports.default = void 0;
@@ -13,11 +14,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("@wordpress/hooks");
 var _blocks = require("@wordpress/blocks");
 var _element = require("@wordpress/element");
-var _compose = require("@wordpress/compose");
 var _data = require("@wordpress/data");
 var _colors = require("../components/colors");
 var _gradients = require("../components/gradients");
 var _utils = require("./utils");
+var _background = require("./background");
 var _useSettings = require("../components/use-settings");
 var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));
 var _colorPanel = _interopRequireWildcard(require("../components/global-styles/color-panel"));
@@ -194,7 +195,7 @@ function ColorInspectorControl({
     resetAllFilter: attributesResetAllFilter
   }, children);
 }
-function ColorEditPure({
+function ColorEdit({
   clientId,
   name,
   setAttributes,
@@ -253,12 +254,6 @@ function ColorEditPure({
     clientId: clientId
   }));
 }
-
-// We don't want block controls to re-render when typing inside a block. `pure`
-// will prevent re-renders unless props change, so only pass the needed props
-// and not the whole attributes object.
-const ColorEdit = (0, _compose.pure)(ColorEditPure);
-exports.ColorEdit = ColorEdit;
 function useBlockProps({
   name,
   backgroundColor,
@@ -278,7 +273,7 @@ function useBlockProps({
   if (backgroundColor && !(0, _utils.shouldSkipSerialization)(name, COLOR_SUPPORT_KEY, 'background')) {
     extraStyles.backgroundColor = (0, _colors.getColorObjectByAttributeValues)(colors, backgroundColor)?.color;
   }
-  return addSaveProps({
+  const saveProps = addSaveProps({
     style: extraStyles
   }, name, {
     textColor,
@@ -286,9 +281,17 @@ function useBlockProps({
     gradient,
     style
   });
+  const hasBackgroundValue = backgroundColor || style?.color?.background || gradient || style?.color?.gradient;
+  return {
+    ...saveProps,
+    className: (0, _classnames.default)(saveProps.className,
+    // Add background image classes in the editor, if not already handled by background color values.
+    !hasBackgroundValue && (0, _background.getBackgroundImageClasses)(style))
+  };
 }
 var _default = {
   useBlockProps,
+  addSaveProps,
   attributeKeys: ['backgroundColor', 'textColor', 'gradient', 'style'],
   hasSupport: hasColorSupport
 };
@@ -310,6 +313,5 @@ function addTransforms(result, source, index, results) {
   return (0, _utils.transformStyles)(activeSupports, MIGRATION_PATHS, result, source, index, results);
 }
 (0, _hooks.addFilter)('blocks.registerBlockType', 'core/color/addAttribute', addAttributes);
-(0, _hooks.addFilter)('blocks.getSaveContent.extraProps', 'core/color/addSaveProps', addSaveProps);
 (0, _hooks.addFilter)('blocks.switchToBlockType.transformedBlock', 'core/color/addTransforms', addTransforms);
 //# sourceMappingURL=color.js.map