@wordpress/edit-site 5.34.0 → 6.0.0

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

@@ -9,21 +9,16 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -141,38 +136,17 @@ export function useTypographyVariations() {
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			property: 'typography',
 		} );
-
-	const { base } = useContext( GlobalStylesContext );
 	/*
-	 * Filter duplicate variations based on whether the variaitons
-	 * have different heading and body font families.
+	 * Filter out variations with no settings or styles.
 	 */
 	return typographyVariations?.length
-		? Object.values(
-				typographyVariations.reduce( ( acc, variation ) => {
-					const [ bodyFontFamily, headingFontFamily ] =
-						getFontFamilies(
-							mergeBaseAndUserConfigs( base, variation )
-						);
-
-					// Always preseve the default variation.
-					if ( variation?.title === 'Default' ) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					} else if (
-						headingFontFamily?.name &&
-						bodyFontFamily?.name &&
-						! acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						]
-					) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					}
-					return acc;
-				}, {} )
-		  )
+		? typographyVariations.filter( ( variation ) => {
+				const { settings, styles, title } = variation;
+				return (
+					title === __( 'Default' ) || // Always preseve the default variation.
+					Object.keys( settings ).length > 0 ||
+					Object.keys( styles ).length > 0
+				);
+		  } )
 		: [];
 }

