@wordpress/edit-site 5.31.0 → 5.33.0

package/src/components/async/index.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, flushSync } from '@wordpress/element';
+import { createQueue } from '@wordpress/priority-queue';
+
+const blockPreviewQueue = createQueue();
+
+/**
+ * Renders a component at the next idle time.
+ * @param {*} props
+ */
+export function Async( { children, placeholder } ) {
+	const [ shouldRender, setShouldRender ] = useState( false );
+
+	// In the future, we could try to use startTransition here, but currently
+	// react will batch all transitions, which means all previews will be
+	// rendered at the same time.
+	// https://react.dev/reference/react/startTransition#caveats
+	// > If there are multiple ongoing Transitions, React currently batches them
+	// > together. This is a limitation that will likely be removed in a future
+	// > release.
+
+	useEffect( () => {
+		const context = {};
+		blockPreviewQueue.add( context, () => {
+			// Synchronously run all renders so it consumes timeRemaining.
+			// See https://github.com/WordPress/gutenberg/pull/48238
+			flushSync( () => {
+				setShouldRender( true );
+			} );
+		} );
+		return () => {
+			blockPreviewQueue.cancel( context );
+		};
+	}, [] );
+
+	if ( ! shouldRender ) {
+		return placeholder;
+	}
+
+	return children;
+}

package/src/components/block-editor/block-inspector-button.js

@@ -5,28 +5,26 @@ import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
-import { STORE_NAME } from '../../store/constants';
-import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function BlockInspectorButton( { onClick = () => {} } ) {
 	const { shortcut, isBlockInspectorOpen } = useSelect(
 		( select ) => ( {
 			shortcut: select(
 				keyboardShortcutsStore
-			).getShortcutRepresentation(
-				'core/edit-site/toggle-block-settings-sidebar'
-			),
+			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
 			isBlockInspectorOpen:
 				select( interfaceStore ).getActiveComplementaryArea(
-					editSiteStore.name
-				) === SIDEBAR_BLOCK,
+					'core'
+				) === 'edit-post/block',
 		} ),
 		[]
 	);
