@wordpress/edit-post 7.32.0 → 7.33.0

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

@@ -15,18 +15,19 @@ import {
 } from '@wordpress/element';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	store as editorStore,
 	PageAttributesPanel,
 	PluginDocumentSettingPanel,
+	PluginSidebar,
 	PostDiscussionPanel,
 	PostExcerptPanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -34,15 +35,15 @@ import {
 import SettingsHeader from '../settings-header';
 import PostStatus from '../post-status';
 import MetaBoxes from '../../meta-boxes';
-import PluginSidebarEditPost from '../plugin-sidebar';
 import { store as editPostStore } from '../../../store';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { unlock } from '../../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
-
+const { PostCardPanel, PostActions, interfaceStore } =
+	unlock( editorPrivateApis );
 const { Tabs } = unlock( componentsPrivateApis );
-const { PatternOverridesPanel } = unlock( editorPrivateApis );
+const { PatternOverridesPanel, useAutoSwitchEditorSidebars } =
+	unlock( editorPrivateApis );
 
 const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 	web: true,
@@ -53,13 +54,18 @@ export const sidebars = {
 	block: 'edit-post/block',
 };
 
-const SidebarContent = ( {
-	sidebarName,
-	keyboardShortcut,
-	isEditingTemplate,
-} ) => {
+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 `PluginSidebarEditPost` renders a `ComplementaryArea`, we
+	// Because `PluginSidebar` 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 );
@@ -76,7 +82,7 @@ const SidebarContent = ( {
 			// 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
+			( element ) => element.getAttribute( 'data-tab-id' ) === tabName
 		);
 		const activeElement = selectedTabElement?.ownerDocument.activeElement;
 		const tabsHasFocus = tabsElements.some( ( element ) => {
@@ -89,11 +95,11 @@ const SidebarContent = ( {
 		) {
 			selectedTabElement?.focus();
 		}
-	}, [ sidebarName ] );
+	}, [ tabName ] );
 
 	return (
-		<PluginSidebarEditPost
-			identifier={ sidebarName }
+		<PluginSidebar
+			identifier={ tabName }
 			header={
 				<Tabs.Context.Provider value={ tabsContextValue }>
 					<SettingsHeader ref={ tabListRef } />
@@ -113,7 +119,13 @@ const SidebarContent = ( {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					<PostCardPanel />
+					<PostCardPanel
+						actions={
+							<PostActions
+								onActionPerformed={ onActionPerformed }
+							/>
+						}
+					/>
 					{ ! isEditingTemplate && (
 						<>
 							<PostStatus />
@@ -132,46 +144,43 @@ const SidebarContent = ( {
 					<BlockInspector />
 				</Tabs.TabPanel>
 			</Tabs.Context.Provider>
-		</PluginSidebarEditPost>
+		</PluginSidebar>
 	);
 };
 
 const SettingsSidebar = () => {
-	const {
-		sidebarName,
-		isSettingsSidebarActive,
-		keyboardShortcut,
-		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.
-		// If one of the two sidebars is active the component will contain the content of that sidebar.
-		// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
-		// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
-		// should contain the sidebar that will be active when the toggle button is pressed. If a block
-		// is selected, that should be edit-post/block otherwise it's edit-post/document.
-		let sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editPostStore.name
-		);
-		let isSettingsSidebar = true;
-		if ( ! [ sidebars.document, sidebars.block ].includes( sidebar ) ) {
-			isSettingsSidebar = false;
-			if ( select( blockEditorStore ).getBlockSelectionStart() ) {
-				sidebar = sidebars.block;
+	useAutoSwitchEditorSidebars();
+	const { tabName, keyboardShortcut, isEditingTemplate } = useSelect(
+		( select ) => {
+			const shortcut = select(
+				keyboardShortcutsStore
+			).getShortcutRepresentation( 'core/editor/toggle-sidebar' );
+
+			const sidebar =
+				select( interfaceStore ).getActiveComplementaryArea( 'core' );
+			const _isEditorSidebarOpened = [
+				sidebars.block,
+				sidebars.document,
+			].includes( sidebar );
+			let _tabName = sidebar;
+			if ( ! _isEditorSidebarOpened ) {
+				_tabName = !! select(
+					blockEditorStore
+				).getBlockSelectionStart()
+					? sidebars.block
+					: sidebars.document;
 			}
-			sidebar = sidebars.document;
-		}
-		const shortcut = select(
-			keyboardShortcutsStore
-		).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
-		return {
-			sidebarName: sidebar,
-			isSettingsSidebarActive: isSettingsSidebar,
-			keyboardShortcut: shortcut,
-			isEditingTemplate:
-				select( editorStore ).getCurrentPostType() === 'wp_template',
-		};
-	}, [] );
+
+			return {
+				tabName: _tabName,
+				keyboardShortcut: shortcut,
+				isEditingTemplate:
+					select( editorStore ).getCurrentPostType() ===
+					'wp_template',
+			};
+		},
+		[]
+	);
 
 	const { openGeneralSidebar } = useDispatch( editPostStore );
 
@@ -186,17 +195,12 @@ const SettingsSidebar = () => {
 
 	return (
 		<Tabs
-			// Due to how this component is controlled (via a value from the
-			// `interfaceStore`), when the sidebar closes the currently selected
-			// tab can't be found. This causes the component to continuously reset
-			// the selection to `null` in an infinite loop.Proactively setting
-			// the selected tab to `null` avoids that.
-			selectedTabId={ isSettingsSidebarActive ? sidebarName : null }
+			selectedTabId={ tabName }
 			onSelect={ onTabSelect }
 			selectOnMove={ false }
 		>
 			<SidebarContent
-				sidebarName={ sidebarName }
+				tabName={ tabName }
 				keyboardShortcut={ keyboardShortcut }
 				isEditingTemplate={ isEditingTemplate }
 			/>

package/src/components/visual-editor/block-inspector-button.js

@@ -19,7 +19,7 @@ export function BlockInspectorButton( { onClick = noop, small = false } ) {
 		( select ) => ( {
 			shortcut: select(
 				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
+			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
 			areAdvancedSettingsOpened:
 				select( editPostStore ).getActiveGeneralSidebarName() ===
 				'edit-post/block',

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

@@ -19,6 +19,7 @@ import { store as blocksStore } from '@wordpress/blocks';
  */
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { usePaddingAppender } from './use-padding-appender';
 
 const { EditorCanvas } = unlock( editorPrivateApis );
 
@@ -53,6 +54,8 @@ export default function VisualEditor( { styles } ) {
 		[]
 	);
 
+	const paddingAppenderRef = usePaddingAppender();
+
 	let paddingBottom;
 
 	// Add a constant padding for the typewritter effect. When typing at the
@@ -91,6 +94,7 @@ export default function VisualEditor( { styles } ) {
 				// We should auto-focus the canvas (title) on load.
 				// eslint-disable-next-line jsx-a11y/no-autofocus
 				autoFocus={ ! isWelcomeGuideVisible }
+				contentRef={ paddingAppenderRef }
 			/>
 		</div>
 	);

package/src/components/visual-editor/use-padding-appender.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+export function usePaddingAppender() {
+	const registry = useRegistry();
+	return useRefEffect(
+		( node ) => {
+			function onMouseDown( event ) {
+				if ( event.target !== node ) {
+					return;
+				}
+
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+
+				const paddingBottom = defaultView.parseInt(
+					defaultView.getComputedStyle( node ).paddingBottom,
+					10
+				);
+
+				if ( ! paddingBottom ) {
+					return;
+				}
+
+				// only handle clicks under the last child
+				const lastChild = node.lastElementChild;
+				if ( ! lastChild ) {
+					return;
+				}
+
+				const lastChildRect = lastChild.getBoundingClientRect();
+				if ( event.clientY < lastChildRect.bottom ) {
+					return;
+				}
+
+				event.preventDefault();
+
+				const blockOrder = registry
+					.select( blockEditorStore )
+					.getBlockOrder( '' );
+				const lastBlockClientId = blockOrder[ blockOrder.length - 1 ];
+				const lastBlock = registry
+					.select( blockEditorStore )
+					.getBlock( lastBlockClientId );
+				const { selectBlock, insertDefaultBlock } =
+					registry.dispatch( blockEditorStore );
+
+				if ( isUnmodifiedDefaultBlock( lastBlock ) ) {
+					selectBlock( lastBlockClientId );
+				} else {
+					insertDefaultBlock();
+				}
+			}
+			node.addEventListener( 'mousedown', onMouseDown );
+			return () => {
+				node.removeEventListener( 'mousedown', onMouseDown );
+			};
+		},
+		[ registry ]
+	);
+}

package/src/editor.js

@@ -58,12 +58,12 @@ function Editor( {
 				getEditorSettings().supportsTemplateMode;
 			const isViewable =
 				getPostType( currentPost.postType )?.viewable ?? false;
-			const canEditTemplate = canUser( 'create', 'templates' );
+			const canViewTemplate = canUser( 'read', 'templates' );
 			return {
 				template:
 					supportsTemplateMode &&
 					isViewable &&
-					canEditTemplate &&
+					canViewTemplate &&
 					currentPost.postType !== 'wp_template'
 						? getEditedPostTemplate()
 						: null,

package/src/hooks/commands/use-common-commands.js

@@ -7,35 +7,37 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
-	keyboard,
 	fullscreen,
 	formatListBullets,
 } from '@wordpress/icons';
 import { useCommand } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
-import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
-import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function useCommonCommands() {
 	const { openGeneralSidebar, closeGeneralSidebar } =
 		useDispatch( editPostStore );
-	const { openModal } = useDispatch( interfaceStore );
 	const { activeSidebar, isFullscreen, isPublishSidebarEnabled } = useSelect(
 		( select ) => {
 			const { get } = select( preferencesStore );
 
 			return {
-				activeSidebar: select(
-					interfaceStore
-				).getActiveComplementaryArea( editPostStore.name ),
+				activeSidebar:
+					select( interfaceStore ).getActiveComplementaryArea(
+						'core'
+					),
 				isPublishSidebarEnabled:
 					select( editorStore ).isPublishSidebarEnabled(),
 				isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
@@ -101,23 +103,6 @@ export default function useCommonCommands() {
 		},
 	} );
 
-	useCommand( {
-		name: 'core/open-preferences',
-		label: __( 'Editor preferences' ),
-		callback: () => {
-			openModal( PREFERENCES_MODAL_NAME );
-		},
-	} );
-
-	useCommand( {
-		name: 'core/open-shortcut-help',
-		label: __( 'Keyboard shortcuts' ),
-		icon: keyboard,
-		callback: () => {
-			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
-		},
-	} );
-
 	useCommand( {
 		name: 'core/toggle-publish-sidebar',
 		label: isPublishSidebarEnabled

package/src/index.js

@@ -17,6 +17,10 @@ import {
 import {
 	PluginBlockSettingsMenuItem,
 	PluginDocumentSettingPanel,
+	PluginMoreMenuItem,
+	PluginPostStatusInfo,
+	PluginSidebar,
+	PluginSidebarMoreMenuItem,
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
@@ -164,12 +168,12 @@ export function reinitializeEditor() {
 
 export { PluginBlockSettingsMenuItem };
 export { PluginDocumentSettingPanel };
-export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';
+export { PluginMoreMenuItem };
+export { PluginPostStatusInfo };
+export { PluginSidebar };
+export { PluginSidebarMoreMenuItem };
 export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel';
-export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info';
 export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel';
-export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
-export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
 export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
 export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
 export { __experimentalPluginPostExcerpt };

package/src/plugins/keyboard-shortcuts-help-menu-item/index.js

@@ -5,18 +5,20 @@ import { MenuItem } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
-import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export function KeyboardShortcutsHelpMenuItem( { openModal } ) {
 	return (
 		<MenuItem
 			onClick={ () => {
-				openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+				openModal( 'editor/keyboard-shortcut-help' );
 			} }
 			shortcut={ displayShortcut.access( 'h' ) }
 		>

package/src/store/actions.js

@@ -2,9 +2,11 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
 import { addFilter } from '@wordpress/hooks';
 
@@ -12,9 +14,10 @@ import { addFilter } from '@wordpress/hooks';
  * Internal dependencies
  */
 import { getMetaBoxContainer } from '../utils/meta-boxes';
-import { store as editPostStore } from '.';
 import { unlock } from '../lock-unlock';
 
+const { interfaceStore } = unlock( editorPrivateApis );
+
 /**
  * Returns an action object used in signalling that the user opened an editor sidebar.
  *
@@ -25,7 +28,7 @@ export const openGeneralSidebar =
 	( { registry } ) => {
 		registry
 			.dispatch( interfaceStore )
-			.enableComplementaryArea( editPostStore.name, name );
+			.enableComplementaryArea( 'core', name );
 	};
 
 /**
@@ -34,9 +37,7 @@ export const openGeneralSidebar =
 export const closeGeneralSidebar =
 	() =>
 	( { registry } ) =>
-		registry
-			.dispatch( interfaceStore )
-			.disableComplementaryArea( editPostStore.name );
+		registry.dispatch( interfaceStore ).disableComplementaryArea( 'core' );
 
 /**
  * Returns an action object used in signalling that the user opened a modal.
@@ -219,14 +220,11 @@ export const togglePinnedPluginItem =
 	( { registry } ) => {
 		const isPinned = registry
 			.select( interfaceStore )
-			.isItemPinned( 'core/edit-post', pluginName );
+			.isItemPinned( 'core', pluginName );
 
 		registry
 			.dispatch( interfaceStore )
-			[ isPinned ? 'unpinItem' : 'pinItem' ](
-				'core/edit-post',
-				pluginName
-			);
+			[ isPinned ? 'unpinItem' : 'pinItem' ]( 'core', pluginName );
 	};
 
 /**

package/src/store/selectors.js

@@ -1,16 +1,13 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -18,6 +15,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { unlock } from '../lock-unlock';
 
+const { interfaceStore } = unlock( editorPrivateApis );
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
 
@@ -43,9 +41,7 @@ export const getEditorMode = createRegistrySelector(
 export const isEditorSidebarOpened = createRegistrySelector(
 	( select ) => () => {
 		const activeGeneralSidebar =
-			select( interfaceStore ).getActiveComplementaryArea(
-				'core/edit-post'
-			);
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
 		return [ 'edit-post/document', 'edit-post/block' ].includes(
 			activeGeneralSidebar
 		);
@@ -62,9 +58,7 @@ export const isEditorSidebarOpened = createRegistrySelector(
 export const isPluginSidebarOpened = createRegistrySelector(
 	( select ) => () => {
 		const activeGeneralSidebar =
-			select( interfaceStore ).getActiveComplementaryArea(
-				'core/edit-post'
-			);
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
 		return (
 			!! activeGeneralSidebar &&
 			! [ 'edit-post/document', 'edit-post/block' ].includes(
@@ -90,9 +84,7 @@ export const isPluginSidebarOpened = createRegistrySelector(
  */
 export const getActiveGeneralSidebarName = createRegistrySelector(
 	( select ) => () => {
-		return select( interfaceStore ).getActiveComplementaryArea(
-			'core/edit-post'
-		);
+		return select( interfaceStore ).getActiveComplementaryArea( 'core' );
 	}
 );
 
@@ -352,10 +344,7 @@ export const isFeatureActive = createRegistrySelector(
  */
 export const isPluginItemPinned = createRegistrySelector(
 	( select ) => ( state, pluginName ) => {
-		return select( interfaceStore ).isItemPinned(
-			'core/edit-post',
-			pluginName
-		);
+		return select( interfaceStore ).isItemPinned( 'core', pluginName );
 	}
 );
 
@@ -567,36 +556,55 @@ export function areMetaBoxesInitialized( state ) {
  */
 export const getEditedPostTemplate = createRegistrySelector(
 	( select ) => () => {
+		const {
+			id: postId,
+			type: postType,
+			slug,
+		} = select( editorStore ).getCurrentPost();
+		const { getSite, getEditedEntityRecord, getEntityRecords } =
+			select( coreStore );
+		const siteSettings = getSite();
+		// First check if the current page is set as the posts page.
+		const isPostsPage = +postId === siteSettings?.page_for_posts;
+		if ( isPostsPage ) {
+			const defaultTemplateId = select( coreStore ).getDefaultTemplateId(
+				{ slug: 'home' }
+			);
+			return getEditedEntityRecord(
+				'postType',
+				'wp_template',
+				defaultTemplateId
+			);
+		}
 		const currentTemplate =
 			select( editorStore ).getEditedPostAttribute( 'template' );
 		if ( currentTemplate ) {
-			const templateWithSameSlug = select( coreStore )
-				.getEntityRecords( 'postType', 'wp_template', { per_page: -1 } )
-				?.find( ( template ) => template.slug === currentTemplate );
+			const templateWithSameSlug = getEntityRecords(
+				'postType',
+				'wp_template',
+				{ per_page: -1 }
+			)?.find( ( template ) => template.slug === currentTemplate );
 			if ( ! templateWithSameSlug ) {
 				return templateWithSameSlug;
 			}
-			return select( coreStore ).getEditedEntityRecord(
+			return getEditedEntityRecord(
 				'postType',
 				'wp_template',
 				templateWithSameSlug.id
 			);
 		}
-
-		const post = select( editorStore ).getCurrentPost();
 		let slugToCheck;
 		// In `draft` status we might not have a slug available, so we use the `single`
 		// post type templates slug(ex page, single-post, single-product etc..).
 		// Pages do not need the `single` prefix in the slug to be prioritized
 		// through template hierarchy.
-		if ( post.slug ) {
+		if ( slug ) {
 			slugToCheck =
-				post.type === 'page'
-					? `${ post.type }-${ post.slug }`
-					: `single-${ post.type }-${ post.slug }`;
+				postType === 'page'
+					? `${ postType }-${ slug }`
+					: `single-${ postType }-${ slug }`;
 		} else {
-			slugToCheck =
-				post.type === 'page' ? 'page' : `single-${ post.type }`;
+			slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
 		}
 		const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
 			slug: slugToCheck,