@wordpress/edit-site 5.9.0 → 5.11.0

package/src/components/block-editor/editor-canvas.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -9,6 +14,9 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -31,6 +39,30 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
+	const [ isFocused, setIsFocused ] = useState( false );
+
+	useEffect( () => {
+		if ( canvasMode === 'edit' ) {
+			setIsFocused( false );
+		}
+	}, [ canvasMode ] );
+
+	const viewModeProps = {
+		'aria-label': __( 'Editor Canvas' ),
+		role: 'button',
+		tabIndex: 0,
+		onFocus: () => setIsFocused( true ),
+		onBlur: () => setIsFocused( false ),
+		onKeyDown: ( event ) => {
+			const { keyCode } = event;
+			if ( keyCode === ENTER || keyCode === SPACE ) {
+				event.preventDefault();
+				setCanvasMode( 'edit' );
+			}
+		},
+		onClick: () => setCanvasMode( 'edit' ),
+		readonly: true,
+	};
 
 	return (
 		<Iframe
@@ -40,15 +72,11 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			style={ enableResizing ? {} : deviceStyles }
 			ref={ mouseMoveTypingRef }
 			name="editor-canvas"
-			className="edit-site-visual-editor__editor-canvas"
+			className={ classnames( 'edit-site-visual-editor__editor-canvas', {
+				'is-focused': isFocused && canvasMode === 'view',
+			} ) }
 			{ ...props }
-			role={ canvasMode === 'view' ? 'button' : undefined }
-			onClick={
-				canvasMode === 'view'
-					? () => setCanvasMode( 'edit' )
-					: undefined
-			}
-			readonly={ canvasMode === 'view' }
+			{ ...( canvasMode === 'view' ? viewModeProps : {} ) }
 		>
 			<EditorStyles styles={ settings.styles } />
 			<style>{

package/src/components/block-editor/index.js

@@ -143,6 +143,7 @@ export default function BlockEditor() {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	const isTemplatePart = templateType === 'wp_template_part';
+
 	const hasBlocks = blocks.length !== 0;
 	const enableResizing =
 		isTemplatePart &&
@@ -169,9 +170,7 @@ export default function BlockEditor() {
 				{ ( [ editorCanvasView ] ) =>
 					editorCanvasView ? (
 						<div className="edit-site-visual-editor is-focus-mode">
-							<ResizableEditor enableResizing>
-								{ editorCanvasView }
-							</ResizableEditor>
+							{ editorCanvasView }
 						</div>
 					) : (
 						<BlockTools

package/src/components/block-editor/style.scss

@@ -29,9 +29,14 @@
 
 	.edit-site-visual-editor__editor-canvas {
 		height: 100%;
-		background: $white;
+
+		&.is-focused {
+			outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+			outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
+		}
 	}
 
+
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
 			padding: $grid-unit-60;
@@ -55,14 +60,16 @@
 		overflow: auto;
 	}
 
-	/*
-		Temporary to hide the contextual toolbar in view mode.
-		See: https://github.com/WordPress/gutenberg/pull/46298
-		This rule can possibly be removed once the
-		contextual toolbar has been redesigned.
-		See: https://github.com/WordPress/gutenberg/issues/40450
-	*/
 	&.is-view-mode {
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
+
+		/*
+			Temporary to hide the contextual toolbar in view mode.
+			See: https://github.com/WordPress/gutenberg/pull/46298
+			This rule can possibly be removed once the
+			contextual toolbar has been redesigned.
+			See: https://github.com/WordPress/gutenberg/issues/40450
+		*/
 		.block-editor-block-contextual-toolbar {
 			display: none;
 		}

package/src/components/create-template-part-modal/index.js

@@ -13,6 +13,7 @@ import {
 	Modal,
 	__experimentalRadioGroup as RadioGroup,
 	__experimentalRadio as Radio,
+	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -106,31 +107,24 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 							) }
 						</RadioGroup>
 					</BaseControl>
-					<Flex
-						className="edit-site-create-template-part-modal__modal-actions"
-						justify="flex-end"
-					>
-						<FlexItem>
-							<Button
-								variant="secondary"
-								onClick={ () => {
-									closeModal();
-								} }
-							>
-								{ __( 'Cancel' ) }
-							</Button>
-						</FlexItem>
-						<FlexItem>
-							<Button
-								variant="primary"
-								type="submit"
-								disabled={ ! title }
-								isBusy={ isSubmitting }
-							>
-								{ __( 'Create' ) }
-							</Button>
-						</FlexItem>
-					</Flex>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ ! title }
+							isBusy={ isSubmitting }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</HStack>
 				</VStack>
 			</form>
 		</Modal>

package/src/components/editor/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -37,6 +42,7 @@ import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -49,7 +55,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-export default function Editor() {
+export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -152,12 +158,9 @@ export default function Editor() {
 	// action in <URlQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
-	if ( ! hasLoadedPost ) {
-		return <CanvasSpinner />;
-	}
-
 	return (
 		<>
+			{ isLoading ? <CanvasSpinner /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
@@ -170,8 +173,14 @@ export default function Editor() {
 						{ isEditMode && <StartTemplateOptions /> }
 						<InterfaceSkeleton
 							enableRegionNavigation={ false }
-							className={ showIconLabels && 'show-icon-labels' }
-							notices={ isEditMode && <EditorSnackbars /> }
+							className={ classnames(
+								'edit-site-editor__interface-skeleton',
+								{
+									'show-icon-labels': showIconLabels,
+									'is-loading': isLoading,
+								}
+							) }
+							notices={ <EditorSnackbars /> }
 							content={
 								<>
 									<GlobalStylesRenderer />
@@ -209,7 +218,10 @@ export default function Editor() {
 							sidebar={
 								isEditMode &&
 								isRightSidebarOpen && (
-									<ComplementaryArea.Slot scope="core/edit-site" />
+									<>
+										<ComplementaryArea.Slot scope="core/edit-site" />
+										<SidebarFixedBottomSlot />
+									</>
 								)
 							}
 							footer={

package/src/components/editor/style.scss

@@ -1,3 +1,13 @@
+.edit-site-editor__interface-skeleton {
+	opacity: 1;
+	transition: opacity 0.1s ease-out;
+	@include reduce-motion("transition");
+
+	&.is-loading {
+		opacity: 0;
+	}
+}
+
 .edit-site-editor__toggle-save-panel {
 	box-sizing: border-box;
 	width: $sidebar-width;
@@ -9,11 +19,16 @@
 }
 
 // Adjust the position of the notices
-.edit-site .components-editor-notices__snackbar {
-	position: fixed;
-	right: 0;
-	bottom: 40px;
-	padding-left: 16px;
-	padding-right: 16px;
+.edit-site {
+	.components-editor-notices__snackbar {
+		position: fixed;
+		right: 0;
+		bottom: 0;
+		padding: 16px;
+	}
+	.is-edit-mode .components-editor-notices__snackbar {
+		bottom: 24px;
+	}
 }
+
 @include editor-left(".edit-site .components-editor-notices__snackbar")

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

@@ -5,6 +5,7 @@ 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';
@@ -17,6 +18,7 @@ import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
  */
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import ResizableEditor from '../block-editor/resizable-editor';
 
 /**
  * Returns a translated string for the title of the editor canvas container.
@@ -25,10 +27,12 @@ import { store as editSiteStore } from '../../store';
  *
  * @return {string} Translated string corresponding to value of view. Default is ''.
  */
-export function getEditorCanvasContainerTitle( view ) {
+function getEditorCanvasContainerTitle( view ) {
 	switch ( view ) {
 		case 'style-book':
 			return __( 'Style Book' );
+		case 'global-styles-revisions':
+			return __( 'Global styles revisions' );
 		default:
 			return '';
 	}
@@ -37,13 +41,17 @@ export function getEditorCanvasContainerTitle( view ) {
 // Creates a private slot fill.
 const { createPrivateSlotFill } = unlock( componentsPrivateApis );
 const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
-const { Slot: EditorCanvasContainerSlot, Fill: EditorCanvasContainerFill } =
-	createPrivateSlotFill( SLOT_FILL_NAME );
+const {
+	privateKey,
+	Slot: EditorCanvasContainerSlot,
+	Fill: EditorCanvasContainerFill,
+} = createPrivateSlotFill( SLOT_FILL_NAME );
 
 function EditorCanvasContainer( {
 	children,
 	closeButtonLabel,
-	onClose = () => {},
+	onClose,
+	enableResizing = false,
 } ) {
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
@@ -60,8 +68,11 @@ function EditorCanvasContainer( {
 		() => getEditorCanvasContainerTitle( editorCanvasContainerView ),
 		[ editorCanvasContainerView ]
 	);
+
 	function onCloseContainer() {
-		onClose();
+		if ( typeof onClose === 'function' ) {
+			onClose();
+		}
 		setEditorCanvasContainerView( undefined );
 		setIsClosed( true );
 	}
@@ -89,27 +100,38 @@ function EditorCanvasContainer( {
 		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={ focusOnMountRef }
-				onKeyDown={ closeOnEscape }
-				aria-label={ title }
-			>
-				<Button
-					className="edit-site-editor-canvas-container__close-button"
-					icon={ closeSmall }
-					label={ closeButtonLabel || __( 'Close' ) }
-					onClick={ onCloseContainer }
-					showTooltip={ false }
-				/>
-				{ childrenWithProps }
-			</section>
+			<ResizableEditor enableResizing={ enableResizing }>
+				{ /* 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>
+			</ResizableEditor>
 		</EditorCanvasContainerFill>
 	);
 }
+function useHasEditorCanvasContainer() {
+	const fills = useSlotFills( privateKey );
+	return !! fills?.length;
+}
 
 EditorCanvasContainer.Slot = EditorCanvasContainerSlot;
 export default EditorCanvasContainer;
+export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };

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/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/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 ||