@wordpress/edit-site 5.25.0 → 5.26.0

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

@@ -1,201 +1,69 @@
 /**
  * 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 { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { _x, __ } from '@wordpress/i18n';
-import { listView, plus, chevronUpDown } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { chevronUpDown } from '@wordpress/icons';
 import { Button, ToolbarItem } from '@wordpress/components';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * 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();
-};
+const { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );
 
 export default function DocumentTools( {
 	blockEditorMode,
 	hasFixedToolbar,
 	isDistractionFree,
-	showIconLabels,
-	setListViewToggleElement,
 } ) {
-	const inserterButton = useRef();
-	const { isInserterOpen, isListViewOpen, listViewShortcut, isVisualMode } =
-		useSelect( ( select ) => {
-			const { isInserterOpened, isListViewOpened, getEditorMode } =
-				select( editSiteStore );
-			const { getShortcutRepresentation } = select(
-				keyboardShortcutsStore
-			);
-
-			return {
-				isInserterOpen: isInserterOpened(),
-				isListViewOpen: isListViewOpened(),
-				listViewShortcut: getShortcutRepresentation(
-					'core/edit-site/toggle-list-view'
-				),
-				isVisualMode: getEditorMode() === 'visual',
-			};
-		}, [] );
+	const { isVisualMode } = useSelect( ( select ) => {
+		const { getEditorMode } = select( editSiteStore );
 
-	const { setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editSiteStore );
+		return {
+			isVisualMode: getEditorMode() === 'visual',
+		};
+	}, [] );
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const { setDeviceType } = useDispatch( editorStore );
-
 	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 }
+		<EditorDocumentTools
+			disableBlockTools={ ! isVisualMode }
+			listViewLabel={ __( 'List View' ) }
 		>
-			<div className="edit-site-header-edit-mode__toolbar">
-				{ ! isDistractionFree && (
+			{ isZoomedOutViewExperimentEnabled &&
+				isLargeViewport &&
+				! isDistractionFree &&
+				! hasFixedToolbar && (
 					<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 }
+						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={ () => {
+							setDeviceType( 'Desktop' );
+							__unstableSetEditorMode(
+								isZoomedOutView ? 'edit' : 'zoom-out'
+							);
+						} }
 						size="compact"
 					/>
 				) }
-				{ isLargeViewport && (
-					<>
-						{ ! hasFixedToolbar && (
-							<ToolbarItem
-								as={ ToolSelector }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								disabled={ ! isVisualMode }
-								size="compact"
-							/>
-						) }
-						<ToolbarItem
-							as={ UndoButton }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							size="compact"
-						/>
-						<ToolbarItem
-							as={ RedoButton }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							size="compact"
-						/>
-						{ ! 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 }
-								size="compact"
-							/>
-						) }
-						{ 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={ () => {
-										setDeviceType( 'Desktop' );
-										__unstableSetEditorMode(
-											isZoomedOutView
-												? 'edit'
-												: 'zoom-out'
-										);
-									} }
-									size="compact"
-								/>
-							) }
-					</>
-				) }
-			</div>
-		</NavigableToolbar>
+		</EditorDocumentTools>
 	);
 }

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

@@ -42,9 +42,9 @@ import {
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
-const { PreviewDropdown } = unlock( editorPrivateApis );
+const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
 
-export default function HeaderEditMode( { setListViewToggleElement } ) {
+export default function HeaderEditMode() {
 	const {
 		templateType,
 		isDistractionFree,
@@ -66,21 +66,12 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 			templateType: getEditedPostType(),
 			blockEditorMode: __unstableGetEditorMode(),
 			blockSelectionStart: getBlockSelectionStart(),
-			showIconLabels: getPreference(
-				editSiteStore.name,
-				'showIconLabels'
-			),
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
-			hasFixedToolbar: getPreference(
-				editSiteStore.name,
-				'fixedToolbar'
-			),
-			isDistractionFree: getPreference(
-				editSiteStore.name,
-				'distractionFree'
-			),
+			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			isDistractionFree: getPreference( 'core', 'distractionFree' ),
 			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
@@ -136,8 +127,6 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 					<DocumentTools
 						blockEditorMode={ blockEditorMode }
 						isDistractionFree={ isDistractionFree }
-						showIconLabels={ showIconLabels }
-						setListViewToggleElement={ setListViewToggleElement }
 					/>
 					{ isTopToolbar && (
 						<>
@@ -210,13 +199,13 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 							) }
 						>
 							<PreviewDropdown
-								showIconLabels={ showIconLabels }
 								disabled={
 									isFocusMode || ! hasDefaultEditorCanvasView
 								}
 							/>
 						</div>
 					) }
+					<PostViewLink />
 					<SaveButton />
 					{ ! isDistractionFree && (
 						<PinnedItems.Slot scope="core/edit-site" />

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

@@ -33,10 +33,6 @@ function ModeSwitcher() {
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
-			isRichEditingEnabled:
-				select( editSiteStore ).getSettings().richEditingEnabled,
-			isCodeEditingEnabled:
-				select( editSiteStore ).getSettings().codeEditingEnabled,
 			mode: select( editSiteStore ).getEditorMode(),
 		} ),
 		[]

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

@@ -15,6 +15,7 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -37,14 +38,15 @@ import { store as siteEditorStore } from '../../../store';
 export default function MoreMenu( { showIconLabels } ) {
 	const registry = useRegistry();
 
-	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
-		useDispatch( siteEditorStore );
+	const { closeGeneralSidebar } = useDispatch( siteEditorStore );
+	const { setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editorStore );
 	const { openModal } = useDispatch( interfaceStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
-			setPreference( 'core/edit-site', 'fixedToolbar', true );
+			setPreference( 'core', 'fixedToolbar', true );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();
@@ -52,7 +54,7 @@ export default function MoreMenu( { showIconLabels } ) {
 	};
 
 	const turnOffDistractionFree = () => {
-		setPreference( 'core/edit-site', 'distractionFree', false );
+		setPreference( 'core', 'distractionFree', false );
 	};
 
 	return (
@@ -67,7 +69,7 @@ export default function MoreMenu( { showIconLabels } ) {
 					<>
 						<MenuGroup label={ _x( 'View', 'noun' ) }>
 							<PreferenceToggleMenuItem
-								scope="core/edit-site"
+								scope="core"
 								name="fixedToolbar"
 								onToggle={ turnOffDistractionFree }
 								label={ __( 'Top toolbar' ) }
@@ -82,7 +84,7 @@ export default function MoreMenu( { showIconLabels } ) {
 								) }
 							/>
 							<PreferenceToggleMenuItem
-								scope="core/edit-site"
+								scope="core"
 								name="distractionFree"
 								onToggle={ toggleDistractionFree }
 								label={ __( 'Distraction free' ) }
@@ -98,7 +100,7 @@ export default function MoreMenu( { showIconLabels } ) {
 								) }
 							/>
 							<PreferenceToggleMenuItem
-								scope="core/edit-site"
+								scope="core"
 								name="focusMode"
 								label={ __( 'Spotlight mode' ) }
 								info={ __( 'Focus on one block at a time' ) }

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

@@ -99,49 +99,6 @@ $header-toolbar-min-width: 335px;
 	}
 }
 
-.edit-site-header-edit-mode__document-tools {
-	display: flex;
-	border: none;
-
-	// The Toolbar component adds different styles to buttons, so we reset them
-	// here to the original button styles
-	.edit-site-header-edit-mode__toolbar > .components-button.has-icon,
-	.edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
-		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
-		// This is best fixed by making the mover control area a proper single toolbar group.
-		// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
-		height: $button-size-compact;
-		min-width: $button-size-compact;
-		padding: 4px;
-
-		&.is-pressed {
-			background: $gray-900;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: $border-width solid transparent;
-		}
-
-		&::before {
-			display: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
-		// Special dimensions for this button.
-		min-width: $button-size-compact;
-		width: $button-size-compact;
-		height: $button-size-compact;
-		padding: 0;
-	}
-
-	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
-		width: auto;
-		padding: 0 $grid-unit-10;
-	}
-}
-
 // Button text label styles
 
 .edit-site-header-edit-mode.show-icon-labels {
@@ -185,10 +142,6 @@ $header-toolbar-min-width: 335px;
 		padding: 0 $grid-unit-10;
 	}
 
-	.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > * + * {
-		margin-left: $grid-unit-10;
-	}
-
 	.block-editor-block-mover {
 		border-left: none;
 

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -3,7 +3,6 @@
  */
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { createBlock } from '@wordpress/blocks';
@@ -17,10 +16,6 @@ import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcutsEditMode() {
 	const { getEditorMode } = useSelect( editSiteStore );
-	const isListViewOpen = useSelect(
-		( select ) => select( editSiteStore ).isListViewOpened(),
-		[]
-	);
 	const isBlockInspectorOpen = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea(
@@ -28,12 +23,10 @@ function KeyboardShortcutsEditMode() {
 			) === SIDEBAR_BLOCK,
 		[]
 	);
-	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened, switchEditorMode, toggleDistractionFree } =
+	const { switchEditorMode, toggleDistractionFree } =
 		useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
