@wordpress/edit-site 5.1.0 → 5.3.0

package/src/components/global-styles/README.md

@@ -1,6 +1,6 @@
 # Global Styles
 
-This folder contains all the necessary APIs to render the global styles UI and to manipulate the global styles data. It can be potentially extracted to its own package.
+This folder contains the global styles UI.
 
 # Available public APIs
 
@@ -15,77 +15,3 @@ function MyComponent() {
 	return <GlobalStylesUI />;
 }
 ```
-
-## useGlobalStylesReset
-
-A React hook used to retrieve whether the Global Styles have been edited and a callback to reset to the default theme values.
-
-```js
-import { useGlobalStylesReset } from './global-styles';
-
-function MyComponent() {
-	const [ canReset, reset ] = useGlobalStylesReset();
-
-	return canReset 
-		? <Button onClick={ () => reset() }>Reset</Button> 
-		: null;
-}
-```
-
-## useGlobalStylesOutput
-
-A React hook used to retrieve the styles array and settings to provide for block editor instances based on the current global styles.
-
-```js
-import { useGlobalStylesOutput } from './global-styles';
-import { BlockEditorProvider, BlockList } from '@wordpress/block-editor';
-
-function MyComponent() {
-	const [ styles, settings ] = useGlobalStylesOutput();
-
-	return <BlockEditorProvider settings={{
-		styles,
-		__experimentalFeatures: settings
-	}}>
-		<BlockList />
-	</BlockEditorProvider>
-}
-```
-
-## useStyle
-
-A react hook used to retrieve the style applied to a given context.
-
-```js
-import { useStyle } from './global-styles';
-
-function MyComponent() {
-	// Text color for the site root.
-	const [ color, setColor ] = useStyle( 'color.text' ); 
-
-	// The user modified color for the core paragraph block.
-	const [ pColor, setPColor ] = useStyle( 'color.text', 'core/paragraph', 'user' ); 
-
-	return "Something";
-}
-```
-
-## useSetting
-
-A react hook used to retrieve the setting applied to a given context.
-
-```js
-import { useSetting } from './global-styles';
-
-function MyComponent() {
-	// The default color palette.
-	const [ colorPalette, setColorPalette ] = useSetting( 'color.palette' ); 
-
-	// The base (theme + core) color palette for the paragraph block,
-	// ignoring user provided palette.
-	// If the palette is not defined for the paragraph block, the root one is returned.
-	const [ pColor, setPColor ] = useSetting( 'color.palette', 'core/paragraph', 'base' ); 
-
-	return "Something";
-}
-```

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

@@ -6,13 +6,25 @@ import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
-const BlockPreviewPanel = ( { name } ) => {
+const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	const [
 		containerResizeListener,
 		{ width: containerWidth, height: containerHeight },
 	] = useResizeObserver();
 	const blockExample = getBlockType( name )?.example;
-	const blocks = blockExample && getBlockFromExample( name, blockExample );
+	const blockExampleWithVariation = {
+		...blockExample,
+		attributes: {
+			...blockExample?.attributes,
+			className: variation,
+		},
+	};
+	const blocks =
+		blockExample &&
+		getBlockFromExample(
+			name,
+			variation ? blockExampleWithVariation : blockExample
+		);
 	const viewportWidth = blockExample?.viewportWidth || containerWidth;
 	const minHeight = containerHeight;
 
@@ -24,8 +36,8 @@ const BlockPreviewPanel = ( { name } ) => {
 				<BlockPreview
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
-					__experimentalMinHeight={ minHeight }
-					__experimentalStyles={ [
+					minHeight={ minHeight }
+					additionalStyles={ [
 						{
 							css: `
 								body{

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

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
+import {
+	__experimentalBorderRadiusControl as BorderRadiusControl,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 import {
 	__experimentalBorderBoxControl as BorderBoxControl,
 	__experimentalHasSplitBorders as hasSplitBorders,
@@ -15,12 +18,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	getSupportedGlobalStylesPanels,
-	useColorsPerOrigin,
-	useSetting,
-	useStyle,
-} from './hooks';
+import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
 export function useHasBorderPanel( name ) {
 	const controls = [
@@ -36,7 +37,7 @@ export function useHasBorderPanel( name ) {
 function useHasBorderColorControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'border.color', name )[ 0 ] &&
+		useGlobalSetting( 'border.color', name )[ 0 ] &&
 		supports.includes( 'borderColor' )
 	);
 }
@@ -44,7 +45,7 @@ function useHasBorderColorControl( name ) {
 function useHasBorderRadiusControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'border.radius', name )[ 0 ] &&
+		useGlobalSetting( 'border.radius', name )[ 0 ] &&
 		supports.includes( 'borderRadius' )
 	);
 }
