@wordpress/edit-site 5.8.0 → 5.10.0

package/src/components/editor-canvas-container/index.js

@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { Children, cloneElement, useState, useMemo } from '@wordpress/element';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { ESCAPE } from '@wordpress/keycodes';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { closeSmall } from '@wordpress/icons';
+import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Returns a translated string for the title of the editor canvas container.
+ *
+ * @param {string} view Editor canvas container view.
+ *
+ * @return {string} Translated string corresponding to value of view. Default is ''.
+ */
+function getEditorCanvasContainerTitle( view ) {
+	switch ( view ) {
+		case 'style-book':
+			return __( 'Style Book' );
+		case 'global-styles-revisions':
+			return __( 'Global styles revisions' );
+		default:
+			return '';
+	}
+}
+
+// Creates a private slot fill.
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
+const {
+	privateKey,
+	Slot: EditorCanvasContainerSlot,
+	Fill: EditorCanvasContainerFill,
+} = createPrivateSlotFill( SLOT_FILL_NAME );
+
+function EditorCanvasContainer( { children, closeButtonLabel, onClose } ) {
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const sectionFocusReturnRef = useFocusReturn();
+	const title = useMemo(
+		() => getEditorCanvasContainerTitle( editorCanvasContainerView ),
+		[ editorCanvasContainerView ]
+	);
+	function onCloseContainer() {
+		if ( typeof onClose === 'function' ) {
+			onClose();
+		}
+		setEditorCanvasContainerView( undefined );
+		setIsClosed( true );
+	}
+
+	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			onCloseContainer();
+		}
+	}
+
+	const childrenWithProps = Array.isArray( children )
+		? Children.map( children, ( child, index ) =>
+				index === 0
+					? cloneElement( child, {
+							ref: sectionFocusReturnRef,
+					  } )
+					: child
+		  )
+		: cloneElement( children, {
+				ref: sectionFocusReturnRef,
+		  } );
+
+	if ( isClosed ) {
+		return null;
+	}
+
+	const shouldShowCloseButton = onClose || closeButtonLabel;
+
+	return (
+		<EditorCanvasContainerFill>
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+			<section
+				className="edit-site-editor-canvas-container"
+				ref={ shouldShowCloseButton ? focusOnMountRef : null }
+				onKeyDown={ closeOnEscape }
+				aria-label={ title }
+			>
+				{ shouldShowCloseButton && (
+					<Button
+						className="edit-site-editor-canvas-container__close-button"
+						icon={ closeSmall }
+						label={ closeButtonLabel || __( 'Close' ) }
+						onClick={ onCloseContainer }
+						showTooltip={ false }
+					/>
+				) }
+				{ childrenWithProps }
+			</section>
+		</EditorCanvasContainerFill>
+	);
+}
+function useHasEditorCanvasContainer() {
+	const fills = useSlotFills( privateKey );
+	return !! fills?.length;
+}
+
+EditorCanvasContainer.Slot = EditorCanvasContainerSlot;
+export default EditorCanvasContainer;
+export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };

package/src/components/editor-canvas-container/style.scss

@@ -0,0 +1,19 @@
+.edit-site-editor-canvas-container {
+	background: $white; // Fallback color, overridden by JavaScript.
+	border-radius: $radius-block-ui;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+	position: absolute;
+	right: 0;
+	top: 0;
+	transition: all 0.3s; // Match .block-editor-iframe__body transition.
+}
+
+.edit-site-editor-canvas-container__close-button {
+	position: absolute;
+	right: $grid-unit-10;
+	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
+	z-index: 1;
+	background: $white;
+}

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

@@ -11,7 +11,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 		...blockExample,
 		attributes: {
 			...blockExample?.attributes,
-			className: variation,
+			className: 'is-style-' + variation,
 		},
 	};
 	const blocks =

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

