@wordpress/edit-site 5.4.0 → 5.6.0

package/src/components/global-styles/duotone-panel.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	DuotonePicker,
+} from '@wordpress/components';
+import {
+	privateApis as blockEditorPrivateApis,
+	useSetting,
+} from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+const EMPTY_ARRAY = [];
+
+function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
+	const disableDefault = ! useSetting( defaultSetting );
+	const userPresets =
+		useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
+	const themePresets =
+		useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
+	const defaultPresets =
+		useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
+	return useMemo(
+		() => [
+			...userPresets,
+			...themePresets,
+			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+		],
+		[ disableDefault, userPresets, themePresets, defaultPresets ]
+	);
+}
+
+function DuotonePanel( { name } ) {
+	const [ themeDuotone, setThemeDuotone ] = useGlobalStyle(
+		'filter.duotone',
+		name
+	);
+
+	const duotonePalette = useMultiOriginPresets( {
+		presetSetting: 'color.duotone',
+		defaultSetting: 'color.defaultDuotone',
+	} );
+	const colorPalette = useMultiOriginPresets( {
+		presetSetting: 'color.palette',
+		defaultSetting: 'color.defaultPalette',
+	} );
+
+	if ( duotonePalette?.length === 0 ) {
+		return null;
+	}
+	return (
+		<>
+			<ToolsPanel label={ __( 'Duotone' ) }>
+				<span className="span-columns">
+					{ __(
+						'Create a two-tone color effect without losing your original image.'
+					) }
+				</span>
+				<div className="span-columns">
+					<DuotonePicker
+						colorPalette={ colorPalette }
+						duotonePalette={ duotonePalette }
+						disableCustomColors={ true }
+						disableCustomDuotone={ true }
+						value={ themeDuotone }
+						onChange={ setThemeDuotone }
+					/>
+				</div>
+			</ToolsPanel>
+		</>
+	);
+}
+
+export default DuotonePanel;

package/src/components/global-styles/filter-utils.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { useSupportedStyles } from './hooks';
+
+export function useHasFilterPanel( name ) {
+	const supports = useSupportedStyles( name );
+	return supports.includes( 'filter' );
+}

package/src/components/global-styles/hooks.js

@@ -18,7 +18,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../private-apis';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { useGlobalSetting, useColorsPerOrigin: useColorsPerOriginFromSettings } =
+	unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -31,41 +32,16 @@ export function useColorsPerOrigin( name ) {
 		'color.defaultPalette'
 	);
 
-	return useMemo( () => {
-		const result = [];
-		if ( themeColors && themeColors.length ) {
-			result.push( {
-				name: _x(
-					'Theme',
-					'Indicates this palette comes from the theme.'
-				),
-				colors: themeColors,
-			} );
-		}
-		if (
-			shouldDisplayDefaultColors &&
-			defaultColors &&
-			defaultColors.length
-		) {
-			result.push( {
-				name: _x(
-					'Default',
-					'Indicates this palette comes from WordPress.'
-				),
-				colors: defaultColors,
-			} );
-		}
-		if ( customColors && customColors.length ) {
-			result.push( {
-				name: _x(
-					'Custom',
-					'Indicates this palette is created by the user.'
-				),
-				colors: customColors,
-			} );
-		}
-		return result;
-	}, [ customColors, themeColors, defaultColors ] );
+	return useColorsPerOriginFromSettings( {
+		color: {
+			palette: {
+				custom: customColors,
+				theme: themeColors,
+				default: defaultColors,
+			},
+			defaultPalette: shouldDisplayDefaultColors,
+		},
+	} );
 }
 
 export function useGradientsPerOrigin( name ) {

package/src/components/global-styles/preview.js

@@ -107,163 +107,178 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 
 		return styles;
 	}, [ styles ] );