@@ -41,10 +39,10 @@ export default function BlockInspectorButton( { onClick = () => {} } ) {
 		<MenuItem
 			onClick={ () => {
 				if ( isBlockInspectorOpen ) {
-					disableComplementaryArea( STORE_NAME );
+					disableComplementaryArea( 'core' );
 					speak( __( 'Block settings closed' ) );
 				} else {
-					enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+					enableComplementaryArea( 'core', 'edit-post/block' );
 					speak(
 						__(
 							'Additional settings are now available in the Editor block settings sidebar'

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

@@ -11,7 +11,10 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -26,24 +29,39 @@ import { computeIFrameScale } from '../../utils/math';
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
-function EditorCanvas( { enableResizing, settings, children, ...props } ) {
-	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
-		useSelect( ( select ) => {
-			const { getBlockCount, __unstableGetEditorMode } =
-				select( blockEditorStore );
-			const { getEditedPostType, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-			const _templateType = getEditedPostType();
+function EditorCanvas( {
+	enableResizing,
+	settings,
+	children,
+	onClick,
+	...props
+} ) {
+	const {
+		hasBlocks,
+		isFocusMode,
+		templateType,
+		canvasMode,
+		isZoomOutMode,
+		currentPostIsTrashed,
+	} = useSelect( ( select ) => {
+		const { getBlockCount, __unstableGetEditorMode } =
+			select( blockEditorStore );
+		const { getEditedPostType, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+		const _templateType = getEditedPostType();
 
-			return {
-				templateType: _templateType,
-				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-				canvasMode: getCanvasMode(),
-				hasBlocks: !! getBlockCount(),
-			};
-		}, [] );
+		return {
+			templateType: _templateType,
+			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			canvasMode: getCanvasMode(),
+			hasBlocks: !! getBlockCount(),
+			currentPostIsTrashed:
+				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+				'trash',
+		};
+	}, [] );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -57,6 +75,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	// to switch to edit mode, with a meaningful label and no title attribute.
 	const viewModeIframeProps = {
 		'aria-label': __( 'Edit' ),
+		'aria-disabled': currentPostIsTrashed,
 		title: null,
 		role: 'button',
 		tabIndex: 0,
@@ -64,12 +83,27 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 		onBlur: () => setIsFocused( false ),
 		onKeyDown: ( event ) => {
 			const { keyCode } = event;
-			if ( keyCode === ENTER || keyCode === SPACE ) {
+			if (
+				( keyCode === ENTER || keyCode === SPACE ) &&
+				! currentPostIsTrashed
+			) {
 				event.preventDefault();
 				setCanvasMode( 'edit' );
 			}
 		},
-		onClick: () => setCanvasMode( 'edit' ),
+		onClick: () => {
+			if ( !! onClick ) {
+				onClick();
+			} else {
+				setCanvasMode( 'edit' );
+			}
+		},
+		onClickCapture: ( event ) => {
+			if ( currentPostIsTrashed ) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		},
 		readonly: true,
 	};
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
@@ -95,12 +129,14 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					enableResizing ? 'min-height:0!important;' : ''
 				}}body{position:relative; ${
 					canvasMode === 'view'
-						? 'cursor: pointer; min-height: 100vh;'
+						? `min-height: 100vh; ${
+								currentPostIsTrashed ? '' : 'cursor: pointer;'
+						  }`
 						: ''
 				}}}`,
 			},
 		],
-		[ settings.styles, enableResizing, canvasMode ]
+		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
 	);
 
 	const frameSize = isZoomOutMode ? 20 : undefined;
@@ -108,7 +144,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	const scale = isZoomOutMode
 		? ( contentWidth ) =>
 				computeIFrameScale(
-					{ width: 1000, scale: 0.45 },
+					{ width: 1000, scale: 0.55 },
 					{ width: 400, scale: 0.9 },
 					contentWidth
 				)

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

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  */
 import { useSelect } from '@wordpress/data';
 import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -26,24 +27,23 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function SiteEditorCanvas() {
+export default function SiteEditorCanvas( { onClick } ) {
 	const location = useLocation();
-	const { templateType, isFocusableEntity, isViewMode } = useSelect(
-		( select ) => {
+	const { templateType, isFocusableEntity, isViewMode, isZoomOutMode } =
+		useSelect( ( select ) => {
 			const { getEditedPostType, getCanvasMode } = unlock(
 				select( editSiteStore )
 			);
-
+			const { __unstableGetEditorMode } = select( blockEditorStore );
 			const _templateType = getEditedPostType();
 
 			return {
 				templateType: _templateType,
 				isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ),
 				isViewMode: getCanvasMode() === 'view',
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 			};
-		},
-		[]
-	);
+		}, [] );
 	const isFocusMode = location.params.focusMode || isFocusableEntity;
 	const [ resizeObserver, sizes ] = useResizeObserver();
 
@@ -55,6 +55,8 @@ export default function SiteEditorCanvas() {
 		! isViewMode &&
 		// Disable resizing in mobile viewport.
 		! isMobileViewport &&
+		// Dsiable resizing in zoomed-out mode.
+		! isZoomOutMode &&
 		// Disable resizing when editing a template in focus mode.
 		templateType !== TEMPLATE_POST_TYPE;
 
@@ -87,8 +89,14 @@ export default function SiteEditorCanvas() {
 							<EditorCanvas
 								enableResizing={ enableResizing }
 								settings={ settings }
+								onClick={ onClick }
 							>
-								{ resizeObserver }
+								{
+									// Avoid resize listeners when not needed,
+									// these will trigger unnecessary re-renders
+									// when animating the iframe width.
+									enableResizing && resizeObserver
+								}
 							</EditorCanvas>
 						</ResizableEditor>
 					</div>

package/src/components/editor/index.js

@@ -6,9 +6,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { Notice } from '@wordpress/components';
-import { useInstanceId, useViewportMatch } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Notice,
+	__unstableAnimatePresence as AnimatePresence,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+import {
+	useInstanceId,
+	useViewportMatch,
+	useReducedMotion,
+} from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockBreadcrumb,
@@ -16,11 +24,6 @@ import {
 	store as blockEditorStore,
 	BlockInspector,
 } from '@wordpress/block-editor';
-import {
-	InterfaceSkeleton,
-	ComplementaryArea,
-	store as interfaceStore,
-} from '@wordpress/interface';
 import {
 	EditorKeyboardShortcutsRegister,
 	EditorKeyboardShortcuts,
@@ -40,6 +43,7 @@ import {
 	SidebarInspectorFill,
 } from '../sidebar-edit-mode';
 import CodeEditor from '../code-editor';
+import Header from '../header-edit-mode';
 import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
 import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
@@ -59,6 +63,9 @@ const {
 	ExperimentalEditorProvider: EditorProvider,
 	InserterSidebar,
 	ListViewSidebar,
+	InterfaceSkeleton,
+	ComplementaryArea,
+	interfaceStore,
 } = unlock( editorPrivateApis );
 
 const interfaceLabels = {
@@ -70,9 +77,13 @@ const interfaceLabels = {
 	actions: __( 'Editor publish' ),
 	/* translators: accessibility text for the editor footer landmark region. */
 	footer: __( 'Editor footer' ),
+	/* translators: accessibility text for the editor header landmark region. */
+	header: __( 'Editor top bar' ),
 };
 
-export default function Editor( { isLoading } ) {
+const ANIMATION_DURATION = 0.25;
+
+export default function Editor( { isLoading, onClick } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -82,6 +93,7 @@ export default function Editor( { isLoading } ) {
 	const { type: editedPostType } = editedPost;
 
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const disableMotion = useReducedMotion();
 
 	const {
 		context,
@@ -128,9 +140,7 @@ export default function Editor( { isLoading } ) {
 			blockEditorMode: __unstableGetEditorMode(),
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
-			isRightSidebarOpen: getActiveComplementaryArea(
-				editSiteStore.name
-			),
+			isRightSidebarOpen: getActiveComplementaryArea( 'core' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			showIconLabels: get( 'core', 'showIconLabels' ),
@@ -174,6 +184,8 @@ export default function Editor( { isLoading } ) {
 		'edit-site-editor__loading-progress'
 	);
 
+	const { closeGeneralSidebar } = useDispatch( editSiteStore );
+
 	const settings = useSpecificEditorSettings();
 	const isReady =
 		! isLoading &&
@@ -211,6 +223,35 @@ export default function Editor( { isLoading } ) {
 								'show-icon-labels': showIconLabels,
 							}
 						) }
+						header={
+							<AnimatePresence initial={ false }>
+								{ canvasMode === 'edit' && (
+									<motion.div
+										initial={ {
+											marginTop: -60,
+										} }
+										animate={ {
+											marginTop: 0,
+										} }
+										exit={ {
+											marginTop: -60,
+										} }
+										transition={ {
+											type: 'tween',
+											duration:
+												// Disable transition in mobile to emulate a full page transition.
+												disableMotion ||
+												! isLargeViewport
+													? 0
+													: ANIMATION_DURATION,
+											ease: [ 0.6, 0, 0.4, 1 ],
+										} }
+									>
+										<Header />
+									</motion.div>
+								) }
+							</AnimatePresence>
+						}
 						notices={ <EditorSnackbars /> }
 						content={
 							<>
@@ -225,7 +266,7 @@ export default function Editor( { isLoading } ) {
 										{ ! isLargeViewport && (
 											<BlockToolbar hideDragHandle />
 										) }
-										<SiteEditorCanvas />
+										<SiteEditorCanvas onClick={ onClick } />
 										<PatternModal />
 									</>
 								) }
@@ -243,15 +284,18 @@ export default function Editor( { isLoading } ) {
 						}
 						secondarySidebar={
 							isEditMode &&
-							( ( shouldShowInserter && <InserterSidebar /> ) ||
+							( ( shouldShowInserter && (
+								<InserterSidebar
+									closeGeneralSidebar={ closeGeneralSidebar }
+									isRightSidebarOpen={ isRightSidebarOpen }
+								/>
+							) ) ||
 								( shouldShowListView && <ListViewSidebar /> ) )
 						}
 						sidebar={
-							! isDistractionFree &&
 							isEditMode &&
-							isRightSidebarOpen &&
 							! isDistractionFree && (
-								<ComplementaryArea.Slot scope="core/edit-site" />
+								<ComplementaryArea.Slot scope="core" />
 							)
 						}
 						footer={

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

@@ -134,7 +134,6 @@ function EditorCanvasContainer( {
 							icon={ closeSmall }
 							label={ closeButtonLabel || __( 'Close' ) }
 							onClick={ onCloseContainer }
-							showTooltip={ false }
 						/>
 					) }
 					{ childrenWithProps }

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+// Initial control values where no block style is set.
+const BACKGROUND_DEFAULT_VALUES = {
+	backgroundSize: 'auto',
+};
+
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	BackgroundPanel: StylesBackgroundPanel,
+} = unlock( blockEditorPrivateApis );
+
+export default function BackgroundPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ settings ] = useGlobalSetting( '' );
+
+	const defaultControls = {
+		backgroundImage: true,
+		backgroundSize:
+			!! style?.background?.backgroundImage &&
+			!! inheritedStyle?.background?.backgroundImage,
+	};
+
+	return (
+		<StylesBackgroundPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+			headerLabel={ __( 'Image' ) }
+			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+			defaultControls={ defaultControls }
+		/>
+	);
+}

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

@@ -6,6 +6,11 @@ import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { getVariationClassName } from './utils';
+
 const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	const blockExample = getBlockType( name )?.example;
 	const blocks = useMemo( () => {
@@ -19,7 +24,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 				...example,
 				attributes: {
 					...example.attributes,
-					className: 'is-style-' + variation,
+					className: getVariationClassName( variation ),
 				},
 			};
 		}

package/src/components/global-styles/font-families.js

@@ -37,7 +37,7 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 3 }>
+			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
 					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 					<HStack justify="flex-end">