npm - @wordpress/edit-site - Versions diffs - 3.0.18-next.33ec3857e2.0 → 3.0.18 - Mend

@wordpress/edit-site 3.0.18-next.33ec3857e2.0 → 3.0.18

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 (73) hide show

package/build/components/block-editor/resizable-editor.js CHANGED Viewed

@@ -124,7 +124,6 @@ function ResizableEditor(_ref) {
     }), (0, _element.createElement)("style", null, // Forming a "block formatting context" to prevent margin collapsing.
     // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
     `.edit-site-block-editor__block-list { display: flow-root; }`)),
-    assets: settings.__unstableResolvedAssets,
     ref: ref,
     name: "editor-canvas",
     className: "edit-site-visual-editor__editor-canvas"

package/build/components/block-editor/resizable-editor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/block-editor/resizable-editor.js"],"names":["DEFAULT_STYLES","width","height","HANDLE_STYLES_OVERRIDE","position","undefined","userSelect","cursor","top","right","bottom","left","ResizableEditor","enableResizing","settings","props","deviceType","select","editSiteStore","__experimentalGetPreviewDeviceType","deviceStyles","setWidth","setHeight","iframeRef","mouseMoveTypingResetRef","ref","autoResizeIframeHeight","iframe","current","resizeObserver","contentWindow","ResizeObserver","contentDocument","querySelector","offsetHeight","observe","documentElement","disconnect","resizeWidthBy","deltaPixels","offsetWidth","event","direction","element","style","styles"~~,"__unstableResolvedAssets"~~],"mappings":"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~~MAAM~~,~~EAAG/B~~,~~QAAQ,CAACgC,wBAZnB~~;AAaC,IAAA,~~GAAG,EAAGrB,GAbP;AAcC,IAAA,~~IAAI,EAAC,~~eAdN~~;~~AAeC~~,IAAA,SAAS,EAAC;~~AAfX~~,~~KAgBMV~~,~~KAhBN~~,EAxCD,CADD;~~AA6DA~~;;eAEcH,e","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { ResizableBox } from '@wordpress/components';\nimport {\n\t__experimentalUseResizeCanvas as useResizeCanvas,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n\t__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport ResizeHandle from './resize-handle';\n\nconst DEFAULT_STYLES = {\n\twidth: '100%',\n\theight: '100%',\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nfunction ResizableEditor( { enableResizing, settings, ...props } ) {\n\tconst deviceType = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editSiteStore ).__experimentalGetPreviewDeviceType(),\n\t\t[]\n\t);\n\tconst deviceStyles = useResizeCanvas( deviceType );\n\tconst [ width, setWidth ] = useState( DEFAULT_STYLES.width );\n\tconst [ height, setHeight ] = useState( DEFAULT_STYLES.height );\n\tconst iframeRef = useRef();\n\tconst mouseMoveTypingResetRef = useMouseMoveTypingReset();\n\tconst ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );\n\n\tuseEffect(\n\t\tfunction autoResizeIframeHeight() {\n\t\t\tconst iframe = iframeRef.current;\n\n\t\t\tif ( ! iframe \|\| ! enableResizing ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst resizeObserver = new iframe.contentWindow.ResizeObserver(\n\t\t\t\t() => {\n\t\t\t\t\tsetHeight(\n\t\t\t\t\t\tiframe.contentDocument.querySelector(\n\t\t\t\t\t\t\t`.edit-site-block-editor__block-list`\n\t\t\t\t\t\t).offsetHeight\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\n\t\t\t// Observing the <html> rather than the <body> because the latter\n\t\t\t// gets destroyed and remounted after initialization in <Iframe>.\n\t\t\tresizeObserver.observe( iframe.contentDocument.documentElement );\n\n\t\t\treturn () => {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t};\n\t\t},\n\t\t[ enableResizing ]\n\t);\n\n\tconst resizeWidthBy = useCallback( ( deltaPixels ) => {\n\t\tif ( iframeRef.current ) {\n\t\t\tsetWidth( iframeRef.current.offsetWidth + deltaPixels );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tsize={ {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, element ) => {\n\t\t\t\tsetWidth( element.style.width );\n\t\t\t} }\n\t\t\tminWidth={ 300 }\n\t\t\tmaxWidth=\"100%\"\n\t\t\tmaxHeight=\"100%\"\n\t\t\tenable={ {\n\t\t\t\tright: enableResizing,\n\t\t\t\tleft: enableResizing,\n\t\t\t} }\n\t\t\tshowHandle={ enableResizing }\n\t\t\t// The editor is centered horizontally, resizing it only\n\t\t\t// moves half the distance. Hence double the ratio to correctly\n\t\t\t// align the cursor to the resizer handle.\n\t\t\tresizeRatio={ 2 }\n\t\t\thandleComponent={ {\n\t\t\t\tleft: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"left\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tright: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t} }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\tstyle={ enableResizing ? undefined : deviceStyles }\n\t\t\t\thead={\n\t\t\t\t\t<>\n\t\t\t\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t\t\t\t<style>{\n\t\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t\t`.edit-site-block-editor__block-list { display: flow-root; }`\n\t\t\t\t\t\t}</style>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\~~tassets={ settings.__unstableResolvedAssets }\n\t\t\t\~~tref={ ref }\n\t\t\t\tname=\"editor-canvas\"\n\t\t\t\tclassName=\"edit-site-visual-editor__editor-canvas\"\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableEditor;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/block-editor/resizable-editor.js"],"names":["DEFAULT_STYLES","width","height","HANDLE_STYLES_OVERRIDE","position","undefined","userSelect","cursor","top","right","bottom","left","ResizableEditor","enableResizing","settings","props","deviceType","select","editSiteStore","__experimentalGetPreviewDeviceType","deviceStyles","setWidth","setHeight","iframeRef","mouseMoveTypingResetRef","ref","autoResizeIframeHeight","iframe","current","resizeObserver","contentWindow","ResizeObserver","contentDocument","querySelector","offsetHeight","observe","documentElement","disconnect","resizeWidthBy","deltaPixels","offsetWidth","event","direction","element","style","styles"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { ResizableBox } from '@wordpress/components';\nimport {\n\t__experimentalUseResizeCanvas as useResizeCanvas,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n\t__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport ResizeHandle from './resize-handle';\n\nconst DEFAULT_STYLES = {\n\twidth: '100%',\n\theight: '100%',\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nfunction ResizableEditor( { enableResizing, settings, ...props } ) {\n\tconst deviceType = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editSiteStore ).__experimentalGetPreviewDeviceType(),\n\t\t[]\n\t);\n\tconst deviceStyles = useResizeCanvas( deviceType );\n\tconst [ width, setWidth ] = useState( DEFAULT_STYLES.width );\n\tconst [ height, setHeight ] = useState( DEFAULT_STYLES.height );\n\tconst iframeRef = useRef();\n\tconst mouseMoveTypingResetRef = useMouseMoveTypingReset();\n\tconst ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );\n\n\tuseEffect(\n\t\tfunction autoResizeIframeHeight() {\n\t\t\tconst iframe = iframeRef.current;\n\n\t\t\tif ( ! iframe \|\| ! enableResizing ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst resizeObserver = new iframe.contentWindow.ResizeObserver(\n\t\t\t\t() => {\n\t\t\t\t\tsetHeight(\n\t\t\t\t\t\tiframe.contentDocument.querySelector(\n\t\t\t\t\t\t\t`.edit-site-block-editor__block-list`\n\t\t\t\t\t\t).offsetHeight\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\n\t\t\t// Observing the <html> rather than the <body> because the latter\n\t\t\t// gets destroyed and remounted after initialization in <Iframe>.\n\t\t\tresizeObserver.observe( iframe.contentDocument.documentElement );\n\n\t\t\treturn () => {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t};\n\t\t},\n\t\t[ enableResizing ]\n\t);\n\n\tconst resizeWidthBy = useCallback( ( deltaPixels ) => {\n\t\tif ( iframeRef.current ) {\n\t\t\tsetWidth( iframeRef.current.offsetWidth + deltaPixels );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tsize={ {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, element ) => {\n\t\t\t\tsetWidth( element.style.width );\n\t\t\t} }\n\t\t\tminWidth={ 300 }\n\t\t\tmaxWidth=\"100%\"\n\t\t\tmaxHeight=\"100%\"\n\t\t\tenable={ {\n\t\t\t\tright: enableResizing,\n\t\t\t\tleft: enableResizing,\n\t\t\t} }\n\t\t\tshowHandle={ enableResizing }\n\t\t\t// The editor is centered horizontally, resizing it only\n\t\t\t// moves half the distance. Hence double the ratio to correctly\n\t\t\t// align the cursor to the resizer handle.\n\t\t\tresizeRatio={ 2 }\n\t\t\thandleComponent={ {\n\t\t\t\tleft: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"left\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tright: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t} }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\tstyle={ enableResizing ? undefined : deviceStyles }\n\t\t\t\thead={\n\t\t\t\t\t<>\n\t\t\t\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t\t\t\t<style>{\n\t\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t\t`.edit-site-block-editor__block-list { display: flow-root; }`\n\t\t\t\t\t\t}</style>\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t\tname=\"editor-canvas\"\n\t\t\t\tclassName=\"edit-site-visual-editor__editor-canvas\"\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableEditor;\n"]}

package/build/components/global-styles/border-panel.js CHANGED Viewed

@@ -57,110 +57,51 @@ function BorderPanel(_ref) {
   let {
     name
   } = _ref;
-  // To better reflect if the user has customized a value we need to
-  // ensure the style value being checked is from the `user` origin.
-  const [userBorderStyles] = (0, _hooks.useStyle)('border', name, 'user');
-  const createHasValueCallback = feature => () => !!(userBorderStyles !== null && userBorderStyles !== void 0 && userBorderStyles[feature]);
-  const createResetCallback = setStyle => () => setStyle(undefined);
-  const handleOnChange = setStyle => value => {
-    setStyle(value || undefined);
-  };
   const units = (0, _components.__experimentalUseCustomUnits)({
     availableUnits: (0, _hooks.useSetting)('spacing.units')[0] || ['px', 'em', 'rem']
   }); // Border width.
-  const showBorderWidth = useHasBorderWidthControl(name);
+  const hasBorderWidth = useHasBorderWidthControl(name);
   const [borderWidthValue, setBorderWidth] = (0, _hooks.useStyle)('border.width', name); // Border style.
-  const showBorderStyle = useHasBorderStyleControl(name);
+  const hasBorderStyle = useHasBorderStyleControl(name);
   const [borderStyle, setBorderStyle] = (0, _hooks.useStyle)('border.style', name); // Border color.
-  const showBorderColor = useHasBorderColorControl(name);
-  const [borderColor, setBorderColor] = (0, _hooks.useStyle)('border.color', name);
   const [colors = EMPTY_ARRAY] = (0, _hooks.useSetting)('color.palette');
   const disableCustomColors = !(0, _hooks.useSetting)('color.custom')[0];
-  const disableCustomGradients = !(0, _hooks.useSetting)('color.customGradient')[0]; // Border radius.
+  const disableCustomGradients = !(0, _hooks.useSetting)('color.customGradient')[0];
+  const hasBorderColor = useHasBorderColorControl(name);
+  const [borderColor, setBorderColor] = (0, _hooks.useStyle)('border.color', name); // Border radius.
-  const showBorderRadius = useHasBorderRadiusControl(name);
+  const hasBorderRadius = useHasBorderRadiusControl(name);
   const [borderRadiusValues, setBorderRadius] = (0, _hooks.useStyle)('border.radius', name);
-  const hasBorderRadius = () => {
-    const borderValues = userBorderStyles === null || userBorderStyles === void 0 ? void 0 : userBorderStyles.radius;
-    if (typeof borderValues === 'object') {
-      return Object.entries(borderValues).some(Boolean);
-    }
-    return !!borderValues;
-  };
-  const resetAll = () => {
-    setBorderColor(undefined);
-    setBorderRadius(undefined);
-    setBorderStyle(undefined);
-    setBorderWidth(undefined);
-  }; // When we set a border color or width ensure we have a style so the user
-  // can see a visible border.
-  const handleOnChangeWithStyle = setStyle => value => {
-    if (!!value && !borderStyle) {
-      setBorderStyle('solid');
-    }
-    setStyle(value || undefined);
-  };
-  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
-    label: (0, _i18n.__)('Border'),
-    resetAll: resetAll
-  }, showBorderWidth && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    className: "single-column",
-    hasValue: createHasValueCallback('width'),
-    label: (0, _i18n.__)('Width'),
-    onDeselect: createResetCallback(setBorderWidth),
-    isShownByDefault: true
-  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
+  return (0, _element.createElement)(_components.PanelBody, {
+    title: (0, _i18n.__)('Border'),
+    initialOpen: true
+  }, (hasBorderWidth || hasBorderStyle) && (0, _element.createElement)("div", {
+    className: "edit-site-global-styles-sidebar__border-controls-row"
+  }, hasBorderWidth && (0, _element.createElement)(_components.__experimentalUnitControl, {
     value: borderWidthValue,
     label: (0, _i18n.__)('Width'),
     min: MIN_BORDER_WIDTH,
-    onChange: handleOnChangeWithStyle(setBorderWidth),
+    onChange: value => {
+      setBorderWidth(value || undefined);
+    },
     units: units
-  })), showBorderStyle && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    className: "single-column",
-    hasValue: createHasValueCallback('style'),
-    label: (0, _i18n.__)('Style'),
-    onDeselect: createResetCallback(setBorderStyle),
-    isShownByDefault: true
-  }, (0, _element.createElement)(_blockEditor.__experimentalBorderStyleControl, {
+  }), hasBorderStyle && (0, _element.createElement)(_blockEditor.__experimentalBorderStyleControl, {
     value: borderStyle,
-    onChange: handleOnChange(setBorderStyle)
-  })), showBorderColor && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    hasValue: createHasValueCallback('color'),
-    label: (0, _i18n.__)('Color'),
-    onDeselect: createResetCallback(setBorderColor),
-    isShownByDefault: true
-  }, (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
+    onChange: setBorderStyle
+  })), hasBorderColor && (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
     label: (0, _i18n.__)('Color'),
     colorValue: borderColor,
     colors: colors,
     gradients: undefined,
     disableCustomColors: disableCustomColors,
     disableCustomGradients: disableCustomGradients,
-    onColorChange: handleOnChangeWithStyle(setBorderColor),
-    clearable: false
-  })), showBorderRadius && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    hasValue: hasBorderRadius,
-    label: (0, _i18n.__)('Radius'),
-    onDeselect: createResetCallback(setBorderRadius),
-    isShownByDefault: true
-  }, (0, _element.createElement)(_blockEditor.__experimentalBorderRadiusControl, {
+    onColorChange: setBorderColor
+  }), hasBorderRadius && (0, _element.createElement)(_blockEditor.__experimentalBorderRadiusControl, {
     values: borderRadiusValues,
-    onChange: handleOnChange(setBorderRadius)
-  })));
+    onChange: setBorderRadius
+  }));
 }
 //# sourceMappingURL=border-panel.js.map

