@wordpress/block-editor 7.0.2 → 8.0.1

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -14,6 +14,56 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   margin-bottom: inherit;
 }
 
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-4>*+*:not( marquee ) {
+  margin-top: calc(4px * 1);
+}
+
+.emotion-4>* {
+  min-height: 0;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-6>*+*:not( marquee ) {
+  margin-top: calc(4px * 3);
+}
+
+.emotion-6>* {
+  min-height: 0;
+}
+
 <div
   className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
@@ -21,96 +71,103 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
     className="components-base-control__field emotion-2 emotion-3"
   >
     <fieldset>
-      <legend>
-        <div
-          className="block-editor-color-gradient-control__color-indicator"
-        >
-          <span
-            className="components-base-control__label"
-          >
-            Test Color
-            <span
-              aria-label="(Color: #f00)"
-              className="component-color-indicator"
-              style={
-                Object {
-                  "background": "#f00",
-                }
-              }
-            />
-          </span>
-        </div>
-      </legend>
       <div
-        className="components-circular-option-picker"
+        className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+        data-wp-c16t={true}
+        data-wp-component="VStack"
       >
-        <div
-          className="components-circular-option-picker__swatches"
-        >
+        <legend>
           <div
-            className="components-circular-option-picker__option-wrapper"
+            className="block-editor-color-gradient-control__color-indicator"
           >
-            <button
-              aria-describedby={null}
-              aria-label="Color: red"
-              aria-pressed={true}
-              className="components-button components-circular-option-picker__option is-pressed"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#f00",
-                  "color": "#f00",
-                }
-              }
-              type="button"
-            />
-            <svg
-              aria-hidden={true}
-              fill="#000000"
-              focusable={false}
-              height={24}
-              role="img"
-              viewBox="0 0 24 24"
-              width={24}
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              className="components-base-control__label"
             >
-              <path
-                d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
-              />
-            </svg>
+              Test Color
+            </span>
           </div>
-        </div>
+        </legend>
         <div
-          className="components-circular-option-picker__custom-clear-wrapper"
+          className="components-flex components-h-stack components-v-stack emotion-6 emotion-5"
+          data-wp-c16t={true}
+          data-wp-component="VStack"
         >
           <div
-            className="components-dropdown components-circular-option-picker__dropdown-link-action"
+            className="components-dropdown"
+            tabIndex="-1"
           >
             <button
-              aria-describedby={null}
               aria-expanded={false}
               aria-haspopup="true"
               aria-label="Custom color picker"
-              className="components-button is-link"
+              className="components-color-palette__custom-color"
               onClick={[Function]}
-              type="button"
+              style={
+                Object {
+                  "background": "#f00",
+                }
+              }
             >
-              Custom color
+              #f00
             </button>
           </div>
-          <button
-            aria-describedby={null}
-            className="components-button components-circular-option-picker__clear is-secondary is-small"
-            onClick={[Function]}
-            type="button"
+          <div
+            className="components-circular-option-picker"
           >
-            Clear
-          </button>
+            <div
+              className="components-circular-option-picker__swatches"
+            >
+              <div
+                className="components-circular-option-picker__option-wrapper"
+              >
+                <button
+                  aria-describedby={null}
+                  aria-label="Color: red"
+                  aria-pressed={true}
+                  className="components-button components-circular-option-picker__option is-pressed"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "backgroundColor": "#f00",
+                      "color": "#f00",
+                    }
+                  }
+                  type="button"
+                />
+                <svg
+                  aria-hidden={true}
+                  fill="#000"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              className="components-circular-option-picker__custom-clear-wrapper"
+            >
+              <button
+                aria-describedby={null}
+                className="components-button components-circular-option-picker__clear is-secondary is-small"
+                onClick={[Function]}
+                type="button"
+              >
+                Clear
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </fieldset>

package/src/components/colors/test/utils.js

