@wordpress/edit-post 7.27.1 → 7.28.0

package/src/components/header/style.scss

@@ -12,24 +12,6 @@
 	@include break-zoomed-in {
 		flex-wrap: nowrap;
 	}
-
-	// Some browsers, most notably IE11, honor an older version of the flexbox spec
-	// which takes absolutely positioned items into account when calculating `space-between`.
-	// https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#abspos-flex-items
-	//
-	// This difference is causing our header layout to break when focused in IE11.
-	// Our focused region styles use an absolutely positioned :after pseudo element to draw an outline,
-	// and IE11 is adding space between it and our last real child, shifting righthand UI elements
-	// to the left. For a workaround, we change the flex order to move the undesired spacing to the middle
-	// where it is no longer noticeable.
-	> .edit-post-header__settings {
-		order: 1;
-
-		// Restore default order for all other browsers
-		@supports (position: sticky) {
-			order: initial;
-		}
-	}
 }
 
 .edit-post-header__toolbar {
@@ -53,18 +35,34 @@
 	}
 
 	.selected-block-tools-wrapper {
-		overflow-x: hidden;
+		overflow: hidden;
 		display: flex;
+		align-items: center;
+		height: $header-height;
 
 		.block-editor-block-contextual-toolbar {
 			border-bottom: 0;
+			height: 100%;
+		}
+
+		// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+		.block-editor-block-toolbar {
+			height: 100%;
+			// Push down so that buttons are centered vertically.
+			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+			// but there is a -1px top-margin down the stack that affects this.
+			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+			// Match the height of other buttons in the header toolbar.
+			.components-button:not(.block-editor-block-mover-button) {
+				height: $button-size-compact;
+			}
 		}
 
 		&::after {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit + $grid-unit-05;
-			margin-bottom: $grid-unit + $grid-unit-05;
+			height: $grid-unit-30;
 			background-color: $gray-300;
 			margin-left: $grid-unit;
 		}
@@ -77,9 +75,9 @@
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit + $grid-unit-05;
-				margin-bottom: $grid-unit + $grid-unit-05;
+				height: $grid-unit-30;
 				background-color: $gray-300;
+				margin-top: $grid-unit-05;
 				margin-left: $grid-unit;
 			}
 
@@ -90,6 +88,22 @@
 			}
 		}
 
+		.block-editor-block-mover {
+			// Match the height of other buttons in the header toolbar.
+			&.is-horizontal .block-editor-block-mover-button {
+				height: $button-size-compact;
+				overflow: visible;
+			}
+
+			// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+			@include break-small() {
+				&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+					position: relative;
+					top: -10px;
+				}
+			}
+		}
+
 		&.is-collapsed {
 			display: none;
 		}
@@ -121,7 +135,7 @@
 	padding-right: $grid-unit-05;
 
 	@include break-small () {
-		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
+		padding-right: $grid-unit-10;
 	}
 
 	gap: $grid-unit-10;
@@ -201,9 +215,9 @@
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
+			height: $grid-unit-30;
 			background-color: $gray-300;
+			margin-top: $grid-unit-05;
 			margin-left: $grid-unit;
 		}
 

package/src/components/header/writing-menu/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
@@ -10,7 +10,6 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -18,21 +17,8 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as postEditorStore } from '../../../store';
 
 function WritingMenu() {
-	const registry = useRegistry();
-
-	const { closeGeneralSidebar } = useDispatch( postEditorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editorStore );
-
-	const toggleDistractionFree = () => {
-		registry.batch( () => {
-			setPreference( 'core', 'fixedToolbar', true );
-			setIsInserterOpened( false );
-			setIsListViewOpened( false );
-			closeGeneralSidebar();
-		} );
-	};
+	const { toggleDistractionFree } = useDispatch( postEditorStore );
 
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );
@@ -59,6 +45,7 @@ function WritingMenu() {
 			<PreferenceToggleMenuItem
 				scope="core"
 				name="distractionFree"
+				handleToggling={ false }
 				onToggle={ toggleDistractionFree }
 				label={ __( 'Distraction free' ) }
 				info={ __( 'Write with calmness' ) }

package/src/components/layout/index.js

@@ -131,7 +131,7 @@ function useEditorStyles() {
 	] );
 }
 
-function Layout() {
+function Layout( { initialPost } ) {
 	useCommands();
 	useCommonCommands();
 	useBlockCommands();
@@ -196,7 +196,7 @@ function Layout() {
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 			hasBlockSelected:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
-			hasHistory: !! getEditorSettings().goBack,
+			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
 		};
 	}, [] );
 