package/src/components/global-styles/icon-with-current-color.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { Icon } from '@wordpress/components';
 export function IconWithCurrentColor( { className, ...props } ) {
 	return (
 		<Icon
-			className={ classnames(
+			className={ clsx(
 				className,
 				'edit-site-global-styles-icon-with-current-color'
 			) }

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

@@ -10,8 +10,8 @@ import {
 	ColorIndicator,
 	Button,
 } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { shuffle } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+import { Icon, shuffle, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -55,13 +55,7 @@ function Palette( { name } ) {
 		? '/colors/palette'
 		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
 	const paletteButtonText =
-		colors.length > 0
-			? sprintf(
-					// Translators: %d: Number of palette colors.
-					_n( '%d color', '%d colors', colors.length ),
-					colors.length
-			  )
-			: __( 'Add custom colors' );
+		colors.length > 0 ? __( 'Edit palette' ) : __( 'Add colors' );
 
 	return (
 		<VStack spacing={ 3 }>
@@ -69,13 +63,12 @@ function Palette( { name } ) {
 			<ItemGroup isBordered isSeparated>
 				<NavigationButtonAsItem
 					path={ screenPath }
-					aria-label={ __( 'Color palettes' ) }
+					aria-label={ paletteButtonText }
 				>
-					<HStack
-						direction={
-							colors.length === 0 ? 'row-reverse' : 'row'
-						}
-					>
+					<HStack direction="row">
+						{ colors.length <= 0 && (
+							<FlexItem>{ __( 'Add colors' ) }</FlexItem>
+						) }
 						<ZStack isLayered={ false } offset={ -8 }>
 							{ colors
 								.slice( 0, 5 )
@@ -87,9 +80,7 @@ function Palette( { name } ) {
 									</ColorIndicatorWrapper>
 								) ) }
 						</ZStack>
-						<FlexItem className="edit-site-global-styles-screen-colors__palette-count">
-							{ paletteButtonText }
-						</FlexItem>
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>

package/src/components/global-styles/preset-colors.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './hooks';
+
+export default function PresetColors() {
+	const { paletteColors } = useStylesPreviewColors();
+	return paletteColors.slice( 0, 5 ).map( ( { slug, color }, index ) => (
+		<div
+			key={ `${ slug }-${ index }` }
+			style={ {
+				flexGrow: 1,
+				height: '100%',
+				background: color,
+			} }
+		/>
+	) );
+}

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

@@ -9,7 +9,7 @@ import {
 /**
  * Internal dependencies
  */
-import HighlightedColors from './highlighted-colors';
+import PresetColors from './preset-colors';
 import PreviewIframe from './preview-iframe';
 
 const firstFrameVariants = {
@@ -30,7 +30,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
 		>
-			{ ( { ratio, key } ) => (
+			{ ( { key } ) => (
 				<motion.div
 					key={ key }
 					variants={ firstFrameVariants }
@@ -40,17 +40,14 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 					} }
 				>
 					<HStack
-						spacing={ 5 * ratio }
+						spacing={ 0 }
 						justify="center"
 						style={ {
 							height: '100%',
 							overflow: 'hidden',
 						} }
 					>
-						<HighlightedColors
-							normalizedColorSwatchSize={ 56 }
-							ratio={ ratio }
-						/>
+						<PresetColors />
 					</HStack>
 				</motion.div>
 			) }

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

@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout, image } from '@wordpress/icons';
+import {
+	typography,
+	color,
+	layout,
+	shadow as shadowIcon,
+} from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -18,7 +23,6 @@ const {
 	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
-	useHasBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
 function RootMenu() {
@@ -26,9 +30,9 @@ function RootMenu() {
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
+	const hasShadowPanel = true; // useHasShadowPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 
 	return (
 		<>
@@ -51,6 +55,15 @@ function RootMenu() {
 						{ __( 'Colors' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasShadowPanel && (
+					<NavigationButtonAsItem
+						icon={ shadowIcon }
+						path="/shadows"
+						aria-label={ __( 'Shadow styles' ) }
+					>
+						{ __( 'Shadows' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasLayoutPanel && (
 					<NavigationButtonAsItem
 						icon={ layout }
@@ -60,15 +73,6 @@ function RootMenu() {
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }
-				{ hasBackgroundPanel && (
-					<NavigationButtonAsItem
-						icon={ image }
-						path="/background"
-						aria-label={ __( 'Background image styles' ) }
-					>
-						{ __( 'Background image' ) }
-					</NavigationButtonAsItem>
-				) }
 			</ItemGroup>
 		</>
 	);

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

@@ -235,7 +235,7 @@ function ScreenBlock( { name, variation } ) {
 	return (
 		<>
 			<ScreenHeader
-				title={ variation ? currentBlockStyle.label : blockType.title }
+				title={ variation ? currentBlockStyle?.label : blockType.title }
 			/>
 			<BlockPreviewPanel name={ name } variation={ variation } />
 			{ hasVariationsPanel && (

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

@@ -18,17 +18,17 @@ function ScreenColorPalette( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Palette' ) }
+				title={ __( 'Edit palette' ) }
 				description={ __(
-					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
+					'The combination of colors used across the site and in color pickers.'
 				) }
 			/>
 			<Tabs>
 				<Tabs.TabList>
-					<Tabs.Tab tabId="solid">{ __( 'Solid' ) }</Tabs.Tab>
+					<Tabs.Tab tabId="color">{ __( 'Color' ) }</Tabs.Tab>
 					<Tabs.Tab tabId="gradient">{ __( 'Gradient' ) }</Tabs.Tab>
 				</Tabs.TabList>
-				<Tabs.TabPanel tabId="solid" focusable={ false }>
+				<Tabs.TabPanel tabId="color" focusable={ false }>
 					<ColorPalettePanel name={ name } />
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId="gradient" focusable={ false }>

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

@@ -11,7 +11,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import { unlock } from '../../lock-unlock';
-import ColorVariations from './variations/variations-color';
 
 const {
 	useGlobalStyle,
@@ -40,7 +39,6 @@ function ScreenColors() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<ColorVariations title={ __( 'Presets' ) } />
 					<Palette />
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }

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

@@ -8,20 +8,27 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import DimensionsPanel from './dimensions-panel';
+import BackgroundPanel from './background-panel';
 import ScreenHeader from './header';
 import { unlock } from '../../lock-unlock';
 
-const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
-	unlock( blockEditorPrivateApis );
+const {
+	useHasBackgroundPanel,
+	useHasDimensionsPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+} = unlock( blockEditorPrivateApis );
 
 function ScreenLayout() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel /> }
+			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);
 }

package/src/components/global-styles/screen-revisions/index.js

@@ -84,6 +84,7 @@ function ScreenRevisions() {
 		setUserConfig( () => ( {
 			styles: revision?.styles,
 			settings: revision?.settings,
+			_links: revision?._links,
 		} ) );
 		setIsLoadingRevisionWithUnsavedChanges( false );
 		onCloseRevisions();
@@ -91,8 +92,13 @@ function ScreenRevisions() {
 
 	const selectRevision = ( revision ) => {
 		setCurrentlySelectedRevision( {
+			/*
+			 * The default must be an empty object so that
+			 * `mergeBaseAndUserConfigs()` can merge them correctly.
+			 */
 			styles: revision?.styles || {},
 			settings: revision?.settings || {},
+			_links: revision?._links || {},
 			id: revision?.id,
 		} );
 	};

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -150,7 +150,7 @@ function RevisionsButtons( {
 
 				return (
 					<li
-						className={ classnames(
+						className={ clsx(
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
 								'is-selected': isSelected,

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -119,6 +119,7 @@ export default function useGlobalStylesRevisions( { query } = {} ) {
 					id: 'unsaved',
 					styles: userConfig?.styles,
 					settings: userConfig?.settings,
+					_links: userConfig?._links,
 					author: {
 						name: currentUser?.name,
 						avatar_urls: currentUser?.avatar_urls,

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

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import ShadowsPanel from './shadows-panel';
+import ShadowsEditPanel from './shadows-edit-panel';
+
+export function ScreenShadows() {
+	return <ShadowsPanel />;
+}
+
+export function ScreenShadowsEdit() {
+	return <ShadowsEditPanel />;
+}

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

@@ -31,10 +31,10 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<TypographyVariations title={ __( 'Presets' ) } />
 					{ ! window.__experimentalDisableFontLibrary &&
 						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
+					<TypographyVariations title={ __( 'Presets' ) } />
 				</VStack>
 			</div>
 		</>

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

@@ -0,0 +1,158 @@
+export const CUSTOM_VALUE_SETTINGS = {
+	px: { max: 20, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 10, step: 0.1 },
+	rm: { max: 10, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
+};
+
+export function getShadowParts( shadow ) {
+	const shadowValues = shadow.match( /(?:[^,(]|\([^)]*\))+/g ) || [];
+	return shadowValues.map( ( value ) => value.trim() );
+}
+
+export function shadowStringToObject( shadowValue ) {
+	/*
+	 * Shadow spec: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+	 * Shadow string format: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> [inset]
+	 *
+	 * A shadow to be valid it must satisfy the following.
+	 *
+	 * 1. Should not contain "none" keyword.
+	 * 2. Values x, y, blur, spread should be in the order. Color and inset can be anywhere in the string except in between x, y, blur, spread values.
+	 * 3. Should not contain more than one set of x, y, blur, spread values.
+	 * 4. Should contain at least x and y values. Others are optional.
+	 * 5. Should not contain more than one "inset" (case insensitive) keyword.
+	 * 6. Should not contain more than one color value.
+	 */
+
+	const defaultShadow = {
+		x: '0',
+		y: '0',
+		blur: '0',
+		spread: '0',
+		color: '#000',
+		inset: false,
+	};
+
+	if ( ! shadowValue ) {
+		return defaultShadow;
+	}
+
+	// Rule 1: Should not contain "none" keyword.
+	// if the shadow has "none" keyword, it is not a valid shadow string
+	if ( shadowValue.includes( 'none' ) ) {
+		return defaultShadow;
+	}
+
+	// Rule 2: Values x, y, blur, spread should be in the order.
+	//		   Color and inset can be anywhere in the string except in between x, y, blur, spread values.
+	// Extract length values (x, y, blur, spread) from shadow string
+	// Regex match groups of 1 to 4 length values.
+	const lengthsRegex =
+		/((?:^|\s+)(-?\d*\.?\d+(?:px|%|in|cm|mm|em|rem|ex|pt|pc|vh|vw|vmin|vmax|ch|lh)?)(?=\s|$)(?![^(]*\))){1,4}/g;
+	const matches = shadowValue.match( lengthsRegex ) || [];
+
+	// Rule 3: Should not contain more than one set of x, y, blur, spread values.
+	// if the string doesn't contain exactly 1 set of x, y, blur, spread values,
+	// it is not a valid shadow string
+	if ( matches.length !== 1 ) {
+		return defaultShadow;
+	}
+
+	// Extract length values (x, y, blur, spread) from shadow string
+	const lengths = matches[ 0 ]
+		.split( ' ' )
+		.map( ( value ) => value.trim() )
+		.filter( ( value ) => value );
+
+	// Rule 4: Should contain at least x and y values. Others are optional.
+	if ( lengths.length < 2 ) {
+		return defaultShadow;
+	}
+
+	// Rule 5: Should not contain more than one "inset" (case insensitive) keyword.
+	// check if the shadow string contains "inset" keyword
+	const insets = shadowValue.match( /inset/gi ) || [];
+	if ( insets.length > 1 ) {
+		return defaultShadow;
+	}
+
+	// Strip lengths and inset from shadow string, leaving just color.
+	const hasInset = insets.length === 1;
+	let colorString = shadowValue.replace( lengthsRegex, '' ).trim();
+	if ( hasInset ) {
+		colorString = colorString
+			.replace( 'inset', '' )
+			.replace( 'INSET', '' )
+			.trim();
+	}
+
+	// Rule 6: Should not contain more than one color value.
+	// validate color string with regular expression
+	// check if color has matching hex, rgb or hsl values
+	const colorRegex =
+		/^#([0-9a-f]{3}){1,2}$|^#([0-9a-f]{4}){1,2}$|^(?:rgb|hsl)a?\(?[\d*\.?\d+%?,?\/?\s]*\)$/gi;
+	let colorMatches = ( colorString.match( colorRegex ) || [] )
+		.map( ( value ) => value?.trim() )
+		.filter( ( value ) => value );
+
+	// If color string has more than one color values, it is not a valid
+	if ( colorMatches.length > 1 ) {
+		return defaultShadow;
+	} else if ( colorMatches.length === 0 ) {
+		// check if color string has multiple named color values separated by space
+		colorMatches = colorString
+			.trim()
+			.split( ' ' )
+			.filter( ( value ) => value );
+		// If color string has more than one color values, it is not a valid
+		if ( colorMatches.length > 1 ) {
+			return defaultShadow;
+		}
+	}
+
+	// Return parsed shadow object.
+	const [ x, y, blur, spread ] = lengths;
+	return {
+		x,
+		y,
+		blur: blur || defaultShadow.blur,
+		spread: spread || defaultShadow.spread,
+		inset: hasInset,
+		color: colorString || defaultShadow.color,
+	};
+}
+
+export function shadowObjectToString( shadowObj ) {
+	const shadowString = `${ shadowObj.x || '0px' } ${ shadowObj.y || '0px' } ${
+		shadowObj.blur || '0px'
+	} ${ shadowObj.spread || '0px' }`;
+
+	return `${ shadowObj.inset ? 'inset' : '' } ${ shadowString } ${
+		shadowObj.color || ''
+	}`.trim();
+}