@wordpress/block-editor 8.0.6 → 8.0.7
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.
- package/build/components/block-tools/block-selection-button.js +7 -1
- package/build/components/block-tools/block-selection-button.js.map +1 -1
- package/build/components/colors-gradients/panel-color-gradient-settings.js +6 -69
- package/build/components/colors-gradients/panel-color-gradient-settings.js.map +1 -1
- package/build/components/colors-gradients/use-common-single-multiple-selects.js +21 -0
- package/build/components/colors-gradients/use-common-single-multiple-selects.js.map +1 -0
- package/build/components/colors-gradients/use-multiple-origin-colors-and-gradients.js +98 -0
- package/build/components/colors-gradients/use-multiple-origin-colors-and-gradients.js.map +1 -0
- package/build/hooks/border-color.js +11 -12
- package/build/hooks/border-color.js.map +1 -1
- package/build-module/components/block-tools/block-selection-button.js +7 -1
- package/build-module/components/block-tools/block-selection-button.js.map +1 -1
- package/build-module/components/colors-gradients/panel-color-gradient-settings.js +5 -71
- package/build-module/components/colors-gradients/panel-color-gradient-settings.js.map +1 -1
- package/build-module/components/colors-gradients/use-common-single-multiple-selects.js +11 -0
- package/build-module/components/colors-gradients/use-common-single-multiple-selects.js.map +1 -0
- package/build-module/components/colors-gradients/use-multiple-origin-colors-and-gradients.js +85 -0
- package/build-module/components/colors-gradients/use-multiple-origin-colors-and-gradients.js.map +1 -0
- package/build-module/hooks/border-color.js +10 -12
- package/build-module/hooks/border-color.js.map +1 -1
- package/package.json +3 -3
- package/src/components/block-tools/block-selection-button.js +5 -1
- package/src/components/colors-gradients/panel-color-gradient-settings.js +4 -92
- package/src/components/colors-gradients/use-common-single-multiple-selects.js +11 -0
- package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js +107 -0
- package/src/hooks/border-color.js +14 -9
|
@@ -11,8 +11,7 @@ import { every, isEmpty } from 'lodash';
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import { PanelBody, ColorIndicator } from '@wordpress/components';
|
|
14
|
-
import { sprintf, __
|
|
15
|
-
import { useMemo } from '@wordpress/element';
|
|
14
|
+
import { sprintf, __ } from '@wordpress/i18n';
|
|
16
15
|
/**
|
|
17
16
|
* Internal dependencies
|
|
18
17
|
*/
|
|
@@ -20,7 +19,9 @@ import { useMemo } from '@wordpress/element';
|
|
|
20
19
|
import ColorGradientControl from './control';
|
|
21
20
|
import { getColorObjectByColorValue } from '../colors';
|
|
22
21
|
import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
|
|
23
|
-
import useSetting from '../use-setting';
|
|
22
|
+
import useSetting from '../use-setting';
|
|
23
|
+
import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
|
|
24
|
+
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)
|
|
24
25
|
|
|
25
26
|
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)
|
|
26
27
|
|
|
@@ -109,13 +110,6 @@ export const PanelColorGradientSettingsInner = _ref3 => {
|
|
|
109
110
|
}, setting))), children);
|
|
110
111
|
};
|
|
111
112
|
|
|
112
|
-
function useCommonSingleMultipleSelects() {
|
|
113
|
-
return {
|
|
114
|
-
disableCustomColors: !useSetting('color.custom'),
|
|
115
|
-
disableCustomGradients: !useSetting('color.customGradient')
|
|
116
|
-
};
|
|
117
|
-
}
|
|
118
|
-
|
|
119
113
|
const PanelColorGradientSettingsSingleSelect = props => {
|
|
120
114
|
const colorGradientSettings = useCommonSingleMultipleSelects();
|
|
121
115
|
colorGradientSettings.colors = useSetting('color.palette');
|
|
@@ -124,67 +118,7 @@ const PanelColorGradientSettingsSingleSelect = props => {
|
|
|
124
118
|
};
|
|
125
119
|
|
|
126
120
|
const PanelColorGradientSettingsMultipleSelect = props => {
|
|
127
|
-
const colorGradientSettings =
|
|
128
|
-
const customColors = useSetting('color.palette.custom');
|
|
129
|
-
const themeColors = useSetting('color.palette.theme');
|
|
130
|
-
const defaultColors = useSetting('color.palette.default');
|
|
131
|
-
const shouldDisplayDefaultColors = useSetting('color.defaultPalette');
|
|
132
|
-
colorGradientSettings.colors = useMemo(() => {
|
|
133
|
-
const result = [];
|
|
134
|
-
|
|
135
|
-
if (themeColors && themeColors.length) {
|
|
136
|
-
result.push({
|
|
137
|
-
name: _x('Theme', 'Indicates this palette comes from the theme.'),
|
|
138
|
-
colors: themeColors
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
if (shouldDisplayDefaultColors && defaultColors && defaultColors.length) {
|
|
143
|
-
result.push({
|
|
144
|
-
name: _x('Default', 'Indicates this palette comes from WordPress.'),
|
|
145
|
-
colors: defaultColors
|
|
146
|
-
});
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
if (customColors && customColors.length) {
|
|
150
|
-
result.push({
|
|
151
|
-
name: _x('Custom', 'Indicates this palette comes from the theme.'),
|
|
152
|
-
colors: customColors
|
|
153
|
-
});
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
return result;
|
|
157
|
-
}, [defaultColors, themeColors, customColors]);
|
|
158
|
-
const customGradients = useSetting('color.gradients.custom');
|
|
159
|
-
const themeGradients = useSetting('color.gradients.theme');
|
|
160
|
-
const defaultGradients = useSetting('color.gradients.default');
|
|
161
|
-
const shouldDisplayDefaultGradients = useSetting('color.defaultGradients');
|
|
162
|
-
colorGradientSettings.gradients = useMemo(() => {
|
|
163
|
-
const result = [];
|
|
164
|
-
|
|
165
|
-
if (themeGradients && themeGradients.length) {
|
|
166
|
-
result.push({
|
|
167
|
-
name: _x('Theme', 'Indicates this palette comes from the theme.'),
|
|
168
|
-
gradients: themeGradients
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
if (shouldDisplayDefaultGradients && defaultGradients && defaultGradients.length) {
|
|
173
|
-
result.push({
|
|
174
|
-
name: _x('Default', 'Indicates this palette comes from WordPress.'),
|
|
175
|
-
gradients: defaultGradients
|
|
176
|
-
});
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
if (customGradients && customGradients.length) {
|
|
180
|
-
result.push({
|
|
181
|
-
name: _x('Custom', 'Indicates this palette is created by the user.'),
|
|
182
|
-
gradients: customGradients
|
|
183
|
-
});
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
return result;
|
|
187
|
-
}, [customGradients, themeGradients, defaultGradients]);
|
|
121
|
+
const colorGradientSettings = useMultipleOriginColorsAndGradients();
|
|
188
122
|
return createElement(PanelColorGradientSettingsInner, _extends({}, colorGradientSettings, props));
|
|
189
123
|
};
|
|
190
124
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["classnames","every","isEmpty","PanelBody","ColorIndicator","sprintf","__","_x","useMemo","ColorGradientControl","getColorObjectByColorValue","__experimentalGetGradientObjectByGradientValue","useSetting","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","enableAlpha","props","setting","undefined","titleElement","useCommonSingleMultipleSelects","PanelColorGradientSettingsSingleSelect","colorGradientSettings","PanelColorGradientSettingsMultipleSelect","customColors","themeColors","defaultColors","shouldDisplayDefaultColors","result","length","push","customGradients","themeGradients","defaultGradients","shouldDisplayDefaultGradients","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 { PanelBody, ColorIndicator } from '@wordpress/components';\nimport { sprintf, __, _x } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\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\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{ settings.map( ( setting, index ) => (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tshowTitle={ showTitle }\n\t\t\t\t\tkey={ index }\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__experimentalHasMultipleOrigins,\n\t\t\t\t\t\tenableAlpha,\n\t\t\t\t\t\t...setting,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</PanelBody>\n\t);\n};\n\nfunction useCommonSingleMultipleSelects() {\n\treturn {\n\t\tdisableCustomColors: ! useSetting( 'color.custom' ),\n\t\tdisableCustomGradients: ! useSetting( 'color.customGradient' ),\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 = useCommonSingleMultipleSelects();\n\tconst customColors = useSetting( 'color.palette.custom' );\n\tconst themeColors = useSetting( 'color.palette.theme' );\n\tconst defaultColors = useSetting( 'color.palette.default' );\n\tconst shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );\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\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\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 comes from the theme.'\n\t\t\t\t),\n\t\t\t\tcolors: customColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ defaultColors, themeColors, customColors ] );\n\n\tconst customGradients = useSetting( 'color.gradients.custom' );\n\tconst themeGradients = useSetting( 'color.gradients.theme' );\n\tconst defaultGradients = useSetting( 'color.gradients.default' );\n\tconst shouldDisplayDefaultGradients = useSetting(\n\t\t'color.defaultGradients'\n\t);\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\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\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\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customGradients, themeGradients, defaultGradients ] );\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","PanelBody","ColorIndicator","sprintf","__","ColorGradientControl","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","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 { PanelBody, ColorIndicator } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\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\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{ settings.map( ( setting, index ) => (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tshowTitle={ showTitle }\n\t\t\t\t\tkey={ index }\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__experimentalHasMultipleOrigins,\n\t\t\t\t\t\tenableAlpha,\n\t\t\t\t\t\t...setting,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ children }\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"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal dependencies
|
|
3
|
+
*/
|
|
4
|
+
import useSetting from '../use-setting';
|
|
5
|
+
export default function useCommonSingleMultipleSelects() {
|
|
6
|
+
return {
|
|
7
|
+
disableCustomColors: !useSetting('color.custom'),
|
|
8
|
+
disableCustomGradients: !useSetting('color.customGradient')
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=use-common-single-multiple-selects.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js"],"names":["useSetting","useCommonSingleMultipleSelects","disableCustomColors","disableCustomGradients"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,gBAAvB;AAEA,eAAe,SAASC,8BAAT,GAA0C;AACxD,SAAO;AACNC,IAAAA,mBAAmB,EAAE,CAAEF,UAAU,CAAE,cAAF,CAD3B;AAENG,IAAAA,sBAAsB,EAAE,CAAEH,UAAU,CAAE,sBAAF;AAF9B,GAAP;AAIA","sourcesContent":["/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nexport default function useCommonSingleMultipleSelects() {\n\treturn {\n\t\tdisableCustomColors: ! useSetting( 'color.custom' ),\n\t\tdisableCustomGradients: ! useSetting( 'color.customGradient' ),\n\t};\n}\n"]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* WordPress dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { useMemo } from '@wordpress/element';
|
|
5
|
+
import { _x } from '@wordpress/i18n';
|
|
6
|
+
/**
|
|
7
|
+
* Internal dependencies
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import useSetting from '../use-setting';
|
|
11
|
+
import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
|
|
12
|
+
/**
|
|
13
|
+
* Retrieves color and gradient related settings.
|
|
14
|
+
*
|
|
15
|
+
* The arrays for colors and gradients are made up of color palettes from each
|
|
16
|
+
* origin i.e. "Core", "Theme", and "User".
|
|
17
|
+
*
|
|
18
|
+
* @return {Object} Color and gradient related settings.
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
export default function useMultipleOriginColorsAndGradients() {
|
|
22
|
+
const colorGradientSettings = useCommonSingleMultipleSelects();
|
|
23
|
+
const customColors = useSetting('color.palette.custom');
|
|
24
|
+
const themeColors = useSetting('color.palette.theme');
|
|
25
|
+
const defaultColors = useSetting('color.palette.default');
|
|
26
|
+
const shouldDisplayDefaultColors = useSetting('color.defaultPalette');
|
|
27
|
+
colorGradientSettings.colors = useMemo(() => {
|
|
28
|
+
const result = [];
|
|
29
|
+
|
|
30
|
+
if (themeColors && themeColors.length) {
|
|
31
|
+
result.push({
|
|
32
|
+
name: _x('Theme', 'Indicates this palette comes from the theme.'),
|
|
33
|
+
colors: themeColors
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (shouldDisplayDefaultColors && defaultColors && defaultColors.length) {
|
|
38
|
+
result.push({
|
|
39
|
+
name: _x('Default', 'Indicates this palette comes from WordPress.'),
|
|
40
|
+
colors: defaultColors
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (customColors && customColors.length) {
|
|
45
|
+
result.push({
|
|
46
|
+
name: _x('Custom', 'Indicates this palette comes from the theme.'),
|
|
47
|
+
colors: customColors
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return result;
|
|
52
|
+
}, [defaultColors, themeColors, customColors]);
|
|
53
|
+
const customGradients = useSetting('color.gradients.custom');
|
|
54
|
+
const themeGradients = useSetting('color.gradients.theme');
|
|
55
|
+
const defaultGradients = useSetting('color.gradients.default');
|
|
56
|
+
const shouldDisplayDefaultGradients = useSetting('color.defaultGradients');
|
|
57
|
+
colorGradientSettings.gradients = useMemo(() => {
|
|
58
|
+
const result = [];
|
|
59
|
+
|
|
60
|
+
if (themeGradients && themeGradients.length) {
|
|
61
|
+
result.push({
|
|
62
|
+
name: _x('Theme', 'Indicates this palette comes from the theme.'),
|
|
63
|
+
gradients: themeGradients
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
if (shouldDisplayDefaultGradients && defaultGradients && defaultGradients.length) {
|
|
68
|
+
result.push({
|
|
69
|
+
name: _x('Default', 'Indicates this palette comes from WordPress.'),
|
|
70
|
+
gradients: defaultGradients
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
if (customGradients && customGradients.length) {
|
|
75
|
+
result.push({
|
|
76
|
+
name: _x('Custom', 'Indicates this palette is created by the user.'),
|
|
77
|
+
gradients: customGradients
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
return result;
|
|
82
|
+
}, [customGradients, themeGradients, defaultGradients]);
|
|
83
|
+
return colorGradientSettings;
|
|
84
|
+
}
|
|
85
|
+
//# sourceMappingURL=use-multiple-origin-colors-and-gradients.js.map
|
package/build-module/components/colors-gradients/use-multiple-origin-colors-and-gradients.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js"],"names":["useMemo","_x","useSetting","useCommonSingleMultipleSelects","useMultipleOriginColorsAndGradients","colorGradientSettings","customColors","themeColors","defaultColors","shouldDisplayDefaultColors","colors","result","length","push","name","customGradients","themeGradients","defaultGradients","shouldDisplayDefaultGradients","gradients"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\nimport useCommonSingleMultipleSelects from './use-common-single-multiple-selects';\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 colorGradientSettings = useCommonSingleMultipleSelects();\n\tconst customColors = useSetting( 'color.palette.custom' );\n\tconst themeColors = useSetting( 'color.palette.theme' );\n\tconst defaultColors = useSetting( 'color.palette.default' );\n\tconst shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );\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\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\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 comes from the theme.'\n\t\t\t\t),\n\t\t\t\tcolors: customColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ defaultColors, themeColors, customColors ] );\n\n\tconst customGradients = useSetting( 'color.gradients.custom' );\n\tconst themeGradients = useSetting( 'color.gradients.theme' );\n\tconst defaultGradients = useSetting( 'color.gradients.default' );\n\tconst shouldDisplayDefaultGradients = useSetting(\n\t\t'color.defaultGradients'\n\t);\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\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\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\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customGradients, themeGradients, defaultGradients ] );\n\n\treturn colorGradientSettings;\n}\n"]}
|
|
@@ -18,6 +18,7 @@ import { useState } from '@wordpress/element';
|
|
|
18
18
|
*/
|
|
19
19
|
|
|
20
20
|
import ColorGradientControl from '../components/colors-gradients/control';
|
|
21
|
+
import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
|
|
21
22
|
import { getColorClassName, getColorObjectByColorValue, getColorObjectByAttributeValues } from '../components/colors';
|
|
22
23
|
import useSetting from '../components/use-setting';
|
|
23
24
|
import { hasBorderSupport, shouldSkipSerialization } from './border';
|
|
@@ -47,18 +48,17 @@ export function BorderColorEdit(props) {
|
|
|
47
48
|
},
|
|
48
49
|
setAttributes
|
|
49
50
|
} = props;
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
const disableCustomGradients = !useSetting('color.customGradient');
|
|
51
|
+
const colorGradientSettings = useMultipleOriginColorsAndGradients();
|
|
52
|
+
const availableColors = colorGradientSettings.colors.reduce((colors, origin) => colors.concat(origin.colors), []);
|
|
53
53
|
const [colorValue, setColorValue] = useState(() => {
|
|
54
54
|
var _getColorObjectByAttr, _style$border;
|
|
55
55
|
|
|
56
|
-
return (_getColorObjectByAttr = getColorObjectByAttributeValues(
|
|
56
|
+
return (_getColorObjectByAttr = getColorObjectByAttributeValues(availableColors, borderColor, style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border.color)) === null || _getColorObjectByAttr === void 0 ? void 0 : _getColorObjectByAttr.color;
|
|
57
57
|
});
|
|
58
58
|
|
|
59
59
|
const onChangeColor = value => {
|
|
60
60
|
setColorValue(value);
|
|
61
|
-
const colorObject = getColorObjectByColorValue(
|
|
61
|
+
const colorObject = getColorObjectByColorValue(availableColors, value);
|
|
62
62
|
const newStyle = { ...style,
|
|
63
63
|
border: { ...(style === null || style === void 0 ? void 0 : style.border),
|
|
64
64
|
color: colorObject !== null && colorObject !== void 0 && colorObject.slug ? undefined : value
|
|
@@ -72,15 +72,13 @@ export function BorderColorEdit(props) {
|
|
|
72
72
|
});
|
|
73
73
|
};
|
|
74
74
|
|
|
75
|
-
return createElement(ColorGradientControl, {
|
|
75
|
+
return createElement(ColorGradientControl, _extends({
|
|
76
76
|
label: __('Color'),
|
|
77
77
|
colorValue: colorValue,
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
onColorChange: onChangeColor
|
|
83
|
-
});
|
|
78
|
+
onColorChange: onChangeColor,
|
|
79
|
+
clearable: false,
|
|
80
|
+
__experimentalHasMultipleOrigins: true
|
|
81
|
+
}, colorGradientSettings));
|
|
84
82
|
}
|
|
85
83
|
/**
|
|
86
84
|
* Filters registered block settings, extending attributes to include
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/block-editor/src/hooks/border-color.js"],"names":["classnames","addFilter","__","createHigherOrderComponent","useState","ColorGradientControl","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","useSetting","hasBorderSupport","shouldSkipSerialization","cleanEmptyObject","EMPTY_ARRAY","BorderColorEdit","props","attributes","borderColor","style","setAttributes","colors","disableCustomColors","disableCustomGradients","colorValue","setColorValue","border","color","onChangeColor","value","colorObject","newStyle","slug","undefined","newNamedColor","addAttributes","settings","type","addSaveProps","blockType","borderColorClass","newClassName","className","addEditProps","existingGetEditWrapperProps","getEditWrapperProps","withBorderColorPaletteStyles","BlockListBlock","name","extraStyles","wrapperProps"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,0BAAT,QAA2C,oBAA3C;AACA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,SACCC,iBADD,EAECC,0BAFD,EAGCC,+BAHD,QAIO,sBAJP;AAKA,OAAOC,UAAP,MAAuB,2BAAvB;AACA,SAASC,gBAAT,EAA2BC,uBAA3B,QAA0D,UAA1D;AACA,SAASC,gBAAT,QAAiC,SAAjC,C,CAEA;AACA;;AACA,MAAMC,WAAW,GAAG,EAApB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,eAAT,CAA0BC,KAA1B,EAAkC;AACxC,QAAM;AACLC,IAAAA,UAAU,EAAE;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,KADP;AAELC,IAAAA;AAFK,MAGFJ,KAHJ;AAIA,QAAMK,MAAM,GAAGX,UAAU,CAAE,eAAF,CAAV,IAAiCI,WAAhD;AACA,QAAMQ,mBAAmB,GAAG,CAAEZ,UAAU,CAAE,cAAF,CAAxC;AACA,QAAMa,sBAAsB,GAAG,CAAEb,UAAU,CAAE,sBAAF,CAA3C;AACA,QAAM,CAAEc,UAAF,EAAcC,aAAd,IAAgCpB,QAAQ,CAC7C;AAAA;;AAAA,oCACCI,+BAA+B,CAC9BY,MAD8B,EAE9BH,WAF8B,EAG9BC,KAH8B,aAG9BA,KAH8B,wCAG9BA,KAAK,CAAEO,MAHuB,kDAG9B,cAAeC,KAHe,CADhC,0DACC,sBAIGA,KALJ;AAAA,GAD6C,CAA9C;;AASA,QAAMC,aAAa,GAAKC,KAAF,IAAa;AAClCJ,IAAAA,aAAa,CAAEI,KAAF,CAAb;AAEA,UAAMC,WAAW,GAAGtB,0BAA0B,CAAEa,MAAF,EAAUQ,KAAV,CAA9C;AACA,UAAME,QAAQ,GAAG,EAChB,GAAGZ,KADa;AAEhBO,MAAAA,MAAM,EAAE,EACP,IAAGP,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEO,MAAV,CADO;AAEPC,QAAAA,KAAK,EAAEG,WAAW,SAAX,IAAAA,WAAW,WAAX,IAAAA,WAAW,CAAEE,IAAb,GAAoBC,SAApB,GAAgCJ;AAFhC;AAFQ,KAAjB,CAJkC,CAYlC;;AACA,UAAMK,aAAa,GAAGJ,WAAW,SAAX,IAAAA,WAAW,WAAX,IAAAA,WAAW,CAAEE,IAAb,GAAoBF,WAAW,CAACE,IAAhC,GAAuCC,SAA7D;AAEAb,IAAAA,aAAa,CAAE;AACdD,MAAAA,KAAK,EAAEN,gBAAgB,CAAEkB,QAAF,CADT;AAEdb,MAAAA,WAAW,EAAEgB;AAFC,KAAF,CAAb;AAIA,GAnBD;;AAqBA,SACC,cAAC,oBAAD;AACC,IAAA,KAAK,EAAG/B,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,UAAU,EAAGqB,UAFd;AAGC,IAAA,MAAM,EAAGH,MAHV;AAIC,IAAA,SAAS,EAAGY,SAJb;AAKC,IAAA,mBAAmB,EAAGX,mBALvB;AAMC,IAAA,sBAAsB,EAAGC,sBAN1B;AAOC,IAAA,aAAa,EAAGK;AAPjB,IADD;AAWA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASO,aAAT,CAAwBC,QAAxB,EAAmC;AAClC,MAAK,CAAEzB,gBAAgB,CAAEyB,QAAF,EAAY,OAAZ,CAAvB,EAA+C;AAC9C,WAAOA,QAAP;AACA,GAHiC,CAKlC;;;AACA,MAAKA,QAAQ,CAACnB,UAAT,CAAoBC,WAAzB,EAAuC;AACtC,WAAOkB,QAAP;AACA,GARiC,CAUlC;;;AACA,SAAO,EACN,GAAGA,QADG;AAENnB,IAAAA,UAAU,EAAE,EACX,GAAGmB,QAAQ,CAACnB,UADD;AAEXC,MAAAA,WAAW,EAAE;AACZmB,QAAAA,IAAI,EAAE;AADM;AAFF;AAFN,GAAP;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,YAAT,CAAuBtB,KAAvB,EAA8BuB,SAA9B,EAAyCtB,UAAzC,EAAsD;AAAA;;AACrD,MACC,CAAEN,gBAAgB,CAAE4B,SAAF,EAAa,OAAb,CAAlB,IACA3B,uBAAuB,CAAE2B,SAAF,CAFxB,EAGE;AACD,WAAOvB,KAAP;AACA;;AAED,QAAM;AAAEE,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAyBF,UAA/B;AACA,QAAMuB,gBAAgB,GAAGjC,iBAAiB,CAAE,cAAF,EAAkBW,WAAlB,CAA1C;AAEA,QAAMuB,YAAY,GAAGxC,UAAU,CAAEe,KAAK,CAAC0B,SAAR,EAAmB;AACjD,wBAAoBxB,WAAW,KAAIC,KAAJ,aAAIA,KAAJ,yCAAIA,KAAK,CAAEO,MAAX,mDAAI,eAAeC,KAAnB,CADkB;AAEjD,KAAEa,gBAAF,GAAsB,CAAC,CAAEA;AAFwB,GAAnB,CAA/B,CAXqD,CAgBrD;AACA;;AACAxB,EAAAA,KAAK,CAAC0B,SAAN,GAAkBD,YAAY,GAAGA,YAAH,GAAkBR,SAAhD;AAEA,SAAOjB,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAAS2B,YAAT,CAAuBP,QAAvB,EAAkC;AACjC,MACC,CAAEzB,gBAAgB,CAAEyB,QAAF,EAAY,OAAZ,CAAlB,IACAxB,uBAAuB,CAAEwB,QAAF,CAFxB,EAGE;AACD,WAAOA,QAAP;AACA;;AAED,QAAMQ,2BAA2B,GAAGR,QAAQ,CAACS,mBAA7C;;AACAT,EAAAA,QAAQ,CAACS,mBAAT,GAAiC5B,UAAF,IAAkB;AAChD,QAAID,KAAK,GAAG,EAAZ;;AAEA,QAAK4B,2BAAL,EAAmC;AAClC5B,MAAAA,KAAK,GAAG4B,2BAA2B,CAAE3B,UAAF,CAAnC;AACA;;AAED,WAAOqB,YAAY,CAAEtB,KAAF,EAASoB,QAAT,EAAmBnB,UAAnB,CAAnB;AACA,GARD;;AAUA,SAAOmB,QAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMU,4BAA4B,GAAG1C,0BAA0B,CACnE2C,cAAF,IAAwB/B,KAAF,IAAa;AAAA;;AAClC,QAAM;AAAEgC,IAAAA,IAAF;AAAQ/B,IAAAA;AAAR,MAAuBD,KAA7B;AACA,QAAM;AAAEE,IAAAA;AAAF,MAAkBD,UAAxB;AACA,QAAMI,MAAM,GAAGX,UAAU,CAAE,eAAF,CAAV,IAAiCI,WAAhD;;AAEA,MACC,CAAEH,gBAAgB,CAAEqC,IAAF,EAAQ,OAAR,CAAlB,IACApC,uBAAuB,CAAEoC,IAAF,CAFxB,EAGE;AACD,WAAO,cAAC,cAAD,EAAqBhC,KAArB,CAAP;AACA;;AAED,QAAMiC,WAAW,GAAG;AACnB/B,IAAAA,WAAW,EAAEA,WAAW,6BACrBT,+BAA+B,CAAEY,MAAF,EAAUH,WAAV,CADV,2DACrB,uBAAwDS,KADnC,GAErBM;AAHgB,GAApB;AAMA,MAAIiB,YAAY,GAAGlC,KAAK,CAACkC,YAAzB;AACAA,EAAAA,YAAY,GAAG,EACd,GAAGlC,KAAK,CAACkC,YADK;AAEd/B,IAAAA,KAAK,EAAE,EACN,GAAG8B,WADG;AAEN,iCAAGjC,KAAK,CAACkC,YAAT,wDAAG,oBAAoB/B,KAAvB;AAFM;AAFO,GAAf;AAQA,SAAO,cAAC,cAAD,eAAqBH,KAArB;AAA6B,IAAA,YAAY,EAAGkC;AAA5C,KAAP;AACA,CA7BoE,CAA/D;AAgCPhD,SAAS,CACR,0BADQ,EAER,2BAFQ,EAGRiC,aAHQ,CAAT;AAMAjC,SAAS,CACR,kCADQ,EAER,0BAFQ,EAGRoC,YAHQ,CAAT;AAMApC,SAAS,CACR,0BADQ,EAER,0BAFQ,EAGRyC,YAHQ,CAAT;AAMAzC,SAAS,CACR,uBADQ,EAER,8CAFQ,EAGR4C,4BAHQ,CAAT","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { __ } from '@wordpress/i18n';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../components/colors-gradients/control';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n} from '../components/colors';\nimport useSetting from '../components/use-setting';\nimport { hasBorderSupport, shouldSkipSerialization } from './border';\nimport { cleanEmptyObject } from './utils';\n\n// Defining empty array here instead of inline avoids unnecessary re-renders of\n// color control.\nconst EMPTY_ARRAY = [];\n\n/**\n * Inspector control panel containing the border color related configuration.\n *\n * There is deliberate overlap between the colors and borders block supports\n * relating to border color. It can be argued the border color controls could\n * be included within either, or both, the colors and borders panels in the\n * inspector controls. If they share the same block attributes it should not\n * matter.\n *\n * @param {Object} props Block properties.\n *\n * @return {WPElement} Border color edit element.\n */\nexport function BorderColorEdit( props ) {\n\tconst {\n\t\tattributes: { borderColor, style },\n\t\tsetAttributes,\n\t} = props;\n\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst disableCustomColors = ! useSetting( 'color.custom' );\n\tconst disableCustomGradients = ! useSetting( 'color.customGradient' );\n\tconst [ colorValue, setColorValue ] = useState(\n\t\t() =>\n\t\t\tgetColorObjectByAttributeValues(\n\t\t\t\tcolors,\n\t\t\t\tborderColor,\n\t\t\t\tstyle?.border?.color\n\t\t\t)?.color\n\t);\n\n\tconst onChangeColor = ( value ) => {\n\t\tsetColorValue( value );\n\n\t\tconst colorObject = getColorObjectByColorValue( colors, value );\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tborder: {\n\t\t\t\t...style?.border,\n\t\t\t\tcolor: colorObject?.slug ? undefined : value,\n\t\t\t},\n\t\t};\n\n\t\t// If empty slug, ensure undefined to remove attribute.\n\t\tconst newNamedColor = colorObject?.slug ? colorObject.slug : undefined;\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t\tborderColor: newNamedColor,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<ColorGradientControl\n\t\t\tlabel={ __( 'Color' ) }\n\t\t\tcolorValue={ colorValue }\n\t\t\tcolors={ colors }\n\t\t\tgradients={ undefined }\n\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\tdisableCustomGradients={ disableCustomGradients }\n\t\t\tonColorChange={ onChangeColor }\n\t\t/>\n\t);\n}\n\n/**\n * Filters registered block settings, extending attributes to include\n * `borderColor` if needed.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Updated block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBorderSupport( settings, 'color' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify default value if needed.\n\tif ( settings.attributes.borderColor ) {\n\t\treturn settings;\n\t}\n\n\t// Add new borderColor attribute to block settings.\n\treturn {\n\t\t...settings,\n\t\tattributes: {\n\t\t\t...settings.attributes,\n\t\t\tborderColor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t},\n\t};\n}\n\n/**\n * Override props assigned to save component to inject border color.\n *\n * @param {Object} props Additional props applied to save element.\n * @param {Object} blockType Block type definition.\n * @param {Object} attributes Block's attributes.\n *\n * @return {Object} Filtered props to apply to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif (\n\t\t! hasBorderSupport( blockType, 'color' ) ||\n\t\tshouldSkipSerialization( blockType )\n\t) {\n\t\treturn props;\n\t}\n\n\tconst { borderColor, style } = attributes;\n\tconst borderColorClass = getColorClassName( 'border-color', borderColor );\n\n\tconst newClassName = classnames( props.className, {\n\t\t'has-border-color': borderColor || style?.border?.color,\n\t\t[ borderColorClass ]: !! borderColorClass,\n\t} );\n\n\t// If we are clearing the last of the previous classes in `className`\n\t// set it to `undefined` to avoid rendering empty DOM attributes.\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Filters the registered block settings to apply border color styles and\n * classnames to the block edit wrapper.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addEditProps( settings ) {\n\tif (\n\t\t! hasBorderSupport( settings, 'color' ) ||\n\t\tshouldSkipSerialization( settings )\n\t) {\n\t\treturn settings;\n\t}\n\n\tconst existingGetEditWrapperProps = settings.getEditWrapperProps;\n\tsettings.getEditWrapperProps = ( attributes ) => {\n\t\tlet props = {};\n\n\t\tif ( existingGetEditWrapperProps ) {\n\t\t\tprops = existingGetEditWrapperProps( attributes );\n\t\t}\n\n\t\treturn addSaveProps( props, settings, attributes );\n\t};\n\n\treturn settings;\n}\n\n/**\n * This adds inline styles for color palette colors.\n * Ideally, this is not needed and themes should load their palettes on the editor.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nexport const withBorderColorPaletteStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst { name, attributes } = props;\n\t\tconst { borderColor } = attributes;\n\t\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\n\t\tif (\n\t\t\t! hasBorderSupport( name, 'color' ) ||\n\t\t\tshouldSkipSerialization( name )\n\t\t) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst extraStyles = {\n\t\t\tborderColor: borderColor\n\t\t\t\t? getColorObjectByAttributeValues( colors, borderColor )?.color\n\t\t\t\t: undefined,\n\t\t};\n\n\t\tlet wrapperProps = props.wrapperProps;\n\t\twrapperProps = {\n\t\t\t...props.wrapperProps,\n\t\t\tstyle: {\n\t\t\t\t...extraStyles,\n\t\t\t\t...props.wrapperProps?.style,\n\t\t\t},\n\t\t};\n\n\t\treturn <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;\n\t}\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/border/addAttributes',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/border/addSaveProps',\n\taddSaveProps\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/border/addEditProps',\n\taddEditProps\n);\n\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/border/with-border-color-palette-styles',\n\twithBorderColorPaletteStyles\n);\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/hooks/border-color.js"],"names":["classnames","addFilter","__","createHigherOrderComponent","useState","ColorGradientControl","useMultipleOriginColorsAndGradients","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","useSetting","hasBorderSupport","shouldSkipSerialization","cleanEmptyObject","EMPTY_ARRAY","BorderColorEdit","props","attributes","borderColor","style","setAttributes","colorGradientSettings","availableColors","colors","reduce","origin","concat","colorValue","setColorValue","border","color","onChangeColor","value","colorObject","newStyle","slug","undefined","newNamedColor","addAttributes","settings","type","addSaveProps","blockType","borderColorClass","newClassName","className","addEditProps","existingGetEditWrapperProps","getEditWrapperProps","withBorderColorPaletteStyles","BlockListBlock","name","extraStyles","wrapperProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { __ } from '@wordpress/i18n';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../components/colors-gradients/control';\nimport useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n} from '../components/colors';\nimport useSetting from '../components/use-setting';\nimport { hasBorderSupport, shouldSkipSerialization } from './border';\nimport { cleanEmptyObject } from './utils';\n\n// Defining empty array here instead of inline avoids unnecessary re-renders of\n// color control.\nconst EMPTY_ARRAY = [];\n\n/**\n * Inspector control panel containing the border color related configuration.\n *\n * There is deliberate overlap between the colors and borders block supports\n * relating to border color. It can be argued the border color controls could\n * be included within either, or both, the colors and borders panels in the\n * inspector controls. If they share the same block attributes it should not\n * matter.\n *\n * @param {Object} props Block properties.\n *\n * @return {WPElement} Border color edit element.\n */\nexport function BorderColorEdit( props ) {\n\tconst {\n\t\tattributes: { borderColor, style },\n\t\tsetAttributes,\n\t} = props;\n\tconst colorGradientSettings = useMultipleOriginColorsAndGradients();\n\tconst availableColors = colorGradientSettings.colors.reduce(\n\t\t( colors, origin ) => colors.concat( origin.colors ),\n\t\t[]\n\t);\n\tconst [ colorValue, setColorValue ] = useState(\n\t\t() =>\n\t\t\tgetColorObjectByAttributeValues(\n\t\t\t\tavailableColors,\n\t\t\t\tborderColor,\n\t\t\t\tstyle?.border?.color\n\t\t\t)?.color\n\t);\n\n\tconst onChangeColor = ( value ) => {\n\t\tsetColorValue( value );\n\n\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\tavailableColors,\n\t\t\tvalue\n\t\t);\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tborder: {\n\t\t\t\t...style?.border,\n\t\t\t\tcolor: colorObject?.slug ? undefined : value,\n\t\t\t},\n\t\t};\n\n\t\t// If empty slug, ensure undefined to remove attribute.\n\t\tconst newNamedColor = colorObject?.slug ? colorObject.slug : undefined;\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t\tborderColor: newNamedColor,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<ColorGradientControl\n\t\t\tlabel={ __( 'Color' ) }\n\t\t\tcolorValue={ colorValue }\n\t\t\tonColorChange={ onChangeColor }\n\t\t\tclearable={ false }\n\t\t\t__experimentalHasMultipleOrigins\n\t\t\t{ ...colorGradientSettings }\n\t\t/>\n\t);\n}\n\n/**\n * Filters registered block settings, extending attributes to include\n * `borderColor` if needed.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Updated block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBorderSupport( settings, 'color' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify default value if needed.\n\tif ( settings.attributes.borderColor ) {\n\t\treturn settings;\n\t}\n\n\t// Add new borderColor attribute to block settings.\n\treturn {\n\t\t...settings,\n\t\tattributes: {\n\t\t\t...settings.attributes,\n\t\t\tborderColor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t},\n\t};\n}\n\n/**\n * Override props assigned to save component to inject border color.\n *\n * @param {Object} props Additional props applied to save element.\n * @param {Object} blockType Block type definition.\n * @param {Object} attributes Block's attributes.\n *\n * @return {Object} Filtered props to apply to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif (\n\t\t! hasBorderSupport( blockType, 'color' ) ||\n\t\tshouldSkipSerialization( blockType )\n\t) {\n\t\treturn props;\n\t}\n\n\tconst { borderColor, style } = attributes;\n\tconst borderColorClass = getColorClassName( 'border-color', borderColor );\n\n\tconst newClassName = classnames( props.className, {\n\t\t'has-border-color': borderColor || style?.border?.color,\n\t\t[ borderColorClass ]: !! borderColorClass,\n\t} );\n\n\t// If we are clearing the last of the previous classes in `className`\n\t// set it to `undefined` to avoid rendering empty DOM attributes.\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Filters the registered block settings to apply border color styles and\n * classnames to the block edit wrapper.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addEditProps( settings ) {\n\tif (\n\t\t! hasBorderSupport( settings, 'color' ) ||\n\t\tshouldSkipSerialization( settings )\n\t) {\n\t\treturn settings;\n\t}\n\n\tconst existingGetEditWrapperProps = settings.getEditWrapperProps;\n\tsettings.getEditWrapperProps = ( attributes ) => {\n\t\tlet props = {};\n\n\t\tif ( existingGetEditWrapperProps ) {\n\t\t\tprops = existingGetEditWrapperProps( attributes );\n\t\t}\n\n\t\treturn addSaveProps( props, settings, attributes );\n\t};\n\n\treturn settings;\n}\n\n/**\n * This adds inline styles for color palette colors.\n * Ideally, this is not needed and themes should load their palettes on the editor.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nexport const withBorderColorPaletteStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst { name, attributes } = props;\n\t\tconst { borderColor } = attributes;\n\t\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\n\t\tif (\n\t\t\t! hasBorderSupport( name, 'color' ) ||\n\t\t\tshouldSkipSerialization( name )\n\t\t) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst extraStyles = {\n\t\t\tborderColor: borderColor\n\t\t\t\t? getColorObjectByAttributeValues( colors, borderColor )?.color\n\t\t\t\t: undefined,\n\t\t};\n\n\t\tlet wrapperProps = props.wrapperProps;\n\t\twrapperProps = {\n\t\t\t...props.wrapperProps,\n\t\t\tstyle: {\n\t\t\t\t...extraStyles,\n\t\t\t\t...props.wrapperProps?.style,\n\t\t\t},\n\t\t};\n\n\t\treturn <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;\n\t}\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/border/addAttributes',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/border/addSaveProps',\n\taddSaveProps\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/border/addEditProps',\n\taddEditProps\n);\n\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/border/with-border-color-palette-styles',\n\twithBorderColorPaletteStyles\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/block-editor",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.7",
|
|
4
4
|
"description": "Generic block editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@wordpress/blob": "^3.2.2",
|
|
39
39
|
"@wordpress/block-serialization-default-parser": "^4.2.3",
|
|
40
40
|
"@wordpress/blocks": "^11.1.4",
|
|
41
|
-
"@wordpress/components": "^19.1.
|
|
41
|
+
"@wordpress/components": "^19.1.1",
|
|
42
42
|
"@wordpress/compose": "^5.0.6",
|
|
43
43
|
"@wordpress/data": "^6.1.4",
|
|
44
44
|
"@wordpress/deprecated": "^3.2.3",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"publishConfig": {
|
|
76
76
|
"access": "public"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "49c7be0ff5dc493fc9e5a861e18273dd1f3fce8c"
|
|
79
79
|
}
|
|
@@ -100,6 +100,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
|
|
|
100
100
|
getMultiSelectedBlocksEndClientId,
|
|
101
101
|
getPreviousBlockClientId,
|
|
102
102
|
getNextBlockClientId,
|
|
103
|
+
isNavigationMode,
|
|
103
104
|
} = useSelect( blockEditorStore );
|
|
104
105
|
const {
|
|
105
106
|
selectBlock,
|
|
@@ -157,7 +158,10 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
|
|
|
157
158
|
selectedBlockClientId;
|
|
158
159
|
}
|
|
159
160
|
const startingBlockClientId = hasBlockMovingClientId();
|
|
160
|
-
|
|
161
|
+
if ( isEscape && isNavigationMode() ) {
|
|
162
|
+
clearSelectedBlock();
|
|
163
|
+
event.preventDefault();
|
|
164
|
+
}
|
|
161
165
|
if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {
|
|
162
166
|
setBlockMovingClientId( null );
|
|
163
167
|
event.preventDefault();
|
|
@@ -8,8 +8,7 @@ import { every, isEmpty } from 'lodash';
|
|
|
8
8
|
* WordPress dependencies
|
|
9
9
|
*/
|
|
10
10
|
import { PanelBody, ColorIndicator } from '@wordpress/components';
|
|
11
|
-
import { sprintf, __
|
|
12
|
-
import { useMemo } from '@wordpress/element';
|
|
11
|
+
import { sprintf, __ } from '@wordpress/i18n';
|
|
13
12
|
|
|
14
13
|
/**
|
|
15
14
|
* Internal dependencies
|
|
@@ -18,6 +17,8 @@ import ColorGradientControl from './control';
|
|
|
18
17
|
import { getColorObjectByColorValue } from '../colors';
|
|
19
18
|
import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
|
|
20
19
|
import useSetting from '../use-setting';
|
|
20
|
+
import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
|
|
21
|
+
import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
|
|
21
22
|
|
|
22
23
|
// 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)
|
|
23
24
|
const colorIndicatorAriaLabel = __( '(%s: color %s)' );
|
|
@@ -154,13 +155,6 @@ export const PanelColorGradientSettingsInner = ( {
|
|
|
154
155
|
);
|
|
155
156
|
};
|
|
156
157
|
|
|
157
|
-
function useCommonSingleMultipleSelects() {
|
|
158
|
-
return {
|
|
159
|
-
disableCustomColors: ! useSetting( 'color.custom' ),
|
|
160
|
-
disableCustomGradients: ! useSetting( 'color.customGradient' ),
|
|
161
|
-
};
|
|
162
|
-
}
|
|
163
|
-
|
|
164
158
|
const PanelColorGradientSettingsSingleSelect = ( props ) => {
|
|
165
159
|
const colorGradientSettings = useCommonSingleMultipleSelects();
|
|
166
160
|
colorGradientSettings.colors = useSetting( 'color.palette' );
|
|
@@ -173,89 +167,7 @@ const PanelColorGradientSettingsSingleSelect = ( props ) => {
|
|
|
173
167
|
};
|
|
174
168
|
|
|
175
169
|
const PanelColorGradientSettingsMultipleSelect = ( props ) => {
|
|
176
|
-
const colorGradientSettings =
|
|
177
|
-
const customColors = useSetting( 'color.palette.custom' );
|
|
178
|
-
const themeColors = useSetting( 'color.palette.theme' );
|
|
179
|
-
const defaultColors = useSetting( 'color.palette.default' );
|
|
180
|
-
const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );
|
|
181
|
-
|
|
182
|
-
colorGradientSettings.colors = useMemo( () => {
|
|
183
|
-
const result = [];
|
|
184
|
-
if ( themeColors && themeColors.length ) {
|
|
185
|
-
result.push( {
|
|
186
|
-
name: _x(
|
|
187
|
-
'Theme',
|
|
188
|
-
'Indicates this palette comes from the theme.'
|
|
189
|
-
),
|
|
190
|
-
colors: themeColors,
|
|
191
|
-
} );
|
|
192
|
-
}
|
|
193
|
-
if (
|
|
194
|
-
shouldDisplayDefaultColors &&
|
|
195
|
-
defaultColors &&
|
|
196
|
-
defaultColors.length
|
|
197
|
-
) {
|
|
198
|
-
result.push( {
|
|
199
|
-
name: _x(
|
|
200
|
-
'Default',
|
|
201
|
-
'Indicates this palette comes from WordPress.'
|
|
202
|
-
),
|
|
203
|
-
colors: defaultColors,
|
|
204
|
-
} );
|
|
205
|
-
}
|
|
206
|
-
if ( customColors && customColors.length ) {
|
|
207
|
-
result.push( {
|
|
208
|
-
name: _x(
|
|
209
|
-
'Custom',
|
|
210
|
-
'Indicates this palette comes from the theme.'
|
|
211
|
-
),
|
|
212
|
-
colors: customColors,
|
|
213
|
-
} );
|
|
214
|
-
}
|
|
215
|
-
return result;
|
|
216
|
-
}, [ defaultColors, themeColors, customColors ] );
|
|
217
|
-
|
|
218
|
-
const customGradients = useSetting( 'color.gradients.custom' );
|
|
219
|
-
const themeGradients = useSetting( 'color.gradients.theme' );
|
|
220
|
-
const defaultGradients = useSetting( 'color.gradients.default' );
|
|
221
|
-
const shouldDisplayDefaultGradients = useSetting(
|
|
222
|
-
'color.defaultGradients'
|
|
223
|
-
);
|
|
224
|
-
colorGradientSettings.gradients = useMemo( () => {
|
|
225
|
-
const result = [];
|
|
226
|
-
if ( themeGradients && themeGradients.length ) {
|
|
227
|
-
result.push( {
|
|
228
|
-
name: _x(
|
|
229
|
-
'Theme',
|
|
230
|
-
'Indicates this palette comes from the theme.'
|
|
231
|
-
),
|
|
232
|
-
gradients: themeGradients,
|
|
233
|
-
} );
|
|
234
|
-
}
|
|
235
|
-
if (
|
|
236
|
-
shouldDisplayDefaultGradients &&
|
|
237
|
-
defaultGradients &&
|
|
238
|
-
defaultGradients.length
|
|
239
|
-
) {
|
|
240
|
-
result.push( {
|
|
241
|
-
name: _x(
|
|
242
|
-
'Default',
|
|
243
|
-
'Indicates this palette comes from WordPress.'
|
|
244
|
-
),
|
|
245
|
-
gradients: defaultGradients,
|
|
246
|
-
} );
|
|
247
|
-
}
|
|
248
|
-
if ( customGradients && customGradients.length ) {
|
|
249
|
-
result.push( {
|
|
250
|
-
name: _x(
|
|
251
|
-
'Custom',
|
|
252
|
-
'Indicates this palette is created by the user.'
|
|
253
|
-
),
|
|
254
|
-
gradients: customGradients,
|
|
255
|
-
} );
|
|
256
|
-
}
|
|
257
|
-
return result;
|
|
258
|
-
}, [ customGradients, themeGradients, defaultGradients ] );
|
|
170
|
+
const colorGradientSettings = useMultipleOriginColorsAndGradients();
|
|
259
171
|
return (
|
|
260
172
|
<PanelColorGradientSettingsInner
|
|
261
173
|
{ ...{ ...colorGradientSettings, ...props } }
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal dependencies
|
|
3
|
+
*/
|
|
4
|
+
import useSetting from '../use-setting';
|
|
5
|
+
|
|
6
|
+
export default function useCommonSingleMultipleSelects() {
|
|
7
|
+
return {
|
|
8
|
+
disableCustomColors: ! useSetting( 'color.custom' ),
|
|
9
|
+
disableCustomGradients: ! useSetting( 'color.customGradient' ),
|
|
10
|
+
};
|
|
11
|
+
}
|