@wordpress/edit-site 5.10.0 → 5.11.0

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -18,9 +18,8 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
  */
 function getRevisionLabel( revision ) {
 	const authorDisplayName = revision?.author?.name || __( 'User' );
-	const isUnsaved = 'unsaved' === revision?.id;
 
-	if ( isUnsaved ) {
+	if ( 'unsaved' === revision?.id ) {
 		return sprintf(
 			/* translators: %(name)s author display name */
 			__( 'Unsaved changes by %(name)s' ),
@@ -57,45 +56,42 @@ function getRevisionLabel( revision ) {
  * Returns a rendered list of revisions buttons.
  *
  * @typedef {Object} props
- * @property {Array<Object>} userRevisions     A collection of user revisions.
- * @property {number}        currentRevisionId Callback fired when the modal is closed or action cancelled.
- * @property {Function}      onChange          Callback fired when a revision is selected.
+ * @property {Array<Object>} userRevisions      A collection of user revisions.
+ * @property {number}        selectedRevisionId The id of the currently-selected revision.
+ * @property {Function}      onChange           Callback fired when a revision is selected.
  *
- * @param    {props}         Component         props.
+ * @param    {props}         Component          props.
  * @return {JSX.Element} The modal component.
  */
-function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
+function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 	return (
 		<ol
 			className="edit-site-global-styles-screen-revisions__revisions-list"
 			aria-label={ __( 'Global styles revisions' ) }
 			role="group"
 		>
-			{ userRevisions.map( ( revision ) => {
-				const { id, author, isLatest, modified } = revision;
+			{ userRevisions.map( ( revision, index ) => {
+				const { id, author, modified } = revision;
 				const authorDisplayName = author?.name || __( 'User' );
 				const authorAvatar = author?.avatar_urls?.[ '48' ];
-				/*
-				 * If the currentId hasn't been selected yet, the first revision is
-				 * the current one so long as the API returns revisions in descending order.
-				 */
-				const isActive = !! currentRevisionId
-					? id === currentRevisionId
-					: isLatest;
+				const isUnsaved = 'unsaved' === revision?.id;
+				const isSelected = selectedRevisionId
+					? selectedRevisionId === revision?.id
+					: index === 0;
 
 				return (
 					<li
 						className={ classnames(
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
-								'is-current': isActive,
+								'is-selected': isSelected,
 							}
 						) }
 						key={ id }
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
-							disabled={ isActive }
+							disabled={ isSelected }
 							onClick={ () => {
 								onChange( revision );
 							} }
@@ -106,13 +102,25 @@ function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
 									{ humanTimeDiff( modified ) }
 								</time>
 								<span className="edit-site-global-styles-screen-revisions__meta">
-									{ sprintf(
-										/* translators: %(name)s author display name */
-										__( 'Changes saved by %(name)s' ),
-										{
-											name: authorDisplayName,
-										}
-									) }
+									{ isUnsaved
+										? sprintf(
+												/* translators: %(name)s author display name */
+												__(
+													'Unsaved changes by %(name)s'
+												),
+												{
+													name: authorDisplayName,
+												}
+										  )
+										: sprintf(
+												/* translators: %(name)s author display name */
+												__(
+													'Changes saved by %(name)s'
+												),
+												{
+													name: authorDisplayName,
+												}
+										  ) }
 
 									<img
 										alt={ author?.name }

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

@@ -36,7 +36,7 @@
 		left: 0;
 		transform: translate(-50%, -50%);
 	}
-	&.is-current::before {
+	&.is-selected::before {
 		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 	}
 }
@@ -56,7 +56,7 @@
 	}
 }
 
-.is-current {
+.is-selected {
 	.edit-site-global-styles-screen-revisions__revision-button {
 		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 		opacity: 1;
@@ -86,6 +86,7 @@
 	justify-content: space-between;
 	width: 100%;
 	align-items: center;
+	text-align: left;
 
 	img {
 		width: $grid-unit-20;

package/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js

@@ -49,7 +49,6 @@ describe( 'useGlobalStylesRevisions', () => {
 				styles: {},
 			},
 		],
-		isLoading: false,
 	};
 
 	it( 'returns loaded revisions with no unsaved changes', () => {
@@ -109,10 +108,24 @@ describe( 'useGlobalStylesRevisions', () => {
 		] );
 	} );
 
-	it( 'returns empty revisions when still loading', () => {
+	it( 'returns empty revisions', () => {
 		useSelect.mockImplementation( () => ( {
 			...selectValue,
-			isLoading: true,
+			revisions: [],
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( true );
+		expect( hasUnsavedChanges ).toBe( false );
+		expect( revisions ).toEqual( [] );
+	} );
+
+	it( 'returns empty revisions when authors are not yet available', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			authors: [],
 		} ) );
 
 		const { result } = renderHook( () => useGlobalStylesRevisions() );

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -20,53 +20,46 @@ const SITE_EDITOR_AUTHORS_QUERY = {
 	context: 'view',
 	capabilities: [ 'edit_theme_options' ],
 };
-
+const EMPTY_ARRAY = [];
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 export default function useGlobalStylesRevisions() {
 	const { user: userConfig } = useContext( GlobalStylesContext );
-	const { authors, currentUser, isDirty, revisions, isLoading } = useSelect(
+	const { authors, currentUser, isDirty, revisions } = useSelect(
 		( select ) => {
 			const {
 				__experimentalGetDirtyEntityRecords,
 				getCurrentUser,
 				getUsers,
 				getCurrentThemeGlobalStylesRevisions,
-				isResolving,
 			} = select( coreStore );
 			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
 			const _currentUser = getCurrentUser();
 			const _isDirty = dirtyEntityRecords.length > 0;
 			const globalStylesRevisions =
-				getCurrentThemeGlobalStylesRevisions() || [];
-			const _authors = getUsers( SITE_EDITOR_AUTHORS_QUERY );
+				getCurrentThemeGlobalStylesRevisions() || EMPTY_ARRAY;
+			const _authors =
+				getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY;
 
 			return {
 				authors: _authors,
 				currentUser: _currentUser,
 				isDirty: _isDirty,
 				revisions: globalStylesRevisions,
-				isLoading:
-					! globalStylesRevisions.length ||
-					isResolving( 'getUsers', [ SITE_EDITOR_AUTHORS_QUERY ] ),
 			};
 		},
 		[]
 	);
 	return useMemo( () => {
 		let _modifiedRevisions = [];
-		if ( isLoading || ! revisions.length ) {
+		if ( ! authors.length || ! revisions.length ) {
 			return {
 				revisions: _modifiedRevisions,
 				hasUnsavedChanges: isDirty,
-				isLoading,
+				isLoading: true,
 			};
 		}
-		/*
-		 * Adds a flag to the first revision, which is the latest.
-		 * Also adds author information to the revision.
-		 * Then, if there are unsaved changes in the editor, create a
-		 * new "revision" item that represents the unsaved changes.
-		 */
+
+		// Adds author details to each revision.
 		_modifiedRevisions = revisions.map( ( revision ) => {
 			return {
 				...revision,
@@ -76,10 +69,12 @@ export default function useGlobalStylesRevisions() {
 			};
 		} );
 
-		if ( _modifiedRevisions[ 0 ]?.id !== 'unsaved' ) {
+		// Flags the most current saved revision.
+		if ( _modifiedRevisions[ 0 ].id !== 'unsaved' ) {
 			_modifiedRevisions[ 0 ].isLatest = true;
 		}
 
+		// Adds an item for unsaved changes.
 		if ( isDirty && ! isEmpty( userConfig ) && currentUser ) {
 			const unsavedRevision = {
 				id: 'unsaved',
@@ -94,10 +89,11 @@ export default function useGlobalStylesRevisions() {
 
 			_modifiedRevisions.unshift( unsavedRevision );
 		}
+
 		return {
 			revisions: _modifiedRevisions,
 			hasUnsavedChanges: isDirty,
-			isLoading,
+			isLoading: false,
 		};
-	}, [ revisions.length, isDirty, isLoading ] );
+	}, [ isDirty, revisions, currentUser, authors, userConfig ] );
 }

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,20 +216,23 @@ 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 ] );
 }

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>
 	);
 }