package/build/components/global-styles/border-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/border-panel.js"],"names":["MIN_BORDER_WIDTH","EMPTY_ARRAY","useHasBorderPanel","name","controls","useHasBorderColorControl","useHasBorderRadiusControl","useHasBorderStyleControl","useHasBorderWidthControl","some","Boolean","supports","includes","BorderPanel","userBorderStyles","createHasValueCallback","feature","createResetCallback","setStyle","undefined","handleOnChange","value","units","availableUnits","showBorderWidth","borderWidthValue","setBorderWidth","showBorderStyle","borderStyle","setBorderStyle","showBorderColor","borderColor","setBorderColor","colors","disableCustomColors","disableCustomGradients","showBorderRadius","borderRadiusValues","setBorderRadius","hasBorderRadius","borderValues","radius","Object","entries","resetAll","handleOnChangeWithStyle"],"mappings":";;;;;;;;;;AAGA;;AAKA;;AAMA;;AAKA;;AAnBA;AACA;AACA;;AAcA;AACA;AACA;AAGA,MAAMA,gBAAgB,GAAG,CAAzB,C,CAEA;AACA;;AACA,MAAMC,WAAW,GAAG,EAApB;;AAEO,SAASC,iBAAT,CAA4BC,IAA5B,EAAmC;AACzC,QAAMC,QAAQ,GAAG,CAChBC,wBAAwB,CAAEF,IAAF,CADR,EAEhBG,yBAAyB,CAAEH,IAAF,CAFT,EAGhBI,wBAAwB,CAAEJ,IAAF,CAHR,EAIhBK,wBAAwB,CAAEL,IAAF,CAJR,CAAjB;AAOA,SAAOC,QAAQ,CAACK,IAAT,CAAeC,OAAf,CAAP;AACA;;AAED,SAASL,wBAAT,CAAmCF,IAAnC,EAA0C;AACzC,QAAMQ,QAAQ,GAAG,2CAAgCR,IAAhC,CAAjB;AACA,SACC,uBAAY,cAAZ,EAA4BA,IAA5B,EAAoC,CAApC,KACAQ,QAAQ,CAACC,QAAT,CAAmB,aAAnB,CAFD;AAIA;;AAED,SAASN,yBAAT,CAAoCH,IAApC,EAA2C;AAC1C,QAAMQ,QAAQ,GAAG,2CAAgCR,IAAhC,CAAjB;AACA,SACC,uBAAY,eAAZ,EAA6BA,IAA7B,EAAqC,CAArC,KACAQ,QAAQ,CAACC,QAAT,CAAmB,cAAnB,CAFD;AAIA;;AAED,SAASL,wBAAT,CAAmCJ,IAAnC,EAA0C;AACzC,QAAMQ,QAAQ,GAAG,2CAAgCR,IAAhC,CAAjB;AACA,SACC,uBAAY,cAAZ,EAA4BA,IAA5B,EAAoC,CAApC,KACAQ,QAAQ,CAACC,QAAT,CAAmB,aAAnB,CAFD;AAIA;;AAED,SAASJ,wBAAT,CAAmCL,IAAnC,EAA0C;AACzC,QAAMQ,QAAQ,GAAG,2CAAgCR,IAAhC,CAAjB;AACA,SACC,uBAAY,cAAZ,EAA4BA,IAA5B,EAAoC,CAApC,KACAQ,QAAQ,CAACC,QAAT,CAAmB,aAAnB,CAFD;AAIA;;AAEc,SAASC,WAAT,OAAiC;AAAA,MAAX;AAAEV,IAAAA;AAAF,GAAW;AAC/C;AACA;AACA,QAAM,CAAEW,gBAAF,IAAuB,qBAAU,QAAV,EAAoBX,IAApB,EAA0B,MAA1B,CAA7B;;AACA,QAAMY,sBAAsB,GAAKC,OAAF,IAAe,MAC7C,CAAC,EAAEF,gBAAF,aAAEA,gBAAF,eAAEA,gBAAgB,CAAIE,OAAJ,CAAlB,CADF;;AAGA,QAAMC,mBAAmB,GAAKC,QAAF,IAAgB,MAAMA,QAAQ,CAAEC,SAAF,CAA1D;;AAEA,QAAMC,cAAc,GAAKF,QAAF,IAAkBG,KAAF,IAAa;AACnDH,IAAAA,QAAQ,CAAEG,KAAK,IAAIF,SAAX,CAAR;AACA,GAFD;;AAIA,QAAMG,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,uBAAY,eAAZ,EAA+B,CAA/B,KAAsC,CACrD,IADqD,EAErD,IAFqD,EAGrD,KAHqD;AADzB,GAAhB,CAAd,CAb+C,CAqB/C;;AACA,QAAMC,eAAe,GAAGhB,wBAAwB,CAAEL,IAAF,CAAhD;AACA,QAAM,CAAEsB,gBAAF,EAAoBC,cAApB,IAAuC,qBAC5C,cAD4C,EAE5CvB,IAF4C,CAA7C,CAvB+C,CA4B/C;;AACA,QAAMwB,eAAe,GAAGpB,wBAAwB,CAAEJ,IAAF,CAAhD;AACA,QAAM,CAAEyB,WAAF,EAAeC,cAAf,IAAkC,qBAAU,cAAV,EAA0B1B,IAA1B,CAAxC,CA9B+C,CAgC/C;;AACA,QAAM2B,eAAe,GAAGzB,wBAAwB,CAAEF,IAAF,CAAhD;AACA,QAAM,CAAE4B,WAAF,EAAeC,cAAf,IAAkC,qBAAU,cAAV,EAA0B7B,IAA1B,CAAxC;AACA,QAAM,CAAE8B,MAAM,GAAGhC,WAAX,IAA2B,uBAAY,eAAZ,CAAjC;AACA,QAAMiC,mBAAmB,GAAG,CAAE,uBAAY,cAAZ,EAA8B,CAA9B,CAA9B;AACA,QAAMC,sBAAsB,GAAG,CAAE,uBAAY,sBAAZ,EAAsC,CAAtC,CAAjC,CArC+C,CAuC/C;;AACA,QAAMC,gBAAgB,GAAG9B,yBAAyB,CAAEH,IAAF,CAAlD;AACA,QAAM,CAAEkC,kBAAF,EAAsBC,eAAtB,IAA0C,qBAC/C,eAD+C,EAE/CnC,IAF+C,CAAhD;;AAIA,QAAMoC,eAAe,GAAG,MAAM;AAC7B,UAAMC,YAAY,GAAG1B,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAE2B,MAAvC;;AACA,QAAK,OAAOD,YAAP,KAAwB,QAA7B,EAAwC;AACvC,aAAOE,MAAM,CAACC,OAAP,CAAgBH,YAAhB,EAA+B/B,IAA/B,CAAqCC,OAArC,CAAP;AACA;;AACD,WAAO,CAAC,CAAE8B,YAAV;AACA,GAND;;AAQA,QAAMI,QAAQ,GAAG,MAAM;AACtBZ,IAAAA,cAAc,CAAEb,SAAF,CAAd;AACAmB,IAAAA,eAAe,CAAEnB,SAAF,CAAf;AACAU,IAAAA,cAAc,CAAEV,SAAF,CAAd;AACAO,IAAAA,cAAc,CAAEP,SAAF,CAAd;AACA,GALD,CArD+C,CA4D/C;AACA;;;AACA,QAAM0B,uBAAuB,GAAK3B,QAAF,IAAkBG,KAAF,IAAa;AAC5D,QAAK,CAAC,CAAEA,KAAH,IAAY,CAAEO,WAAnB,EAAiC;AAChCC,MAAAA,cAAc,CAAE,OAAF,CAAd;AACA;;AAEDX,IAAAA,QAAQ,CAAEG,KAAK,IAAIF,SAAX,CAAR;AACA,GAND;;AAQA,SACC,4BAAC,oCAAD;AAAY,IAAA,KAAK,EAAG,cAAI,QAAJ,CAApB;AAAqC,IAAA,QAAQ,EAAGyB;AAAhD,KACGpB,eAAe,IAChB,4BAAC,wCAAD;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,QAAQ,EAAGT,sBAAsB,CAAE,OAAF,CAFlC;AAGC,IAAA,KAAK,EAAG,cAAI,OAAJ,CAHT;AAIC,IAAA,UAAU,EAAGE,mBAAmB,CAAES,cAAF,CAJjC;AAKC,IAAA,gBAAgB,EAAG;AALpB,KAOC,4BAAC,qCAAD;AACC,IAAA,KAAK,EAAGD,gBADT;AAEC,IAAA,KAAK,EAAG,cAAI,OAAJ,CAFT;AAGC,IAAA,GAAG,EAAGzB,gBAHP;AAIC,IAAA,QAAQ,EAAG6C,uBAAuB,CAAEnB,cAAF,CAJnC;AAKC,IAAA,KAAK,EAAGJ;AALT,IAPD,CAFF,EAkBGK,eAAe,IAChB,4BAAC,wCAAD;AACC,IAAA,SAAS,EAAC,eADX;AAEC,IAAA,QAAQ,EAAGZ,sBAAsB,CAAE,OAAF,CAFlC;AAGC,IAAA,KAAK,EAAG,cAAI,OAAJ,CAHT;AAIC,IAAA,UAAU,EAAGE,mBAAmB,CAAEY,cAAF,CAJjC;AAKC,IAAA,gBAAgB,EAAG;AALpB,KAOC,4BAAC,6CAAD;AACC,IAAA,KAAK,EAAGD,WADT;AAEC,IAAA,QAAQ,EAAGR,cAAc,CAAES,cAAF;AAF1B,IAPD,CAnBF,EAgCGC,eAAe,IAChB,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAGf,sBAAsB,CAAE,OAAF,CADlC;AAEC,IAAA,KAAK,EAAG,cAAI,OAAJ,CAFT;AAGC,IAAA,UAAU,EAAGE,mBAAmB,CAAEe,cAAF,CAHjC;AAIC,IAAA,gBAAgB,EAAG;AAJpB,KAMC,4BAAC,+CAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,UAAU,EAAGD,WAFd;AAGC,IAAA,MAAM,EAAGE,MAHV;AAIC,IAAA,SAAS,EAAGd,SAJb;AAKC,IAAA,mBAAmB,EAAGe,mBALvB;AAMC,IAAA,sBAAsB,EAAGC,sBAN1B;AAOC,IAAA,aAAa,EAAGU,uBAAuB,CACtCb,cADsC,CAPxC;AAUC,IAAA,SAAS,EAAG;AAVb,IAND,CAjCF,EAqDGI,gBAAgB,IACjB,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAGG,eADZ;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,UAAU,EAAGtB,mBAAmB,CAAEqB,eAAF,CAHjC;AAIC,IAAA,gBAAgB,EAAG;AAJpB,KAMC,4BAAC,8CAAD;AACC,IAAA,MAAM,EAAGD,kBADV;AAEC,IAAA,QAAQ,EAAGjB,cAAc,CAAEkB,eAAF;AAF1B,IAND,CAtDF,CADD;AAqEA","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalBorderRadiusControl as BorderRadiusControl,\n\t__experimentalBorderStyleControl as BorderStyleControl,\n\t__experimentalColorGradientControl as ColorGradientControl,\n} from '@wordpress/block-editor';\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nconst MIN_BORDER_WIDTH = 0;\n\n// Defining empty array here instead of inline avoids unnecessary re-renders of\n// color control.\nconst EMPTY_ARRAY = [];\n\nexport function useHasBorderPanel( name ) {\n\tconst controls = [\n\t\tuseHasBorderColorControl( name ),\n\t\tuseHasBorderRadiusControl( name ),\n\t\tuseHasBorderStyleControl( name ),\n\t\tuseHasBorderWidthControl( name ),\n\t];\n\n\treturn controls.some( Boolean );\n}\n\nfunction useHasBorderColorControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.color', name )[ 0 ] &&\n\t\tsupports.includes( 'borderColor' )\n\t);\n}\n\nfunction useHasBorderRadiusControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.radius', name )[ 0 ] &&\n\t\tsupports.includes( 'borderRadius' )\n\t);\n}\n\nfunction useHasBorderStyleControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.style', name )[ 0 ] &&\n\t\tsupports.includes( 'borderStyle' )\n\t);\n}\n\nfunction useHasBorderWidthControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.width', name )[ 0 ] &&\n\t\tsupports.includes( 'borderWidth' )\n\t);\n}\n\nexport default function BorderPanel( { name } ) {\n\t// To better reflect if the user has customized a value we need to\n\t// ensure the style value being checked is from the `user` origin.\n\tconst [ userBorderStyles ] = useStyle( 'border', name, 'user' );\n\tconst createHasValueCallback = ( feature ) => () =>\n\t\t!! userBorderStyles?.[ feature ];\n\n\tconst createResetCallback = ( setStyle ) => () => setStyle( undefined );\n\n\tconst handleOnChange = ( setStyle ) => ( value ) => {\n\t\tsetStyle( value \|\| undefined );\n\t};\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' )[ 0 ] \|\| [\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t],\n\t} );\n\n\t// Border width.\n\tconst showBorderWidth = useHasBorderWidthControl( name );\n\tconst [ borderWidthValue, setBorderWidth ] = useStyle(\n\t\t'border.width',\n\t\tname\n\t);\n\n\t// Border style.\n\tconst showBorderStyle = useHasBorderStyleControl( name );\n\tconst [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );\n\n\t// Border color.\n\tconst showBorderColor = useHasBorderColorControl( name );\n\tconst [ borderColor, setBorderColor ] = useStyle( 'border.color', name );\n\tconst [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );\n\tconst disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];\n\tconst disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];\n\n\t// Border radius.\n\tconst showBorderRadius = useHasBorderRadiusControl( name );\n\tconst [ borderRadiusValues, setBorderRadius ] = useStyle(\n\t\t'border.radius',\n\t\tname\n\t);\n\tconst hasBorderRadius = () => {\n\t\tconst borderValues = userBorderStyles?.radius;\n\t\tif ( typeof borderValues === 'object' ) {\n\t\t\treturn Object.entries( borderValues ).some( Boolean );\n\t\t}\n\t\treturn !! borderValues;\n\t};\n\n\tconst resetAll = () => {\n\t\tsetBorderColor( undefined );\n\t\tsetBorderRadius( undefined );\n\t\tsetBorderStyle( undefined );\n\t\tsetBorderWidth( undefined );\n\t};\n\n\t// When we set a border color or width ensure we have a style so the user\n\t// can see a visible border.\n\tconst handleOnChangeWithStyle = ( setStyle ) => ( value ) => {\n\t\tif ( !! value && ! borderStyle ) {\n\t\t\tsetBorderStyle( 'solid' );\n\t\t}\n\n\t\tsetStyle( value \|\| undefined );\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>\n\t\t\t{ showBorderWidth && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ createHasValueCallback( 'width' ) }\n\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderWidth ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tvalue={ borderWidthValue }\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tmin={ MIN_BORDER_WIDTH }\n\t\t\t\t\t\tonChange={ handleOnChangeWithStyle( setBorderWidth ) }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderStyle && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ createHasValueCallback( 'style' ) }\n\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderStyle ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<BorderStyleControl\n\t\t\t\t\t\tvalue={ borderStyle }\n\t\t\t\t\t\tonChange={ handleOnChange( setBorderStyle ) }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderColor && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ createHasValueCallback( 'color' ) }\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderColor ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\t\tcolorValue={ borderColor }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tgradients={ undefined }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomGradients={ disableCustomGradients }\n\t\t\t\t\t\tonColorChange={ handleOnChangeWithStyle(\n\t\t\t\t\t\t\tsetBorderColor\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderRadius && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasBorderRadius }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderRadius ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusControl\n\t\t\t\t\t\tvalues={ borderRadiusValues }\n\t\t\t\t\t\tonChange={ handleOnChange( setBorderRadius ) }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/border-panel.js"],"names":["MIN_BORDER_WIDTH","EMPTY_ARRAY","useHasBorderPanel","name","controls","useHasBorderColorControl","useHasBorderRadiusControl","useHasBorderStyleControl","useHasBorderWidthControl","some","Boolean","supports","includes","BorderPanel","units","availableUnits","hasBorderWidth","borderWidthValue","setBorderWidth","hasBorderStyle","borderStyle","setBorderStyle","colors","disableCustomColors","disableCustomGradients","hasBorderColor","borderColor","setBorderColor","hasBorderRadius","borderRadiusValues","setBorderRadius","value","undefined"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalBorderRadiusControl as BorderRadiusControl,\n\t__experimentalBorderStyleControl as BorderStyleControl,\n\t__experimentalColorGradientControl as ColorGradientControl,\n} from '@wordpress/block-editor';\nimport {\n\tPanelBody,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nconst MIN_BORDER_WIDTH = 0;\n\n// Defining empty array here instead of inline avoids unnecessary re-renders of\n// color control.\nconst EMPTY_ARRAY = [];\n\nexport function useHasBorderPanel( name ) {\n\tconst controls = [\n\t\tuseHasBorderColorControl( name ),\n\t\tuseHasBorderRadiusControl( name ),\n\t\tuseHasBorderStyleControl( name ),\n\t\tuseHasBorderWidthControl( name ),\n\t];\n\n\treturn controls.some( Boolean );\n}\n\nfunction useHasBorderColorControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.color', name )[ 0 ] &&\n\t\tsupports.includes( 'borderColor' )\n\t);\n}\n\nfunction useHasBorderRadiusControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.radius', name )[ 0 ] &&\n\t\tsupports.includes( 'borderRadius' )\n\t);\n}\n\nfunction useHasBorderStyleControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.style', name )[ 0 ] &&\n\t\tsupports.includes( 'borderStyle' )\n\t);\n}\n\nfunction useHasBorderWidthControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.width', name )[ 0 ] &&\n\t\tsupports.includes( 'borderWidth' )\n\t);\n}\n\nexport default function BorderPanel( { name } ) {\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' )[ 0 ] \|\| [\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t],\n\t} );\n\n\t// Border width.\n\tconst hasBorderWidth = useHasBorderWidthControl( name );\n\tconst [ borderWidthValue, setBorderWidth ] = useStyle(\n\t\t'border.width',\n\t\tname\n\t);\n\n\t// Border style.\n\tconst hasBorderStyle = useHasBorderStyleControl( name );\n\tconst [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );\n\n\t// Border color.\n\tconst [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );\n\tconst disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];\n\tconst disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];\n\tconst hasBorderColor = useHasBorderColorControl( name );\n\tconst [ borderColor, setBorderColor ] = useStyle( 'border.color', name );\n\n\t// Border radius.\n\tconst hasBorderRadius = useHasBorderRadiusControl( name );\n\tconst [ borderRadiusValues, setBorderRadius ] = useStyle(\n\t\t'border.radius',\n\t\tname\n\t);\n\n\treturn (\n\t\t<PanelBody title={ __( 'Border' ) } initialOpen={ true }>\n\t\t\t{ ( hasBorderWidth \|\| hasBorderStyle ) && (\n\t\t\t\t<div className=\"edit-site-global-styles-sidebar__border-controls-row\">\n\t\t\t\t\t{ hasBorderWidth && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tvalue={ borderWidthValue }\n\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_WIDTH }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetBorderWidth( value \|\| undefined );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ hasBorderStyle && (\n\t\t\t\t\t\t<BorderStyleControl\n\t\t\t\t\t\t\tvalue={ borderStyle }\n\t\t\t\t\t\t\tonChange={ setBorderStyle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBorderColor && (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\tcolorValue={ borderColor }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tgradients={ undefined }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tdisableCustomGradients={ disableCustomGradients }\n\t\t\t\t\tonColorChange={ setBorderColor }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderRadius && (\n\t\t\t\t<BorderRadiusControl\n\t\t\t\t\tvalues={ borderRadiusValues }\n\t\t\t\t\tonChange={ setBorderRadius }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PanelBody>\n\t);\n}\n"]}

