npm - @wordpress/block-editor - Versions diffs - 9.0.0 → 9.3.0 - Mend

@wordpress/block-editor 9.0.0 → 9.3.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 (685) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"names":["isString","kebabCase","reduce","upperFirst","useMemo","Component","compose","createHigherOrderComponent","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","getMostReadableColor","useSetting","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","colorMap","colorObject","colorType","constructor","setters","createSetters","colorUtils","bind","state","colorValue","colors","settersAccumulator","colorContext","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","previousState","attributes","newState","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { isString, kebabCase, reduce, upperFirst } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport useSetting from '../use-setting';\n\n/\n Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n \n @param {Array} colorsArray An array of color objects.\n \n @return {Function} The higher order component.\n /\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => (\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />\n\t\t),\n\t\t'withCustomColorPalette'\n\t);\n\n/\n Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n \n @return {Function} The higher order component.\n /\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\t// Some color settings have a special handling for deprecated flags in `useSetting`,\n\t\t\t// so we can't unwrap them by doing const { ... } = useSetting('color')\n\t\t\t// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.\n\t\t\tconst userPalette = useSetting( 'color.palette.custom' );\n\t\t\tconst themePalette = useSetting( 'color.palette.theme' );\n\t\t\tconst defaultPalette = useSetting( 'color.palette.default' );\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette \|\| [] ),\n\t\t\t\t\t...( themePalette \|\| [] ),\n\t\t\t\t\t...( defaultPalette \|\| [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/\n Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n \n @param {Array} colorTypes An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n \n @return {WPComponent} The component that can be used as a HOC.\n /\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = reduce(\n\t\tcolorTypes,\n\t\t( colorObject, colorType ) => {\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\t...( isString( colorType )\n\t\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t\t: colorType ),\n\t\t\t};\n\t\t},\n\t\t{}\n\t);\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor: this.getMostReadableColor.bind(\n\t\t\t\t\t\t\tthis\n\t\t\t\t\t\t),\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 reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName = upperFirst(\n\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t);\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 reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t( newState, colorContext, colorAttributeName ) => {\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[\n\t\t\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t\t\t] = previousColorObject;\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"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"names":["isString","kebabCase","reduce","upperFirst","useMemo","Component","compose","createHigherOrderComponent","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","getMostReadableColor","useSetting","withCustomColorPalette","colorsArray","WrappedComponent","props","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","colorMap","colorObject","colorType","constructor","setters","createSetters","colorUtils","bind","state","colorValue","colors","settersAccumulator","colorContext","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","previousState","attributes","newState","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { isString, kebabCase, reduce, upperFirst } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport useSetting from '../use-setting';\n\n/\n Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n \n @param {Array} colorsArray An array of color objects.\n \n @return {Function} The higher order component.\n /\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) =>\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />,\n\t\t'withCustomColorPalette'\n\t);\n\n/\n Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n \n @return {Function} The higher order component.\n /\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\t// Some color settings have a special handling for deprecated flags in `useSetting`,\n\t\t\t// so we can't unwrap them by doing const { ... } = useSetting('color')\n\t\t\t// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.\n\t\t\tconst userPalette = useSetting( 'color.palette.custom' );\n\t\t\tconst themePalette = useSetting( 'color.palette.theme' );\n\t\t\tconst defaultPalette = useSetting( 'color.palette.default' );\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette \|\| [] ),\n\t\t\t\t\t...( themePalette \|\| [] ),\n\t\t\t\t\t...( defaultPalette \|\| [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/\n Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n \n @param {Array} colorTypes An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n \n @return {WPComponent} The component that can be used as a HOC.\n /\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = reduce(\n\t\tcolorTypes,\n\t\t( colorObject, colorType ) => {\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\t...( isString( colorType )\n\t\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t\t: colorType ),\n\t\t\t};\n\t\t},\n\t\t{}\n\t);\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\tcolorAttributeName\n\t\t\t\t\t\t) => {\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 reduce(\n\t\t\t\t\t\tcolorMap,\n\t\t\t\t\t\t( newState, colorContext, colorAttributeName ) => {\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"]}

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 /**
  * External dependencies
@@ -9,67 +9,148 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
-import { __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, FlexItem, ColorIndicator, Dropdown } from '@wordpress/components';
+import { Button, ColorIndicator, Dropdown, FlexItem, __experimentalHStack as HStack, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import ColorGradientControl from './control';
-export default function ColorGradientSettingsDropdown(_ref) {
+import ColorGradientControl from './control'; // When the `ColorGradientSettingsDropdown` controls are being rendered to a
+// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
+const WithToolsPanelItem = _ref => {
+  let {
+    setting,
+    children,
+    panelId,
+    ...props
+  } = _ref;
+  const clearValue = () => {
+    if (setting.colorValue) {
+      setting.onColorChange();
+    } else if (setting.gradientValue) {
+      setting.onGradientChange();
+    }
+  };
+  return createElement(ToolsPanelItem, _extends({
+    hasValue: () => {
+      return !!setting.colorValue || !!setting.gradientValue;
+    },
+    label: setting.label,
+    onDeselect: clearValue,
+    isShownByDefault: setting.isShownByDefault !== undefined ? setting.isShownByDefault : true
+  }, props, {
+    className: "block-editor-tools-panel-color-gradient-settings__item",
+    panelId: panelId // Pass resetAllFilter if supplied due to rendering via SlotFill
+    // into parent ToolsPanel.
+    ,
+    resetAllFilter: setting.resetAllFilter
+  }), children);
+};
+const LabeledColorIndicator = _ref2 => {
+  let {
+    colorValue,
+    label
+  } = _ref2;
+  return createElement(HStack, {
+    justify: "flex-start"
+  }, createElement(ColorIndicator, {
+    className: "block-editor-panel-color-gradient-settings__color-indicator",
+    colorValue: colorValue
+  }), createElement(FlexItem, null, label));
+}; // Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
+// or as a `Button` if it isn't e.g. the controls are being rendered in
+// a `ToolsPanel`.
+const renderToggle = settings => _ref3 => {
+  let {
+    onToggle,
+    isOpen
+  } = _ref3;
+  const {
+    colorValue,
+    label
+  } = settings;
+  const toggleProps = {
+    onClick: onToggle,
+    className: classnames('block-editor-panel-color-gradient-settings__dropdown', {
+      'is-open': isOpen
+    }),
+    'aria-expanded': isOpen
+  };
+  return createElement(Button, toggleProps, createElement(LabeledColorIndicator, {
+    colorValue: colorValue,
+    label: label
+  }));
+}; // Renders a collection of color controls as dropdowns. Depending upon the
+// context in which these dropdowns are being rendered, they may be wrapped
+// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,
+// the may be individually wrapped in a `ToolsPanelItem` with the toggle as
+// a regular `Button`.
+//
+// For more context see: https://github.com/WordPress/gutenberg/pull/40084
+export default function ColorGradientSettingsDropdown(_ref4) {
   let {
     colors,
-    gradients,
     disableCustomColors,
     disableCustomGradients,
+    enableAlpha,
+    gradients,
+    settings,
     __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar,
-    enableAlpha,
-    settings
-  } = _ref;
-  let dropdownPosition;
+    ...props
+  } = _ref4;
+  let popoverProps;
   if (__experimentalIsRenderedInSidebar) {
-    dropdownPosition = 'bottom left';
+    popoverProps = {
+      placement: 'left-start',
+      offset: 36
+    };
   }
-  return createElement(ItemGroup, {
-    isBordered: true,
-    isSeparated: true,
-    className: "block-editor-panel-color-gradient-settings__item-group"
-  }, settings.map((setting, index) => setting && createElement(Dropdown, {
-    key: index,
-    position: dropdownPosition,
-    className: "block-editor-panel-color-gradient-settings__dropdown",
-    contentClassName: "block-editor-panel-color-gradient-settings__dropdown-content",
-    renderToggle: _ref2 => {
-      var _setting$gradientValu;
+  return createElement(Fragment, null, settings.map((setting, index) => {
+    var _setting$gradientValu;
-      let {
-        isOpen,
-        onToggle
-      } = _ref2;
-      return createElement(Item, {
-        onClick: onToggle,
-        className: classnames('block-editor-panel-color-gradient-settings__item', {
-          'is-open': isOpen
-        })
-      }, createElement(HStack, {
-        justify: "flex-start"
-      }, createElement(ColorIndicator, {
-        className: "block-editor-panel-color-gradient-settings__color-indicator",
-        colorValue: (_setting$gradientValu = setting.gradientValue) !== null && _setting$gradientValu !== void 0 ? _setting$gradientValu : setting.colorValue
-      }), createElement(FlexItem, null, setting.label)));
-    },
-    renderContent: () => createElement(ColorGradientControl, _extends({
-      showTitle: false,
+    const controlProps = {
+      clearable: false,
+      colorValue: setting.colorValue,
       colors,
-      gradients,
       disableCustomColors,
       disableCustomGradients,
+      enableAlpha,
+      gradientValue: setting.gradientValue,
+      gradients,
+      label: setting.label,
+      onColorChange: setting.onColorChange,
+      onGradientChange: setting.onGradientChange,
+      showTitle: false,
       __experimentalHasMultipleOrigins,
       __experimentalIsRenderedInSidebar,
-      enableAlpha
-    }, setting))
-  })));
+      ...setting
+    };
+    const toggleSettings = {
+      colorValue: (_setting$gradientValu = setting.gradientValue) !== null && _setting$gradientValu !== void 0 ? _setting$gradientValu : setting.colorValue,
+      label: setting.label
+    };
+    return setting && // If not in an `ItemGroup` wrap the dropdown in a
+    // `ToolsPanelItem`
+    createElement(WithToolsPanelItem, _extends({
+      key: index,
+      setting: setting
+    }, props), createElement(Dropdown, {
+      popoverProps: popoverProps,
+      className: "block-editor-tools-panel-color-gradient-settings__dropdown",
+      contentClassName: "block-editor-panel-color-gradient-settings__dropdown-content",
+      renderToggle: renderToggle(toggleSettings),
+      renderContent: () => createElement(ColorGradientControl, controlProps)
+    }));
+  }));
 }
 //# sourceMappingURL=dropdown.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"names":["classnames","~~__experimentalItemGroup~~","~~ItemGroup~~","~~__experimentalItem~~","~~Item~~","__experimentalHStack","HStack","~~FlexItem~~","~~ColorIndicator~~","~~Dropdown~~","~~ColorGradientControl~~","~~ColorGradientSettingsDropdown~~","~~colors~~","~~gradients~~","disableCustomColors","disableCustomGradients","~~__experimentalHasMultipleOrigins~~","~~__experimentalIsRenderedInSidebar~~","~~enableAlpha~~","~~settings~~","~~dropdownPosition~~","~~map~~","~~setting~~","~~index~~","~~isOpen~~","~~onToggle~~","~~gradientValue~~","~~colorValue~~","~~label~~"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SACCC,~~uBAAuB~~,~~IAAIC~~,~~SAD5B~~,~~EAECC~~,~~kBAAkB~~,~~IAAIC~~,~~IAFvB~~,~~EAGCC~~,oBAAoB,IAAIC,~~MAHzB~~,~~EAICC~~,~~QAJD~~,~~EAKCC~~,~~cALD~~,~~EAMCC,QAND,~~QAOO,uBAPP;AASA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,WAAjC;~~AAEA~~,~~eAAe~~,~~SAASC~~,~~6BAAT~~,~~OASX~~;AAAA,~~MATmD~~;~~AACtDC~~,IAAAA,~~MADsD~~;~~AAEtDC~~,IAAAA,~~SAFsD~~;~~AAGtDC~~,IAAAA,~~mBAHsD~~;~~AAItDC~~,~~IAAAA,sBAJsD~~;~~AAKtDC~~,~~IAAAA~~,~~gCALsD;AAMtDC~~,~~IAAAA~~,~~iCANsD~~;~~AAOtDC~~,~~IAAAA~~,~~WAPsD;AAQtDC~~,~~IAAAA;AARsD~~,~~GASnD~~;~~AACH~~,~~MAAIC~~,~~gBAAJ;;~~AACA,~~MAAKH~~,~~iCAAL~~,~~EAAyC~~;~~AACxCG~~,~~IAAAA~~,~~gBAAgB~~,~~GAAG~~,~~aAAnB~~;AACA;;~~AAED~~,SACC,cAAC,~~SAAD~~;AACC,IAAA,~~UAAU~~,~~MADX~~;~~AAEC~~,IAAA,~~WAAW~~,~~MAFZ~~;~~AAGC~~,IAAA,~~SAAS~~,~~EAAC~~;~~AAHX~~,~~KAKGD~~,~~QAAQ~~,~~CAACE~~,~~GAAT~~,~~CACD~~,~~CAAEC~~,~~OAAF~~,~~EAAWC~~,~~KAAX~~,~~KACCD~~,OAAO,~~IACN~~,~~cAAC~~,~~QAAD~~;~~AACC~~,IAAA,GAAG,~~EAAGC~~,~~KADP~~;~~AAEC~~,~~IAAA~~,~~QAAQ~~,~~EAAGH~~,~~gBAFZ~~;~~AAGC~~,IAAA,~~SAAS~~,EAAC,~~sDAHX~~;~~AAIC~~,IAAA,~~gBAAgB~~,EAAC,~~8DAJlB~~;~~AAKC~~,IAAA,YAAY,~~EAAG~~,SAA4B;AAAA~~;;AAAA~~,~~UAA1B~~;~~AAAEI~~,~~QAAAA~~,~~MAAF~~;~~AAAUC~~,~~QAAAA~~;~~AAAV~~,~~OAA0B~~;~~AAC1C~~,~~aACC~~,~~cAAC~~,~~IAAD~~;~~AACC~~,~~QAAA~~,OAAO,~~EAAGA~~,~~QADX~~;~~AAEC~~,~~QAAA~~,SAAS,~~EAAGzB~~,UAAU,~~CACrB~~,~~kDADqB~~,~~EAErB~~;AAAE,~~qBAAWwB~~;AAAb,~~SAFqB~~;~~AAFvB~~,~~SAOC~~,cAAC,MAAD;~~AAAQ~~,~~QAAA~~,~~OAAO~~,~~EAAC~~;~~AAAhB~~,~~SACC~~,~~cAAC~~,~~cAAD~~;~~AACC~~,~~QAAA~~,SAAS,~~EAAC~~,~~6DADX~~;~~AAEC~~,~~QAAA~~,~~UAAU~~,~~2BACTF~~,~~OAAO~~,~~CAACI~~,~~aADC~~,~~yEAETJ~~,~~OAAO~~,~~CAACK~~;~~AAJV~~,~~QADD~~,~~EAQC~~,~~cAAC~~,~~QAAD~~,~~QACGL~~,OAAO,~~CAACM~~,~~KADX~~,~~CARD~~,~~CAPD~~,~~CADD~~;~~AAsBA~~,~~KA5BF~~;~~AA6BC~~,~~IAAA~~,aAAa,~~EAAG~~,~~MACf~~,~~cAAC~~,~~oBAAD~~;~~AACC~~,~~MAAA~~,~~SAAS~~,~~EAAG~~,~~KADb~~;~~AAGEhB~~,MAAAA,~~MAHF~~;~~AAIEC~~,MAAAA,~~SAJF~~;~~AAKEC~~,MAAAA,~~mBALF~~;~~AAMEC~~,MAAAA,~~sBANF~~;~~AAOEC~~,MAAAA,~~gCAPF~~;~~AAQEC~~,MAAAA,~~iCARF~~;~~AASEC~~,MAAAA;~~AATF~~,~~OAUKI~~,~~OAVL~~;~~AA9BF~~,~~IAHD~~,~~CALH~~,CADD;~~AA0DA~~","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport {\n\~~t__experimentalItemGroup as ItemGroup~~,\n\~~t__experimentalItem as Item~~,\n\~~t__experimentalHStack as HStack~~,\n\tFlexItem,\n\~~tColorIndicator~~,\n\~~tDropdown~~,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport ColorGradientControl from './control';\n\~~nexport~~ ~~default~~ ~~function~~ ColorGradientSettingsDropdown( {~~\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n\tsettings,\n~~} ) {\n\~~tlet~~ ~~dropdownPosition;\n\tif~~ ( ~~__experimentalIsRenderedInSidebar~~ ) {\n\t\~~tdropdownPosition~~ = ~~'bottom~~ ~~left';\~~n\t}\n\~~n\treturn~~ (\n\t\t~~<ItemGroup~~\n\t\t\~~tisBordered\~~n\t\t\~~tisSeparated\~~n\t\t\~~tclassName=\"block-editor-panel-color-gradient-settings__item-group\"\~~n\t\t>\n\t\t\t{ ~~settings.map~~(\n\t\t\t\t( setting, ~~index~~ ) ~~=>\~~n\t\t\t~~\t\tsetting~~ ~~&& (~~\n\t\t\t\t\t\t~~<Dropdown~~\n\t\t\t\t\t\t\~~tkey={~~ ~~index~~ }\n\t\t\t\t\t~~\t\tposition={~~ ~~dropdownPosition }~~\n\t\t\t\t\t\t\~~tclassName=\"block-editor-panel-color-gradient-settings__dropdown~~\"\n\t\t\t\t\t\t\~~tcontentClassName~~=\"block-editor-panel-color-gradient-~~settings__dropdown-content~~\"\n\t\t\t\t\t\t~~\trenderToggle={~~ ( { ~~isOpen,~~ ~~onToggle~~ } ) => {\n\t\t\t\t\t\~~t\t\treturn~~ (\n\t\t\t\t\t\t\t\t\t<~~Item~~\n\t\t\t\t\t\t\t\t\t\~~tonClick~~={ ~~onToggle~~ }\n\t\t\t\t\t\t\t\t\t\~~tclassName=~~{ ~~classnames(~~\n\t\t\t\t\t\t\t\t\t\t\t'block-editor-panel-color-gradient-~~settings__item~~',\n\t\t\t\t~~\t\t\t\t\t\t\t~~{ 'is-open': isOpen }\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\~~t\t>\~~n\t\t\t\t\t\t\t\t\t\~~t<HStack~~ ~~justify=\"flex-start~~\~~">\~~n\t\t\t\t\t\t\t\t\t\t\~~t<ColorIndicator~~\n\t\t\t\t\t\t\t\t\t\t\t\~~tclassName=\"block-editor-panel-color-gradient-settings__color-indicator~~\"\n\t\t\t\t\t\t\t\t\t\t\~~t\tcolorValue={\~~n\t\t\t\t\t\t\t\t\t\t\t\t~~\tsetting~~.~~gradientValue~~ ~~??\~~n\t\t\t\t\t\t\t\t\t\t\t\t\~~tsetting~~.colorValue\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\~~t\t/>\~~n\t\t\t\t\t\t\t\t\t\~~t\t<FlexItem>\~~n\t\t\t\t\t\t\t\t\t\~~t\t\t{~~ setting.~~label }\~~n\t\t\t\t\t\t\t\t\t\t\t~~</FlexItem>\n~~\t\t\t\t\t\t\t\t\t\t~~</HStack>\~~n\t\t\t\t\t\t\t\t\~~t</Item>\~~n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t~~\trenderContent={~~ () => (\n\t\t\t\t\t\t\t\t~~<ColorGradientControl~~\n\t\t\t\t\t\t\t\t\~~tshowTitle~~={ ~~false~~ }\n\t\t\t\t\t\t\~~t\t\t~~{ ~~...{~~\n\t\t\t\t\t\t\t\t\t\~~tcolors,\n~~\t\t\t\t\t\t\t\t\t\~~tgradients,\~~n\t\t\t\t\t\t\t\t\~~t\tdisableCustomColors,\~~n\t\t\t\t\t\t\t\t\t\~~tdisableCustomGradients,\~~n\t\t\t\t\t\t\t\t\t\~~t__experimentalHasMultipleOrigins,\~~n\t\t\t\t\t\t\t\t\~~t\t__experimentalIsRenderedInSidebar,\~~n\t\t\t\t\t\t\t\t\~~t\tenableAlpha,\~~n\t\t\t\t\t\t\t\t\t\t...~~setting,\~~n\t\t\t\t\t\t\t\t~~\t}~~ }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t~~\t) }\~~n\t\t\t\t\t\~~t/>\~~n\t\t\t\t\t)\n\t\t\t) }\n\t\t~~</ItemGroup>\~~n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"names":["classnames","Button","ColorIndicator","Dropdown","FlexItem","__experimentalHStack","HStack","__experimentalToolsPanelItem","ToolsPanelItem","ColorGradientControl","WithToolsPanelItem","setting","children","panelId","props","clearValue","colorValue","onColorChange","gradientValue","onGradientChange","label","isShownByDefault","undefined","resetAllFilter","LabeledColorIndicator","renderToggle","settings","onToggle","isOpen","toggleProps","onClick","className","ColorGradientSettingsDropdown","colors","disableCustomColors","disableCustomGradients","enableAlpha","gradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","popoverProps","placement","offset","map","index","controlProps","clearable","showTitle","toggleSettings"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport ColorGradientControl from './control';\n\n// When the `ColorGradientSettingsDropdown` controls are being rendered to a\n// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.\nconst WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {\n\tconst clearValue = () => {\n\t\tif ( setting.colorValue ) {\n\t\t\tsetting.onColorChange();\n\t\t} else if ( setting.gradientValue ) {\n\t\t\tsetting.onGradientChange();\n\t\t}\n\t};\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => {\n\t\t\t\treturn !! setting.colorValue \|\| !! setting.gradientValue;\n\t\t\t} }\n\t\t\tlabel={ setting.label }\n\t\t\tonDeselect={ clearValue }\n\t\t\tisShownByDefault={\n\t\t\t\tsetting.isShownByDefault !== undefined\n\t\t\t\t\t? setting.isShownByDefault\n\t\t\t\t\t: true\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t\tpanelId={ panelId }\n\t\t\t// Pass resetAllFilter if supplied due to rendering via SlotFill\n\t\t\t// into parent ToolsPanel.\n\t\t\tresetAllFilter={ setting.resetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanelItem>\n\t);\n};\n\nconst LabeledColorIndicator = ( { colorValue, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ColorIndicator\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\tcolorValue={ colorValue }\n\t\t/>\n\t\t<FlexItem>{ label }</FlexItem>\n\t</HStack>\n);\n\n// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`\n// or as a `Button` if it isn't e.g. the controls are being rendered in\n// a `ToolsPanel`.\nconst renderToggle =\n\t( settings ) =>\n\t( { onToggle, isOpen } ) => {\n\t\tconst { colorValue, label } = settings;\n\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t{ 'is-open': isOpen }\n\t\t\t),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<LabeledColorIndicator\n\t\t\t\t\tcolorValue={ colorValue }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t};\n\n// Renders a collection of color controls as dropdowns. Depending upon the\n// context in which these dropdowns are being rendered, they may be wrapped\n// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,\n// the may be individually wrapped in a `ToolsPanelItem` with the toggle as\n// a regular `Button`.\n//\n// For more context see: https://github.com/WordPress/gutenberg/pull/40084\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tenableAlpha,\n\tgradients,\n\tsettings,\n\t__experimentalHasMultipleOrigins,\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};\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__experimentalHasMultipleOrigins,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t...setting,\n\t\t\t\t};\n\t\t\t\tconst toggleSettings = {\n\t\t\t\t\tcolorValue: setting.gradientValue ?? setting.colorValue,\n\t\t\t\t\tlabel: setting.label,\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t// If not in an `ItemGroup` wrap the dropdown in a\n\t\t\t\t\t\t// `ToolsPanelItem`\n\t\t\t\t\t\t<WithToolsPanelItem\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tsetting={ setting }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\t\tcontentClassName=\"block-editor-panel-color-gradient-settings__dropdown-content\"\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<ColorGradientControl { ...controlProps } />\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"]}

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

@@ -10,65 +10,19 @@ import { every, isEmpty } from 'lodash';
  * WordPress dependencies
  */