@@ -304,6 +304,7 @@ function Layout() {
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
+						initialPost={ initialPost }
 					/>
 				}
 				editorNotices={ <EditorNotices /> }

package/src/components/sidebar/post-visibility/index.js

@@ -72,6 +72,7 @@ function PostVisibilityToggle( { isOpen, onClick } ) {
 	const label = usePostVisibilityLabel();
 	return (
 		<Button
+			__next40pxDefaultSize
 			className="edit-post-post-visibility__toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }

package/src/components/sidebar/settings-header/index.js

@@ -4,6 +4,7 @@
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
@@ -14,23 +15,30 @@ import { sidebars } from '../settings-sidebar';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const SettingsHeader = () => {
-	const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
-		const { getPostTypeLabel, getRenderingMode } = select( editorStore );
+const SettingsHeader = ( _, ref ) => {
+	const { documentLabel } = useSelect( ( select ) => {
+		const { getPostTypeLabel } = select( editorStore );
 
 		return {
 			// translators: Default label for the Document sidebar tab, not selected.
 			documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ),
-			isTemplateMode: getRenderingMode() === 'template-only',
 		};
 	}, [] );
 
 	return (
-		<Tabs.TabList>
-			<Tabs.Tab tabId={ sidebars.document }>
-				{ isTemplateMode ? __( 'Template' ) : documentLabel }
+		<Tabs.TabList ref={ ref }>
+			<Tabs.Tab
+				tabId={ sidebars.document }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ sidebars.document }
+			>
+				{ documentLabel }
 			</Tabs.Tab>
-			<Tabs.Tab tabId={ sidebars.block }>
+			<Tabs.Tab
+				tabId={ sidebars.block }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ sidebars.block }
+			>
 				{ /* translators: Text label for the Block Settings Sidebar tab. */ }
 				{ __( 'Block' ) }
 			</Tabs.Tab>
@@ -38,4 +46,4 @@ const SettingsHeader = () => {
 	);
 };
 
-export default SettingsHeader;
+export default forwardRef( SettingsHeader );

package/src/components/sidebar/settings-sidebar/index.js

@@ -6,7 +6,13 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Platform, useCallback, useContext } from '@wordpress/element';
+import {
+	Platform,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+} from '@wordpress/element';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -48,19 +54,47 @@ export const sidebars = {
 const SidebarContent = ( {
 	sidebarName,
 	keyboardShortcut,
-	isTemplateMode,
+	isEditingTemplate,
 } ) => {
+	const tabListRef = useRef( null );
 	// Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
 	// need to forward the `Tabs` context so it can be passed through the
 	// underlying slot/fill.
 	const tabsContextValue = useContext( Tabs.Context );
 
+	// This effect addresses a race condition caused by tabbing from the last
+	// block in the editor into the settings sidebar. Without this effect, the
+	// selected tab and browser focus can become separated in an unexpected way
+	// (e.g the "block" tab is focused, but the "post" tab is selected).
+	useEffect( () => {
+		const tabsElements = Array.from(
+			tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
+		);
+		const selectedTabElement = tabsElements.find(
+			// We are purposefully using a custom `data-tab-id` attribute here
+			// because we don't want rely on any assumptions about `Tabs`
+			// component internals.
+			( element ) => element.getAttribute( 'data-tab-id' ) === sidebarName
+		);
+		const activeElement = selectedTabElement?.ownerDocument.activeElement;
+		const tabsHasFocus = tabsElements.some( ( element ) => {
+			return activeElement && activeElement.id === element.id;
+		} );
+		if (
+			tabsHasFocus &&
+			selectedTabElement &&
+			selectedTabElement.id !== activeElement?.id
+		) {
+			selectedTabElement?.focus();
+		}
+	}, [ sidebarName ] );
+
 	return (
 		<PluginSidebarEditPost
 			identifier={ sidebarName }
 			header={
 				<Tabs.Context.Provider value={ tabsContextValue }>
-					<SettingsHeader />
+					<SettingsHeader ref={ tabListRef } />
 				</Tabs.Context.Provider>
 			}
 			closeLabel={ __( 'Close Settings' ) }
@@ -77,7 +111,7 @@ const SidebarContent = ( {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					{ ! isTemplateMode && (
+					{ ! isEditingTemplate && (
 						<>
 							<PostStatus />
 							<PluginDocumentSettingPanel.Slot />
@@ -90,7 +124,7 @@ const SidebarContent = ( {
 							<MetaBoxes location="side" />
 						</>
 					) }
-					{ isTemplateMode && <TemplateSummary /> }
+					{ isEditingTemplate && <TemplateSummary /> }
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
 					<BlockInspector />
@@ -105,7 +139,7 @@ const SettingsSidebar = () => {
 		sidebarName,
 		isSettingsSidebarActive,
 		keyboardShortcut,
-		isTemplateMode,
+		isEditingTemplate,
 	} = useSelect( ( select ) => {
 		// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
 		// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
@@ -132,8 +166,8 @@ const SettingsSidebar = () => {
 			sidebarName: sidebar,
 			isSettingsSidebarActive: isSettingsSidebar,
 			keyboardShortcut: shortcut,
-			isTemplateMode:
-				select( editorStore ).getRenderingMode() === 'template-only',
+			isEditingTemplate:
+				select( editorStore ).getCurrentPostType() === 'wp_template',
 		};
 	}, [] );
 
@@ -157,11 +191,12 @@ const SettingsSidebar = () => {
 			// the selected tab to `null` avoids that.
 			selectedTabId={ isSettingsSidebarActive ? sidebarName : null }
 			onSelect={ onTabSelect }
+			selectOnMove={ false }
 		>
 			<SidebarContent
 				sidebarName={ sidebarName }
 				keyboardShortcut={ keyboardShortcut }
-				isTemplateMode={ isTemplateMode }
+				isEditingTemplate={ isEditingTemplate }
 			/>
 		</Tabs>
 	);

package/src/components/sidebar/template-summary/index.js

@@ -4,16 +4,12 @@
 import { Icon, layout } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { Flex, FlexItem, FlexBlock, PanelBody } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 function TemplateSummary() {
 	const template = useSelect( ( select ) => {
-		const { getEditedPostTemplate } = select( editPostStore );
-		return getEditedPostTemplate();
+		const { getCurrentPost } = select( editorStore );
+		return getCurrentPost();
 	}, [] );
 
 	if ( ! template ) {

package/src/components/visual-editor/index.js

@@ -30,6 +30,7 @@ export default function VisualEditor( { styles } ) {
 		renderingMode,
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
+		isEditingTemplate,
 	} = useSelect( ( select ) => {
 		const { isFeatureActive } = select( editPostStore );
 		const { getEditorSettings, getRenderingMode } = select( editorStore );
@@ -43,6 +44,8 @@ export default function VisualEditor( { styles } ) {
 			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
 				return type.apiVersion >= 3;
 			} ),
+			isEditingTemplate:
+				select( editorStore ).getCurrentPostType() === 'wp_template',
 		};
 	}, [] );
 	const hasMetaBoxes = useSelect(
@@ -74,12 +77,11 @@ export default function VisualEditor( { styles } ) {
 	const isToBeIframed =
 		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
 			! hasMetaBoxes ) ||
-		renderingMode === 'template-only';
+		isEditingTemplate;
 
 	return (
 		<div
 			className={ classnames( 'edit-post-visual-editor', {
-				'is-template-mode': renderingMode === 'template-only',
 				'has-inline-canvas': ! isToBeIframed,
 			} ) }
 		>

package/src/components/visual-editor/style.scss

@@ -11,7 +11,7 @@
 	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
 	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
 	// when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
-	background-color: $gray-900;
+	background-color: $gray-300;
 
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.

package/src/components/welcome-guide/index.js

@@ -12,17 +12,18 @@ import WelcomeGuideTemplate from './template';
 import { store as editPostStore } from '../../store';
 
 export default function WelcomeGuide() {
-	const { isActive, isTemplateMode } = useSelect( ( select ) => {
+	const { isActive, isEditingTemplate } = useSelect( ( select ) => {
 		const { isFeatureActive } = select( editPostStore );
-		const { getRenderingMode } = select( editorStore );
-		const _isTemplateMode = getRenderingMode() === 'template-only';
-		const feature = _isTemplateMode
+		const { getCurrentPostType } = select( editorStore );
+		const _isEditingTemplate = getCurrentPostType() === 'wp_template';
+
+		const feature = _isEditingTemplate
 			? 'welcomeGuideTemplate'
 			: 'welcomeGuide';
 
 		return {
 			isActive: isFeatureActive( feature ),
-			isTemplateMode: _isTemplateMode,
+			isEditingTemplate: _isEditingTemplate,
 		};
 	}, [] );
 
@@ -30,5 +31,9 @@ export default function WelcomeGuide() {
 		return null;
 	}
 
-	return isTemplateMode ? <WelcomeGuideTemplate /> : <WelcomeGuideDefault />;
+	return isEditingTemplate ? (
+		<WelcomeGuideTemplate />
+	) : (
+		<WelcomeGuideDefault />
+	);
 }

package/src/editor.js

@@ -13,6 +13,8 @@ import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { CommandMenu } from '@wordpress/commands';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -21,9 +23,17 @@ import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
 import { store as editPostStore } from './store';
 import { unlock } from './lock-unlock';
-import usePostHistory from './hooks/use-post-history';
+import useNavigateToEntityRecord from './hooks/use-navigate-to-entity-record';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
+const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
+// Prevent accidental removal of certain blocks, asking the user for
+// confirmation.
+const blockRemovalRules = {
+	'bindings/core/pattern-overrides': __(
+		'Blocks from synced patterns that can have overriden content.'
+	),
+};
 
 function Editor( {
 	postId: initialPostId,
@@ -32,46 +42,28 @@ function Editor( {
 	initialEdits,
 	...props
 } ) {
-	const { currentPost, getPostLinkProps, goBack } = usePostHistory(
-		initialPostId,
-		initialPostType
-	);
+	const {
+		initialPost,
+		currentPost,
+		onNavigateToEntityRecord,
+		onNavigateToPreviousEntityRecord,
+	} = useNavigateToEntityRecord( initialPostId, initialPostType );
 
 	const { hasInlineToolbar, post, preferredStyleVariations, template } =
 		useSelect(
 			( select ) => {
 				const { isFeatureActive, getEditedPostTemplate } =
 					select( editPostStore );
-				const {
-					getEntityRecord,
-					getPostType,
-					getEntityRecords,
-					canUser,
-				} = select( coreStore );
+				const { getEntityRecord, getPostType, canUser } =
+					select( coreStore );
 				const { getEditorSettings } = select( editorStore );
-				const isTemplate = [
-					'wp_template',
-					'wp_template_part',
-				].includes( currentPost.postType );
-				// Ideally the initializeEditor function should be called using the ID of the REST endpoint.
-				// to avoid the special case.
-				let postObject;
-				if ( isTemplate ) {
-					const posts = getEntityRecords(
-						'postType',
-						currentPost.postType,
-						{
-							wp_id: currentPost.postId,
-						}
-					);
-					postObject = posts?.[ 0 ];
-				} else {
-					postObject = getEntityRecord(
-						'postType',
-						currentPost.postType,
-						currentPost.postId
-					);
-				}
+
+				const postObject = getEntityRecord(
+					'postType',
+					currentPost.postType,
+					currentPost.postId
+				);
+
 				const supportsTemplateMode =
 					getEditorSettings().supportsTemplateMode;
 				const isViewable =
@@ -84,7 +76,10 @@ function Editor( {
 						'preferredStyleVariations'
 					),
 					template:
-						supportsTemplateMode && isViewable && canEditTemplate
+						supportsTemplateMode &&
+						isViewable &&
+						canEditTemplate &&
+						currentPost.postType !== 'wp_template'
 							? getEditedPostTemplate()
 							: null,
 					post: postObject,
@@ -94,27 +89,31 @@ function Editor( {
 		);
 
 	const { updatePreferredStyleVariations } = useDispatch( editPostStore );
+	const defaultRenderingMode =
+		currentPost.postType === 'wp_template' ? 'all' : 'post-only';
 
-	const editorSettings = useMemo( () => {
-		const result = {
+	const editorSettings = useMemo(
+		() => ( {
 			...settings,
-			getPostLinkProps,
-			goBack,
+			onNavigateToEntityRecord,
+			onNavigateToPreviousEntityRecord,
+			defaultRenderingMode,
 			__experimentalPreferredStyleVariations: {
 				value: preferredStyleVariations,
 				onChange: updatePreferredStyleVariations,
 			},
 			hasInlineToolbar,
-		};
-		return result;
-	}, [
-		settings,
-		hasInlineToolbar,
-		preferredStyleVariations,
-		updatePreferredStyleVariations,
-		getPostLinkProps,
-		goBack,
-	] );
+		} ),
+		[
+			settings,
+			hasInlineToolbar,
+			preferredStyleVariations,
+			updatePreferredStyleVariations,
+			onNavigateToEntityRecord,
+			onNavigateToPreviousEntityRecord,
+			defaultRenderingMode,
+		]
+	);
 
 	if ( ! post ) {
 		return null;
@@ -133,7 +132,8 @@ function Editor( {
 				<ErrorBoundary>
 					<CommandMenu />
 					<EditorInitialization postId={ currentPost.postId } />
-					<Layout />
+					<Layout initialPost={ initialPost } />
+					<BlockRemovalWarningModal rules={ blockRemovalRules } />
 				</ErrorBoundary>
 				<PostLockedModal />
 			</ExperimentalEditorProvider>