@wordpress/edit-post 7.24.0 → 7.25.0

package/src/components/header/style.scss

@@ -52,12 +52,43 @@
 		}
 	}
 
-	.block-editor-block-contextual-toolbar.is-fixed {
-		border: none;
-	}
-
 	.selected-block-tools-wrapper {
 		overflow-x: hidden;
+		display: flex;
+
+		.block-editor-block-contextual-toolbar {
+			border-bottom: 0;
+		}
+
+		&::after {
+			content: "";
+			width: $border-width;
+			margin-top: $grid-unit + $grid-unit-05;
+			margin-bottom: $grid-unit + $grid-unit-05;
+			background-color: $gray-300;
+			margin-left: $grid-unit;
+		}
+
+		// Modified group borders
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right: none;
+
+			&::after {
+				content: "";
+				width: $border-width;
+				margin-top: $grid-unit + $grid-unit-05;
+				margin-bottom: $grid-unit + $grid-unit-05;
+				background-color: $gray-300;
+				margin-left: $grid-unit;
+			}
+
+			& .components-toolbar-group.components-toolbar-group {
+				&::after {
+					display: none;
+				}
+			}
+		}
 
 		&.is-collapsed {
 			display: none;
@@ -93,34 +124,7 @@
 		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
 	}
 
-	gap: $grid-unit-05;
-
-	@include break-small() {
-		gap: $grid-unit-10;
-	}
-}
-
-.edit-post-header-preview__grouping-external {
-	display: flex;
-	position: relative;
-	padding-bottom: 0;
-}
-
-.edit-post-header-preview__button-external {
-	padding-left: $grid-unit-10;
-
-	margin-right: auto;
-	width: 100%;
-	display: flex;
-	justify-content: flex-start;
-
-	svg {
-		margin-left: auto;
-	}
-}
-
-.edit-post-post-preview-dropdown .components-popover__content {
-	padding-bottom: 0;
+	gap: $grid-unit-10;
 }
 
 /**
@@ -189,6 +193,22 @@
 	}
 }
 
+.show-icon-labels {
+
+	.edit-post-header__toolbar .block-editor-block-mover {
+		border-left: none;
+
+		&::before {
+			content: "";
+			width: $border-width;
+			margin-top: $grid-unit + $grid-unit-05;
+			margin-bottom: $grid-unit + $grid-unit-05;
+			background-color: $gray-300;
+			margin-left: $grid-unit;
+		}
+	}
+}
+
 .edit-post-header__dropdown {
 	.components-menu-item__button.components-menu-item__button,
 	.components-button.editor-history__undo,
@@ -231,6 +251,12 @@
 	}
 }
 
+.edit-post-header__post-preview-button {
+	@include break-small {
+		display: none;
+	}
+}
+
 .is-distraction-free {
 	.interface-interface-skeleton__header {
 		border-bottom: none;
@@ -245,13 +271,13 @@
 
 
 		// hide some parts
-		& > .edit-post-header__settings > .editor-post-preview {
+		& > .edit-post-header__settings > .edit-post-header__post-preview-button {
 			visibility: hidden;
 		}
 
 		& > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle,
 		& > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle,
-		& > .edit-post-header__settings > .block-editor-post-preview__dropdown,
+		& > .edit-post-header__settings > .editor-preview-dropdown,
 		& > .edit-post-header__settings > .interface-pinned-items {
 			display: none;
 		}

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry } 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 blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -19,11 +18,6 @@ import { store as postEditorStore } from '../../../store';
 
 function WritingMenu() {
 	const registry = useRegistry();
-	const isDistractionFree = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().isDistractionFree,
-		[]
-	);
 
 	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
 		useDispatch( postEditorStore );
@@ -38,6 +32,10 @@ function WritingMenu() {
 		} );
 	};
 
+	const turnOffDistractionFree = () => {
+		setPreference( 'core/edit-post', 'distractionFree', false );
+	};
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	if ( ! isLargeViewport ) {
 		return null;
@@ -47,8 +45,8 @@ function WritingMenu() {
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
-				disabled={ isDistractionFree }
 				name="fixedToolbar"
+				onToggle={ turnOffDistractionFree }
 				label={ __( 'Top toolbar' ) }
 				info={ __(
 					'Access all block and document tools in a single place'
@@ -56,6 +54,16 @@ function WritingMenu() {
 				messageActivated={ __( 'Top toolbar activated' ) }
 				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
+			<PreferenceToggleMenuItem
+				scope="core/edit-post"
+				name="distractionFree"
+				onToggle={ toggleDistractionFree }
+				label={ __( 'Distraction free' ) }
+				info={ __( 'Write with calmness' ) }
+				messageActivated={ __( 'Distraction free mode activated' ) }
+				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
+				shortcut={ displayShortcut.primaryShift( '\\' ) }
+			/>
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
 				name="focusMode"
@@ -73,16 +81,6 @@ function WritingMenu() {
 				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
 				shortcut={ displayShortcut.secondary( 'f' ) }
 			/>
-			<PreferenceToggleMenuItem
-				scope="core/edit-post"
-				name="distractionFree"
-				onToggle={ toggleDistractionFree }
-				label={ __( 'Distraction free' ) }
-				info={ __( 'Write with calmness' ) }
-				messageActivated={ __( 'Distraction free mode activated' ) }
-				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
-				shortcut={ displayShortcut.primaryShift( '\\' ) }
-			/>
 		</MenuGroup>
 	);
 }

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -898,7 +898,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
               class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
             >
               <kbd
-                aria-label="Shift + Alt + 1 6"
+                aria-label="Shift + Alt + 1-6"
                 class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
               >
                 <kbd

package/src/components/layout/index.js

@@ -21,6 +21,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	useBlockCommands,
 	BlockBreadcrumb,
+	BlockToolbar,
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -138,7 +139,9 @@ function Layout() {
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
-	const isLargeViewport = useViewportMatch( 'large' );
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
 		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -148,7 +151,6 @@ function Layout() {
 		isRichEditingEnabled,
 		sidebarIsOpened,
 		hasActiveMetaboxes,
-		hasFixedToolbar,
 		previousShortcut,
 		nextShortcut,
 		hasBlockSelected,
@@ -157,7 +159,7 @@ function Layout() {
 		showIconLabels,
 		isDistractionFree,
 		showBlockBreadcrumbs,
-		isTemplateMode,
+		showMetaBoxes,
 		documentLabel,
 	} = useSelect( ( select ) => {
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
@@ -165,9 +167,8 @@ function Layout() {
 		const postTypeLabel = getPostTypeLabel();
 
 		return {
-			isTemplateMode: select( editPostStore ).isEditingTemplate(),
-			hasFixedToolbar:
-				select( editPostStore ).isFeatureActive( 'fixedToolbar' ),
+			showMetaBoxes:
+				select( editorStore ).getRenderingMode() === 'post-only',
 			sidebarIsOpened: !! (
 				select( interfaceStore ).getActiveComplementaryArea(
 					editPostStore.name
@@ -218,12 +219,12 @@ function Layout() {
 		if ( sidebarIsOpened && ! isHugeViewport ) {
 			setIsInserterOpened( false );
 		}
-	}, [ sidebarIsOpened, isHugeViewport ] );
+	}, [ isHugeViewport, setIsInserterOpened, sidebarIsOpened ] );
 	useEffect( () => {
 		if ( isInserterOpened && ! isHugeViewport ) {
 			closeGeneralSidebar();
 		}
-	}, [ isInserterOpened, isHugeViewport ] );
+	}, [ closeGeneralSidebar, isInserterOpened, isHugeViewport ] );
 
 	// Local state for save panel.
 	// Note 'truthy' callback implies an open panel.
@@ -252,9 +253,8 @@ function Layout() {
 
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
 		'is-sidebar-opened': sidebarIsOpened,
-		'has-fixed-toolbar': hasFixedToolbar,
 		'has-metaboxes': hasActiveMetaboxes,
-		'is-distraction-free': isDistractionFree && isLargeViewport,
+		'is-distraction-free': isDistractionFree && isWideViewport,
 		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
 	} );
 
@@ -301,7 +301,7 @@ function Layout() {
 			<EditorKeyboardShortcuts />
 
 			<InterfaceSkeleton
-				isDistractionFree={ isDistractionFree && isLargeViewport }
+				isDistractionFree={ isDistractionFree && isWideViewport }
 				className={ className }
 				labels={ {
 					...interfaceLabels,
@@ -345,10 +345,11 @@ function Layout() {
 						{ ( mode === 'text' || ! isRichEditingEnabled ) && (
 							<TextEditor />
 						) }
+						{ ! isLargeViewport && <BlockToolbar hideDragHandle /> }
 						{ isRichEditingEnabled && mode === 'visual' && (
 							<VisualEditor styles={ styles } />
 						) }
-						{ ! isDistractionFree && ! isTemplateMode && (
+						{ ! isDistractionFree && showMetaBoxes && (
 							<div className="edit-post-layout__metaboxes">
 								<MetaBoxes location="normal" />
 								<MetaBoxes location="advanced" />

package/src/components/preferences-modal/index.js

@@ -76,6 +76,10 @@ export default function EditPostPreferencesModal() {
 		closeGeneralSidebar();
 	};
 
+	const turnOffDistractionFree = () => {
+		setPreference( 'core/edit-post', 'distractionFree', false );
+	};
+
 	const sections = useMemo(
 		() => [
 			{
@@ -86,49 +90,16 @@ export default function EditPostPreferencesModal() {
 						{ isLargeViewport && (
 							<PreferencesModalSection
 								title={ __( 'Publishing' ) }
-								description={ __(
-									'Change options related to publishing.'
-								) }
 							>
 								<EnablePublishSidebarOption
 									help={ __(
 										'Review settings, such as visibility and tags.'
 									) }
-									label={ __(
-										'Include pre-publish checklist'
-									) }
+									label={ __( 'Enable pre-publish flow' ) }
 								/>
 							</PreferencesModalSection>
 						) }
-
-						<PreferencesModalSection
-							title={ __( 'Appearance' ) }
-							description={ __(
-								'Customize options related to the block editor interface and editing flow.'
-							) }
-						>
-							<EnableFeature
-								featureName="distractionFree"
-								onToggle={ toggleDistractionFree }
-								help={ __(
-									'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
-								) }
-								label={ __( 'Distraction free' ) }
-							/>
-							<EnableFeature
-								featureName="focusMode"
-								help={ __(
-									'Highlights the current block and fades other content.'
-								) }
-								label={ __( 'Spotlight mode' ) }
-							/>
-							<EnableFeature
-								featureName="showIconLabels"
-								label={ __( 'Show button text labels' ) }
-								help={ __(
-									'Show text instead of icons on buttons.'
-								) }
-							/>
+						<PreferencesModalSection title={ __( 'Interface' ) }>
 							<EnableFeature
 								featureName="showListViewByDefault"
 								help={ __(
@@ -136,74 +107,20 @@ export default function EditPostPreferencesModal() {
 								) }
 								label={ __( 'Always open list view' ) }
 							/>
-							<EnableFeature
-								featureName="themeStyles"
-								help={ __(
-									'Make the editor look like your theme.'
-								) }
-								label={ __( 'Use theme styles' ) }
-							/>
 							{ showBlockBreadcrumbsOption && (
 								<EnableFeature
 									featureName="showBlockBreadcrumbs"
 									help={ __(
-										'Shows block breadcrumbs at the bottom of the editor.'
+										'Display the block hierarchy trail at the bottom of the editor.'
 									) }
-									label={ __( 'Display block breadcrumbs' ) }
+									label={ __( 'Show block breadcrumbs' ) }
 								/>
 							) }
 						</PreferencesModalSection>
-					</>
-				),
-			},
-			{
-				name: 'blocks',
-				tabLabel: __( 'Blocks' ),
-				content: (
-					<>
-						<PreferencesModalSection
-							title={ __( 'Block interactions' ) }
-							description={ __(
-								'Customize how you interact with blocks in the block library and editing canvas.'
-							) }
-						>
-							<EnableFeature
-								featureName="mostUsedBlocks"
-								help={ __(
-									'Places the most frequent blocks in the block library.'
-								) }
-								label={ __( 'Show most used blocks' ) }
-							/>
-							<EnableFeature
-								featureName="keepCaretInsideBlock"
-								help={ __(
-									'Aids screen readers by stopping text caret from leaving blocks.'
-								) }
-								label={ __(
-									'Contain text cursor inside block'
-								) }
-							/>
-						</PreferencesModalSection>
-						<PreferencesModalSection
-							title={ __( 'Visible blocks' ) }
-							description={ __(
-								"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
-							) }
-						>
-							<BlockManager />
-						</PreferencesModalSection>
-					</>
-				),
-			},
-			{
-				name: 'panels',
-				tabLabel: __( 'Panels' ),
-				content: (
-					<>
 						<PreferencesModalSection
 							title={ __( 'Document settings' ) }
 							description={ __(
-								'Choose what displays in the panel.'
+								'Select what settings are shown in the document panel.'
 							) }
 						>
 							<EnablePluginDocumentSettingPanelOption.Slot />
@@ -242,12 +159,108 @@ export default function EditPostPreferencesModal() {
 								/>
 							</PageAttributesCheck>
 						</PreferencesModalSection>
-						<MetaBoxesSection
-							title={ __( 'Additional' ) }
-							description={ __(
-								'Add extra areas to the editor.'
+						<MetaBoxesSection title={ __( 'Advanced' ) } />
+					</>
+				),
+			},
+			{
+				name: 'appearance',
+				tabLabel: __( 'Appearance' ),
+				content: (
+					<PreferencesModalSection
+						title={ __( 'Appearance' ) }
+						description={ __(
+							'Customize the editor interface to suit your needs.'
+						) }
+					>
+						<EnableFeature
+							featureName="fixedToolbar"
+							onToggle={ turnOffDistractionFree }
+							help={ __(
+								'Access all block and document tools in a single place.'
+							) }
+							label={ __( 'Top toolbar' ) }
+						/>
+						<EnableFeature
+							featureName="distractionFree"
+							onToggle={ toggleDistractionFree }
+							help={ __(
+								'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+							) }
+							label={ __( 'Distraction free' ) }
+						/>
+						<EnableFeature
+							featureName="focusMode"
+							help={ __(
+								'Highlights the current block and fades other content.'
+							) }
+							label={ __( 'Spotlight mode' ) }
+						/>
+						<EnableFeature
+							featureName="themeStyles"
+							help={ __(
+								'Make the editor look like your theme.'
 							) }
+							label={ __( 'Use theme styles' ) }
 						/>
+					</PreferencesModalSection>
+				),
+			},
+			{
+				name: 'accessibility',
+				tabLabel: __( 'Accessibility' ),
+				content: (
+					<>
+						<PreferencesModalSection
+							title={ __( 'Navigation' ) }
+							description={ __(
+								'Optimize the editing experience for enhanced control.'
+							) }
+						>
+							<EnableFeature
+								featureName="keepCaretInsideBlock"
+								help={ __(
+									'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
+								) }
+								label={ __(
+									'Contain text cursor inside block'
+								) }
+							/>
+						</PreferencesModalSection>
+						<PreferencesModalSection title={ __( 'Interface' ) }>
+							<EnableFeature
+								featureName="showIconLabels"
+								label={ __( 'Show button text labels' ) }
+								help={ __(
+									'Show text instead of icons on buttons across the interface.'
+								) }
+							/>
+						</PreferencesModalSection>
+					</>
+				),
+			},
+			{
+				name: 'blocks',
+				tabLabel: __( 'Blocks' ),
+				content: (
+					<>
+						<PreferencesModalSection title={ __( 'Inserter' ) }>
+							<EnableFeature
+								featureName="mostUsedBlocks"
+								help={ __(
+									'Adds a category with the most frequently used blocks in the inserter.'
+								) }
+								label={ __( 'Show most used blocks' ) }
+							/>
+						</PreferencesModalSection>
+						<PreferencesModalSection
+							title={ __( 'Manage block visibility' ) }
+							description={ __(
+								"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
+							) }
+						>
+							<BlockManager />
+						</PreferencesModalSection>
 					</>
 				),
 			},

package/src/components/preferences-modal/test/index.js

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,56 +18,6 @@ jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
 describe( 'EditPostPreferencesModal', () => {
-	describe( 'should match snapshot when the modal is active', () => {
-		afterEach( () => {
-			useViewportMatch.mockClear();
-		} );
-		it( 'large viewports', async () => {
-			useSelect.mockImplementation( () => [ true, true, false ] );
-			useViewportMatch.mockImplementation( () => true );
-			render( <EditPostPreferencesModal /> );
-			const tabPanel = await screen.findByRole( 'tabpanel', {
-				name: 'General',
-			} );
-
-			expect(
-				within( tabPanel ).getByLabelText(
-					'Include pre-publish checklist'
-				)
-			).toBeInTheDocument();
-		} );
-		it( 'small viewports', async () => {
-			useSelect.mockImplementation( () => [ true, true, false ] );
-			useViewportMatch.mockImplementation( () => false );
-			render( <EditPostPreferencesModal /> );
-
-			// The tabpanel is not rendered in small viewports.
-			expect(
-				screen.queryByRole( 'tabpanel', {
-					name: 'General',
-				} )
-			).not.toBeInTheDocument();
-
-			const dialog = screen.getByRole( 'dialog', {
-				name: 'Preferences',
-			} );
-
-			// Checkbox toggle controls are not rendered in small viewports.
-			expect(
-				within( dialog ).queryByLabelText(
-					'Include pre-publish checklist'
-				)
-			).not.toBeInTheDocument();
-
-			// Individual preference nav buttons are rendered in small viewports.
-			expect(
-				within( dialog ).getByRole( 'button', {
-					name: 'General',
-				} )
-			).toBeInTheDocument();
-		} );
-	} );
-
 	it( 'should not render when the modal is not active', () => {
 		useSelect.mockImplementation( () => [ false, false, false ] );
 		render( <EditPostPreferencesModal /> );

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

@@ -13,6 +13,7 @@ import {
 	PostSwitchToDraftButton,
 	PostSyncStatus,
 	PostURLPanel,
+	PostTemplatePanel,
 } from '@wordpress/editor';
 
 /**
@@ -26,7 +27,6 @@ import PostFormat from '../post-format';
 import PostPendingStatus from '../post-pending-status';
 import PluginPostStatusInfo from '../plugin-post-status-info';
 import { store as editPostStore } from '../../../store';
-import PostTemplate from '../post-template';
 
 /**
  * Module Constants
@@ -62,7 +62,7 @@ export default function PostStatus() {
 					<>
 						<PostVisibility />
 						<PostSchedulePanel />
-						<PostTemplate />
+						<PostTemplatePanel />
 						<PostURLPanel />
 						<PostSyncStatus />
 						<PostSticky />