@wordpress/edit-post 7.33.0 → 7.34.0

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
@@ -19,37 +17,6 @@ import { store as editPostStore } from '../../store';
 function KeyboardShortcuts() {
 	const { toggleFeature } = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
-		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( {
@@ -61,84 +28,12 @@ function KeyboardShortcuts() {
 				character: 'f',
 			},
 		} );
-
-		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/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/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

@@ -34,6 +34,7 @@ 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
@@ -41,14 +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 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 { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import useCommonCommands from '../../hooks/commands/use-common-commands';
@@ -61,9 +60,11 @@ const {
 	ListViewSidebar,
 	ComplementaryArea,
 	FullscreenMode,
+	SavePublishPanels,
 	InterfaceSkeleton,
 	interfaceStore,
 } = unlock( editorPrivateApis );
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -158,6 +159,7 @@ function Layout( { initialPost } ) {
 		showMetaBoxes,
 		documentLabel,
 		hasHistory,
+		hasBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
@@ -180,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' ),
@@ -192,6 +194,7 @@ function Layout( { initialPost } ) {
 			hasBlockSelected:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
+			hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 		};
 	}, [] );
 
@@ -242,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
@@ -286,6 +291,7 @@ function Layout( { initialPost } ) {
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
 			<EditorKeyboardShortcuts />
+			<BlockKeyboardShortcuts />
 
 			<InterfaceSkeleton
 				isDistractionFree={ isDistractionFree && isWideViewport }
@@ -343,7 +349,7 @@ function Layout( { initialPost } ) {
 					)
 				}
 				actions={
-					<ActionsPanel
+					<SavePublishPanels
 						closeEntitiesSavedStates={ closeEntitiesSavedStates }
 						isEntitiesSavedStatesOpen={
 							entitiesSavedStatesCallback
@@ -351,6 +357,7 @@ function Layout( { initialPost } ) {
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
+						forceIsDirtyPublishPanel={ hasActiveMetaboxes }
 					/>
 				}
 				shortcuts={ {
@@ -358,7 +365,6 @@ function Layout( { initialPost } ) {
 					next: nextShortcut,
 				} }
 			/>
-			<EditPostPreferencesModal />
 			<WelcomeGuide />
 			<InitPatternModal />
 			<PluginArea onError={ onPluginAreaError } />

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,7 +3,6 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
@@ -12,32 +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 default function EditPostPreferencesModal() {
-	const isLargeViewport = useViewportMatch( 'medium' );
-
 	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"

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

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	PanelBody,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -28,7 +29,12 @@ import PostSlug from '../post-slug';
 import PostFormat from '../post-format';
 import { unlock } from '../../../lock-unlock';
 
-const { PostStatus: PostStatusPanel } = unlock( editorPrivateApis );
+const {
+	PostStatus: PostStatusPanel,
+	PrivatePostExcerptPanel,
+	PostContentInformation,
+	PostLastEditedPanel,
+} = unlock( editorPrivateApis );
 
 /**
  * Module Constants
@@ -36,16 +42,30 @@ const { PostStatus: PostStatusPanel } = unlock( editorPrivateApis );
 const PANEL_NAME = 'post-status';
 
 export default function PostStatus() {
-	const { isOpened, isRemoved } = useSelect( ( select ) => {
-		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
-		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, isEditorPanelOpened } =
-			select( editorStore );
-		return {
-			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
-		};
-	}, [] );
+	const { isOpened, isRemoved, showPostContentPanels } = useSelect(
+		( select ) => {
+			// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+			// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+			const {
+				isEditorPanelRemoved,
+				isEditorPanelOpened,
+				getCurrentPostType,
+			} = select( editorStore );
+			const postType = getCurrentPostType();
+			return {
+				isRemoved: isEditorPanelRemoved( PANEL_NAME ),
+				isOpened: isEditorPanelOpened( PANEL_NAME ),
+				// Post excerpt panel is rendered in different place depending on the post type.
+				// So we cannot make this check inside the PostExcerpt component based on the current edited entity.
+				showPostContentPanels: ! [
+					'wp_template',
+					'wp_template_part',
+					'wp_block',
+				].includes( postType ),
+			};
+		},
+		[]
+	);
 	const { toggleEditorPanelOpened } = useDispatch( editorStore );
 
 	if ( isRemoved ) {
@@ -62,12 +82,32 @@ export default function PostStatus() {
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<>
-						<PostStatusPanel />
-						<PostFeaturedImagePanel withPanelBody={ false } />
-						<PostSchedulePanel />
-						<PostTemplatePanel />
-						<PostURLPanel />
-						<PostSyncStatus />
+						{ showPostContentPanels && (
+							<VStack
+								spacing={ 3 }
+								//  TODO: this needs to be consolidated with the panel in site editor, when we unify them.
+								style={ { marginBlockEnd: '24px' } }
+							>
+								<PostFeaturedImagePanel
+									withPanelBody={ false }
+								/>
+								<PrivatePostExcerptPanel />
+								<VStack spacing={ 1 }>
+									<PostContentInformation />
+									<PostLastEditedPanel />
+								</VStack>
+							</VStack>
+						) }
+						<VStack
+							spacing={ 1 }
+							style={ { marginBlockEnd: '12px' } }
+						>
+							<PostStatusPanel />
+							<PostSchedulePanel />
+							<PostTemplatePanel />
+							<PostURLPanel />
+							<PostSyncStatus />
+						</VStack>
 						<PostSticky />
 						<PostFormat />
 						<PostSlug />

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

@@ -13,7 +13,7 @@ import {
 	useEffect,
 	useRef,
 } from '@wordpress/element';
-import { isRTL, __ } from '@wordpress/i18n';
+import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
@@ -22,12 +22,12 @@ import {
 	PluginDocumentSettingPanel,
 	PluginSidebar,
 	PostDiscussionPanel,
-	PostExcerptPanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { addQueryArgs } from '@wordpress/url';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -54,15 +54,6 @@ export const sidebars = {
 	block: 'edit-post/block',
 };
 
-function onActionPerformed( actionId, items ) {
-	if ( actionId === 'move-to-trash' ) {
-		const postType = items[ 0 ].type;
-		document.location.href = addQueryArgs( 'edit.php', {
-			post_type: postType,
-		} );
-	}
-}
-
 const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 	const tabListRef = useRef( null );
 	// Because `PluginSidebar` renders a `ComplementaryArea`, we
@@ -96,6 +87,56 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 			selectedTabElement?.focus();
 		}
 	}, [ tabName ] );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+					{
+						const postType = items[ 0 ].type;
+						document.location.href = addQueryArgs( 'edit.php', {
+							post_type: postType,
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											const postId = newItem.id;
+											document.location.href =
+												addQueryArgs( 'post.php', {
+													post: postId,
+													action: 'edit',
+												} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
+			}
+		},
+		[ createSuccessNotice ]
+	);
 
 	return (
 		<PluginSidebar
@@ -126,19 +167,14 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 							/>
 						}
 					/>
-					{ ! isEditingTemplate && (
-						<>
-							<PostStatus />
-							<PluginDocumentSettingPanel.Slot />
-							<PostLastRevisionPanel />
-							<PostTaxonomiesPanel />
-							<PostExcerptPanel />
-							<PostDiscussionPanel />
-							<PageAttributesPanel />
-							<PatternOverridesPanel />
-							<MetaBoxes location="side" />
-						</>
-					) }
+					{ ! isEditingTemplate && <PostStatus /> }
+					<PluginDocumentSettingPanel.Slot />
+					<PostLastRevisionPanel />
+					<PostTaxonomiesPanel />
+					<PostDiscussionPanel />
+					<PageAttributesPanel />
+					<PatternOverridesPanel />
+					{ ! isEditingTemplate && <MetaBoxes location="side" /> }
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
 					<BlockInspector />