@wordpress/edit-site 5.4.0 → 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/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

@@ -22,17 +22,16 @@ import { speak } from '@wordpress/a11y';
  */
 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,
 	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 hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( block.name );
 	const hasBlockMenuItem =

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

@@ -16,7 +16,7 @@ function ScreenBorder( { name, variation = '' } ) {
 	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-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/typography-panel.js

@@ -2,18 +2,16 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
-import { useSupportedStyles } from './hooks';
 
 const {
 	useGlobalStyle,
 	useGlobalSetting,
-	overrideSettingsWithSupports,
+	useSettingsForBlockElement,
 	TypographyPanel: StylesTypographyPanel,
 } = unlock( blockEditorPrivateApis );
 
@@ -40,10 +38,10 @@ export default function TypographyPanel( {
 	} );
 	const [ rawSettings ] = useGlobalSetting( '', name );
 	const usedElement = element === 'heading' ? headingLevel : element;
-	const supports = useSupportedStyles( name, usedElement );
-	const settings = useMemo(
-		() => overrideSettingsWithSupports( rawSettings, supports ),
-		[ rawSettings, supports ]
+	const settings = useSettingsForBlockElement(
+		rawSettings,
+		name,
+		usedElement
 	);
 
 	return (

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

@@ -24,6 +24,7 @@ import ScreenBlockList from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
+import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
@@ -68,7 +69,7 @@ function GlobalStylesActionMenu() {
 		<GlobalStylesMenuFill>
 			<DropdownMenu
 				icon={ moreVertical }
-				label={ __( 'More Styles actions' ) }
+				label={ __( 'Styles actions' ) }
 				controls={ [
 					{
 						title: __( 'Reset to defaults' ),
@@ -205,6 +206,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenBackgroundColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
+				<ScreenFilters name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];