npm - @wordpress/block-editor - Versions diffs - 16.1.0 → 16.2.0 - Mend

@wordpress/block-editor 16.1.0 → 16.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1906) hide show

package/build-module/components/color-style-selector/index.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/color-style-selector/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\tDropdown,\n\tToolbarGroup,\n\tSVG,\n\tPath,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport deprecated from '@wordpress/deprecated';\n\nconst ColorSelectorSVGIcon = () => (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n\t\t<Path d=\"M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z\" />\n\t</SVG>\n);\n\n/**\n * Color Selector Icon component.\n *\n * @param {Object} props           Component properties.\n * @param {Object} props.style     Style object.\n * @param {string} props.className Class name for component.\n *\n * @return {*} React Icon component.\n */\nconst ColorSelectorIcon = ( { style, className } ) => {\n\treturn (\n\t\t<div className=\"block-library-colors-selector__icon-container\">\n\t\t\t<div\n\t\t\t\tclassName={ `${ className } block-library-colors-selector__state-selection` }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t<ColorSelectorSVGIcon />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\n/**\n * Renders the Colors Selector Toolbar with the icon button.\n *\n * @param {Object} props                 Component properties.\n * @param {Object} props.TextColor       Text color component that wraps icon.\n * @param {Object} props.BackgroundColor Background color component that wraps icon.\n *\n * @return {*} React toggle button component.\n */\nconst renderToggleComponent = ( { TextColor, BackgroundColor } ) =>\n\tfunction ToggleComponent( { onToggle, isOpen } ) {\n\t\tconst openOnArrowDown = ( event ) => {\n\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonToggle();\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control block-library-colors-selector__toggle\"\n\t\t\t\t\tlabel={ __( 'Open Colors Selector' ) }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<BackgroundColor>\n\t\t\t\t\t\t\t<TextColor>\n\t\t\t\t\t\t\t\t<ColorSelectorIcon />\n\t\t\t\t\t\t\t</TextColor>\n\t\t\t\t\t\t</BackgroundColor>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t);\n\t};\n\nconst BlockColorsStyleSelector = ( { children, ...other } ) => {\n\tdeprecated( `wp.blockEditor.BlockColorsStyleSelector`, {\n\t\talternative: 'block supports API',\n\t\tsince: '6.1',\n\t\tversion: '6.3',\n\t} );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\tclassName=\"block-library-colors-selector\"\n\t\t\tcontentClassName=\"block-library-colors-selector__popover\"\n\t\t\trenderToggle={ renderToggleComponent( other ) }\n\t\t\trenderContent={ () => children }\n\t\t/>\n\t);\n};\n\nexport default BlockColorsStyleSelector;\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,OAAO,gBAAgB;AAIrB;AAFF,IAAM,uBAAuB,MAC5B,oBAAC,OAAI,OAAM,8BAA6B,SAAQ,aAC/C,8BAAC,QAAK,GAAE,+eAA8e,GACvf;AAYD,IAAM,oBAAoB,CAAE,EAAE,OAAO,UAAU,MAAO;AACrD,SACC,oBAAC,SAAI,WAAU,iDACd;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,GAAI,SAAU;AAAA,MAC1B;AAAA,MAEA,8BAAC,wBAAqB;AAAA;AAAA,EACvB,GACD;AAEF;AAWA,IAAM,wBAAwB,CAAE,EAAE,WAAW,gBAAgB,MAC5D,SAAS,gBAAiB,EAAE,UAAU,OAAO,GAAI;AAChD,QAAM,kBAAkB,CAAE,UAAW;AACpC,QAAK,CAAE,UAAU,MAAM,YAAY,MAAO;AACzC,YAAM,eAAe;AACrB,eAAS;AAAA,IACV;AAAA,EACD;AAEA,SACC,oBAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ,GAAI,sBAAuB;AAAA,MACnC,SAAU;AAAA,MACV,WAAY;AAAA,MACZ,MACC,oBAAC,mBACA,8BAAC,aACA,8BAAC,qBAAkB,GACpB,GACD;AAAA;AAAA,EAEF,GACD;AAEF;AAED,IAAM,2BAA2B,CAAE,EAAE,UAAU,GAAG,MAAM,MAAO;AAC9D,aAAY,2CAA2C;AAAA,IACtD,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AAEF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe,EAAE,WAAW,eAAe;AAAA,MAC3C,WAAU;AAAA,MACV,kBAAiB;AAAA,MACjB,cAAe,sBAAuB,KAAM;AAAA,MAC5C,eAAgB,MAAM;AAAA;AAAA,EACvB;AAEF;AAEA,IAAO,+BAAQ;",
+  "sourcesContent": ["import {\n\tToolbarButton,\n\tDropdown,\n\tToolbarGroup,\n\tSVG,\n\tPath,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport deprecated from '@wordpress/deprecated';\n\nconst ColorSelectorSVGIcon = () => (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n\t\t<Path d=\"M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z\" />\n\t</SVG>\n);\n\n/**\n * Color Selector Icon component.\n *\n * @param {Object} props           Component properties.\n * @param {Object} props.style     Style object.\n * @param {string} props.className Class name for component.\n *\n * @return {*} React Icon component.\n */\nconst ColorSelectorIcon = ( { style, className } ) => {\n\treturn (\n\t\t<div className=\"block-library-colors-selector__icon-container\">\n\t\t\t<div\n\t\t\t\tclassName={ `${ className } block-library-colors-selector__state-selection` }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t<ColorSelectorSVGIcon />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\n/**\n * Renders the Colors Selector Toolbar with the icon button.\n *\n * @param {Object} props                 Component properties.\n * @param {Object} props.TextColor       Text color component that wraps icon.\n * @param {Object} props.BackgroundColor Background color component that wraps icon.\n *\n * @return {*} React toggle button component.\n */\nconst renderToggleComponent = ( { TextColor, BackgroundColor } ) =>\n\tfunction ToggleComponent( { onToggle, isOpen } ) {\n\t\tconst openOnArrowDown = ( event ) => {\n\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonToggle();\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control block-library-colors-selector__toggle\"\n\t\t\t\t\tlabel={ __( 'Open Colors Selector' ) }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<BackgroundColor>\n\t\t\t\t\t\t\t<TextColor>\n\t\t\t\t\t\t\t\t<ColorSelectorIcon />\n\t\t\t\t\t\t\t</TextColor>\n\t\t\t\t\t\t</BackgroundColor>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t);\n\t};\n\nconst BlockColorsStyleSelector = ( { children, ...other } ) => {\n\tdeprecated( `wp.blockEditor.BlockColorsStyleSelector`, {\n\t\talternative: 'block supports API',\n\t\tsince: '6.1',\n\t\tversion: '6.3',\n\t} );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\tclassName=\"block-library-colors-selector\"\n\t\t\tcontentClassName=\"block-library-colors-selector__popover\"\n\t\t\trenderToggle={ renderToggleComponent( other ) }\n\t\t\trenderContent={ () => children }\n\t\t/>\n\t);\n};\n\nexport default BlockColorsStyleSelector;\n"],
+  "mappings": ";AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,OAAO,gBAAgB;AAIrB;AAFF,IAAM,uBAAuB,MAC5B,oBAAC,OAAI,OAAM,8BAA6B,SAAQ,aAC/C,8BAAC,QAAK,GAAE,+eAA8e,GACvf;AAYD,IAAM,oBAAoB,CAAE,EAAE,OAAO,UAAU,MAAO;AACrD,SACC,oBAAC,SAAI,WAAU,iDACd;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,GAAI,SAAU;AAAA,MAC1B;AAAA,MAEA,8BAAC,wBAAqB;AAAA;AAAA,EACvB,GACD;AAEF;AAWA,IAAM,wBAAwB,CAAE,EAAE,WAAW,gBAAgB,MAC5D,SAAS,gBAAiB,EAAE,UAAU,OAAO,GAAI;AAChD,QAAM,kBAAkB,CAAE,UAAW;AACpC,QAAK,CAAE,UAAU,MAAM,YAAY,MAAO;AACzC,YAAM,eAAe;AACrB,eAAS;AAAA,IACV;AAAA,EACD;AAEA,SACC,oBAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ,GAAI,sBAAuB;AAAA,MACnC,SAAU;AAAA,MACV,WAAY;AAAA,MACZ,MACC,oBAAC,mBACA,8BAAC,aACA,8BAAC,qBAAkB,GACpB,GACD;AAAA;AAAA,EAEF,GACD;AAEF;AAED,IAAM,2BAA2B,CAAE,EAAE,UAAU,GAAG,MAAM,MAAO;AAC9D,aAAY,2CAA2C;AAAA,IACtD,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AAEF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe,EAAE,WAAW,eAAe;AAAA,MAC3C,WAAU;AAAA,MACV,kBAAiB;AAAA,MACjB,cAAe,sBAAuB,KAAM;AAAA,MAC5C,eAAgB,MAAM;AAAA;AAAA,EACvB;AAEF;AAEA,IAAO,+BAAQ;",
   "names": []
 }

package/build-module/components/colors/utils.mjs CHANGED Viewed

@@ -2,10 +2,8 @@
 import { colord, extend } from "colord";
 import namesPlugin from "colord/plugins/names";
 import a11yPlugin from "colord/plugins/a11y";
-import { privateApis as componentsPrivateApis } from "@wordpress/components";
-import { unlock } from "../../lock-unlock.mjs";
+import { kebabCase } from "@wordpress/kebab-case";
 extend([namesPlugin, a11yPlugin]);
