@wordpress/components 19.1.1 → 19.1.5

package/build-module/custom-gradient-bar/control-points.js

@@ -11,8 +11,8 @@ import { colord } from 'colord';
  */
 
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
 /**
@@ -21,10 +21,10 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
 
 import Button from '../button';
 import { ColorPicker } from '../color-picker';
-import Dropdown from '../dropdown';
 import { VisuallyHidden } from '../visually-hidden';
+import { CustomColorPickerDropdown } from '../color-palette';
 import { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';
-import { COLOR_POPOVER_PROPS, GRADIENT_MARKERS_WIDTH, MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';
+import { GRADIENT_MARKERS_WIDTH, MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';
 
 function ControlPointButton(_ref) {
   let {
@@ -52,7 +52,33 @@ function ControlPointButton(_ref) {
   }, __('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
 }
 
-function ControlPoints(_ref2) {
+function GradientColorPickerDropdown(_ref2) {
+  let {
+    isRenderedInSidebar,
+    gradientPickerDomRef,
+    ...props
+  } = _ref2;
+  const popoverProps = useMemo(() => {
+    const result = {
+      className: 'components-custom-gradient-picker__color-picker-popover',
+      position: 'top'
+    };
+
+    if (isRenderedInSidebar) {
+      result.anchorRef = gradientPickerDomRef.current;
+      result.position = isRTL() ? 'bottom right' : 'bottom left';
+      result.__unstableForcePosition = true;
+    }
+
+    return result;
+  }, [gradientPickerDomRef.current, isRenderedInSidebar]);
+  return createElement(CustomColorPickerDropdown, _extends({
+    isRenderedInSidebar: isRenderedInSidebar,
+    popoverProps: popoverProps
+  }, props));
+}
+
+function ControlPoints(_ref3) {
   let {
     disableRemove,
     disableAlpha,
@@ -61,8 +87,9 @@ function ControlPoints(_ref2) {
     value: controlPoints,
     onChange,
     onStartControlPointChange,
-    onStopControlPointChange
-  } = _ref2;
+    onStopControlPointChange,
+    __experimentalIsRenderedInSidebar
+  } = _ref3;
   const controlPointMoveState = useRef();
 
   const onMouseMove = event => {
@@ -96,14 +123,16 @@ function ControlPoints(_ref2) {
   }, []);
   return controlPoints.map((point, index) => {
     const initialPosition = point === null || point === void 0 ? void 0 : point.position;
-    return ignoreMarkerPosition !== initialPosition && createElement(Dropdown, {
+    return ignoreMarkerPosition !== initialPosition && createElement(GradientColorPickerDropdown, {
+      gradientPickerDomRef: gradientPickerDomRef,
+      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
       key: index,
       onClose: onStopControlPointChange,
-      renderToggle: _ref3 => {
+      renderToggle: _ref4 => {
         let {
           isOpen,
           onToggle
-        } = _ref3;
+        } = _ref4;
         return createElement(ControlPointButton, {
           key: index,
           onClick: () => {
@@ -150,17 +179,17 @@ function ControlPoints(_ref2) {
           color: point.color
         });
       },
-      renderContent: _ref4 => {
+      renderContent: _ref5 => {
         let {
           onClose
-        } = _ref4;
+        } = _ref5;
         return createElement(Fragment, null, createElement(ColorPicker, {
           enableAlpha: !disableAlpha,
           color: point.color,
           onChange: color => {
             onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));
           }
-        }), !disableRemove && createElement(Button, {
+        }), !disableRemove && controlPoints.length > 2 && createElement(Button, {
           className: "components-custom-gradient-picker__remove-control-point",
           onClick: () => {
             onChange(removeControlPoint(controlPoints, index));
@@ -168,32 +197,35 @@ function ControlPoints(_ref2) {
           },
           variant: "link"
         }, __('Remove Control Point')));
-      },
-      popoverProps: COLOR_POPOVER_PROPS
+      }
     });
   });
 }
 
-function InsertPoint(_ref5) {
+function InsertPoint(_ref6) {
   let {
     value: controlPoints,
     onChange,
     onOpenInserter,
     onCloseInserter,
     insertPosition,
-    disableAlpha
-  } = _ref5;
+    disableAlpha,
+    __experimentalIsRenderedInSidebar,
+    gradientPickerDomRef
+  } = _ref6;
   const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);
-  return createElement(Dropdown, {
+  return createElement(GradientColorPickerDropdown, {
+    gradientPickerDomRef: gradientPickerDomRef,
+    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
       onCloseInserter();
     },
-    renderToggle: _ref6 => {
+    renderToggle: _ref7 => {
       let {
         isOpen,
         onToggle
-      } = _ref6;
+      } = _ref7;
       return createElement(Button, {
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
@@ -224,8 +256,7 @@ function InsertPoint(_ref5) {
           onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));
         }
       }
-    }),
-    popoverProps: COLOR_POPOVER_PROPS
+    })
   });
 }
 

package/build-module/custom-gradient-bar/control-points.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/control-points.js"],"names":["classnames","colord","useInstanceId","useEffect","useRef","useState","__","sprintf","plus","LEFT","RIGHT","Button","ColorPicker","Dropdown","VisuallyHidden","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","COLOR_POPOVER_PROPS","GRADIENT_MARKERS_WIDTH","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","left","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","controlPointMoveState","onMouseMove","event","relativePosition","clientX","current","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","stopPropagation","onClose","toRgbString","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport Dropdown from '../dropdown';\nimport { VisuallyHidden } from '../visually-hidden';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tCOLOR_POPOVER_PROPS,\n\tGRADIENT_MARKERS_WIDTH,\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\n\nfunction ControlPointButton( { isOpen, position, color, ...additionalProps } ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${ position }%`,\n\t\t\t\t} }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n} ) {\n\tconst controlPointMoveState = useRef();\n\n\tconst onMouseMove = ( event ) => {\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tGRADIENT_MARKERS_WIDTH\n\t\t);\n\t\tconst {\n\t\t\tinitialPosition,\n\t\t\tindex,\n\t\t\tsignificantMoveHappened,\n\t\t} = controlPointMoveState.current;\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListeners();\n\t\t};\n\t}, [] );\n\n\treturn controlPoints.map( ( point, index ) => {\n\t\tconst initialPosition = point?.position;\n\t\treturn (\n\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\tif ( window && window.addEventListener ) {\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ ! disableRemove && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Remove Control Point' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\tpopoverProps={ COLOR_POPOVER_PROPS }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t} );\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n} ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft:\n\t\t\t\t\t\t\tinsertPosition !== null\n\t\t\t\t\t\t\t\t? `${ insertPosition }%`\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tpopoverProps={ COLOR_POPOVER_PROPS }\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/control-points.js"],"names":["classnames","colord","useInstanceId","useEffect","useRef","useState","useMemo","__","sprintf","isRTL","plus","LEFT","RIGHT","Button","ColorPicker","VisuallyHidden","CustomColorPickerDropdown","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","GRADIENT_MARKERS_WIDTH","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","left","GradientColorPickerDropdown","isRenderedInSidebar","gradientPickerDomRef","props","popoverProps","result","className","anchorRef","current","__unstableForcePosition","ControlPoints","disableRemove","disableAlpha","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","onMouseMove","event","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","stopPropagation","onClose","toRgbString","length","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { CustomColorPickerDropdown } from '../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tGRADIENT_MARKERS_WIDTH,\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\n\nfunction ControlPointButton( { isOpen, position, color, ...additionalProps } ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${ position }%`,\n\t\t\t\t} }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tgradientPickerDomRef,\n\t...props\n} ) {\n\tconst popoverProps = useMemo( () => {\n\t\tconst result = {\n\t\t\tclassName:\n\t\t\t\t'components-custom-gradient-picker__color-picker-popover',\n\t\t\tposition: 'top',\n\t\t};\n\t\tif ( isRenderedInSidebar ) {\n\t\t\tresult.anchorRef = gradientPickerDomRef.current;\n\t\t\tresult.position = isRTL() ? 'bottom right' : 'bottom left';\n\t\t\tresult.__unstableForcePosition = true;\n\t\t}\n\t\treturn result;\n\t}, [ gradientPickerDomRef.current, isRenderedInSidebar ] );\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst controlPointMoveState = useRef();\n\n\tconst onMouseMove = ( event ) => {\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tGRADIENT_MARKERS_WIDTH\n\t\t);\n\t\tconst {\n\t\t\tinitialPosition,\n\t\t\tindex,\n\t\t\tsignificantMoveHappened,\n\t\t} = controlPointMoveState.current;\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListeners();\n\t\t};\n\t}, [] );\n\n\treturn controlPoints.map( ( point, index ) => {\n\t\tconst initialPosition = point?.position;\n\t\treturn (\n\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\tif ( window && window.addEventListener ) {\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ ! disableRemove && controlPoints.length > 2 && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Remove Control Point' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t} );\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n\tgradientPickerDomRef,\n} ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft:\n\t\t\t\t\t\t\tinsertPosition !== null\n\t\t\t\t\t\t\t\t? `${ insertPosition }%`\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}

package/build-module/custom-gradient-bar/index.js

@@ -90,7 +90,8 @@ export default function CustomGradientBar(_ref) {
     value: controlPoints,
     onChange,
     disableInserter = false,
-    disableAlpha = false
+    disableAlpha = false,
+    __experimentalIsRenderedInSidebar
   } = _ref;
   const gradientPickerDomRef = useRef();
   const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);
@@ -141,6 +142,8 @@ export default function CustomGradientBar(_ref) {
   }, createElement("div", {
     className: "components-custom-gradient-picker__markers-container"
   }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && createElement(ControlPoints.InsertPoint, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    gradientPickerDomRef: gradientPickerDomRef,
     disableAlpha: disableAlpha,
     insertPosition: gradientBarState.insertPosition,
     value: controlPoints,
@@ -156,6 +159,7 @@ export default function CustomGradientBar(_ref) {
       });
     }
   }), createElement(ControlPoints, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     disableAlpha: disableAlpha,
     disableRemove: disableInserter,
     gradientPickerDomRef: gradientPickerDomRef,

package/build-module/custom-gradient-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/index.js"],"names":["some","classnames","useRef","useReducer","ControlPoints","getHorizontalRelativeGradientPosition","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","position","Math","abs","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n\nimport { some } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport {\n\tINSERT_POINT_WIDTH,\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT,\n} from './constants';\n\nfunction customGradientBarReducer( state, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n}\nconst customGradientBarReducerInitialState = { id: 'IDLE' };\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n} ) {\n\tconst gradientPickerDomRef = useRef();\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove = ( event ) => {\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tINSERT_POINT_WIDTH\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tsome( controlPoints, ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tref={ gradientPickerDomRef }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tstyle={ { background } }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div className=\"components-custom-gradient-picker__markers-container\">\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t<ControlPoints\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/index.js"],"names":["some","classnames","useRef","useReducer","ControlPoints","getHorizontalRelativeGradientPosition","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","position","Math","abs","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n\nimport { some } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport {\n\tINSERT_POINT_WIDTH,\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT,\n} from './constants';\n\nfunction customGradientBarReducer( state, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n}\nconst customGradientBarReducerInitialState = { id: 'IDLE' };\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientPickerDomRef = useRef();\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove = ( event ) => {\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tINSERT_POINT_WIDTH\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tsome( controlPoints, ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tref={ gradientPickerDomRef }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tstyle={ { background } }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div className=\"components-custom-gradient-picker__markers-container\">\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t<ControlPoints\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build-module/custom-gradient-picker/index.js

@@ -94,7 +94,8 @@ const GradientTypePicker = _ref2 => {
 export default function CustomGradientPicker(_ref3) {
   let {
     value,
-    onChange
+    onChange,
+    __experimentalIsRenderedInSidebar
   } = _ref3;
   const gradientAST = getGradientAstWithDefault(value); // On radial gradients the bar should display a linear gradient.
   // On radial gradients the bar represents a slice of the gradient from the center until the outside.
@@ -111,6 +112,7 @@ export default function CustomGradientPicker(_ref3) {
   return createElement("div", {
     className: "components-custom-gradient-picker"
   }, createElement(CustomGradientBar, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     background: background,
     hasGradient: hasGradient,
     value: controlPoints,

package/build-module/custom-gradient-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["get","omit","__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","DEFAULT_GRADIENT","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","angle","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","onSetRadialGradient","handleOnChange","next","CustomGradientPicker","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle = get(\n\t\tgradientAST,\n\t\t[ 'orientation', 'value' ],\n\t\tDEFAULT_LINEAR_GRADIENT_ANGLE\n\t);\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...omit( gradientAST, [ 'orientation' ] ),\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( { value, onChange } ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["get","omit","__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","DEFAULT_GRADIENT","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","angle","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","onSetRadialGradient","handleOnChange","next","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle = get(\n\t\tgradientAST,\n\t\t[ 'orientation', 'value' ],\n\t\tDEFAULT_LINEAR_GRADIENT_ANGLE\n\t);\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...omit( gradientAST, [ 'orientation' ] ),\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}

package/build-module/gradient-picker/index.js

@@ -101,10 +101,11 @@ export default function GradientPicker(_ref5) {
     value,
     clearable = true,
     disableCustomGradients = false,
-    __experimentalHasMultipleOrigins
+    __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar
   } = _ref5;
   const clearGradient = useCallback(() => onChange(undefined), [onChange]);
-  const Component = __experimentalHasMultipleOrigins ? MultipleOrigin : SingleOrigin;
+  const Component = __experimentalHasMultipleOrigins && gradients !== null && gradients !== void 0 && gradients.length ? MultipleOrigin : SingleOrigin;
   return createElement(Component, {
     className: className,
     clearable: clearable,
@@ -112,10 +113,11 @@ export default function GradientPicker(_ref5) {
     gradients: gradients,
     onChange: onChange,
     value: value,
-    actions: clearable && createElement(CircularOptionPicker.ButtonAction, {
+    actions: clearable && ((gradients === null || gradients === void 0 ? void 0 : gradients.length) || !disableCustomGradients) && createElement(CircularOptionPicker.ButtonAction, {
       onClick: clearGradient
     }, __('Clear')),
     content: !disableCustomGradients && createElement(CustomGradientPicker, {
+      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
       value: value,
       onChange: onChange
     })

package/build-module/gradient-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.js"],"names":["map","__","sprintf","useCallback","useMemo","CircularOptionPicker","CustomGradientPicker","VStack","ColorHeading","SingleOrigin","className","clearGradient","gradients","onChange","value","actions","content","gradientOptions","gradient","name","color","background","MultipleOrigin","index","gradientSet","length","GradientPicker","clearable","disableCustomGradients","__experimentalHasMultipleOrigins","undefined","Component"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn map( gradients, ( { gradient, name } ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t>\n\t\t\t{ content }\n\t\t</CircularOptionPicker>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t\t\t\t\tcontent,\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport default function GradientPicker( {\n\tclassName,\n\tgradients,\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalHasMultipleOrigins,\n} ) {\n\tconst clearGradient = useCallback( () => onChange( undefined ), [\n\t\tonChange,\n\t] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultipleOrigin\n\t\t: SingleOrigin;\n\treturn (\n\t\t<Component\n\t\t\tclassName={ className }\n\t\t\tclearable={ clearable }\n\t\t\tclearGradient={ clearGradient }\n\t\t\tgradients={ gradients }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ value }\n\t\t\tactions={\n\t\t\t\tclearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.js"],"names":["map","__","sprintf","useCallback","useMemo","CircularOptionPicker","CustomGradientPicker","VStack","ColorHeading","SingleOrigin","className","clearGradient","gradients","onChange","value","actions","content","gradientOptions","gradient","name","color","background","MultipleOrigin","index","gradientSet","length","GradientPicker","clearable","disableCustomGradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,QAApB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,WAAT,EAAsBC,OAAtB,QAAqC,oBAArC;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,YAAT,QAA6B,yBAA7B;;AAEA,SAASC,YAAT,OAQI;AAAA,MARmB;AACtBC,IAAAA,SADsB;AAEtBC,IAAAA,aAFsB;AAGtBC,IAAAA,SAHsB;AAItBC,IAAAA,QAJsB;AAKtBC,IAAAA,KALsB;AAMtBC,IAAAA,OANsB;AAOtBC,IAAAA;AAPsB,GAQnB;AACH,QAAMC,eAAe,GAAGb,OAAO,CAAE,MAAM;AACtC,WAAOJ,GAAG,CAAEY,SAAF,EAAa;AAAA,UAAE;AAAEM,QAAAA,QAAF;AAAYC,QAAAA;AAAZ,OAAF;AAAA,aACtB,cAAC,oBAAD,CAAsB,MAAtB;AACC,QAAA,GAAG,EAAGD,QADP;AAEC,QAAA,KAAK,EAAGA,QAFT;AAGC,QAAA,UAAU,EAAGJ,KAAK,KAAKI,QAHxB;AAIC,QAAA,WAAW,EACVC,IAAI,IACJ;AACAjB,QAAAA,OAAO,CAAED,EAAE,CAAE,mBAAF,CAAJ,EAA6BiB,QAA7B,CAPT;AASC,QAAA,KAAK,EAAG;AAAEE,UAAAA,KAAK,EAAE,iBAAT;AAA4BC,UAAAA,UAAU,EAAEH;AAAxC,SATT;AAUC,QAAA,OAAO,EACNJ,KAAK,KAAKI,QAAV,GACGP,aADH,GAEG,MAAME,QAAQ,CAAEK,QAAF,CAbnB;AAeC,sBACCC,IAAI,GACD;AACAjB,QAAAA,OAAO,CAAED,EAAE,CAAE,cAAF,CAAJ,EAAwBkB,IAAxB,CAFN,GAGD;AACAjB,QAAAA,OAAO,CAAED,EAAE,CAAE,mBAAF,CAAJ,EAA6BiB,QAA7B;AApBZ,QADsB;AAAA,KAAb,CAAV;AAyBA,GA1B8B,EA0B5B,CAAEN,SAAF,EAAaE,KAAb,EAAoBD,QAApB,EAA8BF,aAA9B,CA1B4B,CAA/B;AA2BA,SACC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAGD,SADb;AAEC,IAAA,OAAO,EAAGO,eAFX;AAGC,IAAA,OAAO,EAAGF;AAHX,KAKGC,OALH,CADD;AASA;;AAED,SAASM,cAAT,QAQI;AAAA,MARqB;AACxBZ,IAAAA,SADwB;AAExBC,IAAAA,aAFwB;AAGxBC,IAAAA,SAHwB;AAIxBC,IAAAA,QAJwB;AAKxBC,IAAAA,KALwB;AAMxBC,IAAAA,OANwB;AAOxBC,IAAAA;AAPwB,GAQrB;AACH,SACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,SAAS,EAAGN;AAAlC,KACGE,SAAS,CAACZ,GAAV,CAAe,QAAoCuB,KAApC,KAA+C;AAAA,QAA7C;AAAEJ,MAAAA,IAAF;AAAQP,MAAAA,SAAS,EAAEY;AAAnB,KAA6C;AAC/D,WACC,cAAC,MAAD;AAAQ,MAAA,OAAO,EAAG,CAAlB;AAAsB,MAAA,GAAG,EAAGD;AAA5B,OACC,cAAC,YAAD,QAAgBJ,IAAhB,CADD,EAEC,cAAC,YAAD;AACC,MAAA,aAAa,EAAGR,aADjB;AAEC,MAAA,SAAS,EAAGa,WAFb;AAGC,MAAA,QAAQ,EAAGX,QAHZ;AAIC,MAAA,KAAK,EAAGC;AAJT,OAKQF,SAAS,CAACa,MAAV,KAAqBF,KAAK,GAAG,CAA7B,GACJ;AACAR,MAAAA,OADA;AAEAC,MAAAA;AAFA,KADI,GAKJ,EAVJ,EAFD,CADD;AAiBA,GAlBC,CADH,CADD;AAuBA;;AAED,eAAe,SAASU,cAAT,QASX;AAAA,MAToC;AACvChB,IAAAA,SADuC;AAEvCE,IAAAA,SAFuC;AAGvCC,IAAAA,QAHuC;AAIvCC,IAAAA,KAJuC;AAKvCa,IAAAA,SAAS,GAAG,IAL2B;AAMvCC,IAAAA,sBAAsB,GAAG,KANc;AAOvCC,IAAAA,gCAPuC;AAQvCC,IAAAA;AARuC,GASpC;AACH,QAAMnB,aAAa,GAAGR,WAAW,CAAE,MAAMU,QAAQ,CAAEkB,SAAF,CAAhB,EAA+B,CAC/DlB,QAD+D,CAA/B,CAAjC;AAGA,QAAMmB,SAAS,GACdH,gCAAgC,IAAIjB,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEa,MAA/C,GACGH,cADH,GAEGb,YAHJ;AAKA,SACC,cAAC,SAAD;AACC,IAAA,SAAS,EAAGC,SADb;AAEC,IAAA,SAAS,EAAGiB,SAFb;AAGC,IAAA,aAAa,EAAGhB,aAHjB;AAIC,IAAA,SAAS,EAAGC,SAJb;AAKC,IAAA,QAAQ,EAAGC,QALZ;AAMC,IAAA,KAAK,EAAGC,KANT;AAOC,IAAA,OAAO,EACNa,SAAS,KACP,CAAAf,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEa,MAAX,KAAqB,CAAEG,sBADhB,CAAT,IAEC,cAAC,oBAAD,CAAsB,YAAtB;AACC,MAAA,OAAO,EAAGjB;AADX,OAGGV,EAAE,CAAE,OAAF,CAHL,CAVH;AAiBC,IAAA,OAAO,EACN,CAAE2B,sBAAF,IACC,cAAC,oBAAD;AACC,MAAA,iCAAiC,EAChCE,iCAFF;AAIC,MAAA,KAAK,EAAGhB,KAJT;AAKC,MAAA,QAAQ,EAAGD;AALZ;AAnBH,IADD;AA+BA","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn map( gradients, ( { gradient, name } ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t>\n\t\t\t{ content }\n\t\t</CircularOptionPicker>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t\t\t\t\tcontent,\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport default function GradientPicker( {\n\tclassName,\n\tgradients,\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst clearGradient = useCallback( () => onChange( undefined ), [\n\t\tonChange,\n\t] );\n\tconst Component =\n\t\t__experimentalHasMultipleOrigins && gradients?.length\n\t\t\t? MultipleOrigin\n\t\t\t: SingleOrigin;\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={ className }\n\t\t\tclearable={ clearable }\n\t\t\tclearGradient={ clearGradient }\n\t\t\tgradients={ gradients }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ value }\n\t\t\tactions={\n\t\t\t\tclearable &&\n\t\t\t\t( gradients?.length || ! disableCustomGradients ) && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}

package/build-module/navigation/item/index.js

@@ -50,8 +50,9 @@ export default function NavigationItem(props) {
     return null;
   }
 
+  const isActive = item && activeItem === item;
   const classes = classnames(className, {
-    'is-active': item && activeItem === item
+    'is-active': isActive
   });
 
   const onItemClick = event => {
@@ -70,6 +71,7 @@ export default function NavigationItem(props) {
     as: Button,
     href,
     onClick: onItemClick,
+    'aria-current': isActive ? 'page' : undefined,
     ...restProps
   };
   return createElement(NavigationItemBase, _extends({}, baseProps, {

package/build-module/navigation/item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/item/index.js"],"names":["classnames","noop","Icon","chevronLeft","chevronRight","isRTL","Button","useNavigationContext","ItemUI","ItemIconUI","NavigationItemBaseContent","NavigationItemBase","NavigationItem","props","badge","children","className","href","item","navigateToMenu","onClick","title","icon","hideIfTargetMenuEmpty","isText","restProps","activeItem","setActiveMenu","navigationTree","isMenuEmpty","classes","onItemClick","event","navigationIcon","baseProps","undefined","itemProps","as"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,QAArB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,WAAf,EAA4BC,YAA5B,QAAgD,kBAAhD;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,6BAAnC;AACA,OAAOC,yBAAP,MAAsC,gBAAtC;AACA,OAAOC,kBAAP,MAA+B,QAA/B;AAEA,eAAe,SAASC,cAAT,CAAyBC,KAAzB,EAAiC;AAC/C,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,cANK;AAOLC,IAAAA,OAAO,GAAGnB,IAPL;AAQLoB,IAAAA,KARK;AASLC,IAAAA,IATK;AAULC,IAAAA,qBAVK;AAWLC,IAAAA,MAXK;AAYL,OAAGC;AAZE,MAaFZ,KAbJ;AAeA,QAAM;AACLa,IAAAA,UADK;AAELC,IAAAA,aAFK;AAGLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AAHX,MAIFtB,oBAAoB,EAJxB,CAhB+C,CAsB/C;AACA;AACA;;AACA,MACCgB,qBAAqB,IACrBJ,cADA,IAEAU,WAAW,CAAEV,cAAF,CAHZ,EAIE;AACD,WAAO,IAAP;AACA;;AAED,QAAMW,OAAO,GAAG9B,UAAU,CAAEgB,SAAF,EAAa;AACtC,iBAAaE,IAAI,IAAIQ,UAAU,KAAKR;AADE,GAAb,CAA1B;;AAIA,QAAMa,WAAW,GAAKC,KAAF,IAAa;AAChC,QAAKb,cAAL,EAAsB;AACrBQ,MAAAA,aAAa,CAAER,cAAF,CAAb;AACA;;AAEDC,IAAAA,OAAO,CAAEY,KAAF,CAAP;AACA,GAND;;AAOA,QAAMC,cAAc,GAAG5B,KAAK,KAAKF,WAAL,GAAmBC,YAA/C;AACA,QAAM8B,SAAS,GAAGnB,QAAQ,GAAGF,KAAH,GAAW,EAAE,GAAGA,KAAL;AAAYO,IAAAA,OAAO,EAAEe;AAArB,GAArC;AACA,QAAMC,SAAS,GAAGZ,MAAM,GACrBC,SADqB,GAErB;AAAEY,IAAAA,EAAE,EAAE/B,MAAN;AAAcW,IAAAA,IAAd;AAAoBG,IAAAA,OAAO,EAAEW,WAA7B;AAA0C,OAAGN;AAA7C,GAFH;AAIA,SACC,cAAC,kBAAD,eAAyBS,SAAzB;AAAqC,IAAA,SAAS,EAAGJ;AAAjD,MACGf,QAAQ,IACT,cAAC,MAAD,EAAaqB,SAAb,EACGd,IAAI,IACL,cAAC,UAAD,QACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGA;AAAb,IADD,CAFF,EAOC,cAAC,yBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,KAAK,EAAGP;AAFT,IAPD,EAYGK,cAAc,IAAI,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGc;AAAb,IAZrB,CAFF,CADD;AAoBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { useNavigationContext } from '../context';\nimport { ItemUI, ItemIconUI } from '../styles/navigation-styles';\nimport NavigationItemBaseContent from './base-content';\nimport NavigationItemBase from './base';\n\nexport default function NavigationItem( props ) {\n\tconst {\n\t\tbadge,\n\t\tchildren,\n\t\tclassName,\n\t\thref,\n\t\titem,\n\t\tnavigateToMenu,\n\t\tonClick = noop,\n\t\ttitle,\n\t\ticon,\n\t\thideIfTargetMenuEmpty,\n\t\tisText,\n\t\t...restProps\n\t} = props;\n\n\tconst {\n\t\tactiveItem,\n\t\tsetActiveMenu,\n\t\tnavigationTree: { isMenuEmpty },\n\t} = useNavigationContext();\n\n\t// If hideIfTargetMenuEmpty prop is true\n\t// And the menu we are supposed to navigate to\n\t// Is marked as empty, then we skip rendering the item\n\tif (\n\t\thideIfTargetMenuEmpty &&\n\t\tnavigateToMenu &&\n\t\tisMenuEmpty( navigateToMenu )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst classes = classnames( className, {\n\t\t'is-active': item && activeItem === item,\n\t} );\n\n\tconst onItemClick = ( event ) => {\n\t\tif ( navigateToMenu ) {\n\t\t\tsetActiveMenu( navigateToMenu );\n\t\t}\n\n\t\tonClick( event );\n\t};\n\tconst navigationIcon = isRTL() ? chevronLeft : chevronRight;\n\tconst baseProps = children ? props : { ...props, onClick: undefined };\n\tconst itemProps = isText\n\t\t? restProps\n\t\t: { as: Button, href, onClick: onItemClick, ...restProps };\n\n\treturn (\n\t\t<NavigationItemBase { ...baseProps } className={ classes }>\n\t\t\t{ children || (\n\t\t\t\t<ItemUI { ...itemProps }>\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<ItemIconUI>\n\t\t\t\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t\t\t</ItemIconUI>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<NavigationItemBaseContent\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tbadge={ badge }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ navigateToMenu && <Icon icon={ navigationIcon } /> }\n\t\t\t\t</ItemUI>\n\t\t\t) }\n\t\t</NavigationItemBase>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/item/index.js"],"names":["classnames","noop","Icon","chevronLeft","chevronRight","isRTL","Button","useNavigationContext","ItemUI","ItemIconUI","NavigationItemBaseContent","NavigationItemBase","NavigationItem","props","badge","children","className","href","item","navigateToMenu","onClick","title","icon","hideIfTargetMenuEmpty","isText","restProps","activeItem","setActiveMenu","navigationTree","isMenuEmpty","isActive","classes","onItemClick","event","navigationIcon","baseProps","undefined","itemProps","as"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,QAArB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,WAAf,EAA4BC,YAA5B,QAAgD,kBAAhD;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,6BAAnC;AACA,OAAOC,yBAAP,MAAsC,gBAAtC;AACA,OAAOC,kBAAP,MAA+B,QAA/B;AAEA,eAAe,SAASC,cAAT,CAAyBC,KAAzB,EAAiC;AAC/C,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,cANK;AAOLC,IAAAA,OAAO,GAAGnB,IAPL;AAQLoB,IAAAA,KARK;AASLC,IAAAA,IATK;AAULC,IAAAA,qBAVK;AAWLC,IAAAA,MAXK;AAYL,OAAGC;AAZE,MAaFZ,KAbJ;AAeA,QAAM;AACLa,IAAAA,UADK;AAELC,IAAAA,aAFK;AAGLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AAHX,MAIFtB,oBAAoB,EAJxB,CAhB+C,CAsB/C;AACA;AACA;;AACA,MACCgB,qBAAqB,IACrBJ,cADA,IAEAU,WAAW,CAAEV,cAAF,CAHZ,EAIE;AACD,WAAO,IAAP;AACA;;AAED,QAAMW,QAAQ,GAAGZ,IAAI,IAAIQ,UAAU,KAAKR,IAAxC;AAEA,QAAMa,OAAO,GAAG/B,UAAU,CAAEgB,SAAF,EAAa;AACtC,iBAAac;AADyB,GAAb,CAA1B;;AAIA,QAAME,WAAW,GAAKC,KAAF,IAAa;AAChC,QAAKd,cAAL,EAAsB;AACrBQ,MAAAA,aAAa,CAAER,cAAF,CAAb;AACA;;AAEDC,IAAAA,OAAO,CAAEa,KAAF,CAAP;AACA,GAND;;AAOA,QAAMC,cAAc,GAAG7B,KAAK,KAAKF,WAAL,GAAmBC,YAA/C;AACA,QAAM+B,SAAS,GAAGpB,QAAQ,GAAGF,KAAH,GAAW,EAAE,GAAGA,KAAL;AAAYO,IAAAA,OAAO,EAAEgB;AAArB,GAArC;AACA,QAAMC,SAAS,GAAGb,MAAM,GACrBC,SADqB,GAErB;AACAa,IAAAA,EAAE,EAAEhC,MADJ;AAEAW,IAAAA,IAFA;AAGAG,IAAAA,OAAO,EAAEY,WAHT;AAIA,oBAAgBF,QAAQ,GAAG,MAAH,GAAYM,SAJpC;AAKA,OAAGX;AALH,GAFH;AAUA,SACC,cAAC,kBAAD,eAAyBU,SAAzB;AAAqC,IAAA,SAAS,EAAGJ;AAAjD,MACGhB,QAAQ,IACT,cAAC,MAAD,EAAasB,SAAb,EACGf,IAAI,IACL,cAAC,UAAD,QACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGA;AAAb,IADD,CAFF,EAOC,cAAC,yBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,KAAK,EAAGP;AAFT,IAPD,EAYGK,cAAc,IAAI,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGe;AAAb,IAZrB,CAFF,CADD;AAoBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { useNavigationContext } from '../context';\nimport { ItemUI, ItemIconUI } from '../styles/navigation-styles';\nimport NavigationItemBaseContent from './base-content';\nimport NavigationItemBase from './base';\n\nexport default function NavigationItem( props ) {\n\tconst {\n\t\tbadge,\n\t\tchildren,\n\t\tclassName,\n\t\thref,\n\t\titem,\n\t\tnavigateToMenu,\n\t\tonClick = noop,\n\t\ttitle,\n\t\ticon,\n\t\thideIfTargetMenuEmpty,\n\t\tisText,\n\t\t...restProps\n\t} = props;\n\n\tconst {\n\t\tactiveItem,\n\t\tsetActiveMenu,\n\t\tnavigationTree: { isMenuEmpty },\n\t} = useNavigationContext();\n\n\t// If hideIfTargetMenuEmpty prop is true\n\t// And the menu we are supposed to navigate to\n\t// Is marked as empty, then we skip rendering the item\n\tif (\n\t\thideIfTargetMenuEmpty &&\n\t\tnavigateToMenu &&\n\t\tisMenuEmpty( navigateToMenu )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst isActive = item && activeItem === item;\n\n\tconst classes = classnames( className, {\n\t\t'is-active': isActive,\n\t} );\n\n\tconst onItemClick = ( event ) => {\n\t\tif ( navigateToMenu ) {\n\t\t\tsetActiveMenu( navigateToMenu );\n\t\t}\n\n\t\tonClick( event );\n\t};\n\tconst navigationIcon = isRTL() ? chevronLeft : chevronRight;\n\tconst baseProps = children ? props : { ...props, onClick: undefined };\n\tconst itemProps = isText\n\t\t? restProps\n\t\t: {\n\t\t\t\tas: Button,\n\t\t\t\thref,\n\t\t\t\tonClick: onItemClick,\n\t\t\t\t'aria-current': isActive ? 'page' : undefined,\n\t\t\t\t...restProps,\n\t\t  };\n\n\treturn (\n\t\t<NavigationItemBase { ...baseProps } className={ classes }>\n\t\t\t{ children || (\n\t\t\t\t<ItemUI { ...itemProps }>\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<ItemIconUI>\n\t\t\t\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t\t\t</ItemIconUI>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<NavigationItemBaseContent\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tbadge={ badge }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ navigateToMenu && <Icon icon={ navigationIcon } /> }\n\t\t\t\t</ItemUI>\n\t\t\t) }\n\t\t</NavigationItemBase>\n\t);\n}\n"]}

package/build-module/palette-edit/index.js

@@ -10,7 +10,7 @@ import { kebabCase } from 'lodash';
  */
 
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
 import { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';
 /**
@@ -91,6 +91,7 @@ function Option(_ref2) {
       color: newColor
     })
   }), isGradient && createElement(CustomGradientPicker, {
+    __experimentalIsRenderedInSidebar: true,
     value: value,
     onChange: newGradient => onChange({ ...element,
       gradient: newGradient
@@ -193,7 +194,8 @@ export default function PaletteEdit(_ref6) {
   const [isEditing, setIsEditing] = useState(false);
   const [editingElement, setEditingElement] = useState(null);
   const isAdding = isEditing && editingElement && elements[editingElement] && !elements[editingElement].slug;
-  const hasElements = elements.length > 0;
+  const elementsLength = elements.length;
+  const hasElements = elementsLength > 0;
   return createElement(PaletteEditStyles, null, createElement(PaletteHStackHeader, null, createElement(PaletteHeading, null, paletteLabel), createElement(PaletteActionsContainer, null, isEditing && createElement(DoneButton, {
     isSmall: true,
     onClick: () => {
@@ -206,26 +208,21 @@ export default function PaletteEdit(_ref6) {
     icon: plus,
     label: isGradient ? __('Add gradient') : __('Add color'),
     onClick: () => {
+      const tempOptionName = sprintf(
+      /* translators: %s: is a temporary id for a custom color */
+      __('Color %s '), elementsLength + 1);
       onChange([...elements, { ...(isGradient ? {
           gradient: DEFAULT_GRADIENT
         } : {
           color: '#000'
         }),
-        name: '',
+        name: tempOptionName,
         slug: ''
       }]);
       setIsEditing(true);
       setEditingElement(elements.length);
     }