+	const isReady = !! width;
 
 	return (
-		<Iframe
-			className="edit-site-global-styles-preview__iframe"
-			head={ <EditorStyles styles={ editorStyles } /> }
-			style={ {
-				height: normalizedHeight * ratio,
-				visibility: ! width ? 'hidden' : 'visible',
-			} }
-			onMouseEnter={ () => setIsHovered( true ) }
-			onMouseLeave={ () => setIsHovered( false ) }
-			tabIndex={ -1 }
-		>
-			{ containerResizeListener }
-			<motion.div
-				style={ {
-					height: normalizedHeight * ratio,
-					width: '100%',
-					background: gradientValue ?? backgroundColor,
-					cursor: 'pointer',
-				} }
-				initial="start"
-				animate={
-					( isHovered || isFocused ) && ! disableMotion && label
-						? 'hover'
-						: 'start'
-				}
-			>
-				<motion.div
-					variants={ firstFrame }
+		<>
+			<div style={ { position: 'relative' } }>
+				{ containerResizeListener }
+			</div>
+			{ isReady && (
+				<Iframe
+					className="edit-site-global-styles-preview__iframe"
+					head={ <EditorStyles styles={ editorStyles } /> }
 					style={ {
-						height: '100%',
-						overflow: 'hidden',
+						height: normalizedHeight * ratio,
 					} }
+					onMouseEnter={ () => setIsHovered( true ) }
+					onMouseLeave={ () => setIsHovered( false ) }
+					tabIndex={ -1 }
 				>
-					<HStack
-						spacing={ 10 * ratio }
-						justify="center"
+					<motion.div
 						style={ {
-							height: '100%',
-							overflow: 'hidden',
+							height: normalizedHeight * ratio,
+							width: '100%',
+							background: gradientValue ?? backgroundColor,
+							cursor: 'pointer',
 						} }
+						initial="start"
+						animate={
+							( isHovered || isFocused ) &&
+							! disableMotion &&
+							label
+								? 'hover'
+								: 'start'
+						}
 					>
 						<motion.div
+							variants={ firstFrame }
 							style={ {
-								fontFamily: headingFontFamily,
-								fontSize: 65 * ratio,
-								color: headingColor,
-								fontWeight: headingFontWeight,
+								height: '100%',
+								overflow: 'hidden',
 							} }
-							animate={ { scale: 1, opacity: 1 } }
-							initial={ { scale: 0.1, opacity: 0 } }
-							transition={ { delay: 0.3, type: 'tween' } }
 						>
-							Aa
-						</motion.div>
-						<VStack spacing={ 4 * ratio }>
-							{ highlightedColors.map(
-								( { slug, color }, index ) => (
-									<motion.div
-										key={ slug }
-										style={ {
-											height:
-												normalizedColorSwatchSize *
-												ratio,
-											width:
-												normalizedColorSwatchSize *
-												ratio,
-											background: color,
-											borderRadius:
-												( normalizedColorSwatchSize *
-													ratio ) /
-												2,
-										} }
-										animate={ { scale: 1, opacity: 1 } }
-										initial={ { scale: 0.1, opacity: 0 } }
-										transition={ {
-											delay: index === 1 ? 0.2 : 0.1,
-										} }
-									/>
-								)
-							) }
-						</VStack>
-					</HStack>
-				</motion.div>
-				<motion.div
-					variants={ withHoverView && midFrame }
-					style={ {
-						height: '100%',
-						width: '100%',
-						position: 'absolute',
-						top: 0,
-						overflow: 'hidden',
-						filter: 'blur(60px)',
-						opacity: 0.1,
-					} }
-				>
-					<HStack
-						spacing={ 0 }
-						justify="flex-start"
-						style={ {
-							height: '100%',
-							overflow: 'hidden',
-						} }
-					>
-						{ paletteColors
-							.slice( 0, 4 )
-							.map( ( { color }, index ) => (
-								<div
-									key={ index }
+							<HStack
+								spacing={ 10 * ratio }
+								justify="center"
+								style={ {
+									height: '100%',
+									overflow: 'hidden',
+								} }
+							>
+								<motion.div
 									style={ {
-										height: '100%',
-										background: color,
-										flexGrow: 1,
+										fontFamily: headingFontFamily,
+										fontSize: 65 * ratio,
+										color: headingColor,
+										fontWeight: headingFontWeight,
 									} }
-								/>
-							) ) }
-					</HStack>
-				</motion.div>
-				<motion.div
-					variants={ secondFrame }
-					style={ {
-						height: '100%',
-						width: '100%',
-						overflow: 'hidden',
-						position: 'absolute',
-						top: 0,
-					} }
-				>
-					<VStack
-						spacing={ 3 * ratio }
-						justify="center"
-						style={ {
-							height: '100%',
-							overflow: 'hidden',
-							padding: 10 * ratio,
-							boxSizing: 'border-box',
-						} }
-					>
-						{ label && (
-							<div
+									animate={ { scale: 1, opacity: 1 } }
+									initial={ { scale: 0.1, opacity: 0 } }
+									transition={ { delay: 0.3, type: 'tween' } }
+								>
+									Aa
+								</motion.div>
+								<VStack spacing={ 4 * ratio }>
+									{ highlightedColors.map(
+										( { slug, color }, index ) => (
+											<motion.div
+												key={ slug }
+												style={ {
+													height:
+														normalizedColorSwatchSize *
+														ratio,
+													width:
+														normalizedColorSwatchSize *
+														ratio,
+													background: color,
+													borderRadius:
+														( normalizedColorSwatchSize *
+															ratio ) /
+														2,
+												} }
+												animate={ {
+													scale: 1,
+													opacity: 1,
+												} }
+												initial={ {
+													scale: 0.1,
+													opacity: 0,
+												} }
+												transition={ {
+													delay:
+														index === 1 ? 0.2 : 0.1,
+												} }
+											/>
+										)
+									) }
+								</VStack>
+							</HStack>
+						</motion.div>
+						<motion.div
+							variants={ withHoverView && midFrame }
+							style={ {
+								height: '100%',
+								width: '100%',
+								position: 'absolute',
+								top: 0,
+								overflow: 'hidden',
+								filter: 'blur(60px)',
+								opacity: 0.1,
+							} }
+						>
+							<HStack
+								spacing={ 0 }
+								justify="flex-start"
 								style={ {
-									fontSize: 40 * ratio,
-									fontFamily: headingFontFamily,
-									color: headingColor,
-									fontWeight: headingFontWeight,
-									lineHeight: '1em',
-									textAlign: 'center',
+									height: '100%',
+									overflow: 'hidden',
 								} }
 							>
-								{ label }
-							</div>
-						) }
-					</VStack>
-				</motion.div>
-			</motion.div>
-		</Iframe>
+								{ paletteColors
+									.slice( 0, 4 )
+									.map( ( { color }, index ) => (
+										<div
+											key={ index }
+											style={ {
+												height: '100%',
+												background: color,
+												flexGrow: 1,
+											} }
+										/>
+									) ) }
+							</HStack>
+						</motion.div>
+						<motion.div
+							variants={ secondFrame }
+							style={ {
+								height: '100%',
+								width: '100%',
+								overflow: 'hidden',
+								position: 'absolute',
+								top: 0,
+							} }
+						>
+							<VStack
+								spacing={ 3 * ratio }
+								justify="center"
+								style={ {
+									height: '100%',
+									overflow: 'hidden',
+									padding: 10 * ratio,
+									boxSizing: 'border-box',
+								} }
+							>
+								{ label && (
+									<div
+										style={ {
+											fontSize: 40 * ratio,
+											fontFamily: headingFontFamily,
+											color: headingColor,
+											fontWeight: headingFontWeight,
+											lineHeight: '1em',
+											textAlign: 'center',
+										} }
+									>
+										{ label }
+									</div>
+								) }
+							</VStack>
+						</motion.div>
+					</motion.div>
+				</Iframe>
+			) }
+		</>
 	);
 };
 