-var { kebabCase } = unlock(componentsPrivateApis);
 var getColorObjectByAttributeValues = (colors, definedColor, customColor) => {
   if (definedColor) {
     const colorObj = colors?.find(

package/build-module/components/colors/utils.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors/utils.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nconst { kebabCase } = unlock( componentsPrivateApis );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = colors?.find(\n\t\t\t( color ) => color.slug === definedColor\n\t\t);\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn colors?.find( ( color ) => color.color === colorValue );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\n\t\t.color;\n}\n"],
-  "mappings": ";AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AAKvB,SAAS,eAAe,6BAA6B;AAKrD,SAAS,cAAc;AAEvB,OAAQ,CAAE,aAAa,UAAW,CAAE;AAEpC,IAAM,EAAE,UAAU,IAAI,OAAQ,qBAAsB;AAc7C,IAAM,kCAAkC,CAC9C,QACA,cACA,gBACI;AACJ,MAAK,cAAe;AACnB,UAAM,WAAW,QAAQ;AAAA,MACxB,CAAE,UAAW,MAAM,SAAS;AAAA,IAC7B;AAEA,QAAK,UAAW;AACf,aAAO;AAAA,IACR;AAAA,EACD;AACA,SAAO;AAAA,IACN,OAAO;AAAA,EACR;AACD;AAWO,IAAM,6BAA6B,CAAE,QAAQ,eAAgB;AACnE,SAAO,QAAQ,KAAM,CAAE,UAAW,MAAM,UAAU,UAAW;AAC9D;AAWO,SAAS,kBAAmB,kBAAkB,WAAY;AAChE,MAAK,CAAE,oBAAoB,CAAE,WAAY;AACxC,WAAO;AAAA,EACR;AAEA,SAAO,OAAQ,UAAW,SAAU,CAAE,IAAK,gBAAiB;AAC7D;AAUO,SAAS,qBAAsB,QAAQ,YAAa;AAC1D,QAAM,cAAc,OAAQ,UAAW;AACvC,QAAM,mBAAmB,CAAE,EAAE,MAAM,MAAO,YAAY,SAAU,KAAM;AAEtE,QAAM,cAAc,KAAK,IAAK,GAAG,OAAO,IAAK,gBAAiB,CAAE;AAChE,SAAO,OAAO,KAAM,CAAE,UAAW,iBAAkB,KAAM,MAAM,WAAY,EACzE;AACH;",
+  "sourcesContent": ["import { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport { kebabCase } from '@wordpress/kebab-case';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = colors?.find(\n\t\t\t( color ) => color.slug === definedColor\n\t\t);\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn colors?.find( ( color ) => color.color === colorValue );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\n\t\t.color;\n}\n"],
+  "mappings": ";AAAA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AACvB,SAAS,iBAAiB;AAE1B,OAAQ,CAAE,aAAa,UAAW,CAAE;AAc7B,IAAM,kCAAkC,CAC9C,QACA,cACA,gBACI;AACJ,MAAK,cAAe;AACnB,UAAM,WAAW,QAAQ;AAAA,MACxB,CAAE,UAAW,MAAM,SAAS;AAAA,IAC7B;AAEA,QAAK,UAAW;AACf,aAAO;AAAA,IACR;AAAA,EACD;AACA,SAAO;AAAA,IACN,OAAO;AAAA,EACR;AACD;AAWO,IAAM,6BAA6B,CAAE,QAAQ,eAAgB;AACnE,SAAO,QAAQ,KAAM,CAAE,UAAW,MAAM,UAAU,UAAW;AAC9D;AAWO,SAAS,kBAAmB,kBAAkB,WAAY;AAChE,MAAK,CAAE,oBAAoB,CAAE,WAAY;AACxC,WAAO;AAAA,EACR;AAEA,SAAO,OAAQ,UAAW,SAAU,CAAE,IAAK,gBAAiB;AAC7D;AAUO,SAAS,qBAAsB,QAAQ,YAAa;AAC1D,QAAM,cAAc,OAAQ,UAAW;AACvC,QAAM,mBAAmB,CAAE,EAAE,MAAM,MAAO,YAAY,SAAU,KAAM;AAEtE,QAAM,cAAc,KAAK,IAAK,GAAG,OAAO,IAAK,gBAAiB,CAAE;AAChE,SAAO,OAAO,KAAM,CAAE,UAAW,iBAAkB,KAAM,MAAM,WAAY,EACzE;AACH;",
   "names": []
 }

package/build-module/components/colors/with-colors.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 // packages/block-editor/src/components/colors/with-colors.js
 import { useMemo, Component } from "@wordpress/element";
 import { compose, createHigherOrderComponent } from "@wordpress/compose";
-import { privateApis as componentsPrivateApis } from "@wordpress/components";
+import { kebabCase } from "@wordpress/kebab-case";
 import {
   getColorClassName,
   getColorObjectByColorValue,
@@ -9,9 +9,7 @@ import {
   getMostReadableColor
 } from "./utils.mjs";
 import { useSettings } from "../use-settings/index.mjs";
-import { unlock } from "../../lock-unlock.mjs";
 import { jsx } from "react/jsx-runtime";
-var { kebabCase } = unlock(componentsPrivateApis);
 var upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join("");
 var withCustomColorPalette = (colorsArray) => createHigherOrderComponent(
   (WrappedComponent) => function WithCustomColorPalette(props) {

package/build-module/components/colors/with-colors.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../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 ) =>\n\t\t\tfunction WithCustomColorPalette( props ) {\n\t\t\t\treturn <WrappedComponent { ...props } colors={ colorsArray } />;\n\t\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 ) =>\n\t\t\tfunction WithEditorColorPalette( props ) {\n\t\t\t\tconst [ userPalette, themePalette, defaultPalette ] =\n\t\t\t\t\tuseSettings(\n\t\t\t\t\t\t'color.palette.custom',\n\t\t\t\t\t\t'color.palette.theme',\n\t\t\t\t\t\t'color.palette.default'\n\t\t\t\t\t);\n\t\t\t\tconst allColors = useMemo(\n\t\t\t\t\t() => [\n\t\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t\t],\n\t\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t\t);\n\t\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\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 WithColors 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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",
+  "sourcesContent": ["import { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\nimport { kebabCase } from '@wordpress/kebab-case';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport { useSettings } from '../use-settings';\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 ) =>\n\t\t\tfunction WithCustomColorPalette( props ) {\n\t\t\t\treturn <WrappedComponent { ...props } colors={ colorsArray } />;\n\t\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 ) =>\n\t\t\tfunction WithEditorColorPalette( props ) {\n\t\t\t\tconst [ userPalette, themePalette, defaultPalette ] =\n\t\t\t\t\tuseSettings(\n\t\t\t\t\t\t'color.palette.custom',\n\t\t\t\t\t\t'color.palette.theme',\n\t\t\t\t\t\t'color.palette.default'\n\t\t\t\t\t);\n\t\t\t\tconst allColors = useMemo(\n\t\t\t\t\t() => [\n\t\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t\t],\n\t\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t\t);\n\t\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\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 WithColors 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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",
   "names": []
 }

package/build-module/components/colors-gradients/control.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../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\tNotice,\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\tcolorSlug,\n\tgradientValue,\n\tgradientSlug,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n\tnoticeProps,\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 colorPaletteOnChange = canChooseAGradient\n\t\t? ( newColor, _index, newSlug ) => {\n\t\t\t\tonColorChange( newColor, newSlug );\n\t\t\t\tonGradientChange();\n\t\t  }\n\t\t: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );\n\n\tconst colorPalette = (\n\t\t<ColorPalette\n\t\t\tvalue={ colorValue }\n\t\t\tselectedSlug={ colorSlug }\n\t\t\tonChange={ colorPaletteOnChange }\n\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t}\n\t\t\tclearable={ clearable }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t\theadingLevel={ headingLevel }\n\t\t/>\n\t);\n\n\tconst tabPanels = {\n\t\t// The `ColorPalette` must stay at a stable position in the tree whether\n\t\t// or not a notice is present. Wrapping it in a `VStack` only when a\n\t\t// notice appears remounts it, which resets the custom color picker back\n\t\t// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only\n\t\t// the trailing notice after it, so the palette holds a stable index and\n\t\t// the notice sits at the bottom of the popover.\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<>\n\t\t\t\t{ colorPalette }\n\t\t\t\t{ noticeProps && (\n\t\t\t\t\t<Notice isDismissible={ false } { ...noticeProps } />\n\t\t\t\t) }\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\tselectedSlug={ gradientSlug }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient, _index, newSlug ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: ( newGradient, _index, newSlug ) =>\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug )\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\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": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\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\tcolorSlug,\n\tgradientValue,\n\tgradientSlug,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n\tnoticeProps,\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 colorPaletteOnChange = canChooseAGradient\n\t\t? ( newColor, _index, newSlug ) => {\n\t\t\t\tonColorChange( newColor, newSlug );\n\t\t\t\tonGradientChange();\n\t\t  }\n\t\t: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );\n\n\tconst colorPalette = (\n\t\t<ColorPalette\n\t\t\tvalue={ colorValue }\n\t\t\tselectedSlug={ colorSlug }\n\t\t\tonChange={ colorPaletteOnChange }\n\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t}\n\t\t\tclearable={ clearable }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t\theadingLevel={ headingLevel }\n\t\t/>\n\t);\n\n\tconst tabPanels = {\n\t\t// The `ColorPalette` must stay at a stable position in the tree whether\n\t\t// or not a notice is present. Wrapping it in a `VStack` only when a\n\t\t// notice appears remounts it, which resets the custom color picker back\n\t\t// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only\n\t\t// the trailing notice after it, so the palette holds a stable index and\n\t\t// the notice sits at the bottom of the popover.\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<>\n\t\t\t\t{ colorPalette }\n\t\t\t\t{ noticeProps && (\n\t\t\t\t\t<Notice isDismissible={ false } { ...noticeProps } />\n\t\t\t\t) }\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\tselectedSlug={ gradientSlug }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient, _index, newSlug ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: ( newGradient, _index, newSlug ) =>\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug )\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\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": "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",
   "names": []
 }

package/build-module/components/colors-gradients/dropdown.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../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';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { reset as resetIcon } from '@wordpress/icons';\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={ clsx(\n\t\t\t\t'block-editor-color-gradient-item',\n\t\t\t\t'block-editor-tools-panel-color-gradient-settings__item'\n\t\t\t) }\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 = ( settings ) =>\n\tfunction Toggle( { onToggle, isOpen } ) {\n\t\tconst {\n\t\t\tclearable,\n\t\t\tcolorValue,\n\t\t\tgradientValue,\n\t\t\tonColorChange,\n\t\t\tonGradientChange,\n\t\t\tlabel,\n\t\t} = settings;\n\t\tconst colorButtonRef = useRef( undefined );\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\tref: colorButtonRef,\n\t\t};\n\n\t\tconst clearValue = () => {\n\t\t\tif ( colorValue ) {\n\t\t\t\tonColorChange();\n\t\t\t} else if ( gradientValue ) {\n\t\t\t\tonGradientChange();\n\t\t\t}\n\t\t};\n\n\t\tconst value = colorValue ?? gradientValue;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Button __next40pxDefaultSize { ...toggleProps }>\n\t\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t/>\n\t\t\t\t</Button>\n\t\t\t\t{ clearable && value && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__reset\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tclearValue();\n\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// Return focus to parent button\n\t\t\t\t\t\t\tcolorButtonRef.current?.focus();\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// 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\tclearable: setting.clearable,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\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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",
+  "sourcesContent": ["import clsx from 'clsx';\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';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { reset as resetIcon } from '@wordpress/icons';\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={ clsx(\n\t\t\t\t'block-editor-color-gradient-item',\n\t\t\t\t'block-editor-tools-panel-color-gradient-settings__item'\n\t\t\t) }\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 = ( settings ) =>\n\tfunction Toggle( { onToggle, isOpen } ) {\n\t\tconst {\n\t\t\tclearable,\n\t\t\tcolorValue,\n\t\t\tgradientValue,\n\t\t\tonColorChange,\n\t\t\tonGradientChange,\n\t\t\tlabel,\n\t\t} = settings;\n\t\tconst colorButtonRef = useRef( undefined );\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\tref: colorButtonRef,\n\t\t};\n\n\t\tconst clearValue = () => {\n\t\t\tif ( colorValue ) {\n\t\t\t\tonColorChange();\n\t\t\t} else if ( gradientValue ) {\n\t\t\t\tonGradientChange();\n\t\t\t}\n\t\t};\n\n\t\tconst value = colorValue ?? gradientValue;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Button __next40pxDefaultSize { ...toggleProps }>\n\t\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t/>\n\t\t\t\t</Button>\n\t\t\t\t{ clearable && value && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__reset\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tclearValue();\n\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// Return focus to parent button\n\t\t\t\t\t\t\tcolorButtonRef.current?.focus();\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// 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\tclearable: setting.clearable,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t\tcolorValue: setting.colorValue,\n\t\t\t\t\tgradientValue: setting.gradientValue,\n\t\t\t\t\tonColorChange: setting.onColorChange,\n\t\t\t\t\tonGradientChange: setting.onGradientChange,\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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",
   "names": []
 }

package/build-module/components/colors-gradients/panel-color-gradient-settings.mjs CHANGED Viewed

@@ -35,13 +35,14 @@ var PanelColorGradientSettingsInner = ({
   )) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     ToolsPanel,
     {
       className: clsx(
         "block-editor-panel-color-gradient-settings",
         className
       ),
+      hasInnerWrapper: true,
       label: showTitle ? title : void 0,
       resetAll: () => {
         batch(() => {
@@ -64,7 +65,7 @@ var PanelColorGradientSettingsInner = ({
       panelId,
       __experimentalFirstVisibleItemClass: "first",
       __experimentalLastVisibleItemClass: "last",
-      children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "block-editor-panel-color-gradient-settings__inner-wrapper", children: [
         /* @__PURE__ */ jsx(
           ColorGradientSettingsDropdown,
           {
@@ -81,11 +82,10 @@ var PanelColorGradientSettingsInner = ({
           }
         ),
         !!children && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Spacer, { marginY: 4 }),
-          " ",
+          /* @__PURE__ */ jsx(Spacer, { marginTop: 4, marginBottom: 0 }),
           children
         ] })
-      ]
+      ] })
     }
   );
 };

