Duotone: add block controls on the inspector (#49838)

* add a filter slot and insert StylesFiltersPanel on the duotone hook * fixed duotone value and onchange function * removed label from slot * enable custom colors and duotone * fix custom colors on inspector panel * changed the panel to act as a dropdown * disable custom duotone on GS * removed border of popover * use classnames that are component specific * simplify LabeledColorIndicator
WordPress · Apr 20, 2023 · a1a8729 · a1a8729
1 parent 74e1db8
commit a1a8729
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 42 deletions.
diff --git a/packages/block-editor/src/components/global-styles/filters-panel.js b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -1,11 +1,26 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
+	ColorIndicator,
 	DuotonePicker,
+	DuotoneSwatch,
+	Dropdown,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -75,6 +90,29 @@ const DEFAULT_CONTROLS = {
 	duotone: true,
 };
 
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+	className: 'block-editor-duotone-control__popover',
+	headerTitle: __( 'Duotone' ),
+};
+
+const LabeledColorIndicator = ( { indicator, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			<Flex expanded={ false }>
+				{ indicator === 'unset' || ! indicator ? (
+					<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
+				) : (
+					<DuotoneSwatch values={ indicator } />
+				) }
+			</Flex>
+		</ZStack>
+		<FlexItem title={ label }>{ label }</FlexItem>
+	</HStack>
+);
+
 export default function FiltersPanel( {
 	as: Wrapper = FiltersToolsPanel,
 	value,
@@ -110,6 +148,11 @@ export default function FiltersPanel( {
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
 
+	const disableCustomColors = ! settings?.color?.custom;
+	const disableCustomDuotone =
+		! settings?.color?.customDuotone ||
+		( colorPalette?.length === 0 && disableCustomColors );
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -135,21 +178,51 @@ export default function FiltersPanel( {
 					isShownByDefault={ defaultControls.duotone }
 					panelId={ panelId }
 				>
-					<VStack>
-						<p>
-							{ __(
-								'Create a two-tone color effect without losing your original image.'
-							) }
-						</p>
-						<DuotonePicker
-							colorPalette={ colorPalette }
-							duotonePalette={ duotonePalette }
-							disableCustomColors={ true }
-							disableCustomDuotone={ true }
-							value={ duotone }
-							onChange={ setDuotone }
-						/>
-					</VStack>
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="block-editor-global-styles-filters-panel__dropdown"
+						renderToggle={ ( { onToggle, isOpen } ) => {
+							const toggleProps = {
+								onClick: onToggle,
+								className: classnames( { 'is-open': isOpen } ),
+								'aria-expanded': isOpen,
+							};
+
+							return (
+								<ItemGroup isBordered isSeparated>
+									<Button { ...toggleProps }>
+										<LabeledColorIndicator
+											indicator={ duotone }
+											label={ __( 'Duotone' ) }
+										/>
+									</Button>
+								</ItemGroup>
+							);
+						} }
+						renderContent={ () => (
+							<DropdownContentWrapper paddingSize="medium">
+								<VStack>
+									<p>
+										{ __(
+											'Create a two-tone color effect without losing your original image.'
+										) }
+									</p>
+									<DuotonePicker
+										colorPalette={ colorPalette }
+										duotonePalette={ duotonePalette }
+										disableCustomColors={
+											disableCustomColors
+										}
+										disableCustomDuotone={
+											disableCustomDuotone
+										}
+										value={ duotone }
+										onChange={ setDuotone }
+									/>
+								</VStack>
+							</DropdownContentWrapper>
+						) }
+					/>
 				</ToolsPanelItem>
 			) }
 		</Wrapper>

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -6,11 +6,12 @@
 	width: 230px;
 }
 
+.block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles-effects-panel__shadow-dropdown {
 	display: block;
 	padding: 0;
 
-	> button {
+	button {
 		width: 100%;
 		padding: $grid-unit-10;
 

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -32,6 +32,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
+			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot
 				group="typography"
 				label={ __( 'Typography' ) }

diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -7,6 +7,7 @@ const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
+const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -22,6 +23,7 @@ const groups = {
 	advanced: InspectorControlsAdvanced,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
+	filter: InspectorControlsFilter,
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
 	settings: InspectorControlsDefault, // Alias for default.

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
@@ -23,6 +23,7 @@ import { useSelect } from '@wordpress/data';
  */
 import {
 	BlockControls,
+	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
 	useSetting,
 } from '../components';
@@ -34,7 +35,9 @@ import {
 } from '../components/duotone';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
+import { useBlockSettings } from './utils';
 import { store as blockEditorStore } from '../store';
+import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 
 const EMPTY_ARRAY = [];
 
@@ -106,9 +109,10 @@ export function getDuotonePresetFromColors( colors, duotonePalette ) {
 	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
 }
 
-function DuotonePanel( { attributes, setAttributes } ) {
+function DuotonePanel( { attributes, setAttributes, name } ) {
 	const style = attributes?.style;
 	const duotoneStyle = style?.color?.duotone;
+	const settings = useBlockSettings( name );
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -132,30 +136,47 @@ function DuotonePanel( { attributes, setAttributes } ) {
 		: duotoneStyle;
 
 	return (
-		<BlockControls group="block" __experimentalShareWithChildBlocks>
-			<DuotoneControl
-				duotonePalette={ duotonePalette }
-				colorPalette={ colorPalette }
-				disableCustomDuotone={ disableCustomDuotone }
-				disableCustomColors={ disableCustomColors }
-				value={ duotonePresetOrColors }
-				onChange={ ( newDuotone ) => {
-					const maybePreset = getDuotonePresetFromColors(
-						newDuotone,
-						duotonePalette
-					);
-
-					const newStyle = {
-						...style,
-						color: {
-							...style?.color,
-							duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
-						},
-					};
-					setAttributes( { style: newStyle } );
-				} }
-			/>
-		</BlockControls>
+		<>
+			<InspectorControls group="filter">
+				<StylesFiltersPanel
+					value={ { filter: { duotone: duotonePresetOrColors } } }
+					onChange={ ( newDuotone ) => {
+						const newStyle = {
+							color: {
+								...newDuotone?.filter,
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</InspectorControls>
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<DuotoneControl
+					duotonePalette={ duotonePalette }
+					colorPalette={ colorPalette }
+					disableCustomDuotone={ disableCustomDuotone }
+					disableCustomColors={ disableCustomColors }
+					value={ duotonePresetOrColors }
+					onChange={ ( newDuotone ) => {
+						const maybePreset = getDuotonePresetFromColors(
+							newDuotone,
+							duotonePalette
+						);
+
+						const newStyle = {
+							...style,
+							color: {
+								...style?.color,
+								duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</BlockControls>
+		</>
 	);
 }
 

diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
@@ -150,9 +150,14 @@ export function useBlockSettings( name, parentLayout ) {
 	const borderWidth = useSetting( 'border.width' );
 	const customColorsEnabled = useSetting( 'color.custom' );
 	const customColors = useSetting( 'color.palette.custom' );
+	const customDuotone = useSetting( 'color.customDuotone' );
 	const themeColors = useSetting( 'color.palette.theme' );
 	const defaultColors = useSetting( 'color.palette.default' );
 	const defaultPalette = useSetting( 'color.defaultPalette' );
+	const defaultDuotone = useSetting( 'color.defaultDuotone' );
+	const userDuotonePalette = useSetting( 'color.duotone.custom' );
+	const themeDuotonePalette = useSetting( 'color.duotone.theme' );
+	const defaultDuotonePalette = useSetting( 'color.duotone.default' );
 	const userGradientPalette = useSetting( 'color.gradients.custom' );
 	const themeGradientPalette = useSetting( 'color.gradients.theme' );
 	const defaultGradientPalette = useSetting( 'color.gradients.default' );
@@ -175,10 +180,17 @@ export function useBlockSettings( name, parentLayout ) {
 					theme: themeGradientPalette,
 					default: defaultGradientPalette,
 				},
+				duotone: {
+					custom: userDuotonePalette,
+					theme: themeDuotonePalette,
+					default: defaultDuotonePalette,
+				},
 				defaultGradients,
 				defaultPalette,
+				defaultDuotone,
 				custom: customColorsEnabled,
 				customGradient: areCustomGradientsEnabled,
+				customDuotone,
 				background: isBackgroundEnabled,
 				link: isLinkEnabled,
 				text: isTextEnabled,
@@ -245,9 +257,14 @@ export function useBlockSettings( name, parentLayout ) {
 		borderWidth,
 		customColorsEnabled,
 		customColors,
+		customDuotone,
 		themeColors,
 		defaultColors,
 		defaultPalette,
+		defaultDuotone,
+		userDuotonePalette,
+		themeDuotonePalette,
+		defaultDuotonePalette,
 		userGradientPalette,
 		themeGradientPalette,
 		defaultGradientPalette,

diff --git a/packages/edit-site/src/components/global-styles/filters-panel.js b/packages/edit-site/src/components/global-styles/filters-panel.js
@@ -27,7 +27,13 @@ export default function FiltersPanel( { name } ) {
 			inheritedValue={ inheritedStyle }
 			value={ style }
 			onChange={ setStyle }
-			settings={ settings }
+			settings={ {
+				...settings,
+				color: {
+					...settings.color,
+					customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
+				},
+			} }
 		/>
 	);
 }