@@ -16,6 +16,41 @@ const {
 	BorderPanel: StylesBorderPanel,
 } = unlock( blockEditorPrivateApis );
 
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	const hasColorOrWidth = border.color || border.width;
+
+	if ( ! border.style && hasColorOrWidth ) {
+		return { ...border, style: 'solid' };
+	}
+
+	if ( border.style && ! hasColorOrWidth ) {
+		return undefined;
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
 export default function BorderPanel( { name, variation = '' } ) {
 	let prefixParts = [];
 	if ( variation ) {
@@ -23,7 +58,9 @@ export default function BorderPanel( { name, variation = '' } ) {
 	}
 	const prefix = prefixParts.join( '.' );
 
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ style ] = useGlobalStyle( prefix, name, 'user', {
+		shouldDecodeEncode: false,
+	} );
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
 		shouldDecodeEncode: false,
 	} );
@@ -31,6 +68,11 @@ export default function BorderPanel( { name, variation = '' } ) {
 	const settings = useSettingsForBlockElement( rawSettings, name );
 
 	const onChange = ( newStyle ) => {
+		if ( ! newStyle?.border ) {
+			setStyle( newStyle );
+			return;
+		}
+
 		// As Global Styles can't conditionally generate styles based on if
 		// other style properties have been set, we need to force split
 		// border definitions for user set global border styles. Border
@@ -42,7 +84,8 @@ export default function BorderPanel( { name, variation = '' } ) {
 		// the `border` style property. This means if the theme.json defined
 		// split borders and the user condenses them into a flat border or
 		// vice-versa we'd get both sets of styles which would conflict.
-		const { border } = newStyle;
+		const { radius, ...newBorder } = newStyle.border;
+		const border = applyAllFallbackStyles( newBorder );
 		const updatedBorder = ! hasSplitBorders( border )
 			? {
 					top: border,
@@ -57,7 +100,7 @@ export default function BorderPanel( { name, variation = '' } ) {
 					...border,
 			  };
 
-		setStyle( { ...newStyle, border: updatedBorder } );
+		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
 	};
 
 	return (

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalPaletteEdit as PaletteEdit,
 	__experimentalVStack as VStack,
@@ -14,6 +15,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
 
 export default function ColorPalettePanel( { name } ) {
 	const [ themeColors, setThemeColors ] = useGlobalSetting(
@@ -43,6 +45,10 @@ export default function ColorPalettePanel( { name } ) {
 		'color.defaultPalette',
 		name
 	);
+
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
+
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
@@ -56,6 +62,7 @@ export default function ColorPalettePanel( { name } ) {
 					onChange={ setThemeColors }
 					paletteLabel={ __( 'Theme' ) }
 					paletteLabelHeadingLevel={ 3 }
+					popoverProps={ popoverProps }
 				/>
 			) }
 			{ !! defaultColors &&
@@ -68,6 +75,7 @@ export default function ColorPalettePanel( { name } ) {
 						onChange={ setDefaultColors }
 						paletteLabel={ __( 'Default' ) }
 						paletteLabelHeadingLevel={ 3 }
+						popoverProps={ popoverProps }
 					/>
 				) }
 			<PaletteEdit
@@ -79,6 +87,7 @@ export default function ColorPalettePanel( { name } ) {
 					'Custom colors are empty! Add some colors to create your own color palette.'
 				) }
 				slugPrefix="custom-"
+				popoverProps={ popoverProps }
 			/>
 		</VStack>
 	);

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

@@ -26,19 +26,15 @@ const DEFAULT_CONTROLS = {
 	childLayout: false,
 };
 
-export default function DimensionsPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+export default function DimensionsPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+	const [ rawSettings, setSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 
 	// These intermediary objects are needed because the "layout" property is stored
 	// in settings rather than styles.
@@ -62,10 +58,14 @@ export default function DimensionsPanel( { name, variation = '' } ) {
 		setStyle( updatedStyle );
 
 		if ( newStyle.layout !== settings.layout ) {
-			setSettings( {
-				...rawSettings,
-				layout: newStyle.layout,
-			} );
+			const updatedSettings = { ...rawSettings, layout: newStyle.layout };
+
+			// Ensure any changes to layout definitions are not persisted.
+			if ( updatedSettings.layout?.definitions ) {
+				delete updatedSettings.layout.definitions;
+			}
+
+			setSettings( updatedSettings );
 		}
 	};
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mergeWith, isEmpty } from 'lodash';
+import { mergeWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,9 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { GlobalStylesContext, cleanEmptyObject } = unlock(
+	blockEditorPrivateApis
+);
 
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
@@ -32,22 +34,6 @@ export function mergeBaseAndUserConfigs( base, user ) {
 	return mergeWith( {}, base, user, mergeTreesCustomizer );
 }
 
-const cleanEmptyObject = ( object ) => {
-	if (
-		object === null ||
-		typeof object !== 'object' ||
-		Array.isArray( object )
-	) {
-		return object;
-	}
-	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( object )
-			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
-			.filter( ( [ , value ] ) => Boolean( value ) )
-	);
-	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
-};
-
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles } = useSelect(
 		( select ) => {

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalVStack as VStack,
 	__experimentalPaletteEdit as PaletteEdit,
@@ -17,6 +18,7 @@ import Subtitle from './subtitle';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
 
 const noop = () => {};
 
@@ -63,6 +65,9 @@ export default function GradientPalettePanel( { name } ) {
 		...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),
 	];
 
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
+
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
@@ -76,6 +81,7 @@ export default function GradientPalettePanel( { name } ) {
 					onChange={ setThemeGradients }
 					paletteLabel={ __( 'Theme' ) }
 					paletteLabelHeadingLevel={ 3 }
+					popoverProps={ popoverProps }
 				/>
 			) }
 			{ !! defaultGradients &&
@@ -88,6 +94,7 @@ export default function GradientPalettePanel( { name } ) {
 						onChange={ setDefaultGradients }
 						paletteLabel={ __( 'Default' ) }
 						paletteLabelLevel={ 3 }
+						popoverProps={ popoverProps }
 					/>
 				) }
 			<PaletteEdit
@@ -99,6 +106,7 @@ export default function GradientPalettePanel( { name } ) {
 					'Custom gradients are empty! Add some gradients to create your own palette.'
 				) }
 				slugPrefix="custom-"
+				popoverProps={ popoverProps }
 			/>
 			{ !! duotonePalette && !! duotonePalette.length && (
 				<div>

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

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { typography, color, layout } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from './navigation-button';
+import { unlock } from '../../private-apis';
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasColorPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+} = unlock( blockEditorPrivateApis );
+
+function RootMenu() {
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasLayoutPanel = hasDimensionsPanel;
+
+	return (
+		<>
+			<ItemGroup>
+				{ hasTypographyPanel && (
+					<NavigationButtonAsItem
+						icon={ typography }
+						path="/typography"
+						aria-label={ __( 'Typography styles' ) }
+					>
+						{ __( 'Typography' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasColorPanel && (
+					<NavigationButtonAsItem
+						icon={ color }
+						path="/colors"
+						aria-label={ __( 'Colors styles' ) }
+					>
+						{ __( 'Colors' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasLayoutPanel && (
+					<NavigationButtonAsItem
+						icon={ layout }
+						path="/layout"
+						aria-label={ __( 'Layout styles' ) }
+					>
+						{ __( 'Layout' ) }
+					</NavigationButtonAsItem>
+				) }
+			</ItemGroup>
+		</>
+	);
+}
+
+export default RootMenu;

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

@@ -20,7 +20,7 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import { useHasVariationsPanel } from './variations-panel';
+import { useBlockVariations } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import { unlock } from '../../private-apis';
@@ -65,7 +65,7 @@ export function useBlockHasGlobalStyles( blockName ) {
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-	const hasVariationsPanel = useHasVariationsPanel( blockName );
+	const hasVariationsPanel = !! useBlockVariations( blockName )?.length;
 	const hasGlobalStyles =
 		hasTypographyPanel ||
 		hasColorPanel ||