@@ -5,6 +5,7 @@ import {
 	getColorObjectByAttributeValues,
 	getColorObjectByColorValue,
 	getColorClassName,
+	getMostReadableColor,
 } from '../utils';
 
 describe( 'color utils', () => {
@@ -127,4 +128,44 @@ describe( 'color utils', () => {
 			);
 		} );
 	} );
+
+	describe( 'getMostReadableColor', () => {
+		it( 'should return the most readable color', () => {
+			expect(
+				getMostReadableColor(
+					[
+						{
+							name: 'Red',
+							slug: 'red',
+							color: 'red',
+						},
+						{
+							name: 'Black',
+							slug: 'black',
+							color: 'black',
+						},
+					],
+					'#f3f3f3'
+				)
+			).toBe( 'black' );
+
+			expect(
+				getMostReadableColor(
+					[
+						{
+							name: 'C1',
+							slug: 'c1',
+							color: '#39373b',
+						},
+						{
+							name: 'C2',
+							slug: 'c2',
+							color: '#a25de6',
+						},
+					],
+					'#9853ff'
+				)
+			).toBe( '#39373b' );
+		} );
+	} );
 } );

package/src/components/colors/utils.js

@@ -1,8 +1,12 @@
 /**
  * External dependencies
  */
-import { find, kebabCase, map } from 'lodash';
-import tinycolor from 'tinycolor2';
+import { find, kebabCase, maxBy } from 'lodash';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
+
+extend( [ namesPlugin, a11yPlugin ] );
 
 /**
  * Provided an array of color objects as set by the theme or by the editor defaults,
@@ -72,7 +76,7 @@ export function getColorClassName( colorContextName, colorSlug ) {
  * @return {string} String with the color value of the most readable color.
  */
 export function getMostReadableColor( colors, colorValue ) {
-	return tinycolor
-		.mostReadable( colorValue, map( colors, 'color' ) )
-		.toHexString();
+	const colordColor = colord( colorValue );
+	return maxBy( colors, ( { color } ) => colordColor.contrast( color ) )
+		.color;
 }

package/src/components/colors-gradients/control.js

@@ -10,27 +10,19 @@ import { every, isEmpty } from 'lodash';
 import { useState } from '@wordpress/element';
 import {
 	BaseControl,
-	Button,
-	ButtonGroup,
-	ColorIndicator,
+	__experimentalVStack as VStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ColorPalette,
 	GradientPicker,
 } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 
