@wordpress/edit-site 5.22.0 → 5.23.0

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

@@ -32,8 +32,8 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 );
 
 function ScreenRevisions() {
-	const { goBack } = useNavigator();
-	const { user: userConfig, setUserConfig } =
+	const { goTo } = useNavigator();
+	const { user: currentEditorGlobalStyles, setUserConfig } =
 		useContext( GlobalStylesContext );
 	const { blocks, editorCanvasContainerView } = useSelect( ( select ) => {
 		return {
@@ -45,9 +45,8 @@ function ScreenRevisions() {
 	}, [] );
 	const { revisions, isLoading, hasUnsavedChanges } =
 		useGlobalStylesRevisions();
-	const [ selectedRevisionId, setSelectedRevisionId ] = useState();
-	const [ globalStylesRevision, setGlobalStylesRevision ] =
-		useState( userConfig );
+	const [ currentlySelectedRevision, setCurrentlySelectedRevision ] =
+		useState( currentEditorGlobalStyles );
 	const [
 		isLoadingRevisionWithUnsavedChanges,
 		setIsLoadingRevisionWithUnsavedChanges,
@@ -55,16 +54,13 @@ function ScreenRevisions() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-
-	useEffect( () => {
-		if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
-			goBack();
-			setEditorCanvasContainerView( editorCanvasContainerView );
-		}
-	}, [ editorCanvasContainerView ] );
+	const selectedRevisionMatchesEditorStyles = areGlobalStyleConfigsEqual(
+		currentlySelectedRevision,
+		currentEditorGlobalStyles
+	);
 
 	const onCloseRevisions = () => {
-		goBack();
+		goTo( '/' ); // Return to global styles main panel.
 	};
 
 	const restoreRevision = ( revision ) => {
@@ -77,17 +73,47 @@ function ScreenRevisions() {
 	};
 
 	const selectRevision = ( revision ) => {
-		setGlobalStylesRevision( {
+		setCurrentlySelectedRevision( {
 			styles: revision?.styles || {},
 			settings: revision?.settings || {},
 			id: revision?.id,
 		} );
-		setSelectedRevisionId( revision?.id );
 	};
 
+	useEffect( () => {
+		if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
+			goTo( '/' ); // Return to global styles main panel.
+			setEditorCanvasContainerView( editorCanvasContainerView );
+		}
+	}, [ editorCanvasContainerView ] );
+
+	const firstRevision = revisions[ 0 ];
+	const currentlySelectedRevisionId = currentlySelectedRevision?.id;
+	const shouldSelectFirstItem =
+		!! firstRevision?.id &&
+		! selectedRevisionMatchesEditorStyles &&
+		! currentlySelectedRevisionId;
+
+	useEffect( () => {
+		/*
+		 * Ensure that the first item is selected and loaded into the preview pane
+		 * when no revision is selected and the selected styles don't match the current editor styles.
+		 * This is required in case editor styles are changed outside the revisions panel,
+		 * e.g., via the reset styles function of useGlobalStylesReset().
+		 * See: https://github.com/WordPress/gutenberg/issues/55866
+		 */
+		if ( shouldSelectFirstItem ) {
+			setCurrentlySelectedRevision( {
+				styles: firstRevision?.styles || {},
+				settings: firstRevision?.settings || {},
+				id: firstRevision?.id,
+			} );
+		}
+	}, [ shouldSelectFirstItem, firstRevision ] );
+
+	// Only display load button if there is a revision to load and it is different from the current editor styles.
 	const isLoadButtonEnabled =
-		!! globalStylesRevision?.id &&
-		! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
+		!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;
 	const shouldShowRevisions = ! isLoading && revisions.length;
 
 	return (
@@ -95,7 +121,7 @@ function ScreenRevisions() {
 			<ScreenHeader
 				title={ __( 'Revisions' ) }
 				description={ __(
-					'Revisions are added to the timeline when style changes are saved.'
+					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
 				) }
 			/>
 			{ isLoading && (
@@ -105,13 +131,13 @@ function ScreenRevisions() {
 				<>
 					<Revisions
 						blocks={ blocks }
-						userConfig={ globalStylesRevision }
+						userConfig={ currentlySelectedRevision }
 						onClose={ onCloseRevisions }
 					/>
 					<div className="edit-site-global-styles-screen-revisions">
 						<RevisionsButtons
 							onChange={ selectRevision }
-							selectedRevisionId={ selectedRevisionId }
+							selectedRevisionId={ currentlySelectedRevisionId }
 							userRevisions={ revisions }
 						/>
 						{ isLoadButtonEnabled && (
@@ -120,8 +146,9 @@ function ScreenRevisions() {
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__button"
 									disabled={
-										! globalStylesRevision?.id ||
-										globalStylesRevision?.id === 'unsaved'
+										! currentlySelectedRevisionId ||
+										currentlySelectedRevisionId ===
+											'unsaved'
 									}
 									onClick={ () => {
 										if ( hasUnsavedChanges ) {
@@ -130,12 +157,12 @@ function ScreenRevisions() {
 											);
 										} else {
 											restoreRevision(
-												globalStylesRevision
+												currentlySelectedRevision
 											);
 										}
 									} }
 								>
-									{ globalStylesRevision?.id === 'parent'
+									{ currentlySelectedRevisionId === 'parent'
 										? __( 'Reset to defaults' )
 										: __( 'Apply' ) }
 								</Button>
@@ -147,7 +174,7 @@ function ScreenRevisions() {
 							isOpen={ isLoadingRevisionWithUnsavedChanges }
 							confirmButtonText={ __( 'Apply' ) }
 							onConfirm={ () =>
-								restoreRevision( globalStylesRevision )
+								restoreRevision( currentlySelectedRevision )
 							}
 							onCancel={ () =>
 								setIsLoadingRevisionWithUnsavedChanges( false )

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

@@ -27,8 +27,9 @@ import RootMenu from './root-menu';
 import StylesPreview from './preview';
 import { unlock } from '../../lock-unlock';
 
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
 function ScreenRoot() {
-	const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 	const [ customCSS ] = useGlobalStyle( 'css' );
 
 	const { hasVariations, canEditCSS } = useSelect( ( select ) => {

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

@@ -50,6 +50,7 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
+const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 	createSlotFill( SLOT_FILL_NAME );
 
@@ -127,7 +128,6 @@ function GlobalStylesRevisionsMenu() {
 				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
 		};
 	}, [] );
-	const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(

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

@@ -32,7 +32,7 @@ function useGlobalStylesRenderer() {
 			styles: [ ...nonGlobalStyles, ...styles ],
 			__experimentalFeatures: settings,
 		} );
-	}, [ styles, settings ] );
+	}, [ styles, settings, updateSettings, getSettings ] );
 }
 
 export function GlobalStylesRenderer() {

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

@@ -0,0 +1,201 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useRef } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	ToolSelector,
+	NavigableToolbar,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { _x, __ } from '@wordpress/i18n';
+import { listView, plus, chevronUpDown } from '@wordpress/icons';
+import { Button, ToolbarItem } from '@wordpress/components';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import UndoButton from '../undo-redo/undo';
+import RedoButton from '../undo-redo/redo';
+import { store as editSiteStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+
+const preventDefault = ( event ) => {
+	event.preventDefault();
+};
+
+export default function DocumentTools( {
+	blockEditorMode,
+	hasFixedToolbar,
+	isDistractionFree,
+	showIconLabels,
+	setListViewToggleElement,
+} ) {
+	const inserterButton = useRef();
+	const { isInserterOpen, isListViewOpen, listViewShortcut, isVisualMode } =
+		useSelect( ( select ) => {
+			const {
+				__experimentalGetPreviewDeviceType,
+				isInserterOpened,
+				isListViewOpened,
+				getEditorMode,
+			} = select( editSiteStore );
+			const { getShortcutRepresentation } = select(
+				keyboardShortcutsStore
+			);
+
+			return {
+				deviceType: __experimentalGetPreviewDeviceType(),
+				isInserterOpen: isInserterOpened(),
+				isListViewOpen: isListViewOpened(),
+				listViewShortcut: getShortcutRepresentation(
+					'core/edit-site/toggle-list-view'
+				),
+				isVisualMode: getEditorMode() === 'visual',
+			};
+		}, [] );
+
+	const {
+		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
+		setIsInserterOpened,
+		setIsListViewOpened,
+	} = useDispatch( editSiteStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
+	const isLargeViewport = useViewportMatch( 'medium' );
+
+	const toggleInserter = useCallback( () => {
+		if ( isInserterOpen ) {
+			// 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 );
+		}
+	}, [ isInserterOpen, setIsInserterOpened ] );
+
+	const toggleListView = useCallback(
+		() => setIsListViewOpened( ! isListViewOpen ),
+		[ 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;
+
+	/* translators: button label text should, if possible, be under 16 characters. */
+	const longLabel = _x(
+		'Toggle block inserter',
+		'Generic label for block inserter button'
+	);
+	const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
+
+	const isZoomedOutViewExperimentEnabled =
+		window?.__experimentalEnableZoomedOutView && isVisualMode;
+	const isZoomedOutView = blockEditorMode === 'zoom-out';
+
+	return (
+		<NavigableToolbar
+			className="edit-site-header-edit-mode__document-tools"
+			aria-label={ __( 'Document tools' ) }
+			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+		>
+			<div className="edit-site-header-edit-mode__toolbar">
+				{ ! isDistractionFree && (
+					<ToolbarItem
+						ref={ inserterButton }
+						as={ Button }
+						className="edit-site-header-edit-mode__inserter-toggle"
+						variant="primary"
+						isPressed={ isInserterOpen }
+						onMouseDown={ preventDefault }
+						onClick={ toggleInserter }
+						disabled={ ! isVisualMode }
+						icon={ plus }
+						label={ showIconLabels ? shortLabel : longLabel }
+						showTooltip={ ! showIconLabels }
+						aria-expanded={ isInserterOpen }
+					/>
+				) }
+				{ isLargeViewport && (
+					<>
+						{ ! hasFixedToolbar && (
+							<ToolbarItem
+								as={ ToolSelector }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								disabled={ ! isVisualMode }
+							/>
+						) }
+						<ToolbarItem
+							as={ UndoButton }
+							showTooltip={ ! showIconLabels }
+							variant={ showIconLabels ? 'tertiary' : undefined }
+						/>
+						<ToolbarItem
+							as={ RedoButton }
+							showTooltip={ ! showIconLabels }
+							variant={ showIconLabels ? 'tertiary' : undefined }
+						/>
+						{ ! isDistractionFree && (
+							<ToolbarItem
+								as={ Button }
+								className="edit-site-header-edit-mode__list-view-toggle"
+								disabled={ ! isVisualMode || isZoomedOutView }
+								icon={ listView }
+								isPressed={ isListViewOpen }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								label={ __( 'List View' ) }
+								onClick={ toggleListView }
+								ref={ setListViewToggleElement }
+								shortcut={ listViewShortcut }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								aria-expanded={ isListViewOpen }
+							/>
+						) }
+						{ isZoomedOutViewExperimentEnabled &&
+							! isDistractionFree &&
+							! hasFixedToolbar && (
+								<ToolbarItem
+									as={ Button }
+									className="edit-site-header-edit-mode__zoom-out-view-toggle"
+									icon={ chevronUpDown }
+									isPressed={ isZoomedOutView }
+									/* translators: button label text should, if possible, be under 16 characters. */
+									label={ __( 'Zoom-out View' ) }
+									onClick={ () => {
+										setPreviewDeviceType( 'Desktop' );
+										__unstableSetEditorMode(
+											isZoomedOutView
+												? 'edit'
+												: 'zoom-out'
+										);
+									} }
+								/>
+							) }
+					</>
+				) }
+			</div>
+		</NavigableToolbar>
+	);
+}