@@ -52,7 +53,7 @@ function useHasBorderRadiusControl( name ) {
 function useHasBorderStyleControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'border.style', name )[ 0 ] &&
+		useGlobalSetting( 'border.style', name )[ 0 ] &&
 		supports.includes( 'borderStyle' )
 	);
 }
@@ -60,7 +61,7 @@ function useHasBorderStyleControl( name ) {
 function useHasBorderWidthControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'border.width', name )[ 0 ] &&
+		useGlobalSetting( 'border.width', name )[ 0 ] &&
 		supports.includes( 'borderWidth' )
 	);
 }
@@ -94,11 +95,16 @@ function applyAllFallbackStyles( border ) {
 	return applyFallbackStyle( border );
 }
 
-export default function BorderPanel( { name } ) {
+export default function BorderPanel( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	// To better reflect if the user has customized a value we need to
 	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
-	const [ border, setBorder ] = useStyle( 'border', name );
+	const [ userBorderStyles ] = useGlobalStyle(
+		`${ prefix }border`,
+		name,
+		'user'
+	);
+	const [ border, setBorder ] = useGlobalStyle( `${ prefix }border`, name );
 	const colors = useColorsPerOrigin( name );
 
 	const showBorderColor = useHasBorderColorControl( name );
@@ -107,8 +113,8 @@ export default function BorderPanel( { name } ) {
 
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
-	const [ borderRadiusValues, setBorderRadius ] = useStyle(
-		'border.radius',
+	const [ borderRadiusValues, setBorderRadius ] = useGlobalStyle(
+		`${ prefix }border.radius`,
 		name
 	);
 	const hasBorderRadius = () => {

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

@@ -6,37 +6,40 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSetting } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting } = unlock( blockEditorExperiments );
 
 export default function ColorPalettePanel( { name } ) {
-	const [ themeColors, setThemeColors ] = useSetting(
+	const [ themeColors, setThemeColors ] = useGlobalSetting(
 		'color.palette.theme',
 		name
 	);
-	const [ baseThemeColors ] = useSetting(
+	const [ baseThemeColors ] = useGlobalSetting(
 		'color.palette.theme',
 		name,
 		'base'
 	);
-	const [ defaultColors, setDefaultColors ] = useSetting(
+	const [ defaultColors, setDefaultColors ] = useGlobalSetting(
 		'color.palette.default',
 		name
 	);
-	const [ baseDefaultColors ] = useSetting(
+	const [ baseDefaultColors ] = useGlobalSetting(
 		'color.palette.default',
 		name,
 		'base'
 	);
-	const [ customColors, setCustomColors ] = useSetting(
+	const [ customColors, setCustomColors ] = useGlobalSetting(
 		'color.palette.custom',
 		name
 	);
 
-	const [ defaultPaletteEnabled ] = useSetting(
+	const [ defaultPaletteEnabled ] = useGlobalSetting(
 		'color.defaultPalette',
 		name
 	);

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
@@ -12,7 +28,10 @@ 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 { NavigationButtonAsItem } from './navigation-button';
+import { IconWithCurrentColor } from './icon-with-current-color';
+import { ScreenVariations } from './screen-variations';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
@@ -20,46 +39,103 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 	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>
-			) }
-		</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>
 		</>
 	);
 }