-// translators: first %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = __( '(Color: %s)' );
-
-// translators: first %s: the gradient name or value (e.g. red to green or linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)
-const gradientIndicatorAriaLabel = __( '(Gradient: %s)' );
-
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -38,50 +30,12 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-function VisualLabel( {
-	colors,
-	gradients,
-	label,
-	currentTab,
-	colorValue,
-	gradientValue,
-} ) {
-	let value, ariaLabel;
-	if ( currentTab === 'color' ) {
-		if ( colorValue ) {
-			value = colorValue;
-			const colorObject = getColorObjectByColorValue( colors, value );
-			const colorName = colorObject && colorObject.name;
-			ariaLabel = sprintf( colorIndicatorAriaLabel, colorName || value );
-		}
-	} else if ( currentTab === 'gradient' && gradientValue ) {
-		value = gradientValue;
-		const gradientObject = __experimentalGetGradientObjectByGradientValue(
-			gradients,
-			value
-		);
-		const gradientName = gradientObject && gradientObject.name;
-		ariaLabel = sprintf(
-			gradientIndicatorAriaLabel,
-			gradientName || value
-		);
-	}
-
-	return (
-		<>
-			{ label }
-			{ !! value && (
-				<ColorIndicator colorValue={ value } aria-label={ ariaLabel } />
-			) }
-		</>
-	);
-}
-
 function ColorGradientControlInner( {
 	colors,
 	gradients,
 	disableCustomColors,
 	disableCustomGradients,
+	__experimentalHasMultipleOrigins,
 	className,
 	label,
 	onColorChange,
@@ -89,6 +43,7 @@ function ColorGradientControlInner( {
 	colorValue,
 	gradientValue,
 	clearable,
+	showTitle = true,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -110,66 +65,71 @@ function ColorGradientControlInner( {
 			) }
 		>
 			<fieldset>
-				<legend>
-					<div className="block-editor-color-gradient-control__color-indicator">
-						<BaseControl.VisualLabel>
-							<VisualLabel
-								currentTab={ currentTab }
-								label={ label }
-								colorValue={ colorValue }
-								gradientValue={ gradientValue }
-							/>
-						</BaseControl.VisualLabel>
-					</div>
-				</legend>
-				{ canChooseAColor && canChooseAGradient && (
-					<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
-						<Button
-							isSmall
-							isPressed={ currentTab === 'color' }
-							onClick={ () => setCurrentTab( 'color' ) }
-						>
-							{ __( 'Solid' ) }
-						</Button>
-						<Button
-							isSmall
-							isPressed={ currentTab === 'gradient' }
-							onClick={ () => setCurrentTab( 'gradient' ) }
+				<VStack spacing={ 1 }>
+					{ showTitle && (
+						<legend>
+							<div className="block-editor-color-gradient-control__color-indicator">
+								<BaseControl.VisualLabel>
+									{ label }
+								</BaseControl.VisualLabel>
+							</div>
+						</legend>
+					) }
+					{ canChooseAColor && canChooseAGradient && (
+						<ToggleGroupControl
+							value={ currentTab }
+							onChange={ setCurrentTab }
+							label={ __( 'Select color type' ) }
+							hideLabelFromVision
+							isBlock
 						>
-							{ __( 'Gradient' ) }
-						</Button>
-					</ButtonGroup>
-				) }
-				{ ( currentTab === 'color' || ! canChooseAGradient ) && (
-					<ColorPalette
-						value={ colorValue }
-						onChange={
-							canChooseAGradient
-								? ( newColor ) => {
-										onColorChange( newColor );
-										onGradientChange();
-								  }
-								: onColorChange
-						}
-						{ ...{ colors, disableCustomColors } }
-						clearable={ clearable }
-					/>
-				) }
-				{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
-					<GradientPicker
-						value={ gradientValue }
-						onChange={
-							canChooseAColor
-								? ( newGradient ) => {
-										onGradientChange( newGradient );
-										onColorChange();
-								  }
-								: onGradientChange
-						}
-						{ ...{ gradients, disableCustomGradients } }
-						clearable={ clearable }
-					/>
-				) }
+							<ToggleGroupControlOption
+								value="color"
+								label={ __( 'Solid' ) }
+							/>
+							<ToggleGroupControlOption
+								value="gradient"
+								label={ __( 'Gradient' ) }
+							/>
+						</ToggleGroupControl>
+					) }
+					{ ( currentTab === 'color' || ! canChooseAGradient ) && (
+						<ColorPalette
+							value={ colorValue }
+							onChange={
+								canChooseAGradient
+									? ( newColor ) => {
+											onColorChange( newColor );
+											onGradientChange();
+									  }
+									: onColorChange
+							}
+							{ ...{ colors, disableCustomColors } }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
+							clearable={ clearable }
+						/>
+					) }
+					{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
+						<GradientPicker
+							value={ gradientValue }
+							onChange={
+								canChooseAColor
+									? ( newGradient ) => {
+											onGradientChange( newGradient );
+											onColorChange();
+									  }
+									: onGradientChange
+							}
+							{ ...{ gradients, disableCustomGradients } }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
+							clearable={ clearable }
+						/>
+					) }
+				</VStack>
 			</fieldset>
 		</BaseControl>
 	);

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -9,6 +9,7 @@ import { every, isEmpty } from 'lodash';
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -89,6 +90,8 @@ export const PanelColorGradientSettingsInner = ( {
 	children,
 	settings,
 	title,
+	showTitle = true,
+	__experimentalHasMultipleOrigins,
 	...props
 } ) => {
 	if (
@@ -120,23 +123,26 @@ export const PanelColorGradientSettingsInner = ( {
 			/>
 		</span>
 	);
+
 	return (
 		<PanelBody
 			className={ classnames(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
-			title={ titleElement }
+			title={ showTitle ? titleElement : undefined }
 			{ ...props }
 		>
 			{ settings.map( ( setting, index ) => (
 				<ColorGradientControl
+					showTitle={ showTitle }
 					key={ index }
 					{ ...{
 						colors,
 						gradients,
 						disableCustomColors,
 						disableCustomGradients,
+						__experimentalHasMultipleOrigins,
 						...setting,
 					} }
 				/>
@@ -146,14 +152,77 @@ export const PanelColorGradientSettingsInner = ( {
 	);
 };
 
-const PanelColorGradientSettingsSelect = ( props ) => {
-	const colorGradientSettings = {};
+function useCommonSingleMultipleSelects() {
+	return {
+		disableCustomColors: ! useSetting( 'color.custom' ),
+		disableCustomGradients: ! useSetting( 'color.customGradient' ),
+	};
+}
+
+const PanelColorGradientSettingsSingleSelect = ( props ) => {
+	const colorGradientSettings = useCommonSingleMultipleSelects();
 	colorGradientSettings.colors = useSetting( 'color.palette' );
 	colorGradientSettings.gradients = useSetting( 'color.gradients' );
-	colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );
-	colorGradientSettings.disableCustomGradients = ! useSetting(
-		'color.customGradient'
+	return (
+		<PanelColorGradientSettingsInner
+			{ ...{ ...colorGradientSettings, ...props } }
+		/>
 	);
+};
+
+const PanelColorGradientSettingsMultipleSelect = ( props ) => {
+	const colorGradientSettings = useCommonSingleMultipleSelects();
+	const userColors = useSetting( 'color.palette.user' );
+	const themeColors = useSetting( 'color.palette.theme' );
+	const coreColors = useSetting( 'color.palette.core' );
+	colorGradientSettings.colors = useMemo( () => {
+		const result = [];
+		if ( coreColors && coreColors.length ) {
+			result.push( {
+				name: __( 'Core' ),
+				colors: coreColors,
+			} );
+		}
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				colors: themeColors,
+			} );
+		}
+		if ( userColors && userColors.length ) {
+			result.push( {
+				name: __( 'User' ),
+				colors: userColors,
+			} );
+		}
+		return result;
+	}, [ coreColors, themeColors, userColors ] );
+
+	const userGradients = useSetting( 'color.gradients.user' );
+	const themeGradients = useSetting( 'color.gradients.theme' );
+	const coreGradients = useSetting( 'color.gradients.core' );
+	colorGradientSettings.gradients = useMemo( () => {
+		const result = [];
+		if ( coreGradients && coreGradients.length ) {
+			result.push( {
+				name: __( 'Core' ),
+				gradients: coreGradients,
+			} );
+		}
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				gradients: themeGradients,
+			} );
+		}
+		if ( userGradients && userGradients.length ) {
+			result.push( {
+				name: __( 'User' ),
+				gradients: userGradients,
+			} );
+		}
+		return result;
+	}, [ userGradients, themeGradients, coreGradients ] );
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }
@@ -167,7 +236,10 @@ const PanelColorGradientSettings = ( props ) => {
 	) {
 		return <PanelColorGradientSettingsInner { ...props } />;
 	}
-	return <PanelColorGradientSettingsSelect { ...props } />;
+	if ( props.__experimentalHasMultipleOrigins ) {
+		return <PanelColorGradientSettingsMultipleSelect { ...props } />;
+	}
+	return <PanelColorGradientSettingsSingleSelect { ...props } />;
 };
 
 export default PanelColorGradientSettings;