@wordpress/edit-site 5.12.13 → 5.12.14

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.12.13",
+	"version": "5.12.14",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,19 +29,19 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.35.1",
 		"@wordpress/api-fetch": "^6.32.1",
-		"@wordpress/block-editor": "^12.3.11",
-		"@wordpress/block-library": "^8.12.13",
-		"@wordpress/blocks": "^12.12.6",
-		"@wordpress/commands": "^0.6.10",
+		"@wordpress/block-editor": "^12.3.12",
+		"@wordpress/block-library": "^8.12.14",
+		"@wordpress/blocks": "^12.12.7",
+		"@wordpress/commands": "^0.6.11",
 		"@wordpress/components": "^25.1.10",
 		"@wordpress/compose": "^6.12.2",
-		"@wordpress/core-commands": "^0.4.11",
-		"@wordpress/core-data": "^6.12.11",
+		"@wordpress/core-commands": "^0.4.12",
+		"@wordpress/core-data": "^6.12.12",
 		"@wordpress/data": "^9.5.5",
 		"@wordpress/date": "^4.35.1",
 		"@wordpress/deprecated": "^3.35.1",
 		"@wordpress/dom": "^3.35.1",
-		"@wordpress/editor": "^13.12.11",
+		"@wordpress/editor": "^13.12.12",
 		"@wordpress/element": "^5.12.1",
 		"@wordpress/escape-html": "^2.35.1",
 		"@wordpress/hooks": "^3.35.1",
@@ -57,12 +57,12 @@
 		"@wordpress/preferences": "^3.12.10",
 		"@wordpress/primitives": "^3.33.1",
 		"@wordpress/private-apis": "^0.17.2",
-		"@wordpress/reusable-blocks": "^4.12.11",
+		"@wordpress/reusable-blocks": "^4.12.12",
 		"@wordpress/router": "^0.4.2",
 		"@wordpress/style-engine": "^1.18.1",
 		"@wordpress/url": "^3.36.1",
 		"@wordpress/viewport": "^5.12.5",
-		"@wordpress/widgets": "^3.12.11",
+		"@wordpress/widgets": "^3.12.12",
 		"@wordpress/wordcount": "^3.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a6c8348f0058e714c97df49b4025e5d7d1c9e437"
+	"gitHead": "53cd9574a54a643c73e76fe1abaa8d1be489f8f7"
 }

package/src/components/header-edit-mode/document-actions/style.scss

@@ -13,6 +13,11 @@
 	border-radius: 4px;
 	width: min(100%, 450px);
 
+	// Make the document title shorter in top-toolbar mode, as it has to be covered.
+	.has-fixed-toolbar & {
+		width: min(100%, 380px);
+	}
+
 	.components-button {
 		&:hover {
 			color: var(--wp-block-synced-color);

package/src/components/layout/index.js

@@ -260,28 +260,35 @@ export default function Layout() {
 				</motion.div>
 
 				<div className="edit-site-layout__content">
-					<motion.div
-						// The sidebar is needed for routing on mobile
-						// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
-						// so we can't remove the element entirely. Using `inert` will make
-						// it inaccessible to screen readers and keyboard navigation.
-						inert={ showSidebar ? undefined : 'inert' }
-						animate={ { opacity: showSidebar ? 1 : 0 } }
-						transition={ {
-							type: 'tween',
-							duration:
-								// Disable transition in mobile to emulate a full page transition.
-								disableMotion || isMobileViewport
-									? 0
-									: ANIMATION_DURATION,
-							ease: 'easeOut',
-						} }
-						className="edit-site-layout__sidebar"
+					{ /*
+						The NavigableRegion must always be rendered and not use
+						`inert` otherwise `useNavigateRegions` will fail.
+					*/ }
+					<NavigableRegion
+						ariaLabel={ __( 'Navigation' ) }
+						className="edit-site-layout__sidebar-region"
 					>
-						<NavigableRegion ariaLabel={ __( 'Navigation' ) }>
+						<motion.div
+							// The sidebar is needed for routing on mobile
+							// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
+							// so we can't remove the element entirely. Using `inert` will make
+							// it inaccessible to screen readers and keyboard navigation.
+							inert={ showSidebar ? undefined : 'inert' }
+							animate={ { opacity: showSidebar ? 1 : 0 } }
+							transition={ {
+								type: 'tween',
+								duration:
+									// Disable transition in mobile to emulate a full page transition.
+									disableMotion || isMobileViewport
+										? 0
+										: ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+							className="edit-site-layout__sidebar"
+						>
 							<Sidebar />
-						</NavigableRegion>
-					</motion.div>
+						</motion.div>
+					</NavigableRegion>
 
 					<SavePanel />
 

package/src/components/layout/style.scss

@@ -58,7 +58,7 @@
 	display: flex;
 }
 
-.edit-site-layout__sidebar {
+.edit-site-layout__sidebar-region {
 	z-index: z-index(".edit-site-layout__sidebar");
 	width: 100vw;
 	flex-shrink: 0;
@@ -75,7 +75,7 @@
 		top: 0;
 	}
 
-	> div {
+	.edit-site-layout__sidebar {
 		display: flex;
 		flex-direction: column;
 		height: 100%;

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -49,7 +49,7 @@ export function useDisableNonPageContentBlocks() {
 
 const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isDescendentOfQueryLoop = !! props.context.queryId;
+		const isDescendentOfQueryLoop = props.context.queryId !== undefined;
 		const isPageContent =
 			PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
 			! isDescendentOfQueryLoop;

package/src/components/sidebar-navigation-screen/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -51,7 +56,12 @@ export default function SidebarNavigationScreen( {
 	return (
 		<>
 			<VStack
-				className="edit-site-sidebar-navigation-screen__main"
+				className={ classnames(
+					'edit-site-sidebar-navigation-screen__main',
+					{
+						'has-footer': !! footer,
+					}
+				) }
 				spacing={ 0 }
 				justify="flex-start"
 			>

package/src/components/sidebar-navigation-screen/style.scss

@@ -9,6 +9,10 @@
 	// Ensure the sidebar is always at least as tall as the viewport.
 	// This allows the footer section to be sticky at the bottom of the viewport.
 	flex-grow: 1;
+	margin-bottom: $grid-unit-20;
+	&.has-footer {
+		margin-bottom: 0;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content {

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -108,30 +108,10 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	);
 }
 
-function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
-	const { revisions, isLoading } = useGlobalStylesRevisions();
-	const { revisionsCount } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			revisionsCount:
-				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
-		};
-	}, [] );
-
-	const hasRevisions = revisionsCount >= 2;
-	const modified = revisions?.[ 0 ]?.modified;
-
-	if ( ! hasRevisions || isLoading || ! modified ) {
-		return null;
-	}
-
+function SidebarNavigationScreenGlobalStylesFooter( {
+	modifiedDateTime,
+	onClickRevisions,
+} ) {
 	return (
 		<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
 			<SidebarNavigationItem
@@ -150,8 +130,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 						{ __( 'Last modified' ) }
 					</span>
 					<span>
-						<time dateTime={ modified }>
-							{ humanTimeDiff( modified ) }
+						<time dateTime={ modifiedDateTime }>
+							{ humanTimeDiff( modifiedDateTime ) }
 						</time>
 					</span>
 					<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
@@ -162,6 +142,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 }
 
 export default function SidebarNavigationScreenGlobalStyles() {
+	const { revisions, isLoading: isLoadingRevisions } =
+		useGlobalStylesRevisions();
 	const { openGeneralSidebar, setIsListViewOpened } =
 		useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -171,15 +153,28 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { createNotice } = useDispatch( noticesStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 	const { get: getPrefference } = useSelect( preferencesStore );
-	const { isViewMode, isStyleBookOpened } = useSelect( ( select ) => {
-		const { getCanvasMode, getEditorCanvasContainerView } = unlock(
-			select( editSiteStore )
-		);
-		return {
-			isViewMode: 'view' === getCanvasMode(),
-			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
-		};
-	}, [] );
+	const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
+		( select ) => {
+			const { getCanvasMode, getEditorCanvasContainerView } = unlock(
+				select( editSiteStore )
+			);
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			return {
+				isViewMode: 'view' === getCanvasMode(),
+				isStyleBookOpened:
+					'style-book' === getEditorCanvasContainerView(),
+				revisionsCount:
+					globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ??
+					0,
+			};
+		},
+		[]
+	);
 
 	const turnOffDistractionFreeMode = useCallback( () => {
 		const isDistractionFree = getPrefference(
@@ -226,6 +221,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		setEditorCanvasContainerView( 'global-styles-revisions' );
 	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
+	// If there are no revisions, do not render a footer.
+	const hasRevisions = revisionsCount >= 2;
+	const modifiedDateTime = revisions?.[ 0 ]?.modified;
+	const shouldShowGlobalStylesFooter =
+		hasRevisions && ! isLoadingRevisions && modifiedDateTime;
+
 	return (
 		<>
 			<SidebarNavigationScreen
@@ -235,9 +236,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				) }
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
-					<SidebarNavigationScreenGlobalStylesFooter
-						onClickRevisions={ openRevisions }
-					/>
+					shouldShowGlobalStylesFooter && (
+						<SidebarNavigationScreenGlobalStylesFooter
+							modifiedDateTime={ modifiedDateTime }
+							onClickRevisions={ openRevisions }
+						/>
+					)
 				}
 				actions={
 					<>

package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -5,7 +5,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 	BlockList,
-	BlockTools,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
@@ -106,9 +105,7 @@ export default function NavigationMenuContent( { rootClientId } ) {
 				/>
 			) }
 			<div className="edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor">
-				<BlockTools>
-					<BlockList />
-				</BlockTools>
+				<BlockList />
 			</div>
 		</>
 	);