-import { __experimentalSpacer as Spacer, ColorIndicator, PanelBody } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __experimentalSpacer as Spacer, __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+import { useRegistry } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import ColorGradientSettingsDropdown from './dropdown';
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
-import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients'; // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = __('(%s: color %s)'); // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const gradientIndicatorAriaLabel = __('(%s: gradient %s)');
+import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
-const Indicators = _ref => {
-  let {
-    colors,
-    gradients,
-    settings
-  } = _ref;
-  return settings.map((_ref2, index) => {
-    let {
-      colorValue,
-      gradientValue,
-      label,
-      colors: availableColors,
-      gradients: availableGradients
-    } = _ref2;
-    if (!colorValue && !gradientValue) {
-      return null;
-    }
-    let ariaLabel;
-    if (colorValue) {
-      const colorObject = getColorObjectByColorValue(availableColors || colors, colorValue);
-      ariaLabel = sprintf(colorIndicatorAriaLabel, label.toLowerCase(), colorObject && colorObject.name || colorValue);
-    } else {
-      const gradientObject = __experimentalGetGradientObjectByGradientValue(availableGradients || gradients, colorValue);
-      ariaLabel = sprintf(gradientIndicatorAriaLabel, label.toLowerCase(), gradientObject && gradientObject.name || gradientValue);
-    }
-    return createElement(ColorIndicator, {
-      key: index,
-      colorValue: colorValue || gradientValue,
-      "aria-label": ariaLabel
-    });
-  });
-};
-export const PanelColorGradientSettingsInner = _ref3 => {
+export const PanelColorGradientSettingsInner = _ref => {
   let {
     className,
     colors,
@@ -81,26 +35,44 @@ export const PanelColorGradientSettingsInner = _ref3 => {
     showTitle = true,
     __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar,
-    enableAlpha,
-    ...props
-  } = _ref3;
+    enableAlpha
+  } = _ref;
+  const panelId = useInstanceId(PanelColorGradientSettingsInner);
+  const {
+    batch
+  } = useRegistry();
   if (isEmpty(colors) && isEmpty(gradients) && disableCustomColors && disableCustomGradients && every(settings, setting => isEmpty(setting.colors) && isEmpty(setting.gradients) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
     return null;
   }
-  const titleElement = createElement("span", {
-    className: "block-editor-panel-color-gradient-settings__panel-title"
-  }, title, createElement(Indicators, {
-    colors: colors,
-    gradients: gradients,
-    settings: settings
-  }));
-  return createElement(PanelBody, _extends({
+  return createElement(ToolsPanel, {
     className: classnames('block-editor-panel-color-gradient-settings', className),
-    title: showTitle ? titleElement : undefined
-  }, props), createElement(ColorGradientSettingsDropdown, {
+    label: showTitle ? title : undefined,
+    resetAll: () => {
+      batch(() => {
+        settings.forEach(_ref2 => {
+          let {
+            colorValue,
+            gradientValue,
+            onColorChange,
+            onGradientChange
+          } = _ref2;
+          if (colorValue) {
+            onColorChange();
+          } else if (gradientValue) {
+            onGradientChange();
+          }
+        });
+      });
+    },
+    panelId: panelId,
+    __experimentalFirstVisibleItemClass: "first",
+    __experimentalLastVisibleItemClass: "last"
+  }, createElement(ColorGradientSettingsDropdown, {
     settings: settings,
+    panelId: panelId,
     colors,
     gradients,
     disableCustomColors,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["classnames","every","isEmpty","__experimentalSpacer","Spacer","ColorIndicator","PanelBody","sprintf","__","ColorGradientSettingsDropdown","getColorObjectByColorValue","__experimentalGetGradientObjectByGradientValue","useSetting","useCommonSingleMultipleSelects","useMultipleOriginColorsAndGradients","colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","index","colorValue","gradientValue","label","availableColors","availableGradients","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","showTitle","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","enableAlpha","props","setting","undefined","titleElement","PanelColorGradientSettingsSingleSelect","colorGradientSettings","PanelColorGradientSettingsMultipleSelect","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport {\n\t__experimentalSpacer as Spacer,\n\tColorIndicator,\n\tPanelBody,\n} from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport ColorGradientSettingsDropdown from './dropdown';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\nimport useCommonSingleMultipleSelects from './use-common-single-multiple-selects';\nimport useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(%s: color %s)' );\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst Indicators = ( { colors, gradients, settings } ) => {\n\treturn settings.map(\n\t\t(\n\t\t\t{\n\t\t\t\tcolorValue,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t\tcolors: availableColors,\n\t\t\t\tgradients: availableGradients,\n\t\t\t},\n\t\t\tindex\n\t\t) => {\n\t\t\tif ( ! colorValue && ! gradientValue ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tlet ariaLabel;\n\t\t\tif ( colorValue ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\tavailableColors \|\| colors,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tcolorIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( colorObject && colorObject.name ) \|\| colorValue\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\t\t\tavailableGradients \|\| gradients,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tgradientIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( gradientObject && gradientObject.name ) \|\| gradientValue\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tcolorValue={ colorValue \|\| gradientValue }\n\t\t\t\t\taria-label={ ariaLabel }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\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__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n\t...props\n} ) => {\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\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\tconst titleElement = (\n\t\t<span className=\"block-editor-panel-color-gradient-settings__panel-title\">\n\t\t\t{ title }\n\t\t\t<Indicators\n\t\t\t\tcolors={ colors }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tsettings={ settings }\n\t\t\t/>\n\t\t</span>\n\t);\n\n\treturn (\n\t\t<PanelBody\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttitle={ showTitle ? titleElement : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<ColorGradientSettingsDropdown\n\t\t\t\tsettings={ settings }\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__experimentalHasMultipleOrigins,\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</PanelBody>\n\t);\n};\n\nconst PanelColorGradientSettingsSingleSelect = ( props ) => {\n\tconst colorGradientSettings = useCommonSingleMultipleSelects();\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettingsMultipleSelect = ( props ) => {\n\tconst colorGradientSettings = useMultipleOriginColorsAndGradients();\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\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\tif ( props.__experimentalHasMultipleOrigins ) {\n\t\treturn <PanelColorGradientSettingsMultipleSelect { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSingleSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["classnames","every","isEmpty","__experimentalSpacer","Spacer","__experimentalToolsPanel","ToolsPanel","useRegistry","useInstanceId","ColorGradientSettingsDropdown","useSetting","useCommonSingleMultipleSelects","useMultipleOriginColorsAndGradients","colorsAndGradientKeys","PanelColorGradientSettingsInner","className","colors","gradients","disableCustomColors","disableCustomGradients","children","settings","title","showTitle","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","enableAlpha","panelId","batch","setting","undefined","forEach","colorValue","gradientValue","onColorChange","onGradientChange","PanelColorGradientSettingsSingleSelect","props","colorGradientSettings","PanelColorGradientSettingsMultipleSelect","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\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 useSetting from '../use-setting';\nimport useCommonSingleMultipleSelects from './use-common-single-multiple-selects';\nimport useMultipleOriginColorsAndGradients 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__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n} ) => {\n\tconst panelId = useInstanceId( PanelColorGradientSettingsInner );\n\tconst { batch } = useRegistry();\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\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={ classnames(\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__experimentalHasMultipleOrigins,\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 PanelColorGradientSettingsSingleSelect = ( props ) => {\n\tconst colorGradientSettings = useCommonSingleMultipleSelects();\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettingsMultipleSelect = ( props ) => {\n\tconst colorGradientSettings = useMultipleOriginColorsAndGradients();\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\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\tif ( props.__experimentalHasMultipleOrigins ) {\n\t\treturn <PanelColorGradientSettingsMultipleSelect { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSingleSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}

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

@@ -4,7 +4,7 @@ import { createElement } from "@wordpress/element";
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { switchToBlockType } from '@wordpress/blocks';
+import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { group, row, stack } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
@@ -37,15 +37,20 @@ function BlockGroupToolbar() {
     replaceBlocks
   } = useDispatch(blockEditorStore);
   const {
-    canRemove
+    canRemove,
+    variations
   } = useSelect(select => {
     const {
       canRemoveBlocks
     } = select(blockEditorStore);
+    const {
+      getBlockVariations
+    } = select(blocksStore);
     return {
-      canRemove: canRemoveBlocks(clientIds)
+      canRemove: canRemoveBlocks(clientIds),
+      variations: getBlockVariations(groupingBlockName, 'transform')
     };
-  }, [clientIds]);
+  }, [clientIds, groupingBlockName]);
   const onConvertToGroup = function () {
     let layout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'group';
@@ -71,15 +76,27 @@ function BlockGroupToolbar() {
     return null;
   }
+  const canInsertRow = !!variations.find(_ref => {
+    let {
+      name
+    } = _ref;
+    return name === 'group-row';
+  });
+  const canInsertStack = !!variations.find(_ref2 => {
+    let {
+      name
+    } = _ref2;
+    return name === 'group-stack';
+  });
   return createElement(ToolbarGroup, null, createElement(ToolbarButton, {
     icon: group,
     label: _x('Group', 'verb'),
     onClick: onConvertToGroup
-  }), createElement(ToolbarButton, {
+  }), canInsertRow && createElement(ToolbarButton, {
     icon: row,
     label: _x('Row', 'single horizontal line'),
     onClick: onConvertToRow
-  }), createElement(ToolbarButton, {
+  }), canInsertStack && createElement(ToolbarButton, {
     icon: stack,
     label: _x('Stack', 'verb'),
     onClick: onConvertToStack

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/block-editor/src/components/convert-to-group-buttons/toolbar.js"],"names":["useDispatch","useSelect","switchToBlockType","ToolbarButton","ToolbarGroup","group","row","stack","_x","useConvertToGroupButtonProps","~~store","~~blockEditorStore","layouts","undefined","type","flexWrap","orientation","BlockGroupToolbar","blocksSelection","clientIds","groupingBlockName","isGroupable","replaceBlocks","canRemove","select","canRemoveBlocks","onConvertToGroup","layout","newBlocks","length","attributes","onConvertToRow","onConvertToStack"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAT,EAAsBC,SAAtB,QAAuC,iBAAvC;AACA,SAASC,iBAAT,~~QAAkC~~,~~mBAAlC~~;AACA,SAASC,aAAT,EAAwBC,YAAxB,QAA4C,uBAA5C;AACA,SAASC,KAAT,EAAgBC,GAAhB,EAAqBC,KAArB,QAAkC,kBAAlC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,4BAAT,QAA6C,6BAA7C;AACA,~~SAASC~~,KAAK,~~IAAIC~~,gBAAlB,QAA0C,aAA1C;AAEA,MAAMC,OAAO,GAAG;~~AACfP~~,EAAAA,KAAK,~~EAAEQ~~,SADQ;~~AAEfP~~,EAAAA,GAAG,EAAE;~~AAAEQ~~,IAAAA,IAAI,EAAE,MAAR;AAAgBC,IAAAA,QAAQ,EAAE;AAA1B,GAFU;~~AAGfR~~,EAAAA,KAAK,EAAE;~~AAAEO~~,IAAAA,IAAI,EAAE,MAAR;AAAgBE,IAAAA,WAAW,EAAE;AAA7B;AAHQ,CAAhB;;AAMA,SAASC,iBAAT,GAA6B;AAC5B,QAAM;~~AACLC~~,IAAAA,~~eADK~~;~~AAELC~~,IAAAA,~~SAFK~~;~~AAGLC~~,IAAAA,~~iBAHK~~;~~AAILC~~,IAAAA;~~AAJK~~,~~MAKFZ~~,4BAA4B,~~EALhC~~;~~AAMA~~,QAAM;~~AAAEa~~,IAAAA;AAAF,~~MAAoBtB~~,WAAW,~~CAAEW~~,gBAAF,CAArC;AAEA,QAAM;AAAEY,IAAAA;~~AAAF~~,~~MAAgBtB~~,SAAS,~~CAC5BuB~~,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA;AAAF,QAAsBD,MAAM,~~CAAEb~~,gBAAF,CAAlC;AACA,WAAO;~~AACNY~~,MAAAA,SAAS,~~EAAEE~~,eAAe,~~CAAEN~~,SAAF;~~AADpB~~,KAAP;~~AAGA~~,~~GAN6B~~,~~EAO9B~~,~~CAAEA~~,SAAF,~~CAP8B~~,~~CAA/B~~;;~~AAUA~~,~~QAAMO~~,gBAAgB,GAAG,YAAwB;AAAA,QAAtBC,MAAsB,uEAAb,OAAa;AAChD,UAAMC,SAAS,~~GAAG1B~~,iBAAiB,~~CAClCgB~~,eADkC,EAElCE,iBAFkC,CAAnC;;AAKA,~~QAAKQ~~,SAAS,IAAIA,SAAS,CAACC,MAAV,GAAmB,CAArC,EAAyC;AACxC;AACA;AACAD,MAAAA,SAAS,CAAE,CAAF,CAAT,CAAeE,UAAf,CAA0BH,MAA1B,~~GAAmCf~~,OAAO,~~CAAEe~~,MAAF,CAA1C;~~AACAL~~,MAAAA,aAAa,CAAEH,SAAF,~~EAAaS~~,SAAb,CAAb;AACA;AACD,GAZD;;AAcA,QAAMG,cAAc,GAAG,MAAML,gBAAgB,CAAE,KAAF,CAA7C;;AACA,QAAMM,gBAAgB,GAAG,MAAMN,gBAAgB,CAAE,OAAF,CAA/C,~~CAlC4B~~,~~CAoC5B~~;AACA;AACA;AACA;;;AACA,MAAK,~~CAAEL~~,WAAF,IAAiB,CAAEE,SAAxB,EAAoC;AACnC,WAAO,IAAP;AACA;;AAED,SACC,cAAC,YAAD,QACC,cAAC,aAAD;AACC,IAAA,IAAI,~~EAAGlB~~,KADR;AAEC,IAAA,KAAK,EAAGG,EAAE,CAAE,OAAF,EAAW,MAAX,CAFX;AAGC,IAAA,OAAO,~~EAAGkB~~;AAHX,IADD,~~EAMC~~,cAAC,aAAD;AACC,IAAA,IAAI,~~EAAGpB~~,GADR;AAEC,IAAA,KAAK,EAAGE,EAAE,CAAE,KAAF,EAAS,wBAAT,CAFX;AAGC,IAAA,OAAO,~~EAAGuB~~;AAHX,~~IAND~~,~~EAWC~~,cAAC,aAAD;AACC,IAAA,IAAI,~~EAAGxB~~,KADR;AAEC,IAAA,KAAK,EAAGC,EAAE,CAAE,OAAF,EAAW,MAAX,CAFX;AAGC,IAAA,OAAO,~~EAAGwB~~;AAHX,~~IAXD~~,CADD;~~AAmBA~~;;AAED,~~eAAef~~,iBAAf","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { switchToBlockType } from '@wordpress/blocks';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { group, row, stack } 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: undefined,\n\trow: { type: 'flex', flexWrap: 'nowrap' },\n\tstack: { type: 'flex', orientation: 'vertical' },\n};\n\nfunction BlockGroupToolbar() {\n\tconst {\n\t\~~tblocksSelection,\n\t\tclientIds,\n\t\tgroupingBlockName,\n\t\tisGroupable,\n\t} = useConvertToGroupButtonProps~~();\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\tconst { canRemove } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canRemoveBlocks } = select( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds ),\n\t\t\t};\n\t\t},\n\t\t[ clientIds ]\n\t);\n\n\tconst onConvertToGroup = ( layout = 'group' ) => {\n\t\tconst newBlocks = switchToBlockType(\n\t\t\tblocksSelection,\n\t\t\tgroupingBlockName\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\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\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ group }\n\t\t\t\tlabel={ _x( 'Group', 'verb' ) }\n\t\t\t\tonClick={ onConvertToGroup }\n\t\t\t/>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ row }\n\t\t\t\tlabel={ _x( 'Row', 'single horizontal line' ) }\n\t\t\t\tonClick={ onConvertToRow }\n\t\t\t/>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ stack }\n\t\t\t\tlabel={ _x( 'Stack', 'verb' ) }\n\t\t\t\tonClick={ onConvertToStack }\n\t\t\t/>\n\t\t</ToolbarGroup>\n\t);\n}\n\nexport default BlockGroupToolbar;\n"]}
1	+ {"version":3,"sources":["@wordpress/block-editor/src/components/convert-to-group-buttons/toolbar.js"],"names":["useDispatch","useSelect","switchToBlockType","store","blocksStore","ToolbarButton","ToolbarGroup","group","row","stack","_x","useConvertToGroupButtonProps","blockEditorStore","layouts","undefined","type","flexWrap","orientation","BlockGroupToolbar","blocksSelection","clientIds","groupingBlockName","isGroupable","replaceBlocks","canRemove","variations","select","canRemoveBlocks","getBlockVariations","onConvertToGroup","layout","newBlocks","length","attributes","onConvertToRow","onConvertToStack","canInsertRow","find","name","canInsertStack"],"mappings":"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","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 } 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: undefined,\n\trow: { type: 'flex', flexWrap: 'nowrap' },\n\tstack: { type: 'flex', orientation: 'vertical' },\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 = 'group' ) => {\n\t\tconst newBlocks = switchToBlockType(\n\t\t\tblocksSelection,\n\t\t\tgroupingBlockName\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\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\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ group }\n\t\t\t\tlabel={ _x( 'Group', 'verb' ) }\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', 'single horizontal line' ) }\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', 'verb' ) }\n\t\t\t\t\tonClick={ onConvertToStack }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarGroup>\n\t);\n}\n\nexport default BlockGroupToolbar;\n"]}

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

@@ -5,7 +5,7 @@ import { createElement } from "@wordpress/element";
  */
 import { useCallback } from '@wordpress/element';
 import { serialize, pasteHandler, store as blocksStore } from '@wordpress/blocks';
-import { documentHasSelection, documentHasUncollapsedSelection } from '@wordpress/dom';
+import { documentHasSelection, documentHasUncollapsedSelection, __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -128,7 +128,7 @@ export function useClipboardHandler() {
           }
           const serialized = serialize(blocks);
-          event.clipboardData.setData('text/plain', serialized);
+          event.clipboardData.setData('text/plain', toPlainText(serialized));
           event.clipboardData.setData('text/html', serialized);
         }
       }
@@ -184,6 +184,22 @@ function CopyHandler(_ref) {
     ref: useClipboardHandler()
   }, children);
 }
+/**
+ * Given a string of HTML representing serialized blocks, returns the plain
+ * text extracted after stripping the HTML of any tags and fixing line breaks.
+ *
+ * @param {string} html Serialized blocks.
+ * @return {string} The plain-text content with any html removed.
+ */
+function toPlainText(html) {
+  // Manually handle BR tags as line breaks prior to `stripHTML` call
+  html = html.replace(/<br>/g, '\n');
+  const plainText = stripHTML(html).trim(); // Merge any consecutive line breaks
+  return plainText.replace(/\n\n+/g, '\n\n');
+}
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/copy-handler/README.md
  */