@wordpress/edit-site 5.3.2 → 5.4.0

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

@@ -1,186 +1,21 @@
 /**
  * WordPress dependencies
  */
-import {
-	LineHeightControl,
-	__experimentalFontFamilyControl as FontFamilyControl,
-	__experimentalFontAppearanceControl as FontAppearanceControl,
-	__experimentalLetterSpacingControl as LetterSpacingControl,
-	__experimentalTextTransformControl as TextTransformControl,
-	__experimentalTextDecorationControl as TextDecorationControl,
-	experiments as blockEditorExperiments,
-} from '@wordpress/block-editor';
-import {
-	FontSizePicker,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels } from './hooks';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
+import { useSupportedStyles } from './hooks';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
-
-export function useHasTypographyPanel( name ) {
-	const hasFontFamily = useHasFontFamilyControl( name );
-	const hasLineHeight = useHasLineHeightControl( name );
-	const hasFontAppearance = useHasAppearanceControl( name );
-	const hasLetterSpacing = useHasLetterSpacingControl( name );
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		hasFontFamily ||
-		hasLineHeight ||
-		hasFontAppearance ||
-		hasLetterSpacing ||
-		supports.includes( 'fontSize' )
-	);
-}
-
-function useHasFontFamilyControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ fontFamiliesPerOrigin ] = useGlobalSetting(
-		'typography.fontFamilies',
-		name
-	);
-	const fontFamilies =
-		fontFamiliesPerOrigin?.custom ||
-		fontFamiliesPerOrigin?.theme ||
-		fontFamiliesPerOrigin?.default;
-	return supports.includes( 'fontFamily' ) && !! fontFamilies?.length;
-}
-
-function useHasLineHeightControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		useGlobalSetting( 'typography.lineHeight', name )[ 0 ] &&
-		supports.includes( 'lineHeight' )
-	);
-}
-
-function useHasAppearanceControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasFontStyles =
-		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
-		supports.includes( 'fontStyle' );
-	const hasFontWeights =
-		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
-		supports.includes( 'fontWeight' );
-	return hasFontStyles || hasFontWeights;
-}
-
-function useAppearanceControlLabel( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasFontStyles =
-		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
-		supports.includes( 'fontStyle' );
-	const hasFontWeights =
-		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
-		supports.includes( 'fontWeight' );
-	if ( ! hasFontStyles ) {
-		return __( 'Font weight' );
-	}
-	if ( ! hasFontWeights ) {
-		return __( 'Font style' );
-	}
-	return __( 'Appearance' );
-}
-
-function useHasLetterSpacingControl( name, element ) {
-	const setting = useGlobalSetting( 'typography.letterSpacing', name )[ 0 ];
-	if ( ! setting ) {
-		return false;
-	}
-	if ( ! name && element === 'heading' ) {
-		return true;
-	}
-	const supports = getSupportedGlobalStylesPanels( name );
-	return supports.includes( 'letterSpacing' );
-}
-
-function useHasTextTransformControl( name, element ) {
-	const setting = useGlobalSetting( 'typography.textTransform', name )[ 0 ];
-	if ( ! setting ) {
-		return false;
-	}
-	if ( ! name && element === 'heading' ) {
-		return true;
-	}
-	const supports = getSupportedGlobalStylesPanels( name );
-	return supports.includes( 'textTransform' );
-}
-
-function useHasTextDecorationControl( name, element ) {
-	// This is an exception for link elements.
-	// We shouldn't allow other blocks or elements to set textDecoration
-	// because this will be inherited by their children.
-	return ! name && element === 'link';
-}
-
-function useStyleWithReset( path, blockName ) {
-	const [ style, setStyle ] = useGlobalStyle( path, blockName );
-	const [ userStyle ] = useGlobalStyle( path, blockName, 'user' );
-	const hasStyle = () => !! userStyle;
-	const resetStyle = () => setStyle( undefined );
-	return [ style, setStyle, hasStyle, resetStyle ];
-}
-
-function useFontSizeWithReset( path, blockName ) {
-	const [ fontSize, setStyleCallback ] = useGlobalStyle( path, blockName );
-	const [ userStyle ] = useGlobalStyle( path, blockName, 'user' );
-	const hasFontSize = () => !! userStyle;
-	const resetFontSize = () => setStyleCallback( undefined );
-	const setFontSize = ( newValue, metadata ) => {
-		if ( !! metadata?.slug ) {
-			newValue = `var:preset|font-size|${ metadata?.slug }`;
-		}
-		setStyleCallback( newValue );
-	};
-
-	return {
-		fontSize,
-		setFontSize,
-		hasFontSize,
-		resetFontSize,
-	};
-}
-
-function useFontAppearance( prefix, name ) {
-	const [ fontStyle, setFontStyle ] = useGlobalStyle(
-		prefix + 'typography.fontStyle',
-		name
-	);
-	const [ userFontStyle ] = useGlobalStyle(
-		prefix + 'typography.fontStyle',
-		name,
-		'user'
-	);
-	const [ fontWeight, setFontWeight ] = useGlobalStyle(
-		prefix + 'typography.fontWeight',
-		name
-	);
-	const [ userFontWeight ] = useGlobalStyle(
-		prefix + 'typography.fontWeight',
-		name,
-		'user'
-	);
-	const hasFontAppearance = () => !! userFontStyle || !! userFontWeight;
-	const resetFontAppearance = () => {
-		setFontStyle( undefined );
-		setFontWeight( undefined );
-	};
-	return {
-		fontStyle,
-		setFontStyle,
-		fontWeight,
-		setFontWeight,
-		hasFontAppearance,
-		resetFontAppearance,
-	};
-}
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	overrideSettingsWithSupports,
+	TypographyPanel: StylesTypographyPanel,
+} = unlock( blockEditorPrivateApis );
 
 export default function TypographyPanel( {
 	name,
@@ -188,234 +23,35 @@ export default function TypographyPanel( {
 	headingLevel,
 	variation = '',
 } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	let prefix = '';
+	let prefixParts = [];
 	if ( element === 'heading' ) {
-		prefix = `elements.${ headingLevel }.`;
+		prefixParts = prefixParts.concat( [ 'elements', headingLevel ] );
 	} else if ( element && element !== 'text' ) {
-		prefix = `elements.${ element }.`;
+		prefixParts = prefixParts.concat( [ 'elements', element ] );
 	}
 	if ( variation ) {
-		prefix = prefix
-			? `variations.${ variation }.${ prefix }`
-			: `variations.${ variation }`;
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
 	}
-	const [ fontSizesPerOrigin ] = useGlobalSetting(
-		'typography.fontSizes',
-		name
-	);
-	const fontSizes =
-		fontSizesPerOrigin?.custom ||
-		fontSizesPerOrigin?.theme ||
-		fontSizesPerOrigin?.default;
+	const prefix = prefixParts.join( '.' );
 
-	const disableCustomFontSizes = ! useGlobalSetting(
-		'typography.customFontSize',
-		name
-	)[ 0 ];
-	const [ fontFamiliesPerOrigin ] = useGlobalSetting(
-		'typography.fontFamilies',
-		name
+	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const usedElement = element === 'heading' ? headingLevel : element;
+	const supports = useSupportedStyles( name, usedElement );
+	const settings = useMemo(
+		() => overrideSettingsWithSupports( rawSettings, supports ),
+		[ rawSettings, supports ]
 	);
-	const fontFamilies =
-		fontFamiliesPerOrigin?.custom ||
-		fontFamiliesPerOrigin?.theme ||
-		fontFamiliesPerOrigin?.default;
-	const hasFontStyles =
-		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
-		supports.includes( 'fontStyle' );
-	const hasFontWeights =
-		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
-		supports.includes( 'fontWeight' );
-	const hasFontFamilyEnabled = useHasFontFamilyControl( name );
-	const hasLineHeightEnabled = useHasLineHeightControl( name );
-	const hasAppearanceControl = useHasAppearanceControl( name );
-	const appearanceControlLabel = useAppearanceControlLabel( name );
-	const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
-	const hasTextTransformControl = useHasTextTransformControl( name, element );
-	const hasTextDecorationControl = useHasTextDecorationControl(
-		name,
-		element
-	);
-
-	/* Disable font size controls when the option to style all headings is selected. */
-	let hasFontSizeEnabled = supports.includes( 'fontSize' );
-	if ( element === 'heading' && headingLevel === 'heading' ) {
-		hasFontSizeEnabled = false;
-	}
-
-	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
-		useStyleWithReset( prefix + 'typography.fontFamily', name );
-	const { fontSize, setFontSize, hasFontSize, resetFontSize } =
-		useFontSizeWithReset( prefix + 'typography.fontSize', name );
-	const {
-		fontStyle,
-		setFontStyle,
-		fontWeight,
-		setFontWeight,
-		hasFontAppearance,
-		resetFontAppearance,
-	} = useFontAppearance( prefix, name );
-	const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
-		useStyleWithReset( prefix + 'typography.lineHeight', name );
-	const [
-		letterSpacing,
-		setLetterSpacing,
-		hasLetterSpacing,
-		resetLetterSpacing,
-	] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
-	const [
-		textTransform,
-		setTextTransform,
-		hasTextTransform,
-		resetTextTransform,
-	] = useStyleWithReset( prefix + 'typography.textTransform', name );
-	const [
-		textDecoration,
-		setTextDecoration,
-		hasTextDecoration,
-		resetTextDecoration,
-	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
-
-	const resetAll = () => {
-		resetFontFamily();
-		resetFontSize();
-		resetFontAppearance();
-		resetLineHeight();
-		resetLetterSpacing();
-		resetTextTransform();
-	};
 
 	return (
-		<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>
-			{ hasFontFamilyEnabled && (
-				<ToolsPanelItem
-					label={ __( 'Font family' ) }
-					hasValue={ hasFontFamily }
-					onDeselect={ resetFontFamily }
-					isShownByDefault
-				>
-					<FontFamilyControl
-						fontFamilies={ fontFamilies }
-						value={ fontFamily }
-						onChange={ setFontFamily }
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasFontSizeEnabled && (
-				<ToolsPanelItem
-					label={ __( 'Font size' ) }
-					hasValue={ hasFontSize }
-					onDeselect={ resetFontSize }
-					isShownByDefault
-				>
-					<FontSizePicker
-						value={ fontSize }
-						onChange={ setFontSize }
-						fontSizes={ fontSizes }
-						disableCustomFontSizes={ disableCustomFontSizes }
-						withReset={ false }
-						withSlider
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasAppearanceControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ appearanceControlLabel }
-					hasValue={ hasFontAppearance }
-					onDeselect={ resetFontAppearance }
-					isShownByDefault
-				>
-					<FontAppearanceControl
-						value={ {
-							fontStyle,
-							fontWeight,
-						} }
-						onChange={ ( {
-							fontStyle: newFontStyle,
-							fontWeight: newFontWeight,
-						} ) => {
-							setFontStyle( newFontStyle );
-							setFontWeight( newFontWeight );
-						} }
-						hasFontStyles={ hasFontStyles }
-						hasFontWeights={ hasFontWeights }
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasLineHeightEnabled && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Line height' ) }
-					hasValue={ hasLineHeight }
-					onDeselect={ resetLineHeight }
-					isShownByDefault
-				>
-					<LineHeightControl
-						__nextHasNoMarginBottom
-						__unstableInputWidth="auto"
-						value={ lineHeight }
-						onChange={ setLineHeight }
-						size="__unstable-large"
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasLetterSpacingControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Letter spacing' ) }
-					hasValue={ hasLetterSpacing }
-					onDeselect={ resetLetterSpacing }
-					isShownByDefault
-				>
-					<LetterSpacingControl
-						value={ letterSpacing }
-						onChange={ setLetterSpacing }
-						size="__unstable-large"
-						__unstableInputWidth="auto"
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasTextTransformControl && (
-				<ToolsPanelItem
-					label={ __( 'Letter case' ) }
-					hasValue={ hasTextTransform }
-					onDeselect={ resetTextTransform }
-					isShownByDefault
-				>
-					<TextTransformControl
-						value={ textTransform }
-						onChange={ setTextTransform }
-						showNone
-						isBlock
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasTextDecorationControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Text decoration' ) }
-					hasValue={ hasTextDecoration }
-					onDeselect={ resetTextDecoration }
-					isShownByDefault
-				>
-					<TextDecorationControl
-						value={ textDecoration }
-						onChange={ setTextDecoration }
-						size="__unstable-large"
-						__unstableInputWidth="auto"
-					/>
-				</ToolsPanelItem>
-			) }
-		</ToolsPanel>
+		<StylesTypographyPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
 	);
 }

package/src/components/global-styles/typography-preview.js

@@ -1,14 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalStyle } = unlock( blockEditorExperiments );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function TypographyPreview( { name, element, headingLevel } ) {
 	let prefix = '';

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

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
@@ -37,7 +37,7 @@ import { ScreenVariation } from './screen-variations';
 import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 import ScreenEffects from './screen-effects';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
@@ -60,7 +60,7 @@ function GlobalStylesActionMenu() {
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
 		};
 	}, [] );
-	const { useGlobalStylesReset } = unlock( blockEditorExperiments );
+	const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
 	const loadCustomCSS = () => goTo( '/css' );
@@ -267,11 +267,6 @@ function GlobalStylesStyleBook( { onClose } ) {
 				)
 			}
 			onSelect={ ( blockName ) => {
-				// Clear navigator history by going back to the root.
-				const depth = path.match( /\//g ).length;
-				for ( let i = 0; i < depth; i++ ) {
-					navigator.goBack();
-				}
 				// Now go to the selected block.
 				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
 			} }

package/src/components/global-styles-renderer/index.js

@@ -3,15 +3,15 @@
  */
 import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
-const { useGlobalStylesOutput } = unlock( blockEditorExperiments );
+const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
 function useGlobalStylesRenderer() {
 	const [ styles, settings, svgFilters ] = useGlobalStylesOutput();

package/src/components/header-edit-mode/index.js

@@ -100,10 +100,13 @@ export default function HeaderEditMode() {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const openInserter = useCallback( () => {
+	const toggleInserter = useCallback( () => {
 		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover.
+			// Focusing the inserter button should close the inserter popover.
+			// However, there are some cases it won't close when the focus is lost.
+			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
 			inserterButton.current.focus();
+			setIsInserterOpened( false );
 		} else {
 			setIsInserterOpened( true );
 		}
@@ -148,7 +151,7 @@ export default function HeaderEditMode() {
 							variant="primary"
 							isPressed={ isInserterOpen }
 							onMouseDown={ preventDefault }
-							onClick={ openInserter }
+							onClick={ toggleInserter }
 							disabled={ ! isVisualMode }
 							icon={ plus }
 							label={ showIconLabels ? shortLabel : longLabel }

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -22,7 +22,7 @@ export const textFormattingShortcuts = [
 	},
 	{
 		keyCombination: { character: '[[' },
-		description: __( 'Insert a link to a post or page' ),
+		description: __( 'Insert a link to a post or page.' ),
 	},
 	{
 		keyCombination: { modifier: 'primary', character: 'u' },

package/src/components/layout/index.js

@@ -19,7 +19,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
@@ -38,7 +38,7 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import SiteHub from '../site-hub';
 import ResizeHandle from '../block-editor/resize-handle';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
 
 const ANIMATION_DURATION = 0.5;
@@ -87,21 +87,20 @@ export default function Layout() {
 	} );
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
-		useState( false );
 	const canvasPadding = isMobileViewport ? 0 : 24;
 	const showSidebar =
-		( isMobileViewport && ! isMobileCanvasVisible ) ||
+		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
 	const showCanvas =
-		( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
+		( isMobileViewport && isEditorPage && canvasMode === 'edit' ) ||
+		! isMobileViewport ||
+		! isEditorPage;
 	const showFrame =
-		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
-
+		( ! isEditorPage && ! isMobileViewport ) ||
+		( ! isMobileViewport && isEditorPage && canvasMode === 'view' );
 	const isFullCanvas =
-		( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
-		isMobileCanvasVisible;
-	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
+		( isMobileViewport && isListPage ) ||
+		( isEditorPage && canvasMode === 'edit' );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
 	const [ forcedWidth, setForcedWidth ] = useState( null );
@@ -112,15 +111,6 @@ export default function Layout() {
 	if ( showFrame && ! isResizing ) {
 		canvasWidth = canvasSize.width - canvasPadding;
 	}
-	useEffect( () => {
-		if ( canvasMode === 'view' && isMobileViewport ) {
-			setIsMobileCanvasVisible( false );
-		}
-
-		if ( canvasMode === 'edit' && isMobileViewport ) {
-			setIsMobileCanvasVisible( true );
-		}
-	}, [ canvasMode, isMobileViewport ] );
 
 	// Synchronizing the URL with the store value of canvasMode happens in an effect
 	// This condition ensures the component is only rendered after the synchronization happens
@@ -153,37 +143,34 @@ export default function Layout() {
 								? forcedWidth - 48
 								: undefined,
 					} }
-					isMobileCanvasVisible={ isMobileCanvasVisible }
-					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
 				/>
 
 				<AnimatePresence initial={ false }>
-					{ isEditorPage &&
-						( canvasMode === 'edit' || isMobileCanvasVisible ) && (
-							<NavigableRegion
-								className="edit-site-layout__header"
-								ariaLabel={ __( 'Editor top bar' ) }
-								as={ motion.div }
-								animate={ {
-									y: 0,
-								} }
-								initial={ {
-									y: '-100%',
-								} }
-								exit={ {
-									y: '-100%',
-								} }
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
-								{ canvasMode === 'edit' && <Header /> }
-							</NavigableRegion>
-						) }
+					{ isEditorPage && canvasMode === 'edit' && (
+						<NavigableRegion
+							className="edit-site-layout__header"
+							ariaLabel={ __( 'Editor top bar' ) }
+							as={ motion.div }
+							animate={ {
+								y: 0,
+							} }
+							initial={ {
+								y: '-100%',
+							} }
+							exit={ {
+								y: '-100%',
+							} }
+							transition={ {
+								type: 'tween',
+								duration: disableMotion
+									? 0
+									: ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+						>
+							{ canvasMode === 'edit' && <Header /> }
+						</NavigableRegion>
+					) }
 				</AnimatePresence>
 
 				<div className="edit-site-layout__content">