-  }), !isEditing && createElement(Button, {
-    disabled: !hasElements,
-    isSmall: true,
-    icon: moreVertical,
-    label: isGradient ? __('Edit gradients') : __('Edit colors'),
-    onClick: () => {
-      setIsEditing(true);
-    }
-  }), isEditing && (canReset || !canOnlyChangeValues) && createElement(DropdownMenu, {
+  }), hasElements && (canReset || !canOnlyChangeValues) && createElement(DropdownMenu, {
     icon: moreVertical,
     label: isGradient ? __('Gradient options') : __('Color options'),
     toggleProps: {
@@ -237,14 +234,23 @@ export default function PaletteEdit(_ref6) {
     } = _ref7;
     return createElement(Fragment, null, createElement(NavigableMenu, {
       role: "menu"
-    }, !canOnlyChangeValues && createElement(Button, {
+    }, createElement(Button, {
+      variant: "tertiary",
+      disabled: isEditing,
+      onClick: () => {
+        setIsEditing(true);
+        onClose();
+      },
+      className: "components-palette-edit__menu-button"
+    }, __('Edit custom colors')), !canOnlyChangeValues && createElement(Button, {
       variant: "tertiary",
       onClick: () => {
         setEditingElement(null);
         setIsEditing(false);
         onChange();
         onClose();
-      }
+      },
+      className: "components-palette-edit__menu-button"
     }, isGradient ? __('Remove all gradients') : __('Remove all colors')), canReset && createElement(Button, {
       variant: "tertiary",
       onClick: () => {