@wordpress/edit-site 5.9.0 → 5.11.0

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

@@ -1,112 +1,40 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { sprintf, __ } from '@wordpress/i18n';
+import { 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 {
-	store as blockEditorStore,
-	useBlockDisplayInformation,
-	BlockIcon,
-} from '@wordpress/block-editor';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { BlockIcon } from '@wordpress/block-editor';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import TemplateDetails from '../../template-details';
 import useEditedEntityRecord from '../../use-edited-entity-record';
+import { unlock } from '../../../private-apis';
 
-function getBlockDisplayText( block ) {
-	if ( block ) {
-		const blockType = getBlockType( block.name );
-		return blockType ? getBlockLabel( blockType, block.attributes ) : null;
-	}
-	return null;
-}
-
-function useSecondaryText() {
-	const { getBlock } = useSelect( blockEditorStore );
-	const activeEntityBlockId = useSelect(
-		( select ) =>
-			select(
-				blockEditorStore
-			).__experimentalGetActiveBlockIdByBlockNames( [
-				'core/template-part',
-			] ),
-		[]
-	);
-
-	const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
-
-	if ( activeEntityBlockId ) {
-		return {
-			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
-			isActive: true,
-			icon: blockInformation?.icon,
-		};
-	}
-
-	return {};
-}
+const { store: commandsStore } = unlock( commandsPrivateApis );
 
 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 ]
-	);
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+	const { isLoaded, record, getTitle, icon } = useEditedEntityRecord();
 
 	// Return a simple loading indicator until we have information to show.
 	if ( ! isLoaded ) {
-		return (
-			<div className="edit-site-document-actions">
-				{ __( 'Loading…' ) }
-			</div>
-		);
+		return null;
 	}
 
 	// Return feedback that the template does not seem to exist.
 	if ( ! record ) {
 		return (
 			<div className="edit-site-document-actions">
-				{ __( 'Template not found' ) }
+				{ __( 'Document not found' ) }
 			</div>
 		);
 	}
@@ -117,20 +45,18 @@ export default function DocumentActions() {
 			: __( 'template' );
 
 	return (
-		<div
-			className={ classnames( 'edit-site-document-actions', {
-				'has-secondary-label': !! label,
-			} ) }
+		<Button
+			className="edit-site-document-actions"
+			onClick={ () => openCommandCenter() }
 		>
-			<div
-				ref={ setPopoverAnchor }
-				className="edit-site-document-actions__title-wrapper"
+			<span className="edit-site-document-actions__left"></span>
+			<HStack
+				spacing={ 1 }
+				justify="center"
+				className="edit-site-document-actions__title"
 			>
-				<Text
-					size="body"
-					className="edit-site-document-actions__title"
-					as="h1"
-				>
+				<BlockIcon icon={ icon } />
+				<Text size="body" as="h1">
 					<VisuallyHidden as="span">
 						{ sprintf(
 							/* translators: %s: the entity being edited, like "template"*/
@@ -140,39 +66,10 @@ export default function DocumentActions() {
 					</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>
-		</div>
+			</HStack>
+			<span className="edit-site-document-actions__shortcut">
+				{ displayShortcut.primary( 'k' ) }
+			</span>
+		</Button>
 	);
 }

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

@@ -1,79 +1,48 @@
 .edit-site-document-actions {
 	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	padding: 0 $grid-unit;
-	height: 100%;
+	align-items: center;
+	gap: $grid-unit;
+	height: $button-size;
+	padding: $grid-unit;
+	justify-content: space-between;
 	// 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);
 
-	.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;
-
-		.components-dropdown {
-			display: inline-flex;
-			margin-left: $grid-unit-05;
-
-			.components-button {
-				min-width: 0;
-				padding: 0;
-			}
-		}
-	}
-
-	.edit-site-document-actions__title-wrapper > h1 {
-		margin: 0;
-
-		// See comment above about min-width
-		min-width: 0;
-	}
-
-	.edit-site-document-actions__title {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+	&:hover {
 		color: currentColor;
+		background: $gray-200;
 	}
+}
 
-	.edit-site-document-actions__secondary-item {
-		display: flex;
-		align-items: center;
+.edit-site-document-actions__title {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+
+	h1 {
+		color: var(--wp-block-synced-color);
 		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);
-
-		.block-editor-block-icon.has-colors {
-			color: var(--wp-block-synced-color);
-		}
 	}
+}
 
-	&.has-secondary-label {
-		.edit-site-document-actions__secondary-item {
-			opacity: 1;
-			padding: 0 4px;
-			max-width: 180px;
-			margin-left: 6px;
-		}
+.edit-site-document-actions__shortcut {
+	flex-shrink: 0;
+	color: $gray-700;
+	width: #{$grid-unit * 4.5};
+	&:hover {
+		color: $gray-700;
 	}
 }
 
-.edit-site-document-actions__info-dropdown > .components-popover__content {
-	padding: 0;
-	min-width: 240px;
+.edit-site-document-actions__left {
+	min-width: $button-size;
+	flex-shrink: 0;
 }

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';
@@ -38,9 +39,14 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import { store as editSiteStore } from '../../store';
-import { getEditorCanvasContainerTitle } from '../editor-canvas-container';
+import {
+	getEditorCanvasContainerTitle,
+	useHasEditorCanvasContainer,
+} from '../editor-canvas-container';
 import { unlock } from '../../private-apis';
 
+const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+
 const preventDefault = ( event ) => {
 	event.preventDefault();
 };
@@ -122,7 +128,19 @@ export default function HeaderEditMode() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	const hasDefaultEditorCanvasView = ! editorCanvasView;
+	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';
 
@@ -147,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

package/src/components/keyboard-shortcuts/register.js

@@ -66,7 +66,7 @@ function KeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/edit-site/toggle-block-settings-sidebar',
 			category: 'global',
-			description: __( 'Show or hide the block settings sidebar.' ),
+			description: __( 'Show or hide the Settings sidebar.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: ',',

package/src/components/layout/hooks.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+export function useIsSiteEditorLoading() {
+	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
+	const [ loaded, setLoaded ] = useState( false );
+	const inLoadingPause = useSelect(
+		( select ) => {
+			const hasResolvingSelectors =
+				select( coreStore ).hasResolvingSelectors();
+			return ! loaded && ! hasResolvingSelectors;
+		},
+		[ loaded ]
+	);
+
+	useEffect( () => {
+		if ( inLoadingPause ) {
+			/*
+			 * We're using an arbitrary 1s timeout here to catch brief moments
+			 * without any resolving selectors that would result in displaying
+			 * brief flickers of loading state and loaded state.
+			 *
+			 * It's worth experimenting with different values, since this also
+			 * adds 1s of artificial delay after loading has finished.
+			 */
+			const timeout = setTimeout( () => {
+				setLoaded( true );
+			}, 1000 );
+
+			return () => {
+				clearTimeout( timeout );
+			};
+		}
+	}, [ inLoadingPause ] );
+
+	return ! loaded || ! hasLoadedPost;
+}