package/src/components/global-styles/screen-block-list.js

@@ -20,19 +20,18 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
-import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import { unlock } from '../../private-apis';
-import { useSupportedStyles } from './hooks';
 
 const {
+	useHasDimensionsPanel,
 	useHasTypographyPanel,
+	useHasBorderPanel,
 	useGlobalSetting,
-	overrideSettingsWithSupports,
+	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
 
 function useSortedBlockTypes() {
@@ -60,15 +59,11 @@ function useSortedBlockTypes() {
 
 function BlockMenuItem( { block } ) {
 	const [ rawSettings ] = useGlobalSetting( '', block.name );
-	const supports = useSupportedStyles( block.name );
-	const settings = useMemo(
-		() => overrideSettingsWithSupports( rawSettings, supports ),
-		[ rawSettings, supports ]
-	);
+	const settings = useSettingsForBlockElement( rawSettings, block.name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( block.name );
-	const hasBorderPanel = useHasBorderPanel( block.name );
-	const hasDimensionsPanel = useHasDimensionsPanel( block.name );
+	const hasBorderPanel = useHasBorderPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( block.name );
 	const hasBlockMenuItem =

package/src/components/global-styles/screen-border.js

@@ -2,21 +2,28 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import BorderPanel, { useHasBorderPanel } from './border-panel';
+import BorderPanel from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
+import { unlock } from '../../private-apis';
+
+const { useHasBorderPanel, useGlobalSetting, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenBorder( { name, variation = '' } ) {
-	const hasBorderPanel = useHasBorderPanel( name );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+	const hasBorderPanel = useHasBorderPanel( settings );
 	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Border & Shadow' ) } />
+			<ScreenHeader title={ __( 'Border' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 			{ hasBorderPanel && (
 				<BorderPanel name={ name } variation={ variation } />

package/src/components/global-styles/screen-filters.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import DuotonePanel from './duotone-panel';
+import BlockPreviewPanel from './block-preview-panel';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+
+function ScreenFilters( { name } ) {
+	return (
+		<>
+			<ScreenHeader title={ __( 'Filters' ) } />
+			<BlockPreviewPanel name={ name } />
+			<DuotonePanel name={ name } />
+		</>
+	);
+}
+
+export default ScreenFilters;

package/src/components/global-styles/screen-layout.js

@@ -2,17 +2,24 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
+import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
+import { unlock } from '../../private-apis';
+
+const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenLayout( { name, variation = '' } ) {
-	const hasDimensionsPanel = useHasDimensionsPanel( name );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const variationClassName = getVariationClassName( variation );
 	return (
 		<>

package/src/components/global-styles/screen-root.js

@@ -51,7 +51,7 @@ function ScreenRoot() {
 	}, [] );
 
 	return (
-		<Card size="small">
+		<Card size="small" className="edit-site-global-styles-screen-root">
 			<CardBody>
 				<VStack spacing={ 4 }>
 					<Card>

package/src/components/global-styles/screen-style-variations.js

@@ -172,7 +172,11 @@ function ScreenStyleVariations() {
 				) }
 			/>
 
-			<Card size="small" isBorderless>
+			<Card
+				size="small"
+				isBorderless
+				className="edit-site-global-styles-screen-style-variations"
+			>
 				<CardBody>
 					<Grid columns={ 2 }>
 						{ withEmptyVariation?.map( ( variation, index ) => (

package/src/components/global-styles/screen-variations.js

@@ -24,7 +24,6 @@ export function ScreenVariations( { name, path = '' } ) {
 	return (
 		<div className="edit-site-global-styles-screen-variations">
 			<VStack spacing={ 3 }>
-				<p>Manage style variations, saved block appearence presets.</p>
 				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
 				<VariationsPanel name={ name } />
 			</VStack>

package/src/components/global-styles/shadow-panel.js

@@ -146,9 +146,9 @@ function ShadowPopoverContainer( { shadow, onShadowChange } ) {
 function ShadowPresets( { presets, activeShadow, onSelect } ) {
 	return ! presets ? null : (
 		<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
-			{ presets.map( ( { name, shadow }, i ) => (
+			{ presets.map( ( { name, slug, shadow } ) => (
 				<ShadowIndicator
-					key={ i }
+					key={ slug }
 					label={ name }
 					isActive={ shadow === activeShadow }
 					onSelect={ () =>
@@ -167,8 +167,9 @@ function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
 			<Button
 				className="edit-site-global-styles__shadow-indicator"
 				onClick={ onSelect }
-				aria-label={ label }
+				label={ label }
 				style={ { boxShadow: shadow } }
+				showTooltip
 			>
 				{ isActive && <Icon icon={ check } /> }
 			</Button>

package/src/components/global-styles/style.scss

@@ -241,3 +241,13 @@
 	height: 24px;
 	width: 24px;
 }
+
+.edit-site-global-styles-screen-root.edit-site-global-styles-screen-root,
+.edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations {
+	background: unset;
+	color: inherit;
+}
+
+.edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
+	fill: currentColor;
+}