package/build/components/global-styles/gradients-palette-panel.js CHANGED Viewed

@@ -1,5 +1,7 @@
 "use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +17,8 @@ var _i18n = require("@wordpress/i18n");
 var _hooks = require("./hooks");
+var _subtitle = _interopRequireDefault(require("./subtitle"));
 /**
  * External dependencies
  */
@@ -58,9 +62,9 @@ function GradientPalettePanel(_ref) {
     paletteLabel: (0, _i18n.__)('Custom'),
     emptyMessage: (0, _i18n.__)('Custom gradients are empty! Add some gradients to create your own palette.'),
     slugPrefix: "custom-"
-  }), (0, _element.createElement)("div", null, (0, _element.createElement)(_components.__experimentalHeading, {
-    className: "edit-site-global-styles-gradient-palette-panel__duotone-heading"
-  }, (0, _i18n.__)('Duotone')), (0, _element.createElement)(_components.DuotonePicker, {
+  }), (0, _element.createElement)("div", null, (0, _element.createElement)(_subtitle.default, null, (0, _i18n.__)('Duotone')), (0, _element.createElement)(_components.__experimentalSpacer, {
+    margin: 3
+  }), (0, _element.createElement)(_components.DuotonePicker, {
     duotonePalette: duotonePalette,
     disableCustomDuotone: true,
     disableCustomColors: true,

package/build/components/global-styles/gradients-palette-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"names":["GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","duotonePalette","length","noop"],"mappings":"~~;;;;;;;;;~~AAGA;;AAKA;;AAMA;;AAKA;;~~AAnBA~~;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;~~AAGe~~,SAASA,oBAAT,OAA0C;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACxD,QAAM,CAAEC,cAAF,EAAkBC,iBAAlB,IAAwC,uBAC7C,uBAD6C,EAE7CF,IAF6C,CAA9C;AAIA,QAAM,CAAEG,kBAAF,IAAyB,uBAC9B,uBAD8B,EAE9BH,IAF8B,EAG9B,MAH8B,CAA/B;AAKA,QAAM,CAAEI,gBAAF,EAAoBC,mBAApB,IAA4C,uBACjD,yBADiD,EAEjDL,IAFiD,CAAlD;AAIA,QAAM,CAAEM,oBAAF,IAA2B,uBAChC,yBADgC,EAEhCN,IAFgC,EAGhC,MAHgC,CAAjC;AAKA,QAAM,CAAEO,eAAF,EAAmBC,kBAAnB,IAA0C,uBAC/C,wBAD+C,EAE/CR,IAF+C,CAAhD;AAKA,QAAM,CAAES,qBAAF,IAA4B,uBACjC,wBADiC,EAEjCT,IAFiC,CAAlC;AAIA,QAAM,CAAEU,cAAF,IAAqB,uBAAY,eAAZ,KAAiC,EAA5D;AACA,SACC,4BAAC,gCAAD;AACC,IAAA,SAAS,EAAC,gDADX;AAEC,IAAA,OAAO,EAAG;AAFX,KAIG,CAAC,CAAET,cAAH,IAAqB,CAAC,CAAEA,cAAc,CAACU,MAAvC,IACD,4BAAC,qCAAD;AACC,IAAA,QAAQ,EAAGV,cAAc,KAAKE,kBAD/B;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,SAAS,EAAGF,cAHb;AAIC,IAAA,QAAQ,EAAGC,iBAJZ;AAKC,IAAA,YAAY,EAAG,cAAI,OAAJ;AALhB,IALF,EAaG,CAAC,CAAEE,gBAAH,IACD,CAAC,CAAEA,gBAAgB,CAACO,MADnB,IAED,CAAC,CAAEF,qBAFF,IAGA,4BAAC,qCAAD;AACC,IAAA,QAAQ,EAAGL,gBAAgB,KAAKE,oBADjC;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,SAAS,EAAGF,gBAHb;AAIC,IAAA,QAAQ,EAAGC,mBAJZ;AAKC,IAAA,YAAY,EAAG,cAAI,SAAJ;AALhB,IAhBH,EAwBC,4BAAC,qCAAD;AACC,IAAA,SAAS,EAAGE,eADb;AAEC,IAAA,QAAQ,EAAGC,kBAFZ;AAGC,IAAA,YAAY,EAAG,cAAI,QAAJ,CAHhB;AAIC,IAAA,YAAY,EAAG,cACd,4EADc,CAJhB;AAOC,IAAA,UAAU,EAAC;AAPZ,IAxBD,EAiCC,yCACC,4BAAC,~~iCAAD;AAAS~~,~~IAAA~~,~~SAAS,EAAC;AAAnB,KACG,~~cAAI,SAAJ,~~CADH~~,CADD,~~EAIC~~,4BAAC,yBAAD;AACC,IAAA,cAAc,EAAGE,cADlB;AAEC,IAAA,oBAAoB,EAAG,IAFxB;AAGC,IAAA,mBAAmB,EAAG,IAHvB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGE;AALZ,~~IAJD~~,CAjCD,CADD;~~AAgDA~~","sourcesContent":["/*\n External dependencies\n /\nimport { noop } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\~~tDuotonePicker,\n\t__experimentalHeading~~ as ~~Heading~~,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { useSetting } from './hooks';\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\tconst [ duotonePalette ] = useSetting( 'color.duotone' ) \|\| [];\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom gradients are empty! Add some gradients to create your own palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t/>\n\t\t\t<div>\n\t\t\t\t<~~Heading className=\"edit-site-global-styles-gradient-palette-panel__duotone-heading\">\n\t\t\t\t\t~~{ __( 'Duotone' ) }\n\t\t\t\t~~</Heading>\~~n\t\t\t\t<DuotonePicker\n\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\tdisableCustomDuotone={ true }\n\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ noop }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</VStack>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"names":["GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","duotonePalette","length","noop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAMA;;AAKA;;AACA;;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AAIe,SAASA,oBAAT,OAA0C;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACxD,QAAM,CAAEC,cAAF,EAAkBC,iBAAlB,IAAwC,uBAC7C,uBAD6C,EAE7CF,IAF6C,CAA9C;AAIA,QAAM,CAAEG,kBAAF,IAAyB,uBAC9B,uBAD8B,EAE9BH,IAF8B,EAG9B,MAH8B,CAA/B;AAKA,QAAM,CAAEI,gBAAF,EAAoBC,mBAApB,IAA4C,uBACjD,yBADiD,EAEjDL,IAFiD,CAAlD;AAIA,QAAM,CAAEM,oBAAF,IAA2B,uBAChC,yBADgC,EAEhCN,IAFgC,EAGhC,MAHgC,CAAjC;AAKA,QAAM,CAAEO,eAAF,EAAmBC,kBAAnB,IAA0C,uBAC/C,wBAD+C,EAE/CR,IAF+C,CAAhD;AAKA,QAAM,CAAES,qBAAF,IAA4B,uBACjC,wBADiC,EAEjCT,IAFiC,CAAlC;AAIA,QAAM,CAAEU,cAAF,IAAqB,uBAAY,eAAZ,KAAiC,EAA5D;AACA,SACC,4BAAC,gCAAD;AACC,IAAA,SAAS,EAAC,gDADX;AAEC,IAAA,OAAO,EAAG;AAFX,KAIG,CAAC,CAAET,cAAH,IAAqB,CAAC,CAAEA,cAAc,CAACU,MAAvC,IACD,4BAAC,qCAAD;AACC,IAAA,QAAQ,EAAGV,cAAc,KAAKE,kBAD/B;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,SAAS,EAAGF,cAHb;AAIC,IAAA,QAAQ,EAAGC,iBAJZ;AAKC,IAAA,YAAY,EAAG,cAAI,OAAJ;AALhB,IALF,EAaG,CAAC,CAAEE,gBAAH,IACD,CAAC,CAAEA,gBAAgB,CAACO,MADnB,IAED,CAAC,CAAEF,qBAFF,IAGA,4BAAC,qCAAD;AACC,IAAA,QAAQ,EAAGL,gBAAgB,KAAKE,oBADjC;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,SAAS,EAAGF,gBAHb;AAIC,IAAA,QAAQ,EAAGC,mBAJZ;AAKC,IAAA,YAAY,EAAG,cAAI,SAAJ;AALhB,IAhBH,EAwBC,4BAAC,qCAAD;AACC,IAAA,SAAS,EAAGE,eADb;AAEC,IAAA,QAAQ,EAAGC,kBAFZ;AAGC,IAAA,YAAY,EAAG,cAAI,QAAJ,CAHhB;AAIC,IAAA,YAAY,EAAG,cACd,4EADc,CAJhB;AAOC,IAAA,UAAU,EAAC;AAPZ,IAxBD,EAiCC,yCACC,4BAAC,iBAAD,QAAY,cAAI,SAAJ,CAAZ,CADD,EAEC,4BAAC,gCAAD;AAAQ,IAAA,MAAM,EAAG;AAAjB,IAFD,EAGC,4BAAC,yBAAD;AACC,IAAA,cAAc,EAAGE,cADlB;AAEC,IAAA,oBAAoB,EAAG,IAFxB;AAGC,IAAA,mBAAmB,EAAG,IAHvB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGE;AALZ,IAHD,CAjCD,CADD;AA+CA","sourcesContent":["/*\n External dependencies\n /\nimport { noop } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { useSetting } from './hooks';\nimport Subtitle from './subtitle';\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\tconst [ duotonePalette ] = useSetting( 'color.duotone' ) \|\| [];\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom gradients are empty! Add some gradients to create your own palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t/>\n\t\t\t<div>\n\t\t\t\t<Subtitle>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t<DuotonePicker\n\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\tdisableCustomDuotone={ true }\n\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ noop }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</VStack>\n\t);\n}\n"]}

package/build/components/global-styles/screen-background-color.js CHANGED Viewed

@@ -9,8 +9,6 @@ exports.default = void 0;
 var _element = require("@wordpress/element");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _i18n = require("@wordpress/i18n");
 var _blockEditor = require("@wordpress/block-editor");
@@ -50,6 +48,7 @@ function ScreenBackgroundColor(_ref) {
     return null;
   }
+  const settings = [];
   let backgroundSettings = {};
   if (hasBackgroundColor) {
@@ -76,15 +75,17 @@ function ScreenBackgroundColor(_ref) {
     }
   }
-  const controlProps = { ...backgroundSettings,
-    ...gradientSettings
-  };
+  settings.push({ ...backgroundSettings,
+    ...gradientSettings,
+    label: (0, _i18n.__)('Background color')
+  });
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     back: parentMenu + '/colors',
     title: (0, _i18n.__)('Background'),
-    description: (0, _i18n.__)('Set a background color or gradient for the whole site.')
-  }), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, (0, _extends2.default)({
-    className: "edit-site-screen-background-color__control",
+    description: (0, _i18n.__)('Set a background color or gradient for the whole website.')
+  }), (0, _element.createElement)(_blockEditor.__experimentalPanelColorGradientSettings, {
+    title: (0, _i18n.__)('Color'),
+    settings: settings,
     colors: colorsPerOrigin,
     gradients: gradientsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
@@ -93,7 +94,7 @@ function ScreenBackgroundColor(_ref) {
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true
-  }, controlProps)));
+  }));
 }
 var _default = ScreenBackgroundColor;

package/build/components/global-styles/screen-background-color.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-background-color.js"],"names":["ScreenBackgroundColor","name","parentMenu","undefined","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","colorsPerOrigin","gradientsPerOrigin","isBackgroundEnabled","hasBackgroundColor","includes","length","hasGradientColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","~~controlProps~~"],"mappings":"~~;;;;;;;;;;;;;~~AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAUA,SAASA,qBAAT,OAA2C;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC1C,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAG,2CAAgCH,IAAhC,CAAjB;AACA,QAAM,CAAEI,MAAF,IAAa,uBAAY,eAAZ,EAA6BJ,IAA7B,CAAnB;AACA,QAAM,CAAEK,SAAF,IAAgB,uBAAY,iBAAZ,EAA+BL,IAA/B,CAAtB;AACA,QAAM,CAAEM,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BN,IAA5B,CAAnC;AACA,QAAM,CAAEO,yBAAF,IAAgC,uBACrC,sBADqC,EAErCP,IAFqC,CAAtC;AAKA,QAAMQ,eAAe,GAAG,+BAAoBR,IAApB,CAAxB;AACA,QAAMS,kBAAkB,GAAG,kCAAuBT,IAAvB,CAA3B;AAEA,QAAM,CAAEU,mBAAF,IAA0B,uBAAY,kBAAZ,EAAgCV,IAAhC,CAAhC;AAEA,QAAMW,kBAAkB,GACvBR,QAAQ,CAACS,QAAT,CAAmB,iBAAnB,KACAF,mBADA,KAEEN,MAAM,CAACS,MAAP,GAAgB,CAAhB,IAAqBP,sBAFvB,CADD;AAIA,QAAMQ,gBAAgB,GACrBX,QAAQ,CAACS,QAAT,CAAmB,YAAnB,MACEP,SAAS,CAACQ,MAAV,GAAmB,CAAnB,IAAwBN,yBAD1B,CADD;AAGA,QAAM,CAAEQ,eAAF,EAAmBC,kBAAnB,IAA0C,qBAC/C,kBAD+C,EAE/ChB,IAF+C,CAAhD;AAIA,QAAM,CAAEiB,mBAAF,IAA0B,qBAC/B,kBAD+B,EAE/BjB,IAF+B,EAG/B,MAH+B,CAAhC;AAKA,QAAM,CAAEkB,QAAF,EAAYC,WAAZ,IAA4B,qBAAU,gBAAV,EAA4BnB,IAA5B,CAAlC;AACA,QAAM,CAAEoB,YAAF,IAAmB,qBAAU,gBAAV,EAA4BpB,IAA5B,EAAkC,MAAlC,CAAzB;;AAEA,MAAK,CAAEW,kBAAF,IAAwB,CAAEG,gBAA/B,EAAkD;AACjD,WAAO,IAAP;AACA;;AAED,~~MAAIO~~,kBAAkB,GAAG,EAAzB;;AACA,~~MAAKV~~,kBAAL,EAA0B;~~AACzBU~~,IAAAA,kBAAkB,GAAG;AACpBC,MAAAA,UAAU,~~EAAEP~~,eADQ;~~AAEpBQ~~,MAAAA,aAAa,~~EAAEP~~;AAFK,KAArB;;AAIA,QAAKD,eAAL,EAAuB;~~AACtBM~~,MAAAA,kBAAkB,CAACG,SAAnB,~~GACCT~~,eAAe,KAAKE,mBADrB;AAEA;AACD;;AAED,~~MAAIQ~~,gBAAgB,GAAG,EAAvB;;AACA,~~MAAKX~~,gBAAL,EAAwB;~~AACvBW~~,IAAAA,gBAAgB,GAAG;AAClBC,MAAAA,aAAa,~~EAAER~~,QADG;~~AAElBS~~,MAAAA,gBAAgB,~~EAAER~~;AAFA,KAAnB;;AAIA,QAAKD,QAAL,EAAgB;~~AACfO~~,MAAAA,gBAAgB,CAACD,SAAjB,~~GAA6BN~~,QAAQ,KAAKE,YAA1C;AACA;AACD;;~~AAED~~,~~QAAMQ~~,~~YAAY~~,~~GAAG~~,~~EACpB~~,GAAGP,~~kBADiB~~;~~AAEpB~~,OAAGI;~~AAFiB~~,~~GAArB~~;~~AAKA~~,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,~~EAAGxB~~,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAG,cAAI,YAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,~~wDADa~~;AAHf,IADD,~~EAQC~~,4BAAC~~,+CAAD~~;AACC,IAAA,~~SAAS~~,~~EAAC~~,~~4CADX~~;AAEC,IAAA,~~MAAM~~,~~EAAGO~~,~~eAFV~~;AAGC,IAAA,SAAS,EAAGC,~~kBAHb~~;~~AAIC~~,IAAA,mBAAmB,EAAG,CAAEH,~~sBAJzB~~;~~AAKC~~,IAAA,sBAAsB,EAAG,CAAEC,~~yBAL5B~~;~~AAMC~~,IAAA,gCAAgC,~~MANjC~~;~~AAOC~~,IAAA,SAAS,EAAG,~~KAPb~~;~~AAQC~~,IAAA,WAAW,~~MARZ~~;~~AASC~~,IAAA,iCAAiC;~~AATlC~~,~~KAUMqB~~,~~YAVN,EARD,~~CADD;~~AAuBA~~;;~~eAEc7B~~,qB","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { ~~__experimentalColorGradientControl~~ as ~~ColorGradientControl~~ } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n\tuseSetting,\n\tuseStyle,\n} from './hooks';\n\nfunction ScreenBackgroundColor( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ gradients ] = useSetting( 'color.gradients', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 \|\| areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradients.length > 0 \|\| areCustomGradientsEnabled );\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle( 'color.gradient', name );\n\tconst [ userGradient ] = useStyle( 'color.gradient', name, 'user' );\n\n\tif ( ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\~~tconst~~ ~~controlProps =~~ {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set a background color or gradient for the whole ~~site~~.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<~~ColorGradientControl~~\n\t\t\t\~~tclassName=\"edit-site-screen-background-color__control~~\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t~~\t{ ...controlProps }\n\t\t\t~~/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBackgroundColor;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-background-color.js"],"names":["ScreenBackgroundColor","name","parentMenu","undefined","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","colorsPerOrigin","gradientsPerOrigin","isBackgroundEnabled","hasBackgroundColor","includes","length","hasGradientColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","settings","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","push","label"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n\tuseSetting,\n\tuseStyle,\n} from './hooks';\n\nfunction ScreenBackgroundColor( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ gradients ] = useSetting( 'color.gradients', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 \|\| areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradients.length > 0 \|\| areCustomGradientsEnabled );\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle( 'color.gradient', name );\n\tconst [ userGradient ] = useStyle( 'color.gradient', name, 'user' );\n\n\tif ( ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tconst settings = [];\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tsettings.push( {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t\tlabel: __( 'Background color' ),\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set a background color or gradient for the whole website.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tsettings={ settings }\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBackgroundColor;\n"]}

package/build/components/global-styles/screen-colors.js CHANGED Viewed

@@ -105,7 +105,7 @@ function ScreenColors(_ref4) {
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     back: parentMenu ? parentMenu : '/',
     title: (0, _i18n.__)('Colors'),
-    description: (0, _i18n.__)('Manage palettes and the default color of different global elements on the site.')
+    description: (0, _i18n.__)('Manage palettes and the default color of different global elements on the website.')
   }), (0, _element.createElement)("div", {
     className: "edit-site-global-styles-screen-colors"
   }, (0, _element.createElement)(_components.__experimentalVStack, {

package/build/components/global-styles/screen-colors.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","ScreenColors","undefined"],"mappings":"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~~iFADa~~;AAHf,IADD,EASC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGD;AAAhB,IADD,EAGC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD,QAAY,cAAI,UAAJ,CAAZ,CADD,EAEC,4BAAC,mCAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,4BAAC,mBAAD;AACC,IAAA,IAAI,EAAGA,IADR;AAEC,IAAA,UAAU,EAAGC;AAFd,IADD,EAKC,4BAAC,aAAD;AACC,IAAA,IAAI,EAAGD,IADR;AAEC,IAAA,UAAU,EAAGC;AAFd,IALD,EASC,4BAAC,aAAD;AACC,IAAA,IAAI,EAAGD,IADR;AAEC,IAAA,UAAU,EAAGC;AAFd,IATD,CAFD,CAHD,CADD,CATD,CADD;AAmCA;;eAEcS,Y","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport NavigationButton from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\n\nfunction BackgroundColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) \|\|\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle( 'color.background', name );\n\tconst [ gradientValue ] = useStyle( 'color.gradient', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/background' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Background' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/text' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Text' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle( 'elements.link.color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/link' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Links' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu ? parentMenu : '/' }\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the ~~site~~.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<BackgroundColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TextColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<LinkColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","ScreenColors","undefined"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport NavigationButton from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\n\nfunction BackgroundColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) \|\|\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle( 'color.background', name );\n\tconst [ gradientValue ] = useStyle( 'color.gradient', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/background' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Background' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/text' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Text' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle( 'elements.link.color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/link' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Links' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu ? parentMenu : '/' }\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the website.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<BackgroundColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TextColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<LinkColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}

package/build/components/global-styles/screen-link-color.js CHANGED Viewed

@@ -42,21 +42,25 @@ function ScreenLinkColor(_ref) {
     return null;
   }
+  const settings = [{
+    colorValue: linkColor,
+    onColorChange: setLinkColor,
+    label: (0, _i18n.__)('Link color'),
+    clearable: linkColor === userLinkColor
+  }];
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     back: parentMenu + '/colors',
     title: (0, _i18n.__)('Links'),
     description: (0, _i18n.__)('Set the default color used for links across the site.')
-  }), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
-    className: "edit-site-screen-link-color__control",
+  }), (0, _element.createElement)(_blockEditor.__experimentalPanelColorGradientSettings, {
+    title: (0, _i18n.__)('Color'),
+    settings: settings,
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
     __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
-    __experimentalIsRenderedInSidebar: true,
-    colorValue: linkColor,
-    onColorChange: setLinkColor,
-    clearable: linkColor === userLinkColor
+    __experimentalIsRenderedInSidebar: true
   }));
 }

package/build/components/global-styles/screen-link-color.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["ScreenLinkColor","name","parentMenu","undefined","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","linkColor","setLinkColor","userLinkColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAG,2CAAgCH,IAAhC,CAAjB;AACA,QAAM,CAAEI,MAAF,IAAa,uBAAY,eAAZ,EAA6BJ,IAA7B,CAAnB;AACA,QAAM,CAAEK,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BL,IAA5B,CAAnC;AAEA,QAAMM,eAAe,GAAG,+BAAoBN,IAApB,CAAxB;AAEA,QAAM,CAAEO,aAAF,IAAoB,uBAAY,YAAZ,EAA0BP,IAA1B,CAA1B;AAEA,QAAMQ,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,WAAnB,KACAF,aADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,SAAF,EAAaC,YAAb,IAA8B,qBACnC,0BADmC,EAEnCZ,IAFmC,CAApC;AAIA,QAAM,CAAEa,aAAF,IAAoB,qBACzB,0BADyB,EAEzBb,IAFyB,EAGzB,MAHyB,CAA1B;;AAMA,MAAK,CAAEQ,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,~~EAAGP~~,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAG,cAAI,OAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,uDADa;AAHf,IADD,~~EAQC~~,4BAAC~~,+CAAD~~;AACC,IAAA,~~SAAS~~,~~EAAC~~,~~sCADX~~;AAEC,IAAA,~~MAAM~~,~~EAAGK~~,~~eAFV~~;AAGC,IAAA,mBAAmB,EAAG,CAAED,~~sBAHzB~~;~~AAIC~~,IAAA,gCAAgC,~~MAJjC~~;~~AAKC~~,IAAA,SAAS,EAAG,~~KALb~~;~~AAMC~~,IAAA,WAAW,~~MANZ~~;~~AAOC~~,IAAA,iCAAiC~~,MAPlC~~;~~AAQC~~,~~IAAA~~,~~UAAU,EAAGM,SARd;AASC,IAAA,aAAa,EAAGC,YATjB;AAUC,IAAA,SAAS,EAAGD,SAAS,KAAKE;AAV3B,IARD,~~CADD;~~AAuBA~~;;~~eAEcd~~,e","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { ~~__experimentalColorGradientControl~~ as ~~ColorGradientControl~~ } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 \|\| areCustomSolidsEnabled );\n\n\tconst [ linkColor, setLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname\n\t);\n\tconst [ userLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\~~t\t\t<ColorGradientControl\~~n\t\t\t\~~tclassName=\"edit-site-screen-link-color__control\"\~~n\t\t\t\~~tcolors~~={ ~~colorsPerOrigin~~ }\n\t\t\t\~~tdisableCustomColors~~={ ! ~~areCustomSolidsEnabled~~ }\n\t\t\t\~~t__experimentalHasMultipleOrigins~~\n\t\t\t\~~tshowTitle~~={ ~~false~~ }\n\t\t\t\~~tenableAlpha~~\n\t\t\t\~~t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue~~={ ~~linkColor~~ }\n\t\t\t\~~tonColorChange={ setLinkColor }~~\n\t\t\t\~~tclearable={ linkColor === userLinkColor }~~\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["ScreenLinkColor","name","parentMenu","undefined","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","linkColor","setLinkColor","userLinkColor","settings","colorValue","onColorChange","label","clearable"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAG,2CAAgCH,IAAhC,CAAjB;AACA,QAAM,CAAEI,MAAF,IAAa,uBAAY,eAAZ,EAA6BJ,IAA7B,CAAnB;AACA,QAAM,CAAEK,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BL,IAA5B,CAAnC;AAEA,QAAMM,eAAe,GAAG,+BAAoBN,IAApB,CAAxB;AAEA,QAAM,CAAEO,aAAF,IAAoB,uBAAY,YAAZ,EAA0BP,IAA1B,CAA1B;AAEA,QAAMQ,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,WAAnB,KACAF,aADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,SAAF,EAAaC,YAAb,IAA8B,qBACnC,0BADmC,EAEnCZ,IAFmC,CAApC;AAIA,QAAM,CAAEa,aAAF,IAAoB,qBACzB,0BADyB,EAEzBb,IAFyB,EAGzB,MAHyB,CAA1B;;AAMA,MAAK,CAAEQ,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,QAAMM,QAAQ,GAAG,CAChB;AACCC,IAAAA,UAAU,EAAEJ,SADb;AAECK,IAAAA,aAAa,EAAEJ,YAFhB;AAGCK,IAAAA,KAAK,EAAE,cAAI,YAAJ,CAHR;AAICC,IAAAA,SAAS,EAAEP,SAAS,KAAKE;AAJ1B,GADgB,CAAjB;AASA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAGZ,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAG,cAAI,OAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,uDADa;AAHf,IADD,EASC,4BAAC,qDAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,QAAQ,EAAGa,QAFZ;AAGC,IAAA,MAAM,EAAGR,eAHV;AAIC,IAAA,mBAAmB,EAAG,CAAED,sBAJzB;AAKC,IAAA,gCAAgC,MALjC;AAMC,IAAA,SAAS,EAAG,KANb;AAOC,IAAA,WAAW,MAPZ;AAQC,IAAA,iCAAiC;AARlC,IATD,CADD;AAsBA;;eAEcN,e","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 \|\| areCustomSolidsEnabled );\n\n\tconst [ linkColor, setLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname\n\t);\n\tconst [ userLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst settings = [\n\t\t{\n\t\t\tcolorValue: linkColor,\n\t\t\tonColorChange: setLinkColor,\n\t\t\tlabel: __( 'Link color' ),\n\t\t\tclearable: linkColor === userLinkColor,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tsettings={ settings }\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}

package/build/components/global-styles/screen-text-color.js CHANGED Viewed

@@ -42,21 +42,25 @@ function ScreenTextColor(_ref) {
     return null;
   }
+  const settings = [{
+    colorValue: color,
+    onColorChange: setColor,
+    label: (0, _i18n.__)('Text color'),
+    clearable: color === userColor
+  }];
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     back: parentMenu + '/colors',
     title: (0, _i18n.__)('Text'),
     description: (0, _i18n.__)('Set the default color used for text across the site.')
-  }), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
-    className: "edit-site-screen-text-color__control",
+  }), (0, _element.createElement)(_blockEditor.__experimentalPanelColorGradientSettings, {
+    title: (0, _i18n.__)('Color'),
+    settings: settings,
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
     __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
-    __experimentalIsRenderedInSidebar: true,
-    colorValue: color,
-    onColorChange: setColor,
-    clearable: color === userColor
+    __experimentalIsRenderedInSidebar: true
   }));
 }

package/build/components/global-styles/screen-text-color.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["ScreenTextColor","name","parentMenu","undefined","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAG,2CAAgCH,IAAhC,CAAjB;AACA,QAAM,CAAEI,MAAF,IAAa,uBAAY,eAAZ,EAA6BJ,IAA7B,CAAnB;AACA,QAAM,CAAEK,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BL,IAA5B,CAAnC;AACA,QAAM,CAAEM,aAAF,IAAoB,uBAAY,YAAZ,EAA0BN,IAA1B,CAA1B;AAEA,QAAMO,eAAe,GAAG,+BAAoBP,IAApB,CAAxB;AAEA,QAAMQ,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsB,qBAAU,YAAV,EAAwBZ,IAAxB,CAA5B;AACA,QAAM,CAAEa,SAAF,IAAgB,qBAAU,YAAV,EAAwBb,IAAxB,EAA8B,MAA9B,CAAtB;;AAEA,MAAK,CAAEQ,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,~~EAAGP~~,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAG,cAAI,MAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,sDADa;AAHf,IADD,~~EAQC~~,4BAAC~~,+CAAD~~;AACC,IAAA,~~SAAS~~,~~EAAC~~,~~sCADX~~;AAEC,IAAA,~~MAAM~~,~~EAAGM~~,~~eAFV~~;AAGC,IAAA,mBAAmB,EAAG,CAAEF,~~sBAHzB~~;~~AAIC~~,IAAA,gCAAgC,~~MAJjC~~;~~AAKC~~,IAAA,SAAS,EAAG,~~KALb~~;~~AAMC~~,IAAA,WAAW,~~MANZ~~;~~AAOC~~,IAAA,iCAAiC~~,MAPlC~~;~~AAQC~~,~~IAAA~~,~~UAAU,EAAGM,KARd;AASC,IAAA,aAAa,EAAGC,QATjB;AAUC,IAAA,SAAS,EAAGD,KAAK,KAAKE;AAVvB,IARD,~~CADD;~~AAuBA~~;;~~eAEcd~~,e","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { ~~__experimentalColorGradientControl~~ as ~~ColorGradientControl~~ } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenTextColor( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 \|\| areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( 'color.text', name );\n\tconst [ userColor ] = useStyle( 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\~~t\t\t<ColorGradientControl\~~n\t\t\t\~~tclassName=\"edit-site-screen-text-color__control\"\~~n\t\t\t\~~tcolors~~={ ~~colorsPerOrigin~~ }\n\t\t\t\~~tdisableCustomColors~~={ ! ~~areCustomSolidsEnabled~~ }\n\t\t\t\~~t__experimentalHasMultipleOrigins~~\n\t\t\t\~~tshowTitle~~={ ~~false~~ }\n\t\t\t\~~tenableAlpha~~\n\t\t\t\~~t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue~~={ ~~color~~ }\n\t\t\t\~~tonColorChange={ setColor }~~\n\t\t\t\~~tclearable={ color === userColor }~~\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTextColor;\n"]}
1	+ {"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["ScreenTextColor","name","parentMenu","undefined","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor","settings","colorValue","onColorChange","label","clearable"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAG,2CAAgCH,IAAhC,CAAjB;AACA,QAAM,CAAEI,MAAF,IAAa,uBAAY,eAAZ,EAA6BJ,IAA7B,CAAnB;AACA,QAAM,CAAEK,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BL,IAA5B,CAAnC;AACA,QAAM,CAAEM,aAAF,IAAoB,uBAAY,YAAZ,EAA0BN,IAA1B,CAA1B;AAEA,QAAMO,eAAe,GAAG,+BAAoBP,IAApB,CAAxB;AAEA,QAAMQ,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsB,qBAAU,YAAV,EAAwBZ,IAAxB,CAA5B;AACA,QAAM,CAAEa,SAAF,IAAgB,qBAAU,YAAV,EAAwBb,IAAxB,EAA8B,MAA9B,CAAtB;;AAEA,MAAK,CAAEQ,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,QAAMM,QAAQ,GAAG,CAChB;AACCC,IAAAA,UAAU,EAAEJ,KADb;AAECK,IAAAA,aAAa,EAAEJ,QAFhB;AAGCK,IAAAA,KAAK,EAAE,cAAI,YAAJ,CAHR;AAICC,IAAAA,SAAS,EAAEP,KAAK,KAAKE;AAJtB,GADgB,CAAjB;AASA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAGZ,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAG,cAAI,MAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,sDADa;AAHf,IADD,EASC,4BAAC,qDAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,QAAQ,EAAGa,QAFZ;AAGC,IAAA,MAAM,EAAGP,eAHV;AAIC,IAAA,mBAAmB,EAAG,CAAEF,sBAJzB;AAKC,IAAA,gCAAgC,MALjC;AAMC,IAAA,SAAS,EAAG,KANb;AAOC,IAAA,WAAW,MAPZ;AAQC,IAAA,iCAAiC;AARlC,IATD,CADD;AAsBA;;eAEcN,e","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenTextColor( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 \|\| areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( 'color.text', name );\n\tconst [ userColor ] = useStyle( 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\tconst settings = [\n\t\t{\n\t\t\tcolorValue: color,\n\t\t\tonColorChange: setColor,\n\t\t\tlabel: __( 'Text color' ),\n\t\t\tclearable: color === userColor,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tsettings={ settings }\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTextColor;\n"]}