package/build-module/components/colors-gradients/panel-color-gradient-settings.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors-gradients/panel-color-gradient-settings.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalToolsPanel as ToolsPanel,\n} from '@wordpress/components';\nimport { useRegistry } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientSettingsDropdown from './dropdown';\nimport useColorsAndGradientsPalettes from './use-multiple-origin-colors-and-gradients';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n} ) => {\n\tconst panelId = useInstanceId( PanelColorGradientSettingsInner );\n\tconst { batch } = useRegistry();\n\tif (\n\t\t( ! colors || colors.length === 0 ) &&\n\t\t( ! gradients || gradients.length === 0 ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tsettings?.every(\n\t\t\t( setting ) =>\n\t\t\t\t( ! setting.colors || setting.colors.length === 0 ) &&\n\t\t\t\t( ! setting.gradients || setting.gradients.length === 0 ) &&\n\t\t\t\t( setting.disableCustomColors === undefined ||\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined ||\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tlabel={ showTitle ? title : undefined }\n\t\t\tresetAll={ () => {\n\t\t\t\tbatch( () => {\n\t\t\t\t\tsettings.forEach(\n\t\t\t\t\t\t( {\n\t\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tif ( colorValue ) {\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t\t} else if ( gradientValue ) {\n\t\t\t\t\t\t\t\tonGradientChange();\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\tpanelId={ panelId }\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t>\n\t\t\t<ColorGradientSettingsDropdown\n\t\t\t\tsettings={ settings }\n\t\t\t\tpanelId={ panelId }\n\t\t\t\t{ ...{\n\t\t\t\t\tcolors,\n\t\t\t\t\tgradients,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ !! children && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer marginY={ 4 } /> { children }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n};\n\nconst PanelColorGradientSettingsSelect = ( props ) => {\n\tconst colorGradientSettings = useColorsAndGradientsPalettes();\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,OACtB;AACP,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAK9B,OAAO,mCAAmC;AAC1C,OAAO,mCAAmC;AAuEvC,SAaC,UAbD,KAaC,YAbD;AArEH,IAAM,wBAAwB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,kCAAkC,CAAE;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACD,MAAO;AACN,QAAM,UAAU,cAAe,+BAAgC;AAC/D,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,OACG,CAAE,UAAU,OAAO,WAAW,OAC9B,CAAE,aAAa,UAAU,WAAW,MACtC,uBACA,0BACA,UAAU;AAAA,IACT,CAAE,aACC,CAAE,QAAQ,UAAU,QAAQ,OAAO,WAAW,OAC9C,CAAE,QAAQ,aAAa,QAAQ,UAAU,WAAW,OACpD,QAAQ,wBAAwB,UACjC,QAAQ,yBACP,QAAQ,2BAA2B,UACpC,QAAQ;AAAA,EACX,GACC;AACD,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MACA,OAAQ,YAAY,QAAQ;AAAA,MAC5B,UAAW,MAAM;AAChB,cAAO,MAAM;AACZ,mBAAS;AAAA,YACR,CAAE;AAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD,MAAO;AACN,kBAAK,YAAa;AACjB,8BAAc;AAAA,cACf,WAAY,eAAgB;AAC3B,iCAAiB;AAAA,cAClB;AAAA,YACD;AAAA,UACD;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA;AAAA,MACA,qCAAoC;AAAA,MACpC,oCAAmC;AAAA,MAEnC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACE,GAAG;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACE,CAAC,CAAE,YACJ,iCACC;AAAA,8BAAC,UAAO,SAAU,GAAI;AAAA,UAAE;AAAA,UAAG;AAAA,WAC5B;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,IAAM,mCAAmC,CAAE,UAAW;AACrD,QAAM,wBAAwB,8BAA8B;AAC5D,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,EAAE,GAAG,uBAAuB,GAAG,MAAM;AAAA;AAAA,EAC3C;AAEF;AAEA,IAAM,6BAA6B,CAAE,UAAW;AAC/C,MACC,sBAAsB,MAAO,CAAE,QAAS,MAAM,eAAgB,GAAI,CAAE,GACnE;AACD,WAAO,oBAAC,mCAAkC,GAAG,OAAQ;AAAA,EACtD;AACA,SAAO,oBAAC,oCAAmC,GAAG,OAAQ;AACvD;AAEA,IAAO,wCAAQ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalToolsPanel as ToolsPanel,\n} from '@wordpress/components';\nimport { useRegistry } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\nimport ColorGradientSettingsDropdown from './dropdown';\nimport useColorsAndGradientsPalettes from './use-multiple-origin-colors-and-gradients';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n} ) => {\n\tconst panelId = useInstanceId( PanelColorGradientSettingsInner );\n\tconst { batch } = useRegistry();\n\tif (\n\t\t( ! colors || colors.length === 0 ) &&\n\t\t( ! gradients || gradients.length === 0 ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tsettings?.every(\n\t\t\t( setting ) =>\n\t\t\t\t( ! setting.colors || setting.colors.length === 0 ) &&\n\t\t\t\t( ! setting.gradients || setting.gradients.length === 0 ) &&\n\t\t\t\t( setting.disableCustomColors === undefined ||\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined ||\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\thasInnerWrapper\n\t\t\tlabel={ showTitle ? title : undefined }\n\t\t\tresetAll={ () => {\n\t\t\t\tbatch( () => {\n\t\t\t\t\tsettings.forEach(\n\t\t\t\t\t\t( {\n\t\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\tif ( colorValue ) {\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t\t} else if ( gradientValue ) {\n\t\t\t\t\t\t\t\tonGradientChange();\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\tpanelId={ panelId }\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t>\n\t\t\t<div className=\"block-editor-panel-color-gradient-settings__inner-wrapper\">\n\t\t\t\t<ColorGradientSettingsDropdown\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t\tenableAlpha,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ !! children && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Spacer marginTop={ 4 } marginBottom={ 0 } />\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</ToolsPanel>\n\t);\n};\n\nconst PanelColorGradientSettingsSelect = ( props ) => {\n\tconst colorGradientSettings = useColorsAndGradientsPalettes();\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB;AAAA,EACC,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,OACtB;AACP,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,OAAO,mCAAmC;AAC1C,OAAO,mCAAmC;AAyEtC,SAaC,UAbD,KAaC,YAbD;AAvEJ,IAAM,wBAAwB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,kCAAkC,CAAE;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACD,MAAO;AACN,QAAM,UAAU,cAAe,+BAAgC;AAC/D,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,OACG,CAAE,UAAU,OAAO,WAAW,OAC9B,CAAE,aAAa,UAAU,WAAW,MACtC,uBACA,0BACA,UAAU;AAAA,IACT,CAAE,aACC,CAAE,QAAQ,UAAU,QAAQ,OAAO,WAAW,OAC9C,CAAE,QAAQ,aAAa,QAAQ,UAAU,WAAW,OACpD,QAAQ,wBAAwB,UACjC,QAAQ,yBACP,QAAQ,2BAA2B,UACpC,QAAQ;AAAA,EACX,GACC;AACD,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MACA,iBAAe;AAAA,MACf,OAAQ,YAAY,QAAQ;AAAA,MAC5B,UAAW,MAAM;AAChB,cAAO,MAAM;AACZ,mBAAS;AAAA,YACR,CAAE;AAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD,MAAO;AACN,kBAAK,YAAa;AACjB,8BAAc;AAAA,cACf,WAAY,eAAgB;AAC3B,iCAAiB;AAAA,cAClB;AAAA,YACD;AAAA,UACD;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA;AAAA,MACA,qCAAoC;AAAA,MACpC,oCAAmC;AAAA,MAEnC,+BAAC,SAAI,WAAU,6DACd;AAAA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACE,GAAG;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACE,CAAC,CAAE,YACJ,iCACC;AAAA,8BAAC,UAAO,WAAY,GAAI,cAAe,GAAI;AAAA,UACzC;AAAA,WACH;AAAA,SAEF;AAAA;AAAA,EACD;AAEF;AAEA,IAAM,mCAAmC,CAAE,UAAW;AACrD,QAAM,wBAAwB,8BAA8B;AAC5D,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,EAAE,GAAG,uBAAuB,GAAG,MAAM;AAAA;AAAA,EAC3C;AAEF;AAEA,IAAM,6BAA6B,CAAE,UAAW;AAC/C,MACC,sBAAsB,MAAO,CAAE,QAAS,MAAM,eAAgB,GAAI,CAAE,GACnE;AACD,WAAO,oBAAC,mCAAkC,GAAG,OAAQ;AAAA,EACtD;AACA,SAAO,oBAAC,oCAAmC,GAAG,OAAQ;AACvD;AAEA,IAAO,wCAAQ;",
   "names": []
 }

package/build-module/components/colors-gradients/use-multiple-origin-colors-and-gradients.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\n/**\n * Retrieves color and gradient related settings.\n *\n * The arrays for colors and gradients are made up of color palettes from each\n * origin i.e. \"Core\", \"Theme\", and \"User\".\n *\n * @return {Object} Color and gradient related settings.\n */\nexport default function useMultipleOriginColorsAndGradients() {\n\tconst [\n\t\tenableCustomColors,\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tshouldDisplayDefaultColors,\n\t\tenableCustomGradients,\n\t\tcustomGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t\tshouldDisplayDefaultGradients,\n\t] = useSettings(\n\t\t'color.custom',\n\t\t'color.palette.custom',\n\t\t'color.palette.theme',\n\t\t'color.palette.default',\n\t\t'color.defaultPalette',\n\t\t'color.customGradient',\n\t\t'color.gradients.custom',\n\t\t'color.gradients.theme',\n\t\t'color.gradients.default',\n\t\t'color.defaultGradients'\n\t);\n\n\tconst colorGradientSettings = {\n\t\tdisableCustomColors: ! enableCustomColors,\n\t\tdisableCustomGradients: ! enableCustomGradients,\n\t};\n\n\tcolorGradientSettings.colors = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tslug: 'theme',\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultColors &&\n\t\t\tdefaultColors &&\n\t\t\tdefaultColors.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tslug: 'default',\n\t\t\t\tcolors: defaultColors,\n\t\t\t} );\n\t\t}\n\t\tif ( customColors && customColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tslug: 'custom',\n\t\t\t\tcolors: customColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tshouldDisplayDefaultColors,\n\t] );\n\n\tcolorGradientSettings.gradients = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tslug: 'theme',\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tslug: 'default',\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tslug: 'custom',\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [\n\t\tcustomGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t\tshouldDisplayDefaultGradients,\n\t] );\n\n\tcolorGradientSettings.hasColorsOrGradients =\n\t\t!! colorGradientSettings.colors.length ||\n\t\t!! colorGradientSettings.gradients.length;\n\n\treturn colorGradientSettings;\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe;AACxB,SAAS,UAAU;AAKnB,SAAS,mBAAmB;AAUb,SAAR,sCAAuD;AAC7D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,wBAAwB;AAAA,IAC7B,qBAAqB,CAAE;AAAA,IACvB,wBAAwB,CAAE;AAAA,EAC3B;AAEA,wBAAsB,SAAS,QAAS,MAAM;AAC7C,UAAM,SAAS,CAAC;AAChB,QAAK,eAAe,YAAY,QAAS;AACxC,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,QACC,8BACA,iBACA,cAAc,QACb;AACD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,QAAK,gBAAgB,aAAa,QAAS;AAC1C,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,WAAO;AAAA,EACR,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,wBAAsB,YAAY,QAAS,MAAM;AAChD,UAAM,SAAS,CAAC;AAChB,QAAK,kBAAkB,eAAe,QAAS;AAC9C,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,QACC,iCACA,oBACA,iBAAiB,QAChB;AACD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,QAAK,mBAAmB,gBAAgB,QAAS;AAChD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,WAAO;AAAA,EACR,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,wBAAsB,uBACrB,CAAC,CAAE,sBAAsB,OAAO,UAChC,CAAC,CAAE,sBAAsB,UAAU;AAEpC,SAAO;AACR;",
+  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport { _x } from '@wordpress/i18n';\nimport { useSettings } from '../use-settings';\n\n/**\n * Retrieves color and gradient related settings.\n *\n * The arrays for colors and gradients are made up of color palettes from each\n * origin i.e. \"Core\", \"Theme\", and \"User\".\n *\n * @return {Object} Color and gradient related settings.\n */\nexport default function useMultipleOriginColorsAndGradients() {\n\tconst [\n\t\tenableCustomColors,\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tshouldDisplayDefaultColors,\n\t\tenableCustomGradients,\n\t\tcustomGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t\tshouldDisplayDefaultGradients,\n\t] = useSettings(\n\t\t'color.custom',\n\t\t'color.palette.custom',\n\t\t'color.palette.theme',\n\t\t'color.palette.default',\n\t\t'color.defaultPalette',\n\t\t'color.customGradient',\n\t\t'color.gradients.custom',\n\t\t'color.gradients.theme',\n\t\t'color.gradients.default',\n\t\t'color.defaultGradients'\n\t);\n\n\tconst colorGradientSettings = {\n\t\tdisableCustomColors: ! enableCustomColors,\n\t\tdisableCustomGradients: ! enableCustomGradients,\n\t};\n\n\tcolorGradientSettings.colors = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tslug: 'theme',\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultColors &&\n\t\t\tdefaultColors &&\n\t\t\tdefaultColors.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tslug: 'default',\n\t\t\t\tcolors: defaultColors,\n\t\t\t} );\n\t\t}\n\t\tif ( customColors && customColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tslug: 'custom',\n\t\t\t\tcolors: customColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [\n\t\tcustomColors,\n\t\tthemeColors,\n\t\tdefaultColors,\n\t\tshouldDisplayDefaultColors,\n\t] );\n\n\tcolorGradientSettings.gradients = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tslug: 'theme',\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tslug: 'default',\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tslug: 'custom',\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [\n\t\tcustomGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t\tshouldDisplayDefaultGradients,\n\t] );\n\n\tcolorGradientSettings.hasColorsOrGradients =\n\t\t!! colorGradientSettings.colors.length ||\n\t\t!! colorGradientSettings.gradients.length;\n\n\treturn colorGradientSettings;\n}\n"],
+  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAUb,SAAR,sCAAuD;AAC7D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,wBAAwB;AAAA,IAC7B,qBAAqB,CAAE;AAAA,IACvB,wBAAwB,CAAE;AAAA,EAC3B;AAEA,wBAAsB,SAAS,QAAS,MAAM;AAC7C,UAAM,SAAS,CAAC;AAChB,QAAK,eAAe,YAAY,QAAS;AACxC,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,QACC,8BACA,iBACA,cAAc,QACb;AACD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,QAAK,gBAAgB,aAAa,QAAS;AAC1C,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AACA,WAAO;AAAA,EACR,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,wBAAsB,YAAY,QAAS,MAAM;AAChD,UAAM,SAAS,CAAC;AAChB,QAAK,kBAAkB,eAAe,QAAS;AAC9C,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,QACC,iCACA,oBACA,iBAAiB,QAChB;AACD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,QAAK,mBAAmB,gBAAgB,QAAS;AAChD,aAAO,KAAM;AAAA,QACZ,MAAM;AAAA,UACL;AAAA,UACA;AAAA,QACD;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AACA,WAAO;AAAA,EACR,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,wBAAsB,uBACrB,CAAC,CAAE,sBAAsB,OAAO,UAChC,CAAC,CAAE,sBAAsB,UAAU;AAEpC,SAAO;AACR;",
   "names": []
 }

package/build-module/components/contrast-checker/index.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/contrast-checker/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\nimport { colord, extend } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { speak } from '@wordpress/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Computes a contrast warning for the given color combination, if any.\n *\n * Shared between the `ContrastChecker` component and the block inspector\n * contrast warning indicators, which surface the result without rendering\n * a notice.\n *\n * @param {Object}  props\n * @param {string}  [props.backgroundColor]         Background color.\n * @param {string}  [props.fallbackBackgroundColor] Fallback background color.\n * @param {string}  [props.fallbackTextColor]       Fallback text color.\n * @param {string}  [props.fallbackLinkColor]       Fallback link color.\n * @param {number}  [props.fontSize]                Font size value in pixels.\n * @param {boolean} [props.isLargeText]             Whether the text is large.\n * @param {string}  [props.textColor]               Text color.\n * @param {string}  [props.linkColor]               Link color.\n * @param {string}  [props.messageOverride]         Caller-provided copy used in place of the generic guidance.\n * @param {boolean} [props.enableAlphaChecker]      Whether to warn about transparent text.\n *\n * @return {?Object} `{ message, speakMessage }` when contrast is insufficient, otherwise `null`.\n */\nexport function getContrastWarning( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfallbackLinkColor,\n\tfontSize, // Font size value in pixels.\n\tisLargeText,\n\ttextColor,\n\tlinkColor,\n\tmessageOverride,\n\tenableAlphaChecker = false,\n} ) {\n\tconst currentBackgroundColor = backgroundColor || fallbackBackgroundColor;\n\n\t// Must have a background color.\n\tif ( ! currentBackgroundColor ) {\n\t\treturn null;\n\t}\n\n\tconst currentTextColor = textColor || fallbackTextColor;\n\tconst currentLinkColor = linkColor || fallbackLinkColor;\n\n\t// Must have at least one text color.\n\tif ( ! currentTextColor && ! currentLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst textColors = [\n\t\t{\n\t\t\tcolor: currentTextColor,\n\t\t\tdescription: __( 'text color' ),\n\t\t},\n\t\t{\n\t\t\tcolor: currentLinkColor,\n\t\t\tdescription: __( 'link color' ),\n\t\t},\n\t];\n\tconst colordBackgroundColor = colord( currentBackgroundColor );\n\tconst backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;\n\tconst backgroundColorBrightness = colordBackgroundColor.brightness();\n\tconst isReadableOptions = {\n\t\tlevel: 'AA',\n\t\tsize:\n\t\t\tisLargeText || ( isLargeText !== false && fontSize >= 24 )\n\t\t\t\t? 'large'\n\t\t\t\t: 'small',\n\t};\n\n\tlet message = '';\n\tlet speakMessage = '';\n\tfor ( const item of textColors ) {\n\t\t// If there is no color, go no further.\n\t\tif ( ! item.color ) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst colordTextColor = colord( item.color );\n\t\tconst isColordTextReadable = colordTextColor.isReadable(\n\t\t\tcolordBackgroundColor,\n\t\t\tisReadableOptions\n\t\t);\n\t\tconst textHasTransparency = colordTextColor.alpha() < 1;\n\n\t\t// If the contrast is not readable.\n\t\tif ( ! isColordTextReadable ) {\n\t\t\t// Don't show the message if the background or text is transparent.\n\t\t\tif ( backgroundColorHasTransparency || textHasTransparency ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\t// A caller can provide panel-specific copy that is clearer and\n\t\t\t// more concise than the generic brighter/darker guidance.\n\t\t\tif ( messageOverride ) {\n\t\t\t\tmessage = messageOverride;\n\t\t\t\tspeakMessage = messageOverride;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tmessage =\n\t\t\t\tbackgroundColorBrightness < colordTextColor.brightness()\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\".\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\".\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  );\n\t\t\tspeakMessage = __(\n\t\t\t\t'This color combination may be hard for people to read.'\n\t\t\t);\n\t\t\t// Break from the loop when we have a contrast warning.\n\t\t\t// These messages take priority over the transparency warning.\n\t\t\tbreak;\n\t\t}\n\n\t\t// If there is no contrast warning and the text is transparent,\n\t\t// show the transparent warning if alpha check is enabled.\n\t\tif ( textHasTransparency && enableAlphaChecker ) {\n\t\t\tmessage = __( 'Transparent text may be hard for people to read.' );\n\t\t\tspeakMessage = __(\n\t\t\t\t'Transparent text may be hard for people to read.'\n\t\t\t);\n\t\t}\n\t}\n\n\tif ( ! message ) {\n\t\treturn null;\n\t}\n\n\treturn { message, speakMessage };\n}\n\nfunction ContrastChecker( props ) {\n\tconst warning = getContrastWarning( props );\n\n\tif ( ! warning ) {\n\t\treturn null;\n\t}\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but the contrast checker requires granular control over when the\n\t// announcements are made. Notably, the message will be re-announced if a\n\t// new color combination is selected and the contrast is still insufficient.\n\tspeak( warning.speakMessage );\n\n\treturn (\n\t\t<div className=\"block-editor-contrast-checker\">\n\t\t\t<Notice\n\t\t\t\tspokenMessage={ null }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tisDismissible={ false }\n\t\t\t>\n\t\t\t\t{ warning.message }\n\t\t\t</Notice>\n\t\t</div>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/contrast-checker/README.md\n */\nexport default ContrastChecker;\n"],
-  "mappings": ";AAGA,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,SAAS,QAAQ,cAAc;AAK/B,SAAS,IAAI,eAAe;AAC5B,SAAS,cAAc;AACvB,SAAS,aAAa;AA4JnB;AA1JH,OAAQ,CAAE,aAAa,UAAW,CAAE;AAuB7B,SAAS,mBAAoB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AACtB,GAAI;AACH,QAAM,yBAAyB,mBAAmB;AAGlD,MAAK,CAAE,wBAAyB;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,mBAAmB,aAAa;AACtC,QAAM,mBAAmB,aAAa;AAGtC,MAAK,CAAE,oBAAoB,CAAE,kBAAmB;AAC/C,WAAO;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IAClB;AAAA,MACC,OAAO;AAAA,MACP,aAAa,GAAI,YAAa;AAAA,IAC/B;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,aAAa,GAAI,YAAa;AAAA,IAC/B;AAAA,EACD;AACA,QAAM,wBAAwB,OAAQ,sBAAuB;AAC7D,QAAM,iCAAiC,sBAAsB,MAAM,IAAI;AACvE,QAAM,4BAA4B,sBAAsB,WAAW;AACnE,QAAM,oBAAoB;AAAA,IACzB,OAAO;AAAA,IACP,MACC,eAAiB,gBAAgB,SAAS,YAAY,KACnD,UACA;AAAA,EACL;AAEA,MAAI,UAAU;AACd,MAAI,eAAe;AACnB,aAAY,QAAQ,YAAa;AAEhC,QAAK,CAAE,KAAK,OAAQ;AACnB;AAAA,IACD;AACA,UAAM,kBAAkB,OAAQ,KAAK,KAAM;AAC3C,UAAM,uBAAuB,gBAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,IACD;AACA,UAAM,sBAAsB,gBAAgB,MAAM,IAAI;AAGtD,QAAK,CAAE,sBAAuB;AAE7B,UAAK,kCAAkC,qBAAsB;AAC5D;AAAA,MACD;AAGA,UAAK,iBAAkB;AACtB,kBAAU;AACV,uBAAe;AACf;AAAA,MACD;AACA,gBACC,4BAA4B,gBAAgB,WAAW,IACpD;AAAA;AAAA,QAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL,IACA;AAAA;AAAA,QAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL;AACJ,qBAAe;AAAA,QACd;AAAA,MACD;AAGA;AAAA,IACD;AAIA,QAAK,uBAAuB,oBAAqB;AAChD,gBAAU,GAAI,kDAAmD;AACjE,qBAAe;AAAA,QACd;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAEA,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SAAO,EAAE,SAAS,aAAa;AAChC;AAEA,SAAS,gBAAiB,OAAQ;AACjC,QAAM,UAAU,mBAAoB,KAAM;AAE1C,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAMA,QAAO,QAAQ,YAAa;AAE5B,SACC,oBAAC,SAAI,WAAU,iCACd;AAAA,IAAC;AAAA;AAAA,MACA,eAAgB;AAAA,MAChB,QAAO;AAAA,MACP,eAAgB;AAAA,MAEd,kBAAQ;AAAA;AAAA,EACX,GACD;AAEF;AAKA,IAAO,2BAAQ;",
+  "sourcesContent": ["import a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\nimport { colord, extend } from 'colord';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { speak } from '@wordpress/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Computes a contrast warning for the given color combination, if any.\n *\n * Shared between the `ContrastChecker` component and the block inspector\n * contrast warning indicators, which surface the result without rendering\n * a notice.\n *\n * @param {Object}  props\n * @param {string}  [props.backgroundColor]         Background color.\n * @param {string}  [props.fallbackBackgroundColor] Fallback background color.\n * @param {string}  [props.fallbackTextColor]       Fallback text color.\n * @param {string}  [props.fallbackLinkColor]       Fallback link color.\n * @param {number}  [props.fontSize]                Font size value in pixels.\n * @param {boolean} [props.isLargeText]             Whether the text is large.\n * @param {string}  [props.textColor]               Text color.\n * @param {string}  [props.linkColor]               Link color.\n * @param {string}  [props.messageOverride]         Caller-provided copy used in place of the generic guidance.\n * @param {boolean} [props.enableAlphaChecker]      Whether to warn about transparent text.\n *\n * @return {?Object} `{ message, speakMessage }` when contrast is insufficient, otherwise `null`.\n */\nexport function getContrastWarning( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfallbackLinkColor,\n\tfontSize, // Font size value in pixels.\n\tisLargeText,\n\ttextColor,\n\tlinkColor,\n\tmessageOverride,\n\tenableAlphaChecker = false,\n} ) {\n\tconst currentBackgroundColor = backgroundColor || fallbackBackgroundColor;\n\n\t// Must have a background color.\n\tif ( ! currentBackgroundColor ) {\n\t\treturn null;\n\t}\n\n\tconst currentTextColor = textColor || fallbackTextColor;\n\tconst currentLinkColor = linkColor || fallbackLinkColor;\n\n\t// Must have at least one text color.\n\tif ( ! currentTextColor && ! currentLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst textColors = [\n\t\t{\n\t\t\tcolor: currentTextColor,\n\t\t\tdescription: __( 'text color' ),\n\t\t},\n\t\t{\n\t\t\tcolor: currentLinkColor,\n\t\t\tdescription: __( 'link color' ),\n\t\t},\n\t];\n\tconst colordBackgroundColor = colord( currentBackgroundColor );\n\tconst backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;\n\tconst backgroundColorBrightness = colordBackgroundColor.brightness();\n\tconst isReadableOptions = {\n\t\tlevel: 'AA',\n\t\tsize:\n\t\t\tisLargeText || ( isLargeText !== false && fontSize >= 24 )\n\t\t\t\t? 'large'\n\t\t\t\t: 'small',\n\t};\n\n\tlet message = '';\n\tlet speakMessage = '';\n\tfor ( const item of textColors ) {\n\t\t// If there is no color, go no further.\n\t\tif ( ! item.color ) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst colordTextColor = colord( item.color );\n\t\tconst isColordTextReadable = colordTextColor.isReadable(\n\t\t\tcolordBackgroundColor,\n\t\t\tisReadableOptions\n\t\t);\n\t\tconst textHasTransparency = colordTextColor.alpha() < 1;\n\n\t\t// If the contrast is not readable.\n\t\tif ( ! isColordTextReadable ) {\n\t\t\t// Don't show the message if the background or text is transparent.\n\t\t\tif ( backgroundColorHasTransparency || textHasTransparency ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\t// A caller can provide panel-specific copy that is clearer and\n\t\t\t// more concise than the generic brighter/darker guidance.\n\t\t\tif ( messageOverride ) {\n\t\t\t\tmessage = messageOverride;\n\t\t\t\tspeakMessage = messageOverride;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tmessage =\n\t\t\t\tbackgroundColorBrightness < colordTextColor.brightness()\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\".\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\".\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  );\n\t\t\tspeakMessage = __(\n\t\t\t\t'This color combination may be hard for people to read.'\n\t\t\t);\n\t\t\t// Break from the loop when we have a contrast warning.\n\t\t\t// These messages take priority over the transparency warning.\n\t\t\tbreak;\n\t\t}\n\n\t\t// If there is no contrast warning and the text is transparent,\n\t\t// show the transparent warning if alpha check is enabled.\n\t\tif ( textHasTransparency && enableAlphaChecker ) {\n\t\t\tmessage = __( 'Transparent text may be hard for people to read.' );\n\t\t\tspeakMessage = __(\n\t\t\t\t'Transparent text may be hard for people to read.'\n\t\t\t);\n\t\t}\n\t}\n\n\tif ( ! message ) {\n\t\treturn null;\n\t}\n\n\treturn { message, speakMessage };\n}\n\nfunction ContrastChecker( props ) {\n\tconst warning = getContrastWarning( props );\n\n\tif ( ! warning ) {\n\t\treturn null;\n\t}\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but the contrast checker requires granular control over when the\n\t// announcements are made. Notably, the message will be re-announced if a\n\t// new color combination is selected and the contrast is still insufficient.\n\tspeak( warning.speakMessage );\n\n\treturn (\n\t\t<div className=\"block-editor-contrast-checker\">\n\t\t\t<Notice\n\t\t\t\tspokenMessage={ null }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tisDismissible={ false }\n\t\t\t>\n\t\t\t\t{ warning.message }\n\t\t\t</Notice>\n\t\t</div>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/contrast-checker/README.md\n */\nexport default ContrastChecker;\n"],
+  "mappings": ";AAAA,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,SAAS,QAAQ,cAAc;AAC/B,SAAS,IAAI,eAAe;AAC5B,SAAS,cAAc;AACvB,SAAS,aAAa;AA4JnB;AA1JH,OAAQ,CAAE,aAAa,UAAW,CAAE;AAuB7B,SAAS,mBAAoB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AACtB,GAAI;AACH,QAAM,yBAAyB,mBAAmB;AAGlD,MAAK,CAAE,wBAAyB;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,mBAAmB,aAAa;AACtC,QAAM,mBAAmB,aAAa;AAGtC,MAAK,CAAE,oBAAoB,CAAE,kBAAmB;AAC/C,WAAO;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IAClB;AAAA,MACC,OAAO;AAAA,MACP,aAAa,GAAI,YAAa;AAAA,IAC/B;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,aAAa,GAAI,YAAa;AAAA,IAC/B;AAAA,EACD;AACA,QAAM,wBAAwB,OAAQ,sBAAuB;AAC7D,QAAM,iCAAiC,sBAAsB,MAAM,IAAI;AACvE,QAAM,4BAA4B,sBAAsB,WAAW;AACnE,QAAM,oBAAoB;AAAA,IACzB,OAAO;AAAA,IACP,MACC,eAAiB,gBAAgB,SAAS,YAAY,KACnD,UACA;AAAA,EACL;AAEA,MAAI,UAAU;AACd,MAAI,eAAe;AACnB,aAAY,QAAQ,YAAa;AAEhC,QAAK,CAAE,KAAK,OAAQ;AACnB;AAAA,IACD;AACA,UAAM,kBAAkB,OAAQ,KAAK,KAAM;AAC3C,UAAM,uBAAuB,gBAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,IACD;AACA,UAAM,sBAAsB,gBAAgB,MAAM,IAAI;AAGtD,QAAK,CAAE,sBAAuB;AAE7B,UAAK,kCAAkC,qBAAsB;AAC5D;AAAA,MACD;AAGA,UAAK,iBAAkB;AACtB,kBAAU;AACV,uBAAe;AACf;AAAA,MACD;AACA,gBACC,4BAA4B,gBAAgB,WAAW,IACpD;AAAA;AAAA,QAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL,IACA;AAAA;AAAA,QAEA;AAAA,UACC;AAAA,QACD;AAAA,QACA,KAAK;AAAA,MACL;AACJ,qBAAe;AAAA,QACd;AAAA,MACD;AAGA;AAAA,IACD;AAIA,QAAK,uBAAuB,oBAAqB;AAChD,gBAAU,GAAI,kDAAmD;AACjE,qBAAe;AAAA,QACd;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAEA,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SAAO,EAAE,SAAS,aAAa;AAChC;AAEA,SAAS,gBAAiB,OAAQ;AACjC,QAAM,UAAU,mBAAoB,KAAM;AAE1C,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAMA,QAAO,QAAQ,YAAa;AAE5B,SACC,oBAAC,SAAI,WAAU,iCACd;AAAA,IAAC;AAAA;AAAA,MACA,eAAgB;AAAA,MAChB,QAAO;AAAA,MACP,eAAgB;AAAA,MAEd,kBAAQ;AAAA;AAAA,EACX,GACD;AAEF;AAKA,IAAO,2BAAQ;",
   "names": []
 }

package/build-module/components/convert-to-group-buttons/index.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 // packages/block-editor/src/components/convert-to-group-buttons/index.js
 import { MenuItem } from "@wordpress/components";
 import { _x } from "@wordpress/i18n";
-import { switchToBlockType } from "@wordpress/blocks";
 import { useSelect, useDispatch } from "@wordpress/data";
 import { displayShortcut } from "@wordpress/keycodes";
 import { store as blockEditorStore } from "../../store/index.mjs";
+import { groupBlocks } from "../../utils/group-blocks.mjs";
 import useConvertToGroupButtonProps from "./use-convert-to-group-button-props.mjs";
 import BlockGroupToolbar from "./toolbar.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -21,10 +21,7 @@ function ConvertToGroupButton({
   const { getSelectedBlockClientIds } = useSelect(blockEditorStore);
   const { replaceBlocks } = useDispatch(blockEditorStore);
   const onConvertToGroup = () => {
-    const newBlocks = switchToBlockType(
-      blocksSelection,
-      groupingBlockName
-    );
+    const newBlocks = groupBlocks(blocksSelection, groupingBlockName);
     if (newBlocks) {
       replaceBlocks(clientIds, newBlocks);
     }

package/build-module/components/convert-to-group-buttons/index.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/convert-to-group-buttons/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { MenuItem } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { switchToBlockType } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { displayShortcut } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport useConvertToGroupButtonProps from './use-convert-to-group-button-props';\nimport BlockGroupToolbar from './toolbar';\n\nfunction ConvertToGroupButton( {\n\tclientIds,\n\tisGroupable,\n\tisUngroupable,\n\tonUngroup,\n\tblocksSelection,\n\tgroupingBlockName,\n\tonClose = () => {},\n} ) {\n\tconst { getSelectedBlockClientIds } = useSelect( blockEditorStore );\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst onConvertToGroup = () => {\n\t\t// Activate the `transform` on the Grouping Block which does the conversion.\n\t\tconst newBlocks = switchToBlockType(\n\t\t\tblocksSelection,\n\t\t\tgroupingBlockName\n\t\t);\n\t\tif ( newBlocks ) {\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertFromGroup = () => {\n\t\tlet innerBlocks = blocksSelection[ 0 ].innerBlocks;\n\t\tif ( ! innerBlocks.length ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( onUngroup ) {\n\t\t\tinnerBlocks = onUngroup(\n\t\t\t\tblocksSelection[ 0 ].attributes,\n\t\t\t\tblocksSelection[ 0 ].innerBlocks\n\t\t\t);\n\t\t}\n\t\treplaceBlocks( clientIds, innerBlocks );\n\t};\n\n\tif ( ! isGroupable && ! isUngroupable ) {\n\t\treturn null;\n\t}\n\n\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\n\treturn (\n\t\t<>\n\t\t\t{ isGroupable && (\n\t\t\t\t<MenuItem\n\t\t\t\t\tshortcut={\n\t\t\t\t\t\tselectedBlockClientIds.length > 1\n\t\t\t\t\t\t\t? displayShortcut.primary( 'g' )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonConvertToGroup();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ _x( 'Group', 'verb' ) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t\t{ isUngroupable && (\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonConvertFromGroup();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ _x(\n\t\t\t\t\t\t'Ungroup',\n\t\t\t\t\t\t'Ungrouping blocks from within a grouping block back into individual blocks within the Editor'\n\t\t\t\t\t) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport {\n\tBlockGroupToolbar,\n\tConvertToGroupButton,\n\tuseConvertToGroupButtonProps,\n};\n"],
-  "mappings": ";AAGA,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,yBAAyB;AAClC,SAAS,WAAW,mBAAmB;AACvC,SAAS,uBAAuB;AAKhC,SAAS,SAAS,wBAAwB;AAC1C,OAAO,kCAAkC;AACzC,OAAO,uBAAuB;AA6C5B,mBAEE,KAFF;AA3CF,SAAS,qBAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAAC;AAClB,GAAI;AACH,QAAM,EAAE,0BAA0B,IAAI,UAAW,gBAAiB;AAClE,QAAM,EAAE,cAAc,IAAI,YAAa,gBAAiB;AACxD,QAAM,mBAAmB,MAAM;AAE9B,UAAM,YAAY;AAAA,MACjB;AAAA,MACA;AAAA,IACD;AACA,QAAK,WAAY;AAChB,oBAAe,WAAW,SAAU;AAAA,IACrC;AAAA,EACD;AAEA,QAAM,qBAAqB,MAAM;AAChC,QAAI,cAAc,gBAAiB,CAAE,EAAE;AACvC,QAAK,CAAE,YAAY,QAAS;AAC3B;AAAA,IACD;AACA,QAAK,WAAY;AAChB,oBAAc;AAAA,QACb,gBAAiB,CAAE,EAAE;AAAA,QACrB,gBAAiB,CAAE,EAAE;AAAA,MACtB;AAAA,IACD;AACA,kBAAe,WAAW,WAAY;AAAA,EACvC;AAEA,MAAK,CAAE,eAAe,CAAE,eAAgB;AACvC,WAAO;AAAA,EACR;AAEA,QAAM,yBAAyB,0BAA0B;AAEzD,SACC,iCACG;AAAA,mBACD;AAAA,MAAC;AAAA;AAAA,QACA,UACC,uBAAuB,SAAS,IAC7B,gBAAgB,QAAS,GAAI,IAC7B;AAAA,QAEJ,SAAU,MAAM;AACf,2BAAiB;AACjB,kBAAQ;AAAA,QACT;AAAA,QAEE,aAAI,SAAS,MAAO;AAAA;AAAA,IACvB;AAAA,IAEC,iBACD;AAAA,MAAC;AAAA;AAAA,QACA,SAAU,MAAM;AACf,6BAAmB;AACnB,kBAAQ;AAAA,QACT;AAAA,QAEE;AAAA,UACD;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["import { MenuItem } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { store as blockEditorStore } from '../../store';\nimport { groupBlocks } from '../../utils/group-blocks';\nimport useConvertToGroupButtonProps from './use-convert-to-group-button-props';\nimport BlockGroupToolbar from './toolbar';\n\nfunction ConvertToGroupButton( {\n\tclientIds,\n\tisGroupable,\n\tisUngroupable,\n\tonUngroup,\n\tblocksSelection,\n\tgroupingBlockName,\n\tonClose = () => {},\n} ) {\n\tconst { getSelectedBlockClientIds } = useSelect( blockEditorStore );\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst onConvertToGroup = () => {\n\t\tconst newBlocks = groupBlocks( blocksSelection, groupingBlockName );\n\t\tif ( newBlocks ) {\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertFromGroup = () => {\n\t\tlet innerBlocks = blocksSelection[ 0 ].innerBlocks;\n\t\tif ( ! innerBlocks.length ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( onUngroup ) {\n\t\t\tinnerBlocks = onUngroup(\n\t\t\t\tblocksSelection[ 0 ].attributes,\n\t\t\t\tblocksSelection[ 0 ].innerBlocks\n\t\t\t);\n\t\t}\n\t\treplaceBlocks( clientIds, innerBlocks );\n\t};\n\n\tif ( ! isGroupable && ! isUngroupable ) {\n\t\treturn null;\n\t}\n\n\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\n\treturn (\n\t\t<>\n\t\t\t{ isGroupable && (\n\t\t\t\t<MenuItem\n\t\t\t\t\tshortcut={\n\t\t\t\t\t\tselectedBlockClientIds.length > 1\n\t\t\t\t\t\t\t? displayShortcut.primary( 'g' )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonConvertToGroup();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ _x( 'Group', 'verb' ) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t\t{ isUngroupable && (\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonConvertFromGroup();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ _x(\n\t\t\t\t\t\t'Ungroup',\n\t\t\t\t\t\t'Ungrouping blocks from within a grouping block back into individual blocks within the Editor'\n\t\t\t\t\t) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport {\n\tBlockGroupToolbar,\n\tConvertToGroupButton,\n\tuseConvertToGroupButtonProps,\n};\n"],
+  "mappings": ";AAAA,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,WAAW,mBAAmB;AACvC,SAAS,uBAAuB;AAChC,SAAS,SAAS,wBAAwB;AAC1C,SAAS,mBAAmB;AAC5B,OAAO,kCAAkC;AACzC,OAAO,uBAAuB;AAyC5B,mBAEE,KAFF;AAvCF,SAAS,qBAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAAC;AAClB,GAAI;AACH,QAAM,EAAE,0BAA0B,IAAI,UAAW,gBAAiB;AAClE,QAAM,EAAE,cAAc,IAAI,YAAa,gBAAiB;AACxD,QAAM,mBAAmB,MAAM;AAC9B,UAAM,YAAY,YAAa,iBAAiB,iBAAkB;AAClE,QAAK,WAAY;AAChB,oBAAe,WAAW,SAAU;AAAA,IACrC;AAAA,EACD;AAEA,QAAM,qBAAqB,MAAM;AAChC,QAAI,cAAc,gBAAiB,CAAE,EAAE;AACvC,QAAK,CAAE,YAAY,QAAS;AAC3B;AAAA,IACD;AACA,QAAK,WAAY;AAChB,oBAAc;AAAA,QACb,gBAAiB,CAAE,EAAE;AAAA,QACrB,gBAAiB,CAAE,EAAE;AAAA,MACtB;AAAA,IACD;AACA,kBAAe,WAAW,WAAY;AAAA,EACvC;AAEA,MAAK,CAAE,eAAe,CAAE,eAAgB;AACvC,WAAO;AAAA,EACR;AAEA,QAAM,yBAAyB,0BAA0B;AAEzD,SACC,iCACG;AAAA,mBACD;AAAA,MAAC;AAAA;AAAA,QACA,UACC,uBAAuB,SAAS,IAC7B,gBAAgB,QAAS,GAAI,IAC7B;AAAA,QAEJ,SAAU,MAAM;AACf,2BAAiB;AACjB,kBAAQ;AAAA,QACT;AAAA,QAEE,aAAI,SAAS,MAAO;AAAA;AAAA,IACvB;AAAA,IAEC,iBACD;AAAA,MAAC;AAAA;AAAA,QACA,SAAU,MAAM;AACf,6BAAmB;AACnB,kBAAQ;AAAA,QACT;AAAA,QAEE;AAAA,UACD;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
   "names": []
 }

package/build-module/components/convert-to-group-buttons/toolbar.mjs CHANGED Viewed

@@ -1,11 +1,12 @@
 // packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
 import { useDispatch, useSelect } from "@wordpress/data";
-import { switchToBlockType, store as blocksStore } from "@wordpress/blocks";
+import { store as blocksStore } from "@wordpress/blocks";
 import { ToolbarButton, ToolbarGroup } from "@wordpress/components";
 import { group, row, stack, grid } from "@wordpress/icons";
 import { _x } from "@wordpress/i18n";
 import { useConvertToGroupButtonProps } from "./index.mjs";
 import { store as blockEditorStore } from "../../store/index.mjs";
+import { groupBlocks } from "../../utils/group-blocks.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var layouts = {
   group: { type: "constrained" },
@@ -31,10 +32,7 @@ function BlockGroupToolbar() {
     [clientIds, groupingBlockName]
   );
   const onConvertToGroup = (layout) => {
-    const newBlocks = switchToBlockType(
-      blocksSelection,
-      groupingBlockName
-    );
+    const newBlocks = groupBlocks(blocksSelection, groupingBlockName);
     if (typeof layout !== "string") {
       layout = "group";
     }

package/build-module/components/convert-to-group-buttons/toolbar.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/convert-to-group-buttons/toolbar.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { switchToBlockType, store as blocksStore } from '@wordpress/blocks';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { group, row, stack, grid } from '@wordpress/icons';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useConvertToGroupButtonProps } from '../convert-to-group-buttons';\nimport { store as blockEditorStore } from '../../store';\n\nconst layouts = {\n\tgroup: { type: 'constrained' },\n\trow: { type: 'flex', flexWrap: 'nowrap' },\n\tstack: { type: 'flex', orientation: 'vertical' },\n\tgrid: { type: 'grid' },\n};\n\nfunction BlockGroupToolbar() {\n\tconst { blocksSelection, clientIds, groupingBlockName, isGroupable } =\n\t\tuseConvertToGroupButtonProps();\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\tconst { canRemove, variations } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canRemoveBlocks } = select( blockEditorStore );\n\t\t\tconst { getBlockVariations } = select( blocksStore );\n\n\t\t\treturn {\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds ),\n\t\t\t\tvariations: getBlockVariations(\n\t\t\t\t\tgroupingBlockName,\n\t\t\t\t\t'transform'\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientIds, groupingBlockName ]\n\t);\n\n\tconst onConvertToGroup = ( layout ) => {\n\t\tconst newBlocks = switchToBlockType(\n\t\t\tblocksSelection,\n\t\t\tgroupingBlockName\n\t\t);\n\n\t\tif ( typeof layout !== 'string' ) {\n\t\t\tlayout = 'group';\n\t\t}\n\n\t\tif ( newBlocks && newBlocks.length > 0 ) {\n\t\t\t// Because the block is not in the store yet we can't use\n\t\t\t// updateBlockAttributes so need to manually update attributes.\n\t\t\tnewBlocks[ 0 ].attributes.layout = layouts[ layout ];\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertToRow = () => onConvertToGroup( 'row' );\n\tconst onConvertToStack = () => onConvertToGroup( 'stack' );\n\tconst onConvertToGrid = () => onConvertToGroup( 'grid' );\n\n\t// Don't render the button if the current selection cannot be grouped.\n\t// A good example is selecting multiple button blocks within a Buttons block:\n\t// The group block is not a valid child of Buttons, so we should not show the button.\n\t// Any blocks that are locked against removal also cannot be grouped.\n\tif ( ! isGroupable || ! canRemove ) {\n\t\treturn null;\n\t}\n\n\tconst canInsertRow = !! variations.find(\n\t\t( { name } ) => name === 'group-row'\n\t);\n\tconst canInsertStack = !! variations.find(\n\t\t( { name } ) => name === 'group-stack'\n\t);\n\tconst canInsertGrid = !! variations.find(\n\t\t( { name } ) => name === 'group-grid'\n\t);\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ group }\n\t\t\t\tlabel={ _x( 'Group', 'action: convert blocks to group' ) }\n\t\t\t\tonClick={ onConvertToGroup }\n\t\t\t/>\n\t\t\t{ canInsertRow && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ row }\n\t\t\t\t\tlabel={ _x( 'Row', 'action: convert blocks to row' ) }\n\t\t\t\t\tonClick={ onConvertToRow }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertStack && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ stack }\n\t\t\t\t\tlabel={ _x( 'Stack', 'action: convert blocks to stack' ) }\n\t\t\t\t\tonClick={ onConvertToStack }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertGrid && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ grid }\n\t\t\t\t\tlabel={ _x( 'Grid', 'action: convert blocks to grid' ) }\n\t\t\t\t\tonClick={ onConvertToGrid }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarGroup>\n\t);\n}\n\nexport default BlockGroupToolbar;\n"],
-  "mappings": ";AAGA,SAAS,aAAa,iBAAiB;AACvC,SAAS,mBAAmB,SAAS,mBAAmB;AACxD,SAAS,eAAe,oBAAoB;AAC5C,SAAS,OAAO,KAAK,OAAO,YAAY;AACxC,SAAS,UAAU;AAKnB,SAAS,oCAAoC;AAC7C,SAAS,SAAS,wBAAwB;AAuExC,SACC,KADD;AArEF,IAAM,UAAU;AAAA,EACf,OAAO,EAAE,MAAM,cAAc;AAAA,EAC7B,KAAK,EAAE,MAAM,QAAQ,UAAU,SAAS;AAAA,EACxC,OAAO,EAAE,MAAM,QAAQ,aAAa,WAAW;AAAA,EAC/C,MAAM,EAAE,MAAM,OAAO;AACtB;AAEA,SAAS,oBAAoB;AAC5B,QAAM,EAAE,iBAAiB,WAAW,mBAAmB,YAAY,IAClE,6BAA6B;AAC9B,QAAM,EAAE,cAAc,IAAI,YAAa,gBAAiB;AAExD,QAAM,EAAE,WAAW,WAAW,IAAI;AAAA,IACjC,CAAE,WAAY;AACb,YAAM,EAAE,gBAAgB,IAAI,OAAQ,gBAAiB;AACrD,YAAM,EAAE,mBAAmB,IAAI,OAAQ,WAAY;AAEnD,aAAO;AAAA,QACN,WAAW,gBAAiB,SAAU;AAAA,QACtC,YAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,WAAW,iBAAkB;AAAA,EAChC;AAEA,QAAM,mBAAmB,CAAE,WAAY;AACtC,UAAM,YAAY;AAAA,MACjB;AAAA,MACA;AAAA,IACD;AAEA,QAAK,OAAO,WAAW,UAAW;AACjC,eAAS;AAAA,IACV;AAEA,QAAK,aAAa,UAAU,SAAS,GAAI;AAGxC,gBAAW,CAAE,EAAE,WAAW,SAAS,QAAS,MAAO;AACnD,oBAAe,WAAW,SAAU;AAAA,IACrC;AAAA,EACD;AAEA,QAAM,iBAAiB,MAAM,iBAAkB,KAAM;AACrD,QAAM,mBAAmB,MAAM,iBAAkB,OAAQ;AACzD,QAAM,kBAAkB,MAAM,iBAAkB,MAAO;AAMvD,MAAK,CAAE,eAAe,CAAE,WAAY;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,eAAe,CAAC,CAAE,WAAW;AAAA,IAClC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AACA,QAAM,iBAAiB,CAAC,CAAE,WAAW;AAAA,IACpC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AACA,QAAM,gBAAgB,CAAC,CAAE,WAAW;AAAA,IACnC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AAEA,SACC,qBAAC,gBACA;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,SAAS,iCAAkC;AAAA,QACvD,SAAU;AAAA;AAAA,IACX;AAAA,IACE,gBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,OAAO,+BAAgC;AAAA,QACnD,SAAU;AAAA;AAAA,IACX;AAAA,IAEC,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,SAAS,iCAAkC;AAAA,QACvD,SAAU;AAAA;AAAA,IACX;AAAA,IAEC,iBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,QAAQ,gCAAiC;AAAA,QACrD,SAAU;AAAA;AAAA,IACX;AAAA,KAEF;AAEF;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["import { useDispatch, useSelect } from '@wordpress/data';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { group, row, stack, grid } from '@wordpress/icons';\nimport { _x } from '@wordpress/i18n';\nimport { useConvertToGroupButtonProps } from '../convert-to-group-buttons';\nimport { store as blockEditorStore } from '../../store';\nimport { groupBlocks } from '../../utils/group-blocks';\n\nconst layouts = {\n\tgroup: { type: 'constrained' },\n\trow: { type: 'flex', flexWrap: 'nowrap' },\n\tstack: { type: 'flex', orientation: 'vertical' },\n\tgrid: { type: 'grid' },\n};\n\nfunction BlockGroupToolbar() {\n\tconst { blocksSelection, clientIds, groupingBlockName, isGroupable } =\n\t\tuseConvertToGroupButtonProps();\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\tconst { canRemove, variations } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canRemoveBlocks } = select( blockEditorStore );\n\t\t\tconst { getBlockVariations } = select( blocksStore );\n\n\t\t\treturn {\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds ),\n\t\t\t\tvariations: getBlockVariations(\n\t\t\t\t\tgroupingBlockName,\n\t\t\t\t\t'transform'\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientIds, groupingBlockName ]\n\t);\n\n\tconst onConvertToGroup = ( layout ) => {\n\t\tconst newBlocks = groupBlocks( blocksSelection, groupingBlockName );\n\n\t\tif ( typeof layout !== 'string' ) {\n\t\t\tlayout = 'group';\n\t\t}\n\n\t\tif ( newBlocks && newBlocks.length > 0 ) {\n\t\t\t// Because the block is not in the store yet we can't use\n\t\t\t// updateBlockAttributes so need to manually update attributes.\n\t\t\tnewBlocks[ 0 ].attributes.layout = layouts[ layout ];\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertToRow = () => onConvertToGroup( 'row' );\n\tconst onConvertToStack = () => onConvertToGroup( 'stack' );\n\tconst onConvertToGrid = () => onConvertToGroup( 'grid' );\n\n\t// Don't render the button if the current selection cannot be grouped.\n\t// A good example is selecting multiple button blocks within a Buttons block:\n\t// The group block is not a valid child of Buttons, so we should not show the button.\n\t// Any blocks that are locked against removal also cannot be grouped.\n\tif ( ! isGroupable || ! canRemove ) {\n\t\treturn null;\n\t}\n\n\tconst canInsertRow = !! variations.find(\n\t\t( { name } ) => name === 'group-row'\n\t);\n\tconst canInsertStack = !! variations.find(\n\t\t( { name } ) => name === 'group-stack'\n\t);\n\tconst canInsertGrid = !! variations.find(\n\t\t( { name } ) => name === 'group-grid'\n\t);\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ group }\n\t\t\t\tlabel={ _x( 'Group', 'action: convert blocks to group' ) }\n\t\t\t\tonClick={ onConvertToGroup }\n\t\t\t/>\n\t\t\t{ canInsertRow && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ row }\n\t\t\t\t\tlabel={ _x( 'Row', 'action: convert blocks to row' ) }\n\t\t\t\t\tonClick={ onConvertToRow }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertStack && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ stack }\n\t\t\t\t\tlabel={ _x( 'Stack', 'action: convert blocks to stack' ) }\n\t\t\t\t\tonClick={ onConvertToStack }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertGrid && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ grid }\n\t\t\t\t\tlabel={ _x( 'Grid', 'action: convert blocks to grid' ) }\n\t\t\t\t\tonClick={ onConvertToGrid }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarGroup>\n\t);\n}\n\nexport default BlockGroupToolbar;\n"],
+  "mappings": ";AAAA,SAAS,aAAa,iBAAiB;AACvC,SAAS,SAAS,mBAAmB;AACrC,SAAS,eAAe,oBAAoB;AAC5C,SAAS,OAAO,KAAK,OAAO,YAAY;AACxC,SAAS,UAAU;AACnB,SAAS,oCAAoC;AAC7C,SAAS,SAAS,wBAAwB;AAC1C,SAAS,mBAAmB;AAoE1B,SACC,KADD;AAlEF,IAAM,UAAU;AAAA,EACf,OAAO,EAAE,MAAM,cAAc;AAAA,EAC7B,KAAK,EAAE,MAAM,QAAQ,UAAU,SAAS;AAAA,EACxC,OAAO,EAAE,MAAM,QAAQ,aAAa,WAAW;AAAA,EAC/C,MAAM,EAAE,MAAM,OAAO;AACtB;AAEA,SAAS,oBAAoB;AAC5B,QAAM,EAAE,iBAAiB,WAAW,mBAAmB,YAAY,IAClE,6BAA6B;AAC9B,QAAM,EAAE,cAAc,IAAI,YAAa,gBAAiB;AAExD,QAAM,EAAE,WAAW,WAAW,IAAI;AAAA,IACjC,CAAE,WAAY;AACb,YAAM,EAAE,gBAAgB,IAAI,OAAQ,gBAAiB;AACrD,YAAM,EAAE,mBAAmB,IAAI,OAAQ,WAAY;AAEnD,aAAO;AAAA,QACN,WAAW,gBAAiB,SAAU;AAAA,QACtC,YAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,WAAW,iBAAkB;AAAA,EAChC;AAEA,QAAM,mBAAmB,CAAE,WAAY;AACtC,UAAM,YAAY,YAAa,iBAAiB,iBAAkB;AAElE,QAAK,OAAO,WAAW,UAAW;AACjC,eAAS;AAAA,IACV;AAEA,QAAK,aAAa,UAAU,SAAS,GAAI;AAGxC,gBAAW,CAAE,EAAE,WAAW,SAAS,QAAS,MAAO;AACnD,oBAAe,WAAW,SAAU;AAAA,IACrC;AAAA,EACD;AAEA,QAAM,iBAAiB,MAAM,iBAAkB,KAAM;AACrD,QAAM,mBAAmB,MAAM,iBAAkB,OAAQ;AACzD,QAAM,kBAAkB,MAAM,iBAAkB,MAAO;AAMvD,MAAK,CAAE,eAAe,CAAE,WAAY;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,eAAe,CAAC,CAAE,WAAW;AAAA,IAClC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AACA,QAAM,iBAAiB,CAAC,CAAE,WAAW;AAAA,IACpC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AACA,QAAM,gBAAgB,CAAC,CAAE,WAAW;AAAA,IACnC,CAAE,EAAE,KAAK,MAAO,SAAS;AAAA,EAC1B;AAEA,SACC,qBAAC,gBACA;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,SAAS,iCAAkC;AAAA,QACvD,SAAU;AAAA;AAAA,IACX;AAAA,IACE,gBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,OAAO,+BAAgC;AAAA,QACnD,SAAU;AAAA;AAAA,IACX;AAAA,IAEC,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,SAAS,iCAAkC;AAAA,QACvD,SAAU;AAAA;AAAA,IACX;AAAA,IAEC,iBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,OAAQ,GAAI,QAAQ,gCAAiC;AAAA,QACrD,SAAU;AAAA;AAAA,IACX;AAAA,KAEF;AAEF;AAEA,IAAO,kBAAQ;",
   "names": []
 }

package/build-module/components/convert-to-group-buttons/use-convert-to-group-button-props.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/convert-to-group-buttons/use-convert-to-group-button-props.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Contains the properties `ConvertToGroupButton` component needs.\n *\n * @typedef {Object} ConvertToGroupButtonProps\n * @property {string[]}  clientIds         An array of the selected client ids.\n * @property {boolean}   isGroupable       Indicates if the selected blocks can be grouped.\n * @property {boolean}   isUngroupable     Indicates if the selected blocks can be ungrouped.\n * @property {WPBlock[]} blocksSelection   An array of the selected blocks.\n * @property {string}    groupingBlockName The name of block used for handling grouping interactions.\n */\n\n/**\n * Returns the properties `ConvertToGroupButton` component needs to work properly.\n * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`\n * should be rendered, to avoid ending up with an empty MenuGroup.\n *\n * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks\n *                                      from the block editor store are used if this is not provided.\n *\n * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.\n */\nexport default function useConvertToGroupButtonProps( selectedClientIds ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlocksByClientId,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tisUngroupable,\n\t\t\t\tisGroupable,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getGroupingBlockName, getBlockType } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst clientIds = selectedClientIds?.length\n\t\t\t\t? selectedClientIds\n\t\t\t\t: getSelectedBlockClientIds();\n\t\t\tconst blocksSelection = getBlocksByClientId( clientIds );\n\t\t\tconst [ firstSelectedBlock ] = blocksSelection;\n\t\t\tconst _isUngroupable =\n\t\t\t\tclientIds.length === 1 && isUngroupable( clientIds[ 0 ] );\n\t\t\treturn {\n\t\t\t\tclientIds,\n\t\t\t\tisGroupable: isGroupable( clientIds ),\n\t\t\t\tisUngroupable: _isUngroupable,\n\t\t\t\tblocksSelection,\n\t\t\t\tgroupingBlockName: getGroupingBlockName(),\n\t\t\t\tonUngroup:\n\t\t\t\t\t_isUngroupable &&\n\t\t\t\t\tgetBlockType( firstSelectedBlock.name )?.transforms\n\t\t\t\t\t\t?.ungroup,\n\t\t\t};\n\t\t},\n\t\t[ selectedClientIds ]\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,SAAS,mBAAmB;AACrC,SAAS,iBAAiB;AAK1B,SAAS,SAAS,wBAAwB;AAuB3B,SAAR,6BAA+C,mBAAoB;AACzE,SAAO;AAAA,IACN,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAC7B,YAAM,EAAE,sBAAsB,aAAa,IAC1C,OAAQ,WAAY;AACrB,YAAM,YAAY,mBAAmB,SAClC,oBACA,0BAA0B;AAC7B,YAAM,kBAAkB,oBAAqB,SAAU;AACvD,YAAM,CAAE,kBAAmB,IAAI;AAC/B,YAAM,iBACL,UAAU,WAAW,KAAK,cAAe,UAAW,CAAE,CAAE;AACzD,aAAO;AAAA,QACN;AAAA,QACA,aAAa,YAAa,SAAU;AAAA,QACpC,eAAe;AAAA,QACf;AAAA,QACA,mBAAmB,qBAAqB;AAAA,QACxC,WACC,kBACA,aAAc,mBAAmB,IAAK,GAAG,YACtC;AAAA,MACL;AAAA,IACD;AAAA,IACA,CAAE,iBAAkB;AAAA,EACrB;AACD;",
+  "sourcesContent": ["import { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Contains the properties `ConvertToGroupButton` component needs.\n *\n * @typedef {Object} ConvertToGroupButtonProps\n * @property {string[]}  clientIds         An array of the selected client ids.\n * @property {boolean}   isGroupable       Indicates if the selected blocks can be grouped.\n * @property {boolean}   isUngroupable     Indicates if the selected blocks can be ungrouped.\n * @property {WPBlock[]} blocksSelection   An array of the selected blocks.\n * @property {string}    groupingBlockName The name of block used for handling grouping interactions.\n */\n\n/**\n * Returns the properties `ConvertToGroupButton` component needs to work properly.\n * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`\n * should be rendered, to avoid ending up with an empty MenuGroup.\n *\n * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks\n *                                      from the block editor store are used if this is not provided.\n *\n * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.\n */\nexport default function useConvertToGroupButtonProps( selectedClientIds ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlocksByClientId,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tisUngroupable,\n\t\t\t\tisGroupable,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getGroupingBlockName, getBlockType } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst clientIds = selectedClientIds?.length\n\t\t\t\t? selectedClientIds\n\t\t\t\t: getSelectedBlockClientIds();\n\t\t\tconst blocksSelection = getBlocksByClientId( clientIds );\n\t\t\tconst [ firstSelectedBlock ] = blocksSelection;\n\t\t\tconst _isUngroupable =\n\t\t\t\tclientIds.length === 1 && isUngroupable( clientIds[ 0 ] );\n\t\t\treturn {\n\t\t\t\tclientIds,\n\t\t\t\tisGroupable: isGroupable( clientIds ),\n\t\t\t\tisUngroupable: _isUngroupable,\n\t\t\t\tblocksSelection,\n\t\t\t\tgroupingBlockName: getGroupingBlockName(),\n\t\t\t\tonUngroup:\n\t\t\t\t\t_isUngroupable &&\n\t\t\t\t\tgetBlockType( firstSelectedBlock.name )?.transforms\n\t\t\t\t\t\t?.ungroup,\n\t\t\t};\n\t\t},\n\t\t[ selectedClientIds ]\n\t);\n}\n"],
+  "mappings": ";AAAA,SAAS,SAAS,mBAAmB;AACrC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,wBAAwB;AAuB3B,SAAR,6BAA+C,mBAAoB;AACzE,SAAO;AAAA,IACN,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAC7B,YAAM,EAAE,sBAAsB,aAAa,IAC1C,OAAQ,WAAY;AACrB,YAAM,YAAY,mBAAmB,SAClC,oBACA,0BAA0B;AAC7B,YAAM,kBAAkB,oBAAqB,SAAU;AACvD,YAAM,CAAE,kBAAmB,IAAI;AAC/B,YAAM,iBACL,UAAU,WAAW,KAAK,cAAe,UAAW,CAAE,CAAE;AACzD,aAAO;AAAA,QACN;AAAA,QACA,aAAa,YAAa,SAAU;AAAA,QACpC,eAAe;AAAA,QACf;AAAA,QACA,mBAAmB,qBAAqB;AAAA,QACxC,WACC,kBACA,aAAc,mBAAmB,IAAK,GAAG,YACtC;AAAA,MACL;AAAA,IACD;AAAA,IACA,CAAE,iBAAkB;AAAA,EACrB;AACD;",
   "names": []
 }

package/build-module/components/copy-handler/index.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/copy-handler/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport useClipboardHandler from '../writing-flow/use-clipboard-handler';\n\n/**\n * @deprecated\n */\nexport const __unstableUseClipboardHandler = () => {\n\tdeprecated( '__unstableUseClipboardHandler', {\n\t\talternative: 'BlockCanvas or WritingFlow',\n\t\tsince: '6.4',\n\t\tversion: '6.7',\n\t} );\n\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\treturn useClipboardHandler();\n};\n\n/**\n * @deprecated\n * @param {Object} props\n */\nexport default function CopyHandler( props ) {\n\tdeprecated( 'CopyHandler', {\n\t\talternative: 'BlockCanvas or WritingFlow',\n\t\tsince: '6.4',\n\t\tversion: '6.7',\n\t} );\n\treturn <div { ...props } ref={ useClipboardHandler() } />;\n}\n"],
-  "mappings": ";AAGA,OAAO,gBAAgB;AAKvB,OAAO,yBAAyB;AAyBxB;AApBD,IAAM,gCAAgC,MAAM;AAClD,aAAY,iCAAiC;AAAA,IAC5C,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AAEF,SAAO,oBAAoB;AAC5B;AAMe,SAAR,YAA8B,OAAQ;AAC5C,aAAY,eAAe;AAAA,IAC1B,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AACF,SAAO,oBAAC,SAAM,GAAG,OAAQ,KAAM,oBAAoB,GAAI;AACxD;",
+  "sourcesContent": ["import deprecated from '@wordpress/deprecated';\nimport useClipboardHandler from '../writing-flow/use-clipboard-handler';\n\n/**\n * @deprecated\n */\nexport const __unstableUseClipboardHandler = () => {\n\tdeprecated( '__unstableUseClipboardHandler', {\n\t\talternative: 'BlockCanvas or WritingFlow',\n\t\tsince: '6.4',\n\t\tversion: '6.7',\n\t} );\n\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\treturn useClipboardHandler();\n};\n\n/**\n * @deprecated\n * @param {Object} props\n */\nexport default function CopyHandler( props ) {\n\tdeprecated( 'CopyHandler', {\n\t\talternative: 'BlockCanvas or WritingFlow',\n\t\tsince: '6.4',\n\t\tversion: '6.7',\n\t} );\n\treturn <div { ...props } ref={ useClipboardHandler() } />;\n}\n"],
+  "mappings": ";AAAA,OAAO,gBAAgB;AACvB,OAAO,yBAAyB;AAyBxB;AApBD,IAAM,gCAAgC,MAAM;AAClD,aAAY,iCAAiC;AAAA,IAC5C,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AAEF,SAAO,oBAAoB;AAC5B;AAMe,SAAR,YAA8B,OAAQ;AAC5C,aAAY,eAAe;AAAA,IAC1B,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACV,CAAE;AACF,SAAO,oBAAC,SAAM,GAAG,OAAQ,KAAM,oBAAoB,GAAI;AACxD;",
   "names": []
 }