@wordpress/edit-site 5.10.0 → 5.12.0

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

@@ -31,7 +31,7 @@ function ScreenRoot() {
 	const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 	const [ customCSS ] = useGlobalStyle( 'css' );
 
-	const { variations, canEditCSS } = useSelect( ( select ) => {
+	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
 		const {
 			getEntityRecord,
 			__experimentalGetCurrentGlobalStylesId,
@@ -44,7 +44,9 @@ function ScreenRoot() {
 			: undefined;
 
 		return {
-			variations: __experimentalGetCurrentThemeGlobalStylesVariations(),
+			hasVariations:
+				!! __experimentalGetCurrentThemeGlobalStylesVariations()
+					?.length,
 			canEditCSS:
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
 		};
@@ -59,7 +61,7 @@ function ScreenRoot() {
 							<StylesPreview />
 						</CardMedia>
 					</Card>
-					{ !! variations?.length && (
+					{ hasVariations && (
 						<ItemGroup>
 							<NavigationButtonAsItem
 								path="/variations"

package/src/components/global-styles/style-variations-container.js

@@ -91,13 +91,10 @@ function Variation( { variation } ) {
 }
 
 export default function StyleVariationsContainer() {
-	const { variations } = useSelect( ( select ) => {
-		return {
-			variations:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations() || [],
-		};
+	const variations = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeGlobalStylesVariations();
 	}, [] );
 
 	const withEmptyVariation = useMemo( () => {
@@ -107,7 +104,7 @@ export default function StyleVariationsContainer() {
 				settings: {},
 				styles: {},
 			},
-			...variations.map( ( variation ) => ( {
+			...( variations ?? [] ).map( ( variation ) => ( {
 				...variation,
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
@@ -116,15 +113,13 @@ export default function StyleVariationsContainer() {
 	}, [ variations ] );
 
 	return (
-		<>
-			<Grid
-				columns={ 2 }
-				className="edit-site-global-styles-style-variations-container"
-			>
-				{ withEmptyVariation?.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation } />
-				) ) }
-			</Grid>
-		</>
+		<Grid
+			columns={ 2 }
+			className="edit-site-global-styles-style-variations-container"
+		>
+			{ withEmptyVariation.map( ( variation, index ) => (
+				<Variation key={ index } variation={ variation } />
+			) ) }
+		</Grid>
 	);
 }

package/src/components/global-styles/style.scss

@@ -143,6 +143,9 @@
 
 				.components-textarea-control__input {
 					flex: 1 1 auto;
+					// CSS input is always LTR regardless of language.
+					/*rtl:ignore*/
+					direction: ltr;
 				}
 			}
 		}

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

@@ -18,7 +18,7 @@ import { __, sprintf, _n } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -203,7 +203,6 @@ function GlobalStylesStyleBook() {
 
 function GlobalStylesBlockLink() {
 	const navigator = useNavigator();
-	const isMounted = useRef();
 	const { selectedBlockName, selectedBlockClientId } = useSelect(
 		( select ) => {
 			const { getSelectedBlockClientId, getBlockName } =
@@ -217,24 +216,54 @@ function GlobalStylesBlockLink() {
 		[]
 	);
 	const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
+	// When we're in the `Blocks` screen enable deep linking to the selected block.
 	useEffect( () => {
-		// Avoid navigating to the block screen on mount.
-		if ( ! isMounted.current ) {
-			isMounted.current = true;
+		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
 			return;
 		}
-		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
+		const currentPath = navigator.location.path;
+		if (
+			currentPath !== '/blocks' &&
+			! currentPath.startsWith( '/blocks/' )
+		) {
 			return;
 		}
-		const path = '/blocks/' + encodeURIComponent( selectedBlockName );
+		const newPath = '/blocks/' + encodeURIComponent( selectedBlockName );
 		// Avoid navigating to the same path. This can happen when selecting
 		// a new block of the same type.
-		if ( path !== navigator.location.path ) {
-			navigator.goTo( path, { skipFocus: true } );
+		if ( newPath !== currentPath ) {
+			navigator.goTo( newPath, { skipFocus: true } );
 		}
 	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
 }
 
+function GlobalStylesEditorCanvasContainerLink() {
+	const { goTo, location } = useNavigator();
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+
+	// If the user switches the editor canvas container view, redirect
+	// to the appropriate screen. This effectively allows deep linking to the
+	// desired screens from outside the global styles navigation provider.
+	useEffect( () => {
+		if ( editorCanvasContainerView === 'global-styles-revisions' ) {
+			// Switching to the revisions container view should
+			// redirect to the revisions screen.
+			goTo( '/revisions' );
+		} else if (
+			!! editorCanvasContainerView &&
+			location?.path === '/revisions'
+		) {
+			// Switching to any container other than revisions should
+			// redirect from the revisions screen to the root global styles screen.
+			goTo( '/' );
+		}
+	}, [ editorCanvasContainerView, location?.path, goTo ] );
+}
+
 function GlobalStylesUI() {
 	const blocks = getBlockTypes();
 	const editorCanvasContainerView = useSelect(
@@ -324,6 +353,7 @@ function GlobalStylesUI() {
 
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
+			<GlobalStylesEditorCanvasContainerLink />
 		</NavigatorProvider>
 	);
 }

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

@@ -7,106 +7,100 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { sprintf, __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	__experimentalGetBlockLabel as getBlockLabel,
-	getBlockType,
-} from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import {
-	Dropdown,
 	Button,
 	VisuallyHidden,
 	__experimentalText as Text,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { chevronDown } from '@wordpress/icons';
-import { useState, useMemo } from '@wordpress/element';
+import { BlockIcon } from '@wordpress/block-editor';
+import { store as commandsStore } from '@wordpress/commands';
 import {
-	store as blockEditorStore,
-	useBlockDisplayInformation,
-	BlockIcon,
-} from '@wordpress/block-editor';
-import { store as preferencesStore } from '@wordpress/preferences';
+	chevronLeftSmall as chevronLeftSmallIcon,
+	page as pageIcon,
+} from '@wordpress/icons';
+import { useEntityRecord } from '@wordpress/core-data';
+import { displayShortcut } from '@wordpress/keycodes';
+import { useState, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import TemplateDetails from '../../template-details';
 import useEditedEntityRecord from '../../use-edited-entity-record';
+import { store as editSiteStore } from '../../../store';
 
-function getBlockDisplayText( block ) {
-	if ( block ) {
-		const blockType = getBlockType( block.name );
-		return blockType ? getBlockLabel( blockType, block.attributes ) : null;
-	}
-	return null;
+export default function DocumentActions() {
+	const isPage = useSelect( ( select ) => select( editSiteStore ).isPage() );
+	return isPage ? <PageDocumentActions /> : <TemplateDocumentActions />;
 }
 
-function useSecondaryText() {
-	const { getBlock } = useSelect( blockEditorStore );
-	const activeEntityBlockId = useSelect(
-		( select ) =>
-			select(
-				blockEditorStore
-			).__experimentalGetActiveBlockIdByBlockNames( [
-				'core/template-part',
-			] ),
+function PageDocumentActions() {
+	const { hasPageContentLock, context } = useSelect(
+		( select ) => ( {
+			hasPageContentLock: select( editSiteStore ).hasPageContentLock(),
+			context: select( editSiteStore ).getEditedPostContext(),
+		} ),
 		[]
 	);
 
-	const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
+	const { hasResolved, editedRecord } = useEntityRecord(
+		'postType',
+		context.postType,
+		context.postId
+	);
 
-	if ( activeEntityBlockId ) {
-		return {
-			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
-			isActive: true,
-			icon: blockInformation?.icon,
-		};
-	}
+	const { setHasPageContentLock } = useDispatch( editSiteStore );
 
-	return {};
-}
+	const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false );
+	const prevHasPageContentLock = useRef( false );
+	useEffect( () => {
+		if ( prevHasPageContentLock.current && ! hasPageContentLock ) {
+			setHasEditedTemplate( true );
+		}
+		prevHasPageContentLock.current = hasPageContentLock;
+	}, [ hasPageContentLock ] );
 
-export default function DocumentActions() {
-	const showIconLabels = useSelect(
-		( select ) =>
-			select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-		[]
-	);
-	const { isLoaded, record, getTitle } = useEditedEntityRecord();
-	const { label, icon } = useSecondaryText();
-
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( {
-			// Use the title wrapper as the popover anchor so that the dropdown is
-			// centered over the whole title area rather than just one part of it.
-			anchor: popoverAnchor,
-			placement: 'bottom',
-		} ),
-		[ popoverAnchor ]
-	);
+	if ( ! hasResolved ) {
+		return null;
+	}
 
-	// Return a simple loading indicator until we have information to show.
-	if ( ! isLoaded ) {
+	if ( ! editedRecord ) {
 		return (
 			<div className="edit-site-document-actions">
-				{ __( 'Loading…' ) }
+				{ __( 'Document not found' ) }
 			</div>
 		);
 	}
 
-	// Return feedback that the template does not seem to exist.
+	return hasPageContentLock ? (
+		<BaseDocumentActions
+			className={ classnames( 'is-page', {
+				'is-animated': hasEditedTemplate,
+			} ) }
+			icon={ pageIcon }
+		>
+			{ editedRecord.title }
+		</BaseDocumentActions>
+	) : (
+		<TemplateDocumentActions
+			className="is-animated"
+			onBack={ () => setHasPageContentLock( true ) }
+		/>
+	);
+}
+
+function TemplateDocumentActions( { className, onBack } ) {
+	const { isLoaded, record, getTitle, icon } = useEditedEntityRecord();
+
+	if ( ! isLoaded ) {
+		return null;
+	}
+
 	if ( ! record ) {
 		return (
 			<div className="edit-site-document-actions">
-				{ __( 'Template not found' ) }
+				{ __( 'Document not found' ) }
 			</div>
 		);
 	}
@@ -116,63 +110,60 @@ export default function DocumentActions() {
 			? __( 'template part' )
 			: __( 'template' );
 
+	return (
+		<BaseDocumentActions
+			className={ className }
+			icon={ icon }
+			onBack={ onBack }
+		>
+			<VisuallyHidden as="span">
+				{ sprintf(
+					/* translators: %s: the entity being edited, like "template"*/
+					__( 'Editing %s: ' ),
+					entityLabel
+				) }
+			</VisuallyHidden>
+			{ getTitle() }
+		</BaseDocumentActions>
+	);
+}
+
+function BaseDocumentActions( { className, icon, children, onBack } ) {
+	const { open: openCommandCenter } = useDispatch( commandsStore );
 	return (
 		<div
-			className={ classnames( 'edit-site-document-actions', {
-				'has-secondary-label': !! label,
-			} ) }
+			className={ classnames( 'edit-site-document-actions', className ) }
 		>
-			<div
-				ref={ setPopoverAnchor }
-				className="edit-site-document-actions__title-wrapper"
+			{ onBack && (
+				<Button
+					className="edit-site-document-actions__back"
+					icon={ chevronLeftSmallIcon }
+					onClick={ ( event ) => {
+						event.stopPropagation();
+						onBack();
+					} }
+				>
+					{ __( 'Back' ) }
+				</Button>
+			) }
+			<Button
+				className="edit-site-document-actions__command"
+				onClick={ () => openCommandCenter() }
 			>
-				<Text
-					size="body"
+				<HStack
 					className="edit-site-document-actions__title"
-					as="h1"
+					spacing={ 1 }
+					justify="center"
 				>
-					<VisuallyHidden as="span">
-						{ sprintf(
-							/* translators: %s: the entity being edited, like "template"*/
-							__( 'Editing %s: ' ),
-							entityLabel
-						) }
-					</VisuallyHidden>
-					{ getTitle() }
-				</Text>
-				<div className="edit-site-document-actions__secondary-item">
-					<BlockIcon icon={ icon } showColors />
-					<Text size="body">{ label ?? '' }</Text>
-				</div>
-
-				<Dropdown
-					popoverProps={ popoverProps }
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							className="edit-site-document-actions__get-info"
-							icon={ chevronDown }
-							aria-expanded={ isOpen }
-							aria-haspopup="true"
-							onClick={ onToggle }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							label={ sprintf(
-								/* translators: %s: the entity to see details about, like "template"*/
-								__( 'Show %s details' ),
-								entityLabel
-							) }
-						>
-							{ showIconLabels && __( 'Details' ) }
-						</Button>
-					) }
-					contentClassName="edit-site-document-actions__info-dropdown"
-					renderContent={ ( { onClose } ) => (
-						<TemplateDetails
-							template={ record }
-							onClose={ onClose }
-						/>
-					) }
-				/>
-			</div>
+					<BlockIcon icon={ icon } />
+					<Text size="body" as="h1">
+						{ children }
+					</Text>
+				</HStack>
+				<span className="edit-site-document-actions__shortcut">
+					{ displayShortcut.primary( 'k' ) }
+				</span>
+			</Button>
 		</div>
 	);
 }

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

@@ -1,79 +1,103 @@
 .edit-site-document-actions {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	padding: 0 $grid-unit;
-	height: 100%;
+	display: grid;
+	grid-template-columns: 1fr 2fr 1fr;
+	height: $button-size;
 	// Flex items will, by default, refuse to shrink below a minimum
 	// intrinsic width. In order to shrink this flexbox item, and
 	// subsequently truncate child text, we set an explicit min-width.
 	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 	min-width: 0;
+	background: $gray-100;
+	border-radius: 4px;
+	width: min(100%, 450px);
+	overflow: hidden;
+
+	&:hover {
+		color: currentColor;
+		background: $gray-200;
+	}
+}
+
+.edit-site-document-actions__command {
+	grid-column: 1 / -1;
+	display: grid;
+	grid-template-columns: 1fr 2fr 1fr;
+	grid-row: 1;
+}
 
-	.edit-site-document-actions__title-wrapper {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
 
-		// See comment above about min-width
-		min-width: 0;
+.edit-site-document-actions__title {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+	grid-column: 2 / 3;
+
+	h1 {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: var(--wp-block-synced-color);
+	}
 
-		.components-dropdown {
-			display: inline-flex;
-			margin-left: $grid-unit-05;
+	.edit-site-document-actions.is-page & {
+		color: $gray-800;
 
-			.components-button {
-				min-width: 0;
-				padding: 0;
-			}
+		h1 {
+			color: $gray-800;
 		}
 	}
 
-	.edit-site-document-actions__title-wrapper > h1 {
-		margin: 0;
+	.edit-site-document-actions.is-animated & {
+		animation: edit-site-document-actions__slide-in-left 0.3s;
+		@include reduce-motion("animation");
+	}
 
-		// See comment above about min-width
-		min-width: 0;
+	.edit-site-document-actions.is-animated.is-page & {
+		animation: edit-site-document-actions__slide-in-right 0.3s;
+		@include reduce-motion("animation");
 	}
+}
 
-	.edit-site-document-actions__title {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		color: currentColor;
+.edit-site-document-actions__shortcut {
+	color: $gray-700;
+	text-align: right;
+
+	&:hover {
+		color: $gray-700;
 	}
+}
 
-	.edit-site-document-actions__secondary-item {
-		display: flex;
-		align-items: center;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 0;
-		opacity: 0;
-		padding: 0;
-		transition: all ease 0.2s;
-		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-		border-radius: 2px;
-		@include reduce-motion(transition);
+.edit-site-document-actions__back {
+	min-width: $button-size;
+	flex-shrink: 0;
+	grid-column: 1 / 2;
+	grid-row: 1;
+	z-index: 1;
 
-		.block-editor-block-icon.has-colors {
-			color: var(--wp-block-synced-color);
-		}
+	.edit-site-document-actions.is-animated & {
+		animation: edit-site-document-actions__slide-in-left 0.3s;
+		@include reduce-motion("animation");
 	}
+}
 
-	&.has-secondary-label {
-		.edit-site-document-actions__secondary-item {
-			opacity: 1;
-			padding: 0 4px;
-			max-width: 180px;
-			margin-left: 6px;
-		}
+@keyframes edit-site-document-actions__slide-in-right {
+	from {
+		transform: translateX(-15%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
 	}
 }
 
-.edit-site-document-actions__info-dropdown > .components-popover__content {
-	padding: 0;
-	min-width: 240px;
+@keyframes edit-site-document-actions__slide-in-left {
+	from {
+		transform: translateX(15%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
 }

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

@@ -14,6 +14,7 @@ import {
 	__experimentalPreviewOptions as PreviewOptions,
 	NavigableToolbar,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
@@ -44,6 +45,8 @@ import {
 } from '../editor-canvas-container';
 import { unlock } from '../../private-apis';
 
+const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+
 const preventDefault = ( event ) => {
 	event.preventDefault();
 };
@@ -125,6 +128,18 @@ export default function HeaderEditMode() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
+	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+	const blockToolbarCanBeFocused =
+		shouldShowContextualToolbar ||
+		canFocusHiddenToolbar ||
+		fixedToolbarCanBeFocused;
+
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
 	const isFocusMode = templateType === 'wp_template_part';
@@ -150,6 +165,9 @@ export default function HeaderEditMode() {
 				<NavigableToolbar
 					className="edit-site-header-edit-mode__start"
 					aria-label={ __( 'Document tools' ) }
+					shouldUseKeyboardFocusShortcut={
+						! blockToolbarCanBeFocused
+					}
 				>
 					<div className="edit-site-header-edit-mode__toolbar">
 						<ToolbarItem

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

@@ -27,6 +27,7 @@ $header-toolbar-min-width: 335px;
 		align-items: center;
 		height: 100%;
 		flex-grow: 1;
+		margin: 0 $grid-unit-10;
 		justify-content: center;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and