-
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
@@ -66,24 +59,6 @@ function KeyboardShortcutsEditMode() {
 		);
 	};
 
-	useShortcut( 'core/edit-site/undo', ( event ) => {
-		undo();
-		event.preventDefault();
-	} );
-
-	useShortcut( 'core/edit-site/redo', ( event ) => {
-		redo();
-		event.preventDefault();
-	} );
-
-	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
-	useShortcut( 'core/edit-site/toggle-list-view', () => {
-		if ( isListViewOpen ) {
-			return;
-		}
-		setIsListViewOpened( true );
-	} );
-
 	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
 		// This shortcut has no known clashes, but use preventDefault to prevent any
 		// obscure shortcuts from triggering.

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

@@ -3,7 +3,6 @@
  */
 import { useEffect } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -21,48 +20,6 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
-		registerShortcut( {
-			name: 'core/edit-site/undo',
-			category: 'global',
-			description: __( 'Undo your last changes.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 'z',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/redo',
-			category: 'global',
-			description: __( 'Redo your last undo.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'z',
-			},
-			// Disable on Apple OS because it conflicts with the browser's
-			// history shortcut. It's a fine alias for both Windows and Linux.
-			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
-			// Linux, we keep it as the default for consistency.
-			aliases: isAppleOS()
-				? []
-				: [
-						{
-							modifier: 'primary',
-							character: 'y',
-						},
-				  ],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-list-view',
-			category: 'global',
-			description: __( 'Open the block list view.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'o',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-site/toggle-block-settings-sidebar',
 			category: 'global',

package/src/components/layout/index.js

@@ -98,11 +98,11 @@ export default function Layout() {
 				'core/edit-site/next-region'
 			),
 			hasFixedToolbar: select( preferencesStore ).get(
-				'core/edit-site',
+				'core',
 				'fixedToolbar'
 			),
 			isDistractionFree: select( preferencesStore ).get(
-				'core/edit-site',
+				'core',
 				'distractionFree'
 			),
 			hasBlockSelected:
@@ -126,12 +126,9 @@ export default function Layout() {
 		( isMobileViewport && isListPage ) || ( isEditorPage && isEditing );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer ] = useResizeObserver();
-	const [ isResizing ] = useState( false );
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const [ listViewToggleElement, setListViewToggleElement ] =
-		useState( null );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -259,11 +256,7 @@ export default function Layout() {
 									ease: 'easeOut',
 								} }
 							>
-								<Header
-									setListViewToggleElement={
-										setListViewToggleElement
-									}
-								/>
+								<Header />
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
@@ -307,14 +300,7 @@ export default function Layout() {
 						<>
 							{ isListPage && <PageMain /> }
 							{ isEditorPage && (
-								<div
-									className={ classnames(
-										'edit-site-layout__canvas-container',
-										{
-											'is-resizing': isResizing,
-										}
-									) }
-								>
+								<div className="edit-site-layout__canvas-container">
 									{ canvasResizer }
 									{ !! canvasSize.width && (
 										<motion.div
@@ -325,8 +311,7 @@ export default function Layout() {
 															scale: 1.005,
 															transition: {
 																duration:
-																	disableMotion ||
-																	isResizing
+																	disableMotion
 																		? 0
 																		: 0.5,
 																ease: 'easeOut',
@@ -345,10 +330,9 @@ export default function Layout() {
 											) }
 											transition={ {
 												type: 'tween',
-												duration:
-													disableMotion || isResizing
-														? 0
-														: ANIMATION_DURATION,
+												duration: disableMotion
+													? 0
+													: ANIMATION_DURATION,
 												ease: 'easeOut',
 											} }
 										>
@@ -377,9 +361,6 @@ export default function Layout() {
 													} }
 												>
 													<Editor
-														listViewToggleElement={
-															listViewToggleElement
-														}
 														isLoading={
 															isEditorLoading
 														}

package/src/components/layout/style.scss

@@ -20,7 +20,7 @@
 	}
 
 	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$canvas-padding});
+		width: calc(#{$nav-sidebar-width} - #{$grid-unit-30});
 	}
 
 	.edit-site-layout.is-full-canvas & {
@@ -156,14 +156,21 @@
 	}
 }
 
+.edit-site-template-pages-list-view,
+.edit-site-page-pages-list-view {
+	max-width: $nav-sidebar-width;
+}
+
 // This shouldn't be necessary (we should have a way to say that a skeletton is relative
 .edit-site-layout__canvas .interface-interface-skeleton,
-.edit-site-page-pages-preview .interface-interface-skeleton {
+.edit-site-page-pages-preview .interface-interface-skeleton,
+.edit-site-template-pages-preview .interface-interface-skeleton {
 	position: relative !important;
 	min-height: 100% !important;
 }
 
-.edit-site-page-pages-preview {
+.edit-site-page-pages-preview,
+.edit-site-template-pages-preview {
 	height: 100%;
 }
 

package/src/components/list/style.scss

@@ -186,8 +186,3 @@
 	display: block;
 	color: $gray-700;
 }
-
-.edit-site-list-title__customized-info {
-	font-size: 1.3em;
-	font-weight: 600;
-}

package/src/components/page/style.scss

@@ -7,7 +7,7 @@
 	margin-top: $header-height;
 	@include break-medium() {
 		border-radius: 8px;
-		margin: $grid-unit-30 $grid-unit-30 $grid-unit-30 0;
+		margin: $canvas-padding $canvas-padding $canvas-padding 0;
 	}
 }