Update: PanelColorGradientSettings to use dropdowns

WordPress · Dec 14, 2021 · 9d04e38 · 9d04e38
1 parent bdb16ce
commit 9d04e38
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 55 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -7,7 +7,16 @@ import { every, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { PanelBody, ColorIndicator } from '@wordpress/components';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	FlexItem,
+	ColorIndicator,
+	PanelBody,
+	Dropdown,
+} from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 
 /**
@@ -136,23 +145,54 @@ export const PanelColorGradientSettingsInner = ( {
 			title={ showTitle ? titleElement : undefined }
 			{ ...props }
 		>
-			{ settings.map( ( setting, index ) => (
-				<ColorGradientControl
-					showTitle={ showTitle }
-					key={ index }
-					{ ...{
-						colors,
-						gradients,
-						disableCustomColors,
-						disableCustomGradients,
-						__experimentalHasMultipleOrigins,
-						__experimentalIsRenderedInSidebar,
-						enableAlpha,
-						...setting,
-					} }
-				/>
-			) ) }
-			{ children }
+			<ItemGroup isBordered isSeparated>
+				{ settings.map( ( setting, index ) => (
+					<Dropdown
+						key={ index }
+						contentClassName="block-editor-panel-color-gradient-settings__dropdown"
+						renderToggle={ ( { onToggle } ) => {
+							return (
+								<Item
+									onClick={ onToggle }
+									className="block-editor-panel-color-gradient-settings__item"
+								>
+									<HStack justify="flex-start">
+										<FlexItem>
+											<ColorIndicator
+												colorValue={
+													setting.gradientValue ??
+													setting.colorValue
+												}
+											/>
+										</FlexItem>
+										<FlexItem>{ setting.label }</FlexItem>
+									</HStack>
+								</Item>
+							);
+						} }
+						renderContent={ () => (
+							<ColorGradientControl
+								showTitle={ false }
+								{ ...{
+									colors,
+									gradients,
+									disableCustomColors,
+									disableCustomGradients,
+									__experimentalHasMultipleOrigins,
+									__experimentalIsRenderedInSidebar,
+									enableAlpha,
+									...setting,
+								} }
+							/>
+						) }
+					/>
+				) ) }
+			</ItemGroup>
+			{ !! children && (
+				<>
+					<Spacer marginY={ 4 } /> { children }
+				</>
+			) }
 		</PanelBody>
 	);
 };

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -38,4 +38,40 @@
 	.block-editor-block-inspector & .components-base-control {
 		margin-bottom: inherit;
 	}
+
+	.components-dropdown {
+		display: block;
+	}
+
+	// Allow horizontal overflow so the size-increasing color indicators don't cause a scrollbar.
+	.components-navigator-screen {
+		overflow-x: visible;
+	}
+
+}
+
+@include break-medium() {
+	.block-editor-panel-color-gradient-settings__dropdown .components-popover__content {
+		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
+		margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
+	}
+}
+
+.block-editor-panel-color-gradient-settings__item {
+	// @todo: this can be removed when https://github.com/WordPress/gutenberg/pull/37028 lands.
+	.component-color-indicator {
+		margin-left: 0;
+		display: block;
+		border-radius: 50%;
+		border: 0;
+		height: 24px;
+		width: 24px;
+		padding: 0;
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 25px 25px;
+		background-size: calc(2 * 5px) calc(2 * 5px);
+	}
 }
+
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -55,7 +55,6 @@ function ScreenBackgroundColor( { name } ) {
 		return null;
 	}
 
-	const settings = [];
 	let backgroundSettings = {};
 	if ( hasBackgroundColor ) {
 		backgroundSettings = {
@@ -79,11 +78,10 @@ function ScreenBackgroundColor( { name } ) {
 		}
 	}
 
-	settings.push( {
+	const controlProps = {
 		...backgroundSettings,
 		...gradientSettings,
-		label: __( 'Background color' ),
-	} );
+	};
 
 	return (
 		<>
@@ -94,10 +92,8 @@ function ScreenBackgroundColor( { name } ) {
 					'Set a background color or gradient for the whole site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-background-color__control"
 				colors={ colorsPerOrigin }
 				gradients={ gradientsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
@@ -106,6 +102,7 @@ function ScreenBackgroundColor( { name } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				{ ...controlProps }
 			/>
 		</>
 	);

diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -44,15 +44,6 @@ function ScreenLinkColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: linkColor,
-			onColorChange: setLinkColor,
-			label: __( 'Link color' ),
-			clearable: linkColor === userLinkColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
@@ -62,16 +53,17 @@ function ScreenLinkColor( { name } ) {
 					'Set the default color used for links across the site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-link-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				colorValue={ linkColor }
+				onColorChange={ setLinkColor }
+				clearable={ linkColor === userLinkColor }
 			/>
 		</>
 	);

diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -36,15 +36,6 @@ function ScreenTextColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: color,
-			onColorChange: setColor,
-			label: __( 'Text color' ),
-			clearable: color === userColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
@@ -54,16 +45,17 @@ function ScreenTextColor( { name } ) {
 					'Set the default color used for text across the site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-text-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				colorValue={ color }
+				onColorChange={ setColor }
+				clearable={ color === userColor }
 			/>
 		</>
 	);

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -66,3 +66,9 @@ h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-he
 	font-size: 11px;
 	margin-bottom: $grid-unit-10;
 }
+
+.edit-site-screen-text-color__control,
+.edit-site-screen-link-color__control,
+.edit-site-screen-background-color__control {
+	padding: $grid-unit-20;
+}