@wordpress/block-editor 12.26.0 → 13.0.1

package/build-module/components/colors/with-colors.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -12,6 +11,10 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { getColorClassName, getColorObjectByColorValue, getColorObjectByAttributeValues, getMostReadableColor } from './utils';
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  kebabCase
+} = unlock(componentsPrivateApis);
 
 /**
  * Capitalizes the first letter in a string.
@@ -30,7 +33,7 @@ const upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.
  *
  * @return {Function} The higher order component.
  */
-const withCustomColorPalette = colorsArray => createHigherOrderComponent(WrappedComponent => props => createElement(WrappedComponent, {
+const withCustomColorPalette = colorsArray => createHigherOrderComponent(WrappedComponent => props => /*#__PURE__*/_jsx(WrappedComponent, {
   ...props,
   colors: colorsArray
 }), 'withCustomColorPalette');
@@ -44,7 +47,7 @@ const withCustomColorPalette = colorsArray => createHigherOrderComponent(Wrapped
 const withEditorColorPalette = () => createHigherOrderComponent(WrappedComponent => props => {
   const [userPalette, themePalette, defaultPalette] = useSettings('color.palette.custom', 'color.palette.theme', 'color.palette.default');
   const allColors = useMemo(() => [...(userPalette || []), ...(themePalette || []), ...(defaultPalette || [])], [userPalette, themePalette, defaultPalette]);
-  return createElement(WrappedComponent, {
+  return /*#__PURE__*/_jsx(WrappedComponent, {
     ...props,
     colors: allColors
   });
@@ -60,9 +63,6 @@ const withEditorColorPalette = () => createHigherOrderComponent(WrappedComponent
  * @return {Component} The component that can be used as a HOC.
  */
 function createColorHOC(colorTypes, withColorPalette) {
-  const {
-    kebabCase
-  } = unlock(componentsPrivateApis);
   const colorMap = colorTypes.reduce((colorObject, colorType) => {
     return {
       ...colorObject,
@@ -129,7 +129,7 @@ function createColorHOC(colorTypes, withColorPalette) {
         }, {});
       }
       render() {
-        return createElement(WrappedComponent, {
+        return /*#__PURE__*/_jsx(WrappedComponent, {
           ...this.props,
           colors: undefined,
           ...this.state,

package/build-module/components/colors/with-colors.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","Component","compose","createHigherOrderComponent","privateApis","componentsPrivateApis","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","getMostReadableColor","useSettings","unlock","upperFirst","firstLetter","rest","toUpperCase","join","withCustomColorPalette","colorsArray","WrappedComponent","props","createElement","colors","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","kebabCase","colorMap","reduce","colorObject","colorType","constructor","setters","createSetters","colorUtils","bind","state","colorValue","Object","keys","settersAccumulator","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","entries","newState","colorContext","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => (\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />\n\t\t),\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\tconst [ userPalette, themePalette, defaultPalette ] = useSettings(\n\t\t\t\t'color.palette.custom',\n\t\t\t\t'color.palette.theme',\n\t\t\t\t'color.palette.default'\n\t\t\t);\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {Component} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst colorMap = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\n\t\t};\n\t}, {} );\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn Object.keys( colorMap ).reduce(\n\t\t\t\t\t\t( settersAccumulator, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn Object.entries( colorMap ).reduce(\n\t\t\t\t\t\t( newState, [ colorAttributeName, colorContext ] ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\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\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\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\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useMemo","Component","compose","createHigherOrderComponent","privateApis","componentsPrivateApis","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","getMostReadableColor","useSettings","unlock","jsx","_jsx","kebabCase","upperFirst","firstLetter","rest","toUpperCase","join","withCustomColorPalette","colorsArray","WrappedComponent","props","colors","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","colorMap","reduce","colorObject","colorType","constructor","setters","createSetters","colorUtils","bind","state","colorValue","Object","keys","settersAccumulator","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","entries","newState","colorContext","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { kebabCase } = unlock( componentsPrivateApis );\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => (\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />\n\t\t),\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\tconst [ userPalette, themePalette, defaultPalette ] = useSettings(\n\t\t\t\t'color.palette.custom',\n\t\t\t\t'color.palette.theme',\n\t\t\t\t'color.palette.default'\n\t\t\t);\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {Component} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\n\t\t};\n\t}, {} );\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn Object.keys( colorMap ).reduce(\n\t\t\t\t\t\t( settersAccumulator, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn Object.entries( colorMap ).reduce(\n\t\t\t\t\t\t( newState, [ colorAttributeName, colorContext ] ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\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\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\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\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/colors-gradients/control.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -15,6 +14,11 @@ import { BaseControl, __experimentalVStack as VStack, ColorPalette, GradientPick
  */
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  Tabs
+} = unlock(componentsPrivateApis);
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
 const TAB_IDS = {
   color: 'color',
@@ -43,7 +47,7 @@ function ColorGradientControlInner({
     return null;
   }
   const tabPanels = {
-    [TAB_IDS.color]: createElement(ColorPalette, {
+    [TAB_IDS.color]: /*#__PURE__*/_jsx(ColorPalette, {
       value: colorValue,
       onChange: canChooseAGradient ? newColor => {
         onColorChange(newColor);
@@ -56,7 +60,7 @@ function ColorGradientControlInner({
       enableAlpha: enableAlpha,
       headingLevel: headingLevel
     }),
-    [TAB_IDS.gradient]: createElement(GradientPicker, {
+    [TAB_IDS.gradient]: /*#__PURE__*/_jsx(GradientPicker, {
       value: gradientValue,
       onChange: canChooseAColor ? newGradient => {
         onGradientChange(newGradient);
@@ -69,44 +73,55 @@ function ColorGradientControlInner({
       headingLevel: headingLevel
     })
   };
-  const renderPanelType = type => createElement("div", {
-    className: "block-editor-color-gradient-control__panel"
-  }, tabPanels[type]);
-
-  // Unlocking `Tabs` too early causes the `unlock` method to receive an empty
-  // object, due to circular dependencies.
-  // See https://github.com/WordPress/gutenberg/issues/52692
-  const {
-    Tabs
-  } = unlock(componentsPrivateApis);
-  return createElement(BaseControl, {
+  const renderPanelType = type => /*#__PURE__*/_jsx("div", {
+    className: "block-editor-color-gradient-control__panel",
+    children: tabPanels[type]
+  });
+  return /*#__PURE__*/_jsx(BaseControl, {
     __nextHasNoMarginBottom: true,
-    className: clsx('block-editor-color-gradient-control', className)
-  }, createElement("fieldset", {
-    className: "block-editor-color-gradient-control__fieldset"
-  }, createElement(VStack, {
-    spacing: 1
-  }, showTitle && createElement("legend", null, createElement("div", {
-    className: "block-editor-color-gradient-control__color-indicator"
-  }, createElement(BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && createElement("div", null, createElement(Tabs, {
-    defaultTabId: gradientValue ? TAB_IDS.gradient : !!canChooseAColor && TAB_IDS.color
-  }, createElement(Tabs.TabList, null, createElement(Tabs.Tab, {
-    tabId: TAB_IDS.color
-  }, __('Color')), createElement(Tabs.Tab, {
-    tabId: TAB_IDS.gradient
-  }, __('Gradient'))), createElement(Tabs.TabPanel, {
-    tabId: TAB_IDS.color,
-    className: 'block-editor-color-gradient-control__panel',
-    focusable: false
-  }, tabPanels.color), createElement(Tabs.TabPanel, {
-    tabId: TAB_IDS.gradient,
-    className: 'block-editor-color-gradient-control__panel',
-    focusable: false
-  }, tabPanels.gradient))), !canChooseAGradient && renderPanelType(TAB_IDS.color), !canChooseAColor && renderPanelType(TAB_IDS.gradient))));
+    className: clsx('block-editor-color-gradient-control', className),
+    children: /*#__PURE__*/_jsx("fieldset", {
+      className: "block-editor-color-gradient-control__fieldset",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        spacing: 1,
+        children: [showTitle && /*#__PURE__*/_jsx("legend", {
+          children: /*#__PURE__*/_jsx("div", {
+            className: "block-editor-color-gradient-control__color-indicator",
+            children: /*#__PURE__*/_jsx(BaseControl.VisualLabel, {
+              children: label
+            })
+          })
+        }), canChooseAColor && canChooseAGradient && /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsxs(Tabs, {
+            defaultTabId: gradientValue ? TAB_IDS.gradient : !!canChooseAColor && TAB_IDS.color,
+            children: [/*#__PURE__*/_jsxs(Tabs.TabList, {
+              children: [/*#__PURE__*/_jsx(Tabs.Tab, {
+                tabId: TAB_IDS.color,
+                children: __('Color')
+              }), /*#__PURE__*/_jsx(Tabs.Tab, {
+                tabId: TAB_IDS.gradient,
+                children: __('Gradient')
+              })]
+            }), /*#__PURE__*/_jsx(Tabs.TabPanel, {
+              tabId: TAB_IDS.color,
+              className: "block-editor-color-gradient-control__panel",
+              focusable: false,
+              children: tabPanels.color
+            }), /*#__PURE__*/_jsx(Tabs.TabPanel, {
+              tabId: TAB_IDS.gradient,
+              className: "block-editor-color-gradient-control__panel",
+              focusable: false,
+              children: tabPanels.gradient
+            })]
+          })
+        }), !canChooseAGradient && renderPanelType(TAB_IDS.color), !canChooseAColor && renderPanelType(TAB_IDS.gradient)]
+      })
+    })
+  });
 }
 function ColorGradientControlSelect(props) {
   const [colors, gradients, customColors, customGradients] = useSettings('color.palette', 'color.gradients', 'color.custom', 'color.customGradient');
-  return createElement(ColorGradientControlInner, {
+  return /*#__PURE__*/_jsx(ColorGradientControlInner, {
     colors: colors,
     gradients: gradients,
     disableCustomColors: !customColors,
@@ -116,11 +131,11 @@ function ColorGradientControlSelect(props) {
 }
 function ColorGradientControl(props) {
   if (colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
-    return createElement(ColorGradientControlInner, {
+    return /*#__PURE__*/_jsx(ColorGradientControlInner, {
       ...props
     });
   }
-  return createElement(ColorGradientControlSelect, {
+  return /*#__PURE__*/_jsx(ColorGradientControlSelect, {
     ...props
   });
 }

package/build-module/components/colors-gradients/control.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","BaseControl","__experimentalVStack","VStack","ColorPalette","GradientPicker","privateApis","componentsPrivateApis","useSettings","unlock","colorsAndGradientKeys","TAB_IDS","color","gradient","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","length","canChooseAGradient","tabPanels","createElement","value","onChange","newColor","newGradient","renderPanelType","type","Tabs","__nextHasNoMarginBottom","spacing","VisualLabel","defaultTabId","TabList","Tab","tabId","TabPanel","focusable","ColorGradientControlSelect","props","customColors","customGradients","ColorGradientControl","every","key","hasOwnProperty"],"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_IDS = { color: 'color', gradient: 'gradient' };\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_IDS.gradient ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\t// Unlocking `Tabs` too early causes the `unlock` method to receive an empty\n\t// object, due to circular dependencies.\n\t// See https://github.com/WordPress/gutenberg/issues/52692\n\tconst { Tabs } = unlock( componentsPrivateApis );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t\t? TAB_IDS.gradient\n\t\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_IDS.color\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.color }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Color' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.gradient }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Gradient' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.color }\n\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t'block-editor-color-gradient-control__panel'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.color }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.gradient }\n\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t'block-editor-color-gradient-control__panel'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.gradient }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }\n\t\t\t\t\t{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","__","BaseControl","__experimentalVStack","VStack","ColorPalette","GradientPicker","privateApis","componentsPrivateApis","useSettings","unlock","jsx","_jsx","jsxs","_jsxs","Tabs","colorsAndGradientKeys","TAB_IDS","color","gradient","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","length","canChooseAGradient","tabPanels","value","onChange","newColor","newGradient","renderPanelType","type","children","__nextHasNoMarginBottom","spacing","VisualLabel","defaultTabId","TabList","Tab","tabId","TabPanel","focusable","ColorGradientControlSelect","props","customColors","customGradients","ColorGradientControl","every","key","hasOwnProperty"],"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_IDS = { color: 'color', gradient: 'gradient' };\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_IDS.gradient ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t\t? TAB_IDS.gradient\n\t\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_IDS.color\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.color }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Color' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.gradient }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Gradient' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.color }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.color }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.gradient }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.gradient }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }\n\t\t\t\t\t{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SACCC,WAAW,EACXC,oBAAoB,IAAIC,MAAM,EAC9BC,YAAY,EACZC,cAAc,EACdC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,WAAW,QAAQ,iBAAiB;AAC7C,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE3C,MAAM;EAAEC;AAAK,CAAC,GAAGL,MAAM,CAAEF,qBAAsB,CAAC;AAChD,MAAMQ,qBAAqB,GAAG,CAC7B,QAAQ,EACR,qBAAqB,EACrB,WAAW,EACX,wBAAwB,CACxB;AAED,MAAMC,OAAO,GAAG;EAAEC,KAAK,EAAE,OAAO;EAAEC,QAAQ,EAAE;AAAW,CAAC;AAExD,SAASC,yBAAyBA,CAAE;EACnCC,MAAM;EACNC,SAAS;EACTC,mBAAmB;EACnBC,sBAAsB;EACtBC,iCAAiC;EACjCC,SAAS;EACTC,KAAK;EACLC,aAAa;EACbC,gBAAgB;EAChBC,UAAU;EACVC,aAAa;EACbC,SAAS;EACTC,SAAS,GAAG,IAAI;EAChBC,WAAW;EACXC;AACD,CAAC,EAAG;EACH,MAAMC,eAAe,GACpBR,aAAa,KACTP,MAAM,IAAIA,MAAM,CAACgB,MAAM,GAAG,CAAC,IAAM,CAAEd,mBAAmB,CAAE;EAC7D,MAAMe,kBAAkB,GACvBT,gBAAgB,KACZP,SAAS,IAAIA,SAAS,CAACe,MAAM,GAAG,CAAC,IAAM,CAAEb,sBAAsB,CAAE;EAEtE,IAAK,CAAEY,eAAe,IAAI,CAAEE,kBAAkB,EAAG;IAChD,OAAO,IAAI;EACZ;EAEA,MAAMC,SAAS,GAAG;IACjB,CAAEtB,OAAO,CAACC,KAAK,gBACdN,IAAA,CAACP,YAAY;MACZmC,KAAK,EAAGV,UAAY;MACpBW,QAAQ,EACPH,kBAAkB,GACbI,QAAQ,IAAM;QAChBd,aAAa,CAAEc,QAAS,CAAC;QACzBb,gBAAgB,CAAC,CAAC;MAClB,CAAC,GACDD,aACH;MACMP,MAAM;MAAEE,mBAAmB;MAClCE,iCAAiC,EAChCA,iCACA;MACDO,SAAS,EAAGA,SAAW;MACvBE,WAAW,EAAGA,WAAa;MAC3BC,YAAY,EAAGA;IAAc,CAC7B,CACD;IACD,CAAElB,OAAO,CAACE,QAAQ,gBACjBP,IAAA,CAACN,cAAc;MACdkC,KAAK,EAAGT,aAAe;MACvBU,QAAQ,EACPL,eAAe,GACVO,WAAW,IAAM;QACnBd,gBAAgB,CAAEc,WAAY,CAAC;QAC/Bf,aAAa,CAAC,CAAC;MACf,CAAC,GACDC,gBACH;MACMP,SAAS;MAAEE,sBAAsB;MACxCC,iCAAiC,EAChCA,iCACA;MACDO,SAAS,EAAGA,SAAW;MACvBG,YAAY,EAAGA;IAAc,CAC7B;EAEH,CAAC;EAED,MAAMS,eAAe,GAAKC,IAAI,iBAC7BjC,IAAA;IAAKc,SAAS,EAAC,4CAA4C;IAAAoB,QAAA,EACxDP,SAAS,CAAEM,IAAI;EAAE,CACf,CACL;EAED,oBACCjC,IAAA,CAACV,WAAW;IACX6C,uBAAuB;IACvBrB,SAAS,EAAG1B,IAAI,CACf,qCAAqC,EACrC0B,SACD,CAAG;IAAAoB,QAAA,eAEHlC,IAAA;MAAUc,SAAS,EAAC,+CAA+C;MAAAoB,QAAA,eAClEhC,KAAA,CAACV,MAAM;QAAC4C,OAAO,EAAG,CAAG;QAAAF,QAAA,GAClBb,SAAS,iBACVrB,IAAA;UAAAkC,QAAA,eACClC,IAAA;YAAKc,SAAS,EAAC,sDAAsD;YAAAoB,QAAA,eACpElC,IAAA,CAACV,WAAW,CAAC+C,WAAW;cAAAH,QAAA,EACrBnB;YAAK,CACiB;UAAC,CACtB;QAAC,CACC,CACR,EACCS,eAAe,IAAIE,kBAAkB,iBACtC1B,IAAA;UAAAkC,QAAA,eACChC,KAAA,CAACC,IAAI;YACJmC,YAAY,EACXnB,aAAa,GACVd,OAAO,CAACE,QAAQ,GAChB,CAAC,CAAEiB,eAAe,IAAInB,OAAO,CAACC,KACjC;YAAA4B,QAAA,gBAEDhC,KAAA,CAACC,IAAI,CAACoC,OAAO;cAAAL,QAAA,gBACZlC,IAAA,CAACG,IAAI,CAACqC,GAAG;gBAACC,KAAK,EAAGpC,OAAO,CAACC,KAAO;gBAAA4B,QAAA,EAC9B7C,EAAE,CAAE,OAAQ;cAAC,CACN,CAAC,eACXW,IAAA,CAACG,IAAI,CAACqC,GAAG;gBAACC,KAAK,EAAGpC,OAAO,CAACE,QAAU;gBAAA2B,QAAA,EACjC7C,EAAE,CAAE,UAAW;cAAC,CACT,CAAC;YAAA,CACE,CAAC,eACfW,IAAA,CAACG,IAAI,CAACuC,QAAQ;cACbD,KAAK,EAAGpC,OAAO,CAACC,KAAO;cACvBQ,SAAS,EAAC,4CAA4C;cACtD6B,SAAS,EAAG,KAAO;cAAAT,QAAA,EAEjBP,SAAS,CAACrB;YAAK,CACH,CAAC,eAChBN,IAAA,CAACG,IAAI,CAACuC,QAAQ;cACbD,KAAK,EAAGpC,OAAO,CAACE,QAAU;cAC1BO,SAAS,EAAC,4CAA4C;cACtD6B,SAAS,EAAG,KAAO;cAAAT,QAAA,EAEjBP,SAAS,CAACpB;YAAQ,CACN,CAAC;UAAA,CACX;QAAC,CACH,CACL,EAEC,CAAEmB,kBAAkB,IAAIM,eAAe,CAAE3B,OAAO,CAACC,KAAM,CAAC,EACxD,CAAEkB,eAAe,IAAIQ,eAAe,CAAE3B,OAAO,CAACE,QAAS,CAAC;MAAA,CACnD;IAAC,CACA;EAAC,CACC,CAAC;AAEhB;AAEA,SAASqC,0BAA0BA,CAAEC,KAAK,EAAG;EAC5C,MAAM,CAAEpC,MAAM,EAAEC,SAAS,EAAEoC,YAAY,EAAEC,eAAe,CAAE,GAAGlD,WAAW,CACvE,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,sBACD,CAAC;EAED,oBACCG,IAAA,CAACQ,yBAAyB;IACzBC,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAGA,SAAW;IACvBC,mBAAmB,EAAG,CAAEmC,YAAc;IACtClC,sBAAsB,EAAG,CAAEmC,eAAiB;IAAA,GACvCF;EAAK,CACV,CAAC;AAEJ;AAEA,SAASG,oBAAoBA,CAAEH,KAAK,EAAG;EACtC,IACCzC,qBAAqB,CAAC6C,KAAK,CAAIC,GAAG,IAAML,KAAK,CAACM,cAAc,CAAED,GAAI,CAAE,CAAC,EACpE;IACD,oBAAOlD,IAAA,CAACQ,yBAAyB;MAAA,GAAMqC;IAAK,CAAI,CAAC;EAClD;EACA,oBAAO7C,IAAA,CAAC4C,0BAA0B;IAAA,GAAMC;EAAK,CAAI,CAAC;AACnD;AAEA,eAAeG,oBAAoB","ignoreList":[]}

package/build-module/components/colors-gradients/dropdown.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -16,6 +15,9 @@ import ColorGradientControl from './control';
 
 // When the `ColorGradientSettingsDropdown` controls are being rendered to a
 // `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const WithToolsPanelItem = ({
   setting,
   children,
@@ -29,7 +31,7 @@ const WithToolsPanelItem = ({
       setting.onGradientChange();
     }
   };
-  return createElement(ToolsPanelItem, {
+  return /*#__PURE__*/_jsx(ToolsPanelItem, {
     hasValue: () => {
       return !!setting.colorValue || !!setting.gradientValue;
     },
@@ -42,21 +44,24 @@ const WithToolsPanelItem = ({
     // Pass resetAllFilter if supplied due to rendering via SlotFill
     // into parent ToolsPanel.
     ,
-    resetAllFilter: setting.resetAllFilter
-  }, children);
+    resetAllFilter: setting.resetAllFilter,
+    children: children
+  });
 };
 const LabeledColorIndicator = ({
   colorValue,
   label
-}) => createElement(HStack, {
-  justify: "flex-start"
-}, createElement(ColorIndicator, {
-  className: "block-editor-panel-color-gradient-settings__color-indicator",
-  colorValue: colorValue
-}), createElement(FlexItem, {
-  className: "block-editor-panel-color-gradient-settings__color-name",
-  title: label
-}, label));
+}) => /*#__PURE__*/_jsxs(HStack, {
+  justify: "flex-start",
+  children: [/*#__PURE__*/_jsx(ColorIndicator, {
+    className: "block-editor-panel-color-gradient-settings__color-indicator",
+    colorValue: colorValue
+  }), /*#__PURE__*/_jsx(FlexItem, {
+    className: "block-editor-panel-color-gradient-settings__color-name",
+    title: label,
+    children: label
+  })]
+});
 
 // Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
 // or as a `Button` if it isn't e.g. the controls are being rendered in
@@ -76,12 +81,13 @@ const renderToggle = settings => ({
     }),
     'aria-expanded': isOpen
   };
-  return createElement(Button, {
-    ...toggleProps
-  }, createElement(LabeledColorIndicator, {
-    colorValue: colorValue,
-    label: label
-  }));
+  return /*#__PURE__*/_jsx(Button, {
+    ...toggleProps,
+    children: /*#__PURE__*/_jsx(LabeledColorIndicator, {
+      colorValue: colorValue,
+      label: label
+    })
+  });
 };
 
 // Renders a collection of color controls as dropdowns. Depending upon the
@@ -109,47 +115,52 @@ export default function ColorGradientSettingsDropdown({
       shift: true
     };
   }
-  return createElement(Fragment, null, settings.map((setting, index) => {
-    var _setting$gradientValu;
-    const controlProps = {
-      clearable: false,
-      colorValue: setting.colorValue,
-      colors,
-      disableCustomColors,
-      disableCustomGradients,
-      enableAlpha,
-      gradientValue: setting.gradientValue,
-      gradients,
-      label: setting.label,
-      onColorChange: setting.onColorChange,
-      onGradientChange: setting.onGradientChange,
-      showTitle: false,
-      __experimentalIsRenderedInSidebar,
-      ...setting
-    };
-    const toggleSettings = {
-      colorValue: (_setting$gradientValu = setting.gradientValue) !== null && _setting$gradientValu !== void 0 ? _setting$gradientValu : setting.colorValue,
-      label: setting.label
-    };
-    return setting &&
-    // If not in an `ItemGroup` wrap the dropdown in a
-    // `ToolsPanelItem`
-    createElement(WithToolsPanelItem, {
-      key: index,
-      setting: setting,
-      ...props
-    }, createElement(Dropdown, {
-      popoverProps: popoverProps,
-      className: "block-editor-tools-panel-color-gradient-settings__dropdown",
-      renderToggle: renderToggle(toggleSettings),
-      renderContent: () => createElement(DropdownContentWrapper, {
-        paddingSize: "none"
-      }, createElement("div", {
-        className: "block-editor-panel-color-gradient-settings__dropdown-content"
-      }, createElement(ColorGradientControl, {
-        ...controlProps
-      })))
-    }));
-  }));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: settings.map((setting, index) => {
+      var _setting$gradientValu;
+      const controlProps = {
+        clearable: false,
+        colorValue: setting.colorValue,
+        colors,
+        disableCustomColors,
+        disableCustomGradients,
+        enableAlpha,
+        gradientValue: setting.gradientValue,
+        gradients,
+        label: setting.label,
+        onColorChange: setting.onColorChange,
+        onGradientChange: setting.onGradientChange,
+        showTitle: false,
+        __experimentalIsRenderedInSidebar,
+        ...setting
+      };
+      const toggleSettings = {
+        colorValue: (_setting$gradientValu = setting.gradientValue) !== null && _setting$gradientValu !== void 0 ? _setting$gradientValu : setting.colorValue,
+        label: setting.label
+      };
+      return setting &&
+      /*#__PURE__*/
+      // If not in an `ItemGroup` wrap the dropdown in a
+      // `ToolsPanelItem`
+      _jsx(WithToolsPanelItem, {
+        setting: setting,
+        ...props,
+        children: /*#__PURE__*/_jsx(Dropdown, {
+          popoverProps: popoverProps,
+          className: "block-editor-tools-panel-color-gradient-settings__dropdown",
+          renderToggle: renderToggle(toggleSettings),
+          renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {
+            paddingSize: "none",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "block-editor-panel-color-gradient-settings__dropdown-content",
+              children: /*#__PURE__*/_jsx(ColorGradientControl, {
+                ...controlProps
+              })
+            })
+          })
+        })
+      }, index);
+    })
+  });
 }
 //# sourceMappingURL=dropdown.js.map

package/build-module/components/colors-gradients/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","Button","ColorIndicator","Dropdown","FlexItem","__experimentalDropdownContentWrapper","DropdownContentWrapper","__experimentalHStack","HStack","__experimentalToolsPanelItem","ToolsPanelItem","ColorGradientControl","WithToolsPanelItem","setting","children","panelId","props","clearValue","colorValue","onColorChange","gradientValue","onGradientChange","createElement","hasValue","label","onDeselect","isShownByDefault","undefined","className","resetAllFilter","LabeledColorIndicator","justify","title","renderToggle","settings","onToggle","isOpen","toggleProps","onClick","ColorGradientSettingsDropdown","colors","disableCustomColors","disableCustomGradients","enableAlpha","gradients","__experimentalIsRenderedInSidebar","popoverProps","placement","offset","shift","Fragment","map","index","_setting$gradientValu","controlProps","clearable","showTitle","toggleSettings","key","renderContent","paddingSize"],"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\n\n// When the `ColorGradientSettingsDropdown` controls are being rendered to a\n// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.\nconst WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {\n\tconst clearValue = () => {\n\t\tif ( setting.colorValue ) {\n\t\t\tsetting.onColorChange();\n\t\t} else if ( setting.gradientValue ) {\n\t\t\tsetting.onGradientChange();\n\t\t}\n\t};\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => {\n\t\t\t\treturn !! setting.colorValue || !! setting.gradientValue;\n\t\t\t} }\n\t\t\tlabel={ setting.label }\n\t\t\tonDeselect={ clearValue }\n\t\t\tisShownByDefault={\n\t\t\t\tsetting.isShownByDefault !== undefined\n\t\t\t\t\t? setting.isShownByDefault\n\t\t\t\t\t: true\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t\tpanelId={ panelId }\n\t\t\t// Pass resetAllFilter if supplied due to rendering via SlotFill\n\t\t\t// into parent ToolsPanel.\n\t\t\tresetAllFilter={ setting.resetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanelItem>\n\t);\n};\n\nconst LabeledColorIndicator = ( { colorValue, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ColorIndicator\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\tcolorValue={ colorValue }\n\t\t/>\n\t\t<FlexItem\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-name\"\n\t\t\ttitle={ label }\n\t\t>\n\t\t\t{ label }\n\t\t</FlexItem>\n\t</HStack>\n);\n\n// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`\n// or as a `Button` if it isn't e.g. the controls are being rendered in\n// a `ToolsPanel`.\nconst renderToggle =\n\t( settings ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst { colorValue, label } = settings;\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: clsx(\n\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t{ 'is-open': isOpen }\n\t\t\t),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t};\n\n// Renders a collection of color controls as dropdowns. Depending upon the\n// context in which these dropdowns are being rendered, they may be wrapped\n// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,\n// the may be individually wrapped in a `ToolsPanelItem` with the toggle as\n// a regular `Button`.\n//\n// For more context see: https://github.com/WordPress/gutenberg/pull/40084\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tenableAlpha,\n\tgradients,\n\tsettings,\n\t__experimentalIsRenderedInSidebar,\n\t...props\n} ) {\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tpopoverProps = {\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\tshift: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ settings.map( ( setting, index ) => {\n\t\t\t\tconst controlProps = {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tgradients,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t\tshowTitle: false,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t...setting,\n\t\t\t\t};\n\t\t\t\tconst toggleSettings = {\n\t\t\t\t\tcolorValue: setting.gradientValue ?? setting.colorValue,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t// If not in an `ItemGroup` wrap the dropdown in a\n\t\t\t\t\t\t// `ToolsPanelItem`\n\t\t\t\t\t\t<WithToolsPanelItem\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tsetting={ setting }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\t\trenderToggle={ renderToggle( toggleSettings ) }\n\t\t\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</WithToolsPanelItem>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","Button","ColorIndicator","Dropdown","FlexItem","__experimentalDropdownContentWrapper","DropdownContentWrapper","__experimentalHStack","HStack","__experimentalToolsPanelItem","ToolsPanelItem","ColorGradientControl","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","WithToolsPanelItem","setting","children","panelId","props","clearValue","colorValue","onColorChange","gradientValue","onGradientChange","hasValue","label","onDeselect","isShownByDefault","undefined","className","resetAllFilter","LabeledColorIndicator","justify","title","renderToggle","settings","onToggle","isOpen","toggleProps","onClick","ColorGradientSettingsDropdown","colors","disableCustomColors","disableCustomGradients","enableAlpha","gradients","__experimentalIsRenderedInSidebar","popoverProps","placement","offset","shift","map","index","_setting$gradientValu","controlProps","clearable","showTitle","toggleSettings","renderContent","paddingSize"],"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\n\n// When the `ColorGradientSettingsDropdown` controls are being rendered to a\n// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.\nconst WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {\n\tconst clearValue = () => {\n\t\tif ( setting.colorValue ) {\n\t\t\tsetting.onColorChange();\n\t\t} else if ( setting.gradientValue ) {\n\t\t\tsetting.onGradientChange();\n\t\t}\n\t};\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => {\n\t\t\t\treturn !! setting.colorValue || !! setting.gradientValue;\n\t\t\t} }\n\t\t\tlabel={ setting.label }\n\t\t\tonDeselect={ clearValue }\n\t\t\tisShownByDefault={\n\t\t\t\tsetting.isShownByDefault !== undefined\n\t\t\t\t\t? setting.isShownByDefault\n\t\t\t\t\t: true\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t\tpanelId={ panelId }\n\t\t\t// Pass resetAllFilter if supplied due to rendering via SlotFill\n\t\t\t// into parent ToolsPanel.\n\t\t\tresetAllFilter={ setting.resetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanelItem>\n\t);\n};\n\nconst LabeledColorIndicator = ( { colorValue, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ColorIndicator\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\tcolorValue={ colorValue }\n\t\t/>\n\t\t<FlexItem\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-name\"\n\t\t\ttitle={ label }\n\t\t>\n\t\t\t{ label }\n\t\t</FlexItem>\n\t</HStack>\n);\n\n// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`\n// or as a `Button` if it isn't e.g. the controls are being rendered in\n// a `ToolsPanel`.\nconst renderToggle =\n\t( settings ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst { colorValue, label } = settings;\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: clsx(\n\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t{ 'is-open': isOpen }\n\t\t\t),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t};\n\n// Renders a collection of color controls as dropdowns. Depending upon the\n// context in which these dropdowns are being rendered, they may be wrapped\n// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,\n// the may be individually wrapped in a `ToolsPanelItem` with the toggle as\n// a regular `Button`.\n//\n// For more context see: https://github.com/WordPress/gutenberg/pull/40084\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tenableAlpha,\n\tgradients,\n\tsettings,\n\t__experimentalIsRenderedInSidebar,\n\t...props\n} ) {\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tpopoverProps = {\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\tshift: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ settings.map( ( setting, index ) => {\n\t\t\t\tconst controlProps = {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tcolors,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tgradients,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\n\t\t\t\t\tshowTitle: false,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t...setting,\n\t\t\t\t};\n\t\t\t\tconst toggleSettings = {\n\t\t\t\t\tcolorValue: setting.gradientValue ?? setting.colorValue,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t// If not in an `ItemGroup` wrap the dropdown in a\n\t\t\t\t\t\t// `ToolsPanelItem`\n\t\t\t\t\t\t<WithToolsPanelItem\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tsetting={ setting }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\t\trenderToggle={ renderToggle( toggleSettings ) }\n\t\t\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</DropdownContentWrapper>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</WithToolsPanelItem>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/colors-gradients/panel-color-gradient-settings.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -16,6 +15,9 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import ColorGradientSettingsDropdown from './dropdown';
 import useColorsAndGradientsPalettes from './use-multiple-origin-colors-and-gradients';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
 export const PanelColorGradientSettingsInner = ({
   className,
@@ -37,7 +39,7 @@ export const PanelColorGradientSettingsInner = ({
   if ((!colors || colors.length === 0) && (!gradients || gradients.length === 0) && disableCustomColors && disableCustomGradients && settings?.every(setting => (!setting.colors || setting.colors.length === 0) && (!setting.gradients || setting.gradients.length === 0) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
     return null;
   }
-  return createElement(ToolsPanel, {
+  return /*#__PURE__*/_jsxs(ToolsPanel, {
     className: clsx('block-editor-panel-color-gradient-settings', className),
     label: showTitle ? title : undefined,
     resetAll: () => {
@@ -58,34 +60,37 @@ export const PanelColorGradientSettingsInner = ({
     },
     panelId: panelId,
     __experimentalFirstVisibleItemClass: "first",
-    __experimentalLastVisibleItemClass: "last"
-  }, createElement(ColorGradientSettingsDropdown, {
-    settings: settings,
-    panelId: panelId,
-    colors,
-    gradients,
-    disableCustomColors,
-    disableCustomGradients,
-    __experimentalIsRenderedInSidebar,
-    enableAlpha
-  }), !!children && createElement(Fragment, null, createElement(Spacer, {
-    marginY: 4
-  }), " ", children));
+    __experimentalLastVisibleItemClass: "last",
+    children: [/*#__PURE__*/_jsx(ColorGradientSettingsDropdown, {
+      settings: settings,
+      panelId: panelId,
+      colors,
+      gradients,
+      disableCustomColors,
+      disableCustomGradients,
+      __experimentalIsRenderedInSidebar,
+      enableAlpha
+    }), !!children && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
+        marginY: 4
+      }), " ", children]
+    })]
+  });
 };
 const PanelColorGradientSettingsSelect = props => {
   const colorGradientSettings = useColorsAndGradientsPalettes();
-  return createElement(PanelColorGradientSettingsInner, {
+  return /*#__PURE__*/_jsx(PanelColorGradientSettingsInner, {
     ...colorGradientSettings,
     ...props
   });
 };
 const PanelColorGradientSettings = props => {
   if (colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
-    return createElement(PanelColorGradientSettingsInner, {
+    return /*#__PURE__*/_jsx(PanelColorGradientSettingsInner, {
       ...props
     });
   }
-  return createElement(PanelColorGradientSettingsSelect, {
+  return /*#__PURE__*/_jsx(PanelColorGradientSettingsSelect, {
     ...props
   });
 };