@wordpress/edit-site 5.3.6 → 5.5.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/gradients-palette-panel.js

@@ -75,6 +75,7 @@ export default function GradientPalettePanel( { name } ) {
 					gradients={ themeGradients }
 					onChange={ setThemeGradients }
 					paletteLabel={ __( 'Theme' ) }
+					paletteLabelHeadingLevel={ 3 }
 				/>
 			) }
 			{ !! defaultGradients &&
@@ -86,12 +87,14 @@ export default function GradientPalettePanel( { name } ) {
 						gradients={ defaultGradients }
 						onChange={ setDefaultGradients }
 						paletteLabel={ __( 'Default' ) }
+						paletteLabelLevel={ 3 }
 					/>
 				) }
 			<PaletteEdit
 				gradients={ customGradients }
 				onChange={ setCustomGradients }
 				paletteLabel={ __( 'Custom' ) }
+				paletteLabelLevel={ 3 }
 				emptyMessage={ __(
 					'Custom gradients are empty! Add some gradients to create your own palette.'
 				) }
@@ -99,7 +102,7 @@ export default function GradientPalettePanel( { name } ) {
 			/>
 			{ !! duotonePalette && !! duotonePalette.length && (
 				<div>
-					<Subtitle>{ __( 'Duotone' ) }</Subtitle>
+					<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>
 					<Spacer margin={ 3 } />
 					<DuotonePicker
 						duotonePalette={ duotonePalette }

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

@@ -29,7 +29,13 @@ function ScreenHeader( { title, description } ) {
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
 						<Spacer>
-							<Heading level={ 5 }>{ title }</Heading>
+							<Heading
+								className="edit-site-global-styles-header"
+								level={ 2 }
+								size={ 13 }
+							>
+								{ title }
+							</Heading>
 						</Spacer>
 					</HStack>
 				</Spacer>

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import { colord, extend } from 'colord';
 import a11yPlugin from 'colord/plugins/a11y';
 
@@ -10,107 +9,20 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { _x } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
-import {
-	getBlockType,
-	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
-} from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
+import { useSelect } from '@wordpress/data';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
 
-const ROOT_BLOCK_SUPPORTS = [
-	'background',
-	'backgroundColor',
-	'color',
-	'linkColor',
-	'buttonColor',
-	'fontFamily',
-	'fontSize',
-	'fontStyle',
-	'fontWeight',
-	'lineHeight',
-	'textDecoration',
-	'padding',
-	'contentSize',
-	'wideSize',
-	'blockGap',
-];
-
-export function getSupportedGlobalStylesPanels( name ) {
-	if ( ! name ) {
-		return ROOT_BLOCK_SUPPORTS;
-	}
-
-	const blockType = getBlockType( name );
-
-	if ( ! blockType ) {
-		return [];
-	}
-
-	const supportKeys = [];
-
-	// Check for blockGap support.
-	// Block spacing support doesn't map directly to a single style property, so needs to be handled separately.
-	// Also, only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
-	if (
-		blockType?.supports?.spacing?.blockGap &&
-		blockType?.supports?.spacing?.__experimentalSkipSerialization !==
-			true &&
-		! blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
-			( spacingType ) => spacingType === 'blockGap'
-		)
-	) {
-		supportKeys.push( 'blockGap' );
-	}
-
-	// check for shadow support
-	if ( blockType?.supports?.shadow ) {
-		supportKeys.push( 'shadow' );
-	}
-
-	Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {
-		if ( ! STYLE_PROPERTY[ styleName ].support ) {
-			return;
-		}
-
-		// Opting out means that, for certain support keys like background color,
-		// blocks have to explicitly set the support value false. If the key is
-		// unset, we still enable it.
-		if ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {
-			if (
-				STYLE_PROPERTY[ styleName ].support[ 0 ] in
-					blockType.supports &&
-				get(
-					blockType.supports,
-					STYLE_PROPERTY[ styleName ].support
-				) !== false
-			) {
-				return supportKeys.push( styleName );
-			}
-		}
-
-		if (
-			get(
-				blockType.supports,
-				STYLE_PROPERTY[ styleName ].support,
-				false
-			)
-		) {
-			return supportKeys.push( styleName );
-		}
-	} );
-
-	return supportKeys;
-}
-
 export function useColorsPerOrigin( name ) {
 	const [ customColors ] = useGlobalSetting( 'color.palette.custom', name );
 	const [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );
@@ -240,3 +152,18 @@ export function useColorRandomizer( name ) {
 		? [ randomizeColors ]
 		: [];
 }
+
+export function useSupportedStyles( name, element ) {
+	const { supportedPanels } = useSelect(
+		( select ) => {
+			return {
+				supportedPanels: unlock(
+					select( blocksStore )
+				).getSupportedStyles( name, element ),
+			};
+		},
+		[ name, element ]
+	);
+
+	return supportedPanels;
+}

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

@@ -65,7 +65,7 @@ function Palette( { name } ) {
 
 	return (
 		<VStack spacing={ 3 }>
-			<Subtitle>{ __( 'Palette' ) }</Subtitle>
+			<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButtonAsItem
 					path={ screenPath }

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-background-color.js

@@ -17,7 +17,7 @@ import {
  */
 import ScreenHeader from './header';
 import {
-	getSupportedGlobalStylesPanels,
+	useSupportedStyles,
 	useColorsPerOrigin,
 	useGradientsPerOrigin,
 } from './hooks';
@@ -27,7 +27,7 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function ScreenBackgroundColor( { name, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const [ areCustomGradientsEnabled ] = useGlobalSetting(
 		'color.customGradient',
@@ -122,6 +122,7 @@ function ScreenBackgroundColor( { name, variation = '' } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				headingLevel={ 3 }
 				{ ...controlProps }
 			/>
 		</>

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

@@ -10,7 +10,10 @@ import {
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
-import { BlockIcon } from '@wordpress/block-editor';
+import {
+	BlockIcon,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 
@@ -19,11 +22,17 @@ import { speak } from '@wordpress/a11y';
  */
 import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
-import { useHasDimensionsPanel } from './dimensions-panel';
-import { useHasTypographyPanel } from './typography-panel';
 import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
+import { unlock } from '../../private-apis';
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+} = unlock( blockEditorPrivateApis );
 
 function useSortedBlockTypes() {
 	const blockItems = useSelect(
@@ -49,10 +58,12 @@ function useSortedBlockTypes() {
 }
 
 function BlockMenuItem( { block } ) {
-	const hasTypographyPanel = useHasTypographyPanel( block.name );
+	const [ rawSettings ] = useGlobalSetting( '', block.name );
+	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 hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( block.name );
 	const hasBlockMenuItem =