@wordpress/edit-post 7.32.0 → 7.34.0

package/src/components/header/style.scss

@@ -25,6 +25,10 @@
 	// Leave enough room for the focus ring to show.
 	padding: 2px 0;
 	align-items: center;
+	// Allow focus ring to be fully visible on furthest right button.
+	@include break-medium() {
+		padding-right: var(--wp-admin-border-width-focus);
+	}
 
 	.table-of-contents {
 		display: none;
@@ -33,85 +37,6 @@
 			display: block;
 		}
 	}
-
-	.selected-block-tools-wrapper {
-		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;
-			height: $grid-unit-30;
-			background-color: $gray-300;
-			margin-left: $grid-unit;
-		}
-
-		// Modified group borders.
-		.components-toolbar-group,
-		.components-toolbar {
-			border-right: none;
-
-			&::after {
-				content: "";
-				width: $border-width;
-				height: $grid-unit-30;
-				background-color: $gray-300;
-				margin-top: $grid-unit-05;
-				margin-left: $grid-unit;
-			}
-
-			& .components-toolbar-group.components-toolbar-group {
-				&::after {
-					display: none;
-				}
-			}
-		}
-
-		.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;
-		}
-	}
-}
-
-.edit-post-header__block-tools-toggle {
-	margin-left: 2px; // Allow focus ring to be fully visible
 }
 
 .edit-post-header__center {
@@ -286,8 +211,7 @@
 	}
 
 	.edit-post-header {
-		backdrop-filter: blur(20px) !important;
-		background-color: rgba(255, 255, 255, 0.9);
+		background-color: $white;
 		border-bottom: 1px solid #e0e0e0;
 		position: absolute;
 		width: 100%;
@@ -298,7 +222,6 @@
 			visibility: hidden;
 		}
 
-		& > .edit-post-header__toolbar .editor-document-tools__inserter-toggle,
 		& > .edit-post-header__toolbar .editor-document-tools__document-overview-toggle,
 		& > .edit-post-header__settings > .editor-preview-dropdown,
 		& > .edit-post-header__settings > .interface-pinned-items {

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

@@ -2,14 +2,12 @@
  * WordPress dependencies
  */
 import { useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -17,45 +15,8 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { isEditorSidebarOpened } = useSelect( editPostStore );
-	const { openGeneralSidebar, closeGeneralSidebar, toggleFeature } =
-		useDispatch( editPostStore );
+	const { toggleFeature } = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const {
-		getBlockName,
-		getSelectedBlockClientId,
-		getBlockAttributes,
-		getBlockSelectionStart,
-	} = useSelect( blockEditorStore );
-
-	const handleTextLevelShortcut = ( event, level ) => {
-		event.preventDefault();
-		const destinationBlockName =
-			level === 0 ? 'core/paragraph' : 'core/heading';
-		const currentClientId = getSelectedBlockClientId();
-		if ( currentClientId === null ) {
-			return;
-		}
-		const blockName = getBlockName( currentClientId );
-		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
-			return;
-		}
-		const attributes = getBlockAttributes( currentClientId );
-		const textAlign =
-			blockName === 'core/paragraph' ? 'align' : 'textAlign';
-		const destinationTextAlign =
-			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
-
-		replaceBlocks(
-			currentClientId,
-			createBlock( destinationBlockName, {
-				level,
-				content: attributes.content,
-				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
-			} )
-		);
-	};
 
 	useEffect( () => {
 		registerShortcut( {
@@ -67,119 +28,12 @@ function KeyboardShortcuts() {
 				character: 'f',
 			},
 		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/toggle-sidebar',
-			category: 'global',
-			description: __( 'Show or hide the Settings sidebar.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: ',',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/next-region',
-			category: 'global',
-			description: __( 'Navigate to the next part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrl',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'n',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/previous-region',
-			category: 'global',
-			description: __( 'Navigate to the previous part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrlShift',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'p',
-				},
-				{
-					modifier: 'ctrlShift',
-					character: '~',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/keyboard-shortcuts',
-			category: 'main',
-			description: __( 'Display these keyboard shortcuts.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'h',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/transform-heading-to-paragraph',
-			category: 'block-library',
-			description: __( 'Transform heading to paragraph.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: `0`,
-			},
-		} );
-
-		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-			registerShortcut( {
-				name: `core/edit-post/transform-paragraph-to-heading-${ level }`,
-				category: 'block-library',
-				description: __( 'Transform paragraph to heading.' ),
-				keyCombination: {
-					modifier: 'access',
-					character: `${ level }`,
-				},
-			} );
-		} );
 	}, [] );
 
 	useShortcut( 'core/edit-post/toggle-fullscreen', () => {
 		toggleFeature( 'fullscreenMode' );
 	} );
 
-	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
-		// This shortcut has no known clashes, but use preventDefault to prevent any
-		// obscure shortcuts from triggering.
-		event.preventDefault();
-
-		if ( isEditorSidebarOpened() ) {
-			closeGeneralSidebar();
-		} else {
-			const sidebarToOpen = getBlockSelectionStart()
-				? 'edit-post/block'
-				: 'edit-post/document';
-			openGeneralSidebar( sidebarToOpen );
-		}
-	} );
-
-	useShortcut( 'core/edit-post/transform-heading-to-paragraph', ( event ) =>
-		handleTextLevelShortcut( event, 0 )
-	);
-
-	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-		//the loop is based off on a constant therefore
-		//the hook will execute the same way every time
-		//eslint-disable-next-line react-hooks/rules-of-hooks
-		useShortcut(
-			`core/edit-post/transform-paragraph-to-heading-${ level }`,
-			( event ) => handleTextLevelShortcut( event, level )
-		);
-	} );
-
 	return null;
 }
 

package/src/components/layout/index.js

@@ -24,22 +24,17 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Button, ScrollLock } from '@wordpress/components';
+import { ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import {
-	ComplementaryArea,
-	FullscreenMode,
-	InterfaceSkeleton,
-	store as interfaceStore,
-} from '@wordpress/interface';
 import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -47,16 +42,12 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
 import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
-import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
-import EditPostPreferencesModal from '../preferences-modal';
 import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
 import Header from '../header';
 import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
-import ActionsPanel from './actions-panel';
-import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import useCommonCommands from '../../hooks/commands/use-common-commands';
@@ -64,7 +55,16 @@ import useCommonCommands from '../../hooks/commands/use-common-commands';
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const { InserterSidebar, ListViewSidebar } = unlock( editorPrivateApis );
+const {
+	InserterSidebar,
+	ListViewSidebar,
+	ComplementaryArea,
+	FullscreenMode,
+	SavePublishPanels,
+	InterfaceSkeleton,
+	interfaceStore,
+} = unlock( editorPrivateApis );
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -139,8 +139,7 @@ function Layout( { initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
+	const { closeGeneralSidebar } = useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { setIsInserterOpened } = useDispatch( editorStore );
 	const {
@@ -160,6 +159,7 @@ function Layout( { initialPost } ) {
 		showMetaBoxes,
 		documentLabel,
 		hasHistory,
+		hasBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
@@ -170,9 +170,8 @@ function Layout( { initialPost } ) {
 			showMetaBoxes:
 				select( editorStore ).getRenderingMode() === 'post-only',
 			sidebarIsOpened: !! (
-				select( interfaceStore ).getActiveComplementaryArea(
-					editPostStore.name
-				) || select( editorStore ).isPublishSidebarOpened()
+				select( interfaceStore ).getActiveComplementaryArea( 'core' ) ||
+				select( editorStore ).isPublishSidebarOpened()
 			),
 			isFullscreenActive:
 				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
@@ -183,10 +182,10 @@ function Layout( { initialPost } ) {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			previousShortcut: select(
 				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-post/previous-region' ),
+			).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
 			nextShortcut: select(
 				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
+			).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
@@ -195,6 +194,7 @@ function Layout( { initialPost } ) {
 			hasBlockSelected:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
+			hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 		};
 	}, [] );
 
@@ -206,11 +206,6 @@ function Layout( { initialPost } ) {
 
 	const styles = useEditorStyles();
 
-	const openSidebarPanel = () =>
-		openGeneralSidebar(
-			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
-		);
-
 	// Inserter and Sidebars are mutually exclusive
 	useEffect( () => {
 		if ( sidebarIsOpened && ! isHugeViewport ) {
@@ -250,6 +245,8 @@ function Layout( { initialPost } ) {
 		'has-metaboxes': hasActiveMetaboxes,
 		'is-distraction-free': isDistractionFree && isWideViewport,
 		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+		'has-block-breadcrumbs':
+			hasBlockBreadcrumbs && ! isDistractionFree && isWideViewport,
 	} );
 
 	const secondarySidebarLabel = isListViewOpened
@@ -294,6 +291,7 @@ function Layout( { initialPost } ) {
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
 			<EditorKeyboardShortcuts />
+			<BlockKeyboardShortcuts />
 
 			<InterfaceSkeleton
 				isDistractionFree={ isDistractionFree && isWideViewport }
@@ -313,25 +311,8 @@ function Layout( { initialPost } ) {
 				editorNotices={ <EditorNotices /> }
 				secondarySidebar={ secondarySidebar() }
 				sidebar={
-					( ( isMobileViewport && sidebarIsOpened ) ||
-						( ! isMobileViewport && ! isDistractionFree ) ) && (
-						<>
-							{ ! isMobileViewport && ! sidebarIsOpened && (
-								<div className="edit-post-layout__toggle-sidebar-panel">
-									<Button
-										variant="secondary"
-										className="edit-post-layout__toggle-sidebar-panel-button"
-										onClick={ openSidebarPanel }
-										aria-expanded={ false }
-									>
-										{ hasBlockSelected
-											? __( 'Open block settings' )
-											: __( 'Open document settings' ) }
-									</Button>
-								</div>
-							) }
-							<ComplementaryArea.Slot scope="core/edit-post" />
-						</>
+					! isDistractionFree && (
+						<ComplementaryArea.Slot scope="core" />
 					)
 				}
 				notices={ <EditorSnackbars /> }
@@ -368,7 +349,7 @@ function Layout( { initialPost } ) {
 					)
 				}
 				actions={
-					<ActionsPanel
+					<SavePublishPanels
 						closeEntitiesSavedStates={ closeEntitiesSavedStates }
 						isEntitiesSavedStatesOpen={
 							entitiesSavedStatesCallback
@@ -376,6 +357,7 @@ function Layout( { initialPost } ) {
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
+						forceIsDirtyPublishPanel={ hasActiveMetaboxes }
 					/>
 				}
 				shortcuts={ {
@@ -383,11 +365,8 @@ function Layout( { initialPost } ) {
 					next: nextShortcut,
 				} }
 			/>
-			<EditPostPreferencesModal />
-			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
 			<InitPatternModal />
-			<StartPageOptions />
 			<PluginArea onError={ onPluginAreaError } />
 			{ ! isDistractionFree && <SettingsSidebar /> }
 		</>

package/src/components/layout/style.scss

@@ -7,95 +7,22 @@
 .edit-post-layout .components-editor-notices__snackbar {
 	position: fixed;
 	right: 0;
-	bottom: 40px;
+	bottom: 16px;
 	padding-left: 16px;
 	padding-right: 16px;
 }
 
 .is-distraction-free {
 	.components-editor-notices__snackbar {
-		bottom: 20px;
+		bottom: 16px;
 	}
 }
 
-@include editor-left(".edit-post-layout .components-editor-notices__snackbar");
-
-.edit-post-layout .editor-post-publish-panel {
-	position: fixed;
-	z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
-	top: $admin-bar-height-big;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	overflow: auto;
-
-	@include break-medium() {
-		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
-		top: $admin-bar-height;
-		left: auto;
-		width: $sidebar-width + $border-width;
-		border-left: $border-width solid $gray-300;
-		transform: translateX(+100%);
-		animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
-		@include reduce-motion("animation");
-
-		body.is-fullscreen-mode & {
-			top: 0;
-		}
-
-		// Keep it open on focus to avoid conflict with navigate-regions animation.
-		[role="region"]:focus & {
-			transform: translateX(0%);
-		}
-	}
-}
-
-@keyframes edit-post-post-publish-panel__slide-in-animation {
-	100% {
-		transform: translateX(0%);
-	}
-}
-
-.edit-post-layout .editor-post-publish-panel__header-publish-button {
-	justify-content: center;
-}
-
-.edit-post-layout__toggle-publish-panel,
-.edit-post-layout__toggle-sidebar-panel,
-.edit-post-layout__toggle-entities-saved-states-panel {
-	z-index: z-index(".edit-post-layout__toggle-sidebar-panel");
-	position: fixed !important; // Need to override the default relative positionning
-	top: -9999em;
-	bottom: auto;
-	left: auto;
-	right: 0;
-	box-sizing: border-box;
-	width: $sidebar-width;
-	background-color: $white;
-	border: 1px dotted $gray-300;
-	height: auto !important; // Need to override the default sidebar positionnings
-	padding: $grid-unit-30;
-	display: flex;
-	justify-content: center;
-}
-
-.edit-post-layout__toggle-sidebar-panel {
-	.interface-interface-skeleton__sidebar:focus &,
-	.interface-interface-skeleton__sidebar:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
-}
-
-.edit-post-layout__toggle-entities-saved-states-panel,
-.edit-post-layout__toggle-publish-panel {
-	.interface-interface-skeleton__actions:focus &,
-	.interface-interface-skeleton__actions:focus-within & {
-		top: auto;
-		bottom: 0;
+// Adjust the position of the notices when breadcrumbs are present
+.has-block-breadcrumbs {
+	.components-editor-notices__snackbar {
+		bottom: 40px;
 	}
 }
 
-.edit-post-layout .entities-saved-states__panel-header {
-	height: $header-height + $border-width;
-}
+@include editor-left(".edit-post-layout .components-editor-notices__snackbar");

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

@@ -3,9 +3,6 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
@@ -14,43 +11,13 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  */
 import { unlock } from '../../lock-unlock';
 import MetaBoxesSection from './meta-boxes-section';
-import EnablePublishSidebarOption from './enable-publish-sidebar';
 
-const { PreferencesModalSection, PreferenceToggleControl } = unlock(
-	preferencesPrivateApis
-);
+const { PreferenceToggleControl } = unlock( preferencesPrivateApis );
 const { PreferencesModal } = unlock( editorPrivateApis );
 
-export const PREFERENCES_MODAL_NAME = 'edit-post/preferences';
-
 export default function EditPostPreferencesModal() {
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const { closeModal } = useDispatch( interfaceStore );
-	const { isModalActive } = useSelect( ( select ) => {
-		const modalActive = select( interfaceStore ).isModalActive(
-			PREFERENCES_MODAL_NAME
-		);
-		return {
-			isModalActive: modalActive,
-		};
-	}, [] );
-
 	const extraSections = {
-		general: (
-			<>
-				{ isLargeViewport && (
-					<PreferencesModalSection title={ __( 'Publishing' ) }>
-						<EnablePublishSidebarOption
-							help={ __(
-								'Review settings, such as visibility and tags.'
-							) }
-							label={ __( 'Enable pre-publish checks' ) }
-						/>
-					</PreferencesModalSection>
-				) }
-				<MetaBoxesSection title={ __( 'Advanced' ) } />
-			</>
-		),
+		general: <MetaBoxesSection title={ __( 'Advanced' ) } />,
 		appearance: (
 			<PreferenceToggleControl
 				scope="core/edit-post"
@@ -61,15 +28,5 @@ export default function EditPostPreferencesModal() {
 		),
 	};
 
-	if ( ! isModalActive ) {
-		return null;
-	}
-
-	return (
-		<PreferencesModal
-			extraSections={ extraSections }
-			isActive={ isModalActive }
-			onClose={ closeModal }
-		/>
-	);
+	return <PreferencesModal extraSections={ extraSections } />;
 }