@wordpress/editor 13.33.0 → 13.35.0

package/src/components/save-publish-panels/index.js

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Button, createSlotFill } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import EntitiesSavedStates from '../entities-saved-states';
+import PostPublishPanel from '../post-publish-panel';
+import PluginPrePublishPanel from '../plugin-pre-publish-panel';
+import PluginPostPublishPanel from '../plugin-post-publish-panel';
+import { store as editorStore } from '../../store';
+
+const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
+
+export const ActionsPanelFill = Fill;
+
+export default function SavePublishPanels( {
+	setEntitiesSavedStatesCallback,
+	closeEntitiesSavedStates,
+	isEntitiesSavedStatesOpen,
+	forceIsDirtyPublishPanel,
+} ) {
+	const { closePublishSidebar, togglePublishSidebar } =
+		useDispatch( editorStore );
+	const { publishSidebarOpened, hasNonPostEntityChanges } = useSelect(
+		( select ) => ( {
+			publishSidebarOpened:
+				select( editorStore ).isPublishSidebarOpened(),
+			hasNonPostEntityChanges:
+				select( editorStore ).hasNonPostEntityChanges(),
+		} ),
+		[]
+	);
+
+	const openEntitiesSavedStates = useCallback(
+		() => setEntitiesSavedStatesCallback( true ),
+		[]
+	);
+
+	// It is ok for these components to be unmounted when not in visual use.
+	// We don't want more than one present at a time, decide which to render.
+	let unmountableContent;
+	if ( publishSidebarOpened ) {
+		unmountableContent = (
+			<PostPublishPanel
+				onClose={ closePublishSidebar }
+				forceIsDirty={ forceIsDirtyPublishPanel }
+				PrePublishExtension={ PluginPrePublishPanel.Slot }
+				PostPublishExtension={ PluginPostPublishPanel.Slot }
+			/>
+		);
+	} else if ( hasNonPostEntityChanges ) {
+		unmountableContent = (
+			<div className="editor-layout__toggle-entities-saved-states-panel">
+				<Button
+					variant="secondary"
+					className="editor-layout__toggle-entities-saved-states-panel-button"
+					onClick={ openEntitiesSavedStates }
+					aria-expanded={ false }
+				>
+					{ __( 'Open save panel' ) }
+				</Button>
+			</div>
+		);
+	} else {
+		unmountableContent = (
+			<div className="editor-layout__toggle-publish-panel">
+				<Button
+					variant="secondary"
+					className="editor-layout__toggle-publish-panel-button"
+					onClick={ togglePublishSidebar }
+					aria-expanded={ false }
+				>
+					{ __( 'Open publish panel' ) }
+				</Button>
+			</div>
+		);
+	}
+
+	// Since EntitiesSavedStates controls its own panel, we can keep it
+	// always mounted to retain its own component state (such as checkboxes).
+	return (
+		<>
+			{ isEntitiesSavedStatesOpen && (
+				<EntitiesSavedStates close={ closeEntitiesSavedStates } />
+			) }
+			<Slot bubblesVirtually />
+			{ ! isEntitiesSavedStatesOpen && unmountableContent }
+		</>
+	);
+}

package/src/components/save-publish-panels/style.scss

@@ -0,0 +1,36 @@
+
+.editor-layout__toggle-publish-panel,
+.editor-layout__toggle-sidebar-panel,
+.editor-layout__toggle-entities-saved-states-panel {
+	z-index: z-index(".editor-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;
+}
+
+.editor-layout__toggle-entities-saved-states-panel,
+.editor-layout__toggle-publish-panel {
+	.interface-interface-skeleton__actions:focus &,
+	.interface-interface-skeleton__actions:focus-within & {
+		top: auto;
+		bottom: 0;
+	}
+}
+
+.edit-post-layout__toggle-sidebar-panel {
+	.interface-interface-skeleton__sidebar:focus &,
+	.interface-interface-skeleton__sidebar:focus-within & {
+		top: auto;
+		bottom: 0;
+	}
+}

package/src/components/sidebar/constants.js

@@ -0,0 +1,4 @@
+export const sidebars = {
+	document: 'edit-post/document',
+	block: 'edit-post/block',
+};

package/src/components/sidebar/header.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { sidebars } from './constants';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const SidebarHeader = ( _, 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' ),
+		};
+	}, [] );
+
+	return (
+		<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 }
+				// 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>
+		</Tabs.TabList>
+	);
+};
+
+export default forwardRef( SidebarHeader );

package/src/components/sidebar/index.js

@@ -0,0 +1,200 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockInspector,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Platform,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+} from '@wordpress/element';
+import { isRTL, __ } from '@wordpress/i18n';
+import { drawerLeft, drawerRight } from '@wordpress/icons';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import PageAttributesPanel from '../page-attributes/panel';
+import PatternOverridesPanel from '../pattern-overrides-panel';
+import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
+import PluginSidebar from '../plugin-sidebar';
+import PostLastRevisionPanel from '../post-last-revision/panel';
+import PostSummary from './post-summary';
+import PostTaxonomiesPanel from '../post-taxonomies/panel';
+import PostTransformPanel from '../post-transform-panel';
+import SidebarHeader from './header';
+import TemplateContentPanel from '../template-content-panel';
+import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
+import { sidebars } from './constants';
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import {
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
+	web: true,
+	native: false,
+} );
+
+const SidebarContent = ( {
+	tabName,
+	keyboardShortcut,
+	renderingMode,
+	onActionPerformed,
+	extraPanels,
+} ) => {
+	const tabListRef = useRef( null );
+	// 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 );
+
+	// 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' ) === tabName
+		);
+		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();
+		}
+	}, [ tabName ] );
+
+	return (
+		<PluginSidebar
+			identifier={ tabName }
+			header={
+				<Tabs.Context.Provider value={ tabsContextValue }>
+					<SidebarHeader ref={ tabListRef } />
+				</Tabs.Context.Provider>
+			}
+			closeLabel={ __( 'Close Settings' ) }
+			// This classname is added so we can apply a corrective negative
+			// margin to the panel.
+			// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
+			className="editor-sidebar__panel"
+			headerClassName="editor-sidebar__panel-tabs"
+			/* translators: button label text should, if possible, be under 16 characters. */
+			title={ __( 'Settings' ) }
+			toggleShortcut={ keyboardShortcut }
+			icon={ isRTL() ? drawerLeft : drawerRight }
+			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+		>
+			<Tabs.Context.Provider value={ tabsContextValue }>
+				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
+					<PostSummary onActionPerformed={ onActionPerformed } />
+					<PluginDocumentSettingPanel.Slot />
+					{ renderingMode !== 'post-only' && (
+						<TemplateContentPanel />
+					) }
+					<PostTransformPanel />
+					<PostLastRevisionPanel />
+					<PostTaxonomiesPanel />
+					<PageAttributesPanel />
+					<PatternOverridesPanel />
+					{ extraPanels }
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
+					<BlockInspector />
+				</Tabs.TabPanel>
+			</Tabs.Context.Provider>
+		</PluginSidebar>
+	);
+};
+
+const Sidebar = ( { extraPanels, onActionPerformed } ) => {
+	useAutoSwitchEditorSidebars();
+	const { tabName, keyboardShortcut, showSummary, renderingMode } = 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;
+			}
+
+			return {
+				tabName: _tabName,
+				keyboardShortcut: shortcut,
+				showSummary: ! [
+					TEMPLATE_POST_TYPE,
+					TEMPLATE_PART_POST_TYPE,
+					NAVIGATION_POST_TYPE,
+				].includes( select( editorStore ).getCurrentPostType() ),
+				renderingMode: select( editorStore ).getRenderingMode(),
+			};
+		},
+		[]
+	);
+
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
+	const onTabSelect = useCallback(
+		( newSelectedTabId ) => {
+			if ( !! newSelectedTabId ) {
+				enableComplementaryArea( 'core', newSelectedTabId );
+			}
+		},
+		[ enableComplementaryArea ]
+	);
+
+	return (
+		<Tabs
+			selectedTabId={ tabName }
+			onSelect={ onTabSelect }
+			selectOnMove={ false }
+		>
+			<SidebarContent
+				tabName={ tabName }
+				keyboardShortcut={ keyboardShortcut }
+				showSummary={ showSummary }
+				renderingMode={ renderingMode }
+				onActionPerformed={ onActionPerformed }
+				extraPanels={ extraPanels }
+			/>
+		</Tabs>
+	);
+};
+
+export default Sidebar;

package/src/components/sidebar/post-summary.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostStatusInfo from '../plugin-post-status-info';
+import PostActions from '../post-actions';
+import PostAuthorPanel from '../post-author/panel';
+import PostCardPanel from '../post-card-panel';
+import PostContentInformation from '../post-content-information';
+import PostDiscussionPanel from '../post-discussion/panel';
+import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/panel';
+import PostFeaturedImagePanel from '../post-featured-image/panel';
+import PostFormatPanel from '../post-format/panel';
+import PostLastEditedPanel from '../post-last-edited-panel';
+import PostPanelSection from '../post-panel-section';
+import PostSchedulePanel from '../post-schedule/panel';
+import PostStatusPanel from '../post-status';
+import PostStickyPanel from '../post-sticky';
+import PostSyncStatus from '../post-sync-status';
+import PostTemplatePanel from '../post-template/panel';
+import PostTrashPanel from '../post-trash/panel';
+import PostURLPanel from '../post-url/panel';
+import { store as editorStore } from '../../store';
+import {
+	NAVIGATION_POST_TYPE,
+	PATTERN_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
+import TemplateAreas from '../template-areas';
+
+/**
+ * Module Constants
+ */
+const PANEL_NAME = 'post-status';
+
+export default function PostSummary( { onActionPerformed } ) {
+	const { isRemovedPostStatusPanel, postType } = 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, getCurrentPostType } =
+			select( editorStore );
+		return {
+			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+	const isPattern = postType === PATTERN_POST_TYPE;
+	const isTemplate = postType === TEMPLATE_POST_TYPE;
+	const isTemplatePart = postType === TEMPLATE_PART_POST_TYPE;
+	const isNavigation = postType === NAVIGATION_POST_TYPE;
+
+	return (
+		<PostPanelSection className="editor-post-summary">
+			<PluginPostStatusInfo.Slot>
+				{ ( fills ) => (
+					<>
+						<VStack spacing={ 4 }>
+							<PostCardPanel
+								actions={
+									<PostActions
+										onActionPerformed={ onActionPerformed }
+									/>
+								}
+							/>
+							<PostFeaturedImagePanel withPanelBody={ false } />
+							<PostExcerptPanel />
+							<VStack spacing={ 1 }>
+								<PostContentInformation />
+								<PostLastEditedPanel />
+							</VStack>
+							{ ! isRemovedPostStatusPanel && (
+								<VStack spacing={ 2 }>
+									<VStack spacing={ 1 }>
+										<PostStatusPanel />
+										<PostSchedulePanel />
+										<PostTemplatePanel />
+										<PostURLPanel />
+										<PostDiscussionPanel />
+										<PostSyncStatus />
+									</VStack>
+									<PostStickyPanel />
+									<PostFormatPanel />
+									<PostAuthorPanel />
+									{ isTemplate && <TemplateAreas /> }
+									{ fills }
+									{ ! isPattern &&
+										! isTemplate &&
+										! isTemplatePart &&
+										! isNavigation && <PostTrashPanel /> }
+								</VStack>
+							) }
+						</VStack>
+					</>
+				) }
+			</PluginPostStatusInfo.Slot>
+		</PostPanelSection>
+	);
+}

package/src/components/sidebar/style.scss

@@ -0,0 +1,18 @@
+.components-panel__header.editor-sidebar__panel-tabs {
+	padding-left: 0;
+	padding-right: $grid-unit-20;
+
+	.components-button.has-icon {
+		padding: 0;
+		min-width: $icon-size;
+		height: $icon-size;
+
+		@include break-medium() {
+			display: flex;
+		}
+	}
+}
+
+.editor-post-summary .components-v-stack:empty {
+	display: none;
+}

package/src/components/start-page-options/index.js

@@ -11,11 +11,13 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
 function useStartPatterns() {
 	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
@@ -71,7 +73,11 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) {
 			blockPatterns={ blockPatterns }
 			shownPatterns={ shownBlockPatterns }
 			onClickPattern={ ( _pattern, blocks ) => {
-				editEntityRecord( 'postType', postType, postId, { blocks } );
+				editEntityRecord( 'postType', postType, postId, {
+					blocks,
+					content: ( { blocks: blocksForSerialization = [] } ) =>
+						__unstableSerializeAndClean( blocksForSerialization ),
+				} );
 				onChoosePattern();
 			} }
 		/>
@@ -110,14 +116,15 @@ export default function StartPageOptions() {
 			isEditedPostEmpty,
 			getCurrentPostType,
 			getCurrentPostId,
-			getEditorSettings,
 		} = select( editorStore );
-		const { __unstableIsPreviewMode: isPreviewMode } = getEditorSettings();
+		const _postType = getCurrentPostType();
 
 		return {
 			shouldEnableModal:
-				! isPreviewMode && ! isEditedPostDirty() && isEditedPostEmpty(),
-			postType: getCurrentPostType(),
+				! isEditedPostDirty() &&
+				isEditedPostEmpty() &&
+				TEMPLATE_POST_TYPE !== _postType,
+			postType: _postType,
 			postId: getCurrentPostId(),
 		};
 	}, [] );