@wordpress/edit-site 5.2.0 → 5.3.0

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

@@ -1,9 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, border, color, layout } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	FlexItem,
+	CardBody,
+	CardDivider,
+} from '@wordpress/components';
+import {
+	typography,
+	border,
+	color,
+	layout,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -14,6 +30,7 @@ import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
+import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
 
 function ContextMenu( { name, parentMenu = '' } ) {
@@ -24,48 +41,101 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasLayoutPanel = hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
 
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS:
+				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+		};
+	}, [] );
+
+	const isBlocksPanel =
+		parentMenu.includes( 'blocks' ) &&
+		! parentMenu.includes( 'variations' );
+
 	return (
-		<ItemGroup>
-			{ hasTypographyPanel && (
-				<NavigationButtonAsItem
-					icon={ typography }
-					path={ parentMenu + '/typography' }
-					aria-label={ __( 'Typography styles' ) }
-				>
-					{ __( 'Typography' ) }
-				</NavigationButtonAsItem>
-			) }
-			{ hasColorPanel && (
-				<NavigationButtonAsItem
-					icon={ color }
-					path={ parentMenu + '/colors' }
-					aria-label={ __( 'Colors styles' ) }
-				>
-					{ __( 'Colors' ) }
-				</NavigationButtonAsItem>
-			) }
-			{ hasBorderPanel && (
-				<NavigationButtonAsItem
-					icon={ border }
-					path={ parentMenu + '/border' }
-					aria-label={ __( 'Border styles' ) }
-				>
-					{ __( 'Border' ) }
-				</NavigationButtonAsItem>
-			) }
-			{ hasLayoutPanel && (
-				<NavigationButtonAsItem
-					icon={ layout }
-					path={ parentMenu + '/layout' }
-					aria-label={ __( 'Layout styles' ) }
-				>
-					{ __( 'Layout' ) }
-				</NavigationButtonAsItem>
-			) }
-			{ hasVariationsPanel && (
-				<ScreenVariations name={ name } path={ parentMenu } />
-			) }
-		</ItemGroup>
+		<>
+			<ItemGroup>
+				{ hasTypographyPanel && (
+					<NavigationButtonAsItem
+						icon={ typography }
+						path={ parentMenu + '/typography' }
+						aria-label={ __( 'Typography styles' ) }
+					>
+						{ __( 'Typography' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasColorPanel && (
+					<NavigationButtonAsItem
+						icon={ color }
+						path={ parentMenu + '/colors' }
+						aria-label={ __( 'Colors styles' ) }
+					>
+						{ __( 'Colors' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasBorderPanel && (
+					<NavigationButtonAsItem
+						icon={ border }
+						path={ parentMenu + '/border' }
+						aria-label={ __( 'Border & shadow styles' ) }
+					>
+						{ __( 'Border & Shadow' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasLayoutPanel && (
+					<NavigationButtonAsItem
+						icon={ layout }
+						path={ parentMenu + '/layout' }
+						aria-label={ __( 'Layout styles' ) }
+					>
+						{ __( 'Layout' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasVariationsPanel && (
+					<ScreenVariations name={ name } path={ parentMenu } />
+				) }
+				{ isBlocksPanel && canEditCSS && (
+					<>
+						<CardDivider />
+						<CardBody>
+							<Spacer as="p" paddingTop={ 2 } marginBottom={ 4 }>
+								{ __(
+									'Add your own CSS to customize the block appearance.'
+								) }
+							</Spacer>
+							<ItemGroup>
+								<NavigationButtonAsItem
+									path={ parentMenu + '/css' }
+									aria-label={ __( 'Additional block CSS' ) }
+								>
+									<HStack justify="space-between">
+										<FlexItem>
+											{ __( 'Additional block CSS' ) }
+										</FlexItem>
+										<IconWithCurrentColor
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
+									</HStack>
+								</NavigationButtonAsItem>
+							</ItemGroup>
+						</CardBody>
+						<CardDivider />
+					</>
+				) }
+			</ItemGroup>
+		</>
 	);
 }
 

package/src/components/global-styles/custom-css.js

@@ -1,17 +1,37 @@
 /**
  * WordPress dependencies
  */
-import { TextareaControl, Panel, PanelBody } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import {
+	TextareaControl,
+	Panel,
+	PanelBody,
+	__experimentalVStack as VStack,
+	Tooltip,
+	Icon,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import {
+	experiments as blockEditorExperiments,
+	transformStyles,
+} from '@wordpress/block-editor';
+import { info } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { useStyle } from './hooks';
+import { unlock } from '../../experiments';
+import Subtitle from './subtitle';
 
-function CustomCSSControl() {
-	const [ customCSS, setCustomCSS ] = useStyle( 'css' );
-	const [ themeCSS ] = useStyle( 'css', null, 'base' );
+const { useGlobalStyle } = unlock( blockEditorExperiments );
+function CustomCSSControl( { blockName } ) {
+	// If blockName is defined, we are customizing CSS at the block level:
+	// styles.blocks.blockName.css
+	const block = !! blockName ? blockName : null;
+
+	const [ customCSS, setCustomCSS ] = useGlobalStyle( 'css', block );
+	const [ themeCSS ] = useGlobalStyle( 'css', block, 'base' );
+	const [ cssError, setCSSError ] = useState( null );
 	const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
 
 	// If there is custom css from theme.json show it in the edit box
@@ -32,6 +52,33 @@ function CustomCSSControl() {
 			return;
 		}
 		setCustomCSS( value );
+		if ( cssError ) {
+			const [ transformed ] = transformStyles(
+				[ { css: value } ],
+				'.editor-styles-wrapper'
+			);
+			if ( transformed ) {
+				setCSSError( null );
+			}
+		}
+	}
+
+	function handleOnBlur( event ) {
+		if ( ! event?.target?.value ) {
+			setCSSError( null );
+			return;
+		}
+
+		const [ transformed ] = transformStyles(
+			[ { css: event.target.value } ],
+			'.editor-styles-wrapper'
+		);
+
+		setCSSError(
+			transformed === null
+				? __( 'There is an error with your CSS structure.' )
+				: null
+		);
 	}
 
 	const originalThemeCustomCSS =
@@ -41,20 +88,6 @@ function CustomCSSControl() {
 
 	return (
 		<>
-			<TextareaControl
-				__nextHasNoMarginBottom
-				value={
-					customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
-					themeCustomCSS
-				}
-				onChange={ ( value ) => handleOnChange( value ) }
-				rows={ 15 }
-				className="edit-site-global-styles__custom-css-input"
-				spellCheck={ false }
-				help={ __(
-					"Enter your custom CSS in the textarea and preview in the editor. Changes won't take effect until you've saved the template."
-				) }
-			/>
 			{ originalThemeCustomCSS && (
 				<Panel>
 					<PanelBody
@@ -67,6 +100,30 @@ function CustomCSSControl() {
 					</PanelBody>
 				</Panel>
 			) }
+			<VStack spacing={ 3 }>
+				<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>
+				<TextareaControl
+					__nextHasNoMarginBottom
+					value={
+						customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
+						themeCustomCSS
+					}
+					onChange={ ( value ) => handleOnChange( value ) }
+					onBlur={ handleOnBlur }
+					className="edit-site-global-styles__custom-css-input"
+					spellCheck={ false }
+				/>
+				{ cssError && (
+					<Tooltip text={ cssError }>
+						<div className="edit-site-global-styles__custom-css-validation-wrapper">
+							<Icon
+								icon={ info }
+								className="edit-site-global-styles__custom-css-validation-icon"
+							/>
+						</div>
+					</Tooltip>
+				) }
+			</VStack>
 		</>
 	);
 }

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

@@ -18,15 +18,19 @@ import {
 } from '@wordpress/components';
 import {
 	__experimentalUseCustomSides as useCustomSides,
-	__experimentalHeightControl as HeightControl,
+	HeightControl,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import { getSupportedGlobalStylesPanels } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
@@ -50,50 +54,52 @@ export function useHasDimensionsPanel( name ) {
 
 function useHasContentSize( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'layout.contentSize', name );
+	const [ settings ] = useGlobalSetting( 'layout.contentSize', name );
 
 	return settings && supports.includes( 'contentSize' );
 }
 
 function useHasWideSize( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'layout.wideSize', name );
+	const [ settings ] = useGlobalSetting( 'layout.wideSize', name );
 
 	return settings && supports.includes( 'wideSize' );
 }
 
 function useHasPadding( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.padding', name );
+	const [ settings ] = useGlobalSetting( 'spacing.padding', name );
 
 	return settings && supports.includes( 'padding' );
 }
 
 function useHasMargin( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.margin', name );
+	const [ settings ] = useGlobalSetting( 'spacing.margin', name );
 
 	return settings && supports.includes( 'margin' );
 }
 
 function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.blockGap', name );
+	const [ settings ] = useGlobalSetting( 'spacing.blockGap', name );
 
 	return settings && supports.includes( 'blockGap' );
 }
 
 function useHasMinHeight( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'dimensions.minHeight', name );
+	const [ settings ] = useGlobalSetting( 'dimensions.minHeight', name );
 
 	return settings && supports.includes( 'minHeight' );
 }
 
 function useHasSpacingPresets() {
-	const [ settings ] = useSetting( 'spacing.spacingSizes' );
+	const [ settings ] = useGlobalSetting( 'spacing.spacingSizes' );
+	const { custom, theme, default: defaultPresets } = settings || {};
+	const presets = custom ?? theme ?? defaultPresets ?? [];
 
-	return settings && settings.length > 0;
+	return settings && presets.length > 0;
 }
 
 function filterValuesBySides( values, sides ) {
@@ -156,11 +162,11 @@ function splitGapValue( value ) {
 
 // Props for managing `layout.contentSize`.
 function useContentSizeProps( name ) {
-	const [ contentSizeValue, setContentSizeValue ] = useSetting(
+	const [ contentSizeValue, setContentSizeValue ] = useGlobalSetting(
 		'layout.contentSize',
 		name
 	);
-	const [ userSetContentSizeValue ] = useSetting(
+	const [ userSetContentSizeValue ] = useGlobalSetting(
 		'layout.contentSize',
 		name,
 		'user'
@@ -177,11 +183,11 @@ function useContentSizeProps( name ) {
 
 // Props for managing `layout.wideSize`.
 function useWideSizeProps( name ) {
-	const [ wideSizeValue, setWideSizeValue ] = useSetting(
+	const [ wideSizeValue, setWideSizeValue ] = useGlobalSetting(
 		'layout.wideSize',
 		name
 	);
-	const [ userSetWideSizeValue ] = useSetting(
+	const [ userSetWideSizeValue ] = useGlobalSetting(
 		'layout.wideSize',
 		name,
 		'user'
@@ -197,9 +203,10 @@ function useWideSizeProps( name ) {
 }
 
 // Props for managing `spacing.padding`.
-function usePaddingProps( name, variationPath = '' ) {
-	const [ rawPadding, setRawPadding ] = useStyle(
-		variationPath + 'spacing.padding',
+function usePaddingProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ rawPadding, setRawPadding ] = useGlobalStyle(
+		prefix + 'spacing.padding',
 		name
 	);
 	const paddingValues = splitStyleValue( rawPadding );
@@ -213,8 +220,8 @@ function usePaddingProps( name, variationPath = '' ) {
 		setRawPadding( padding );
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
-	const [ userSetPaddingValue ] = useStyle(
-		variationPath + 'spacing.padding',
+	const [ userSetPaddingValue ] = useGlobalStyle(
+		prefix + 'spacing.padding',
 		name,
 		'user'
 	);
@@ -232,9 +239,10 @@ function usePaddingProps( name, variationPath = '' ) {
 }
 
 // Props for managing `spacing.margin`.
-function useMarginProps( name, variationPath = '' ) {
-	const [ rawMargin, setRawMargin ] = useStyle(
-		variationPath + 'spacing.margin',
+function useMarginProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ rawMargin, setRawMargin ] = useGlobalStyle(
+		prefix + 'spacing.margin',
 		name
 	);
 	const marginValues = splitStyleValue( rawMargin );
@@ -262,9 +270,10 @@ function useMarginProps( name, variationPath = '' ) {
 }
 
 // Props for managing `spacing.blockGap`.
-function useBlockGapProps( name, variationPath = '' ) {
-	const [ gapValue, setGapValue ] = useStyle(
-		variationPath + 'spacing.blockGap',
+function useBlockGapProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ gapValue, setGapValue ] = useGlobalStyle(
+		prefix + 'spacing.blockGap',
 		name
 	);
 	const gapValues = splitGapValue( gapValue );
@@ -272,8 +281,8 @@ function useBlockGapProps( name, variationPath = '' ) {
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
-	const [ userSetGapValue ] = useStyle(
-		variationPath + 'spacing.blockGap',
+	const [ userSetGapValue ] = useGlobalStyle(
+		prefix + 'spacing.blockGap',
 		name,
 		'user'
 	);
@@ -305,9 +314,10 @@ function useBlockGapProps( name, variationPath = '' ) {
 }
 
 // Props for managing `dimensions.minHeight`.
-function useMinHeightProps( name, variationPath = '' ) {
-	const [ minHeightValue, setMinHeightValue ] = useStyle(
-		variationPath + 'dimensions.minHeight',
+function useMinHeightProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ minHeightValue, setMinHeightValue ] = useGlobalStyle(
+		prefix + 'dimensions.minHeight',
 		name
 	);
 	const resetMinHeightValue = () => setMinHeightValue( undefined );
@@ -320,7 +330,7 @@ function useMinHeightProps( name, variationPath = '' ) {
 	};
 }
 
-export default function DimensionsPanel( { name, variationPath = '' } ) {
+export default function DimensionsPanel( { name, variation = '' } ) {
 	const showContentSizeControl = useHasContentSize( name );
 	const showWideSizeControl = useHasWideSize( name );
 	const showPaddingControl = useHasPadding( name );
@@ -329,7 +339,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 	const showMinHeightControl = useHasMinHeight( name );
 	const showSpacingPresetsControl = useHasSpacingPresets();
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
+		availableUnits: useGlobalSetting( 'spacing.units', name )[ 0 ] || [
 			'%',
 			'px',
 			'em',
@@ -362,7 +372,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setPaddingValues,
 		resetPaddingValue,
 		hasPaddingValue,
-	} = usePaddingProps( name, variationPath );
+	} = usePaddingProps( name, variation );
 
 	// Props for managing `spacing.margin`.
 	const {
@@ -372,7 +382,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setMarginValues,
 		resetMarginValue,
 		hasMarginValue,
-	} = useMarginProps( name, variationPath );
+	} = useMarginProps( name, variation );
 
 	// Props for managing `spacing.blockGap`.
 	const {
@@ -384,7 +394,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setGapValues,
 		resetGapValue,
 		hasGapValue,
-	} = useBlockGapProps( name, variationPath );
+	} = useBlockGapProps( name, variation );
 
 	// Props for managing `dimensions.minHeight`.
 	const {
@@ -392,7 +402,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setMinHeightValue,
 		resetMinHeightValue,
 		hasMinHeightValue,
-	} = useMinHeightProps( name, variationPath );
+	} = useMinHeightProps( name, variation );
 
 	const resetAll = () => {
 		resetPaddingValue();

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

@@ -9,11 +9,15 @@ import { mergeWith, isEmpty, mapValues } from 'lodash';
 import { useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { GlobalStylesContext } from './context';
+import CanvasSpinner from '../canvas-spinner';
+import { unlock } from '../../experiments';
+
+const { GlobalStylesContext } = unlock( blockEditorExperiments );
 
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
@@ -165,7 +169,7 @@ function useGlobalStylesContext() {
 export function GlobalStylesProvider( { children } ) {
 	const context = useGlobalStylesContext();
 	if ( ! context.isReady ) {
-		return null;
+		return <CanvasSpinner />;
 	}
 
 	return (

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

@@ -8,48 +8,54 @@ import {
 	DuotonePicker,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSetting } from './hooks';
 import Subtitle from './subtitle';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting } = unlock( blockEditorExperiments );
 
 const noop = () => {};
 
 export default function GradientPalettePanel( { name } ) {
-	const [ themeGradients, setThemeGradients ] = useSetting(
+	const [ themeGradients, setThemeGradients ] = useGlobalSetting(
 		'color.gradients.theme',
 		name
 	);
-	const [ baseThemeGradients ] = useSetting(
+	const [ baseThemeGradients ] = useGlobalSetting(
 		'color.gradients.theme',
 		name,
 		'base'
 	);
-	const [ defaultGradients, setDefaultGradients ] = useSetting(
+	const [ defaultGradients, setDefaultGradients ] = useGlobalSetting(
 		'color.gradients.default',
 		name
 	);
-	const [ baseDefaultGradients ] = useSetting(
+	const [ baseDefaultGradients ] = useGlobalSetting(
 		'color.gradients.default',
 		name,
 		'base'
 	);
-	const [ customGradients, setCustomGradients ] = useSetting(
+	const [ customGradients, setCustomGradients ] = useGlobalSetting(
 		'color.gradients.custom',
 		name
 	);
 
-	const [ defaultPaletteEnabled ] = useSetting(
+	const [ defaultPaletteEnabled ] = useGlobalSetting(
 		'color.defaultGradients',
 		name
 	);
 
-	const [ customDuotone ] = useSetting( 'color.duotone.custom' ) || [];
-	const [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || [];
-	const [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || [];
-	const [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' );
+	const [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];
+	const [ defaultDuotone ] =
+		useGlobalSetting( 'color.duotone.default' ) || [];
+	const [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];
+	const [ defaultDuotoneEnabled ] = useGlobalSetting(
+		'color.defaultDuotone'
+	);
 
 	const duotonePalette = [
 		...( customDuotone || [] ),