@wordpress/editor 13.34.0 → 13.35.0

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

@@ -17,6 +17,7 @@ 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,
@@ -115,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(),
 		};
 	}, [] );

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

@@ -0,0 +1,219 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useAsyncList } from '@wordpress/compose';
+import { parse } from '@wordpress/blocks';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+
+function useFallbackTemplateContent( slug, isCustom = false ) {
+	return useSelect(
+		( select ) => {
+			const { getEntityRecord, getDefaultTemplateId } =
+				select( coreStore );
+			const templateId = getDefaultTemplateId( {
+				slug,
+				is_custom: isCustom,
+				ignore_empty: true,
+			} );
+			return templateId
+				? getEntityRecord( 'postType', TEMPLATE_POST_TYPE, templateId )
+						?.content?.raw
+				: undefined;
+		},
+		[ slug, isCustom ]
+	);
+}
+
+function useStartPatterns( fallbackContent ) {
+	const { slug, patterns } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEntityRecord, getBlockPatterns } = select( coreStore );
+		const postId = getCurrentPostId();
+		const postType = getCurrentPostType();
+		const record = getEntityRecord( 'postType', postType, postId );
+		return {
+			slug: record.slug,
+			patterns: getBlockPatterns(),
+		};
+	}, [] );
+
+	const currentThemeStylesheet = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme().stylesheet
+	);
+
+	// Duplicated from packages/block-library/src/pattern/edit.js.
+	function injectThemeAttributeInBlockTemplateContent( block ) {
+		if (
+			block.innerBlocks.find(
+				( innerBlock ) => innerBlock.name === 'core/template-part'
+			)
+		) {
+			block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+				if (
+					innerBlock.name === 'core/template-part' &&
+					innerBlock.attributes.theme === undefined
+				) {
+					innerBlock.attributes.theme = currentThemeStylesheet;
+				}
+				return innerBlock;
+			} );
+		}
+
+		if (
+			block.name === 'core/template-part' &&
+			block.attributes.theme === undefined
+		) {
+			block.attributes.theme = currentThemeStylesheet;
+		}
+		return block;
+	}
+
+	return useMemo( () => {
+		// filter patterns that are supposed to be used in the current template being edited.
+		return [
+			{
+				name: 'fallback',
+				blocks: parse( fallbackContent ),
+				title: __( 'Fallback content' ),
+			},
+			...patterns
+				.filter( ( pattern ) => {
+					return (
+						Array.isArray( pattern.templateTypes ) &&
+						pattern.templateTypes.some( ( templateType ) =>
+							slug.startsWith( templateType )
+						)
+					);
+				} )
+				.map( ( pattern ) => {
+					return {
+						...pattern,
+						blocks: parse( pattern.content ).map( ( block ) =>
+							injectThemeAttributeInBlockTemplateContent( block )
+						),
+					};
+				} ),
+		];
+	}, [ fallbackContent, slug, patterns ] );
+}
+
+function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
+	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
+	const blockPatterns = useStartPatterns( fallbackContent );
+	const shownBlockPatterns = useAsyncList( blockPatterns );
+	return (
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			shownPatterns={ shownBlockPatterns }
+			onClickPattern={ ( pattern, blocks ) => {
+				onChange( blocks, { selection: undefined } );
+				onChoosePattern();
+			} }
+		/>
+	);
+}
+
+function StartModal( { slug, isCustom, onClose, postType } ) {
+	const fallbackContent = useFallbackTemplateContent( slug, isCustom );
+	if ( ! fallbackContent ) {
+		return null;
+	}
+	return (
+		<Modal
+			className="editor-start-template-options__modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			focusOnMount="firstElement"
+			onRequestClose={ onClose }
+			isFullScreen
+		>
+			<div className="editor-start-template-options__modal-content">
+				<PatternSelection
+					fallbackContent={ fallbackContent }
+					slug={ slug }
+					isCustom={ isCustom }
+					postType={ postType }
+					onChoosePattern={ () => {
+						onClose();
+					} }
+				/>
+			</div>
+			<Flex
+				className="editor-start-template-options__modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<Button variant="tertiary" onClick={ onClose }>
+						{ __( 'Skip' ) }
+					</Button>
+				</FlexItem>
+			</Flex>
+		</Modal>
+	);
+}
+
+export default function StartTemplateOptions() {
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { shouldOpenModal, slug, isCustom, postType, postId } = useSelect(
+		( select ) => {
+			const { getCurrentPostType, getCurrentPostId } =
+				select( editorStore );
+			const _postType = getCurrentPostType();
+			const _postId = getCurrentPostId();
+			const { getEditedEntityRecord, hasEditsForEntityRecord } =
+				select( coreStore );
+			const templateRecord = getEditedEntityRecord(
+				'postType',
+				_postType,
+				_postId
+			);
+			const hasEdits = hasEditsForEntityRecord(
+				'postType',
+				_postType,
+				_postId
+			);
+
+			return {
+				shouldOpenModal:
+					! hasEdits &&
+					'' === templateRecord.content &&
+					TEMPLATE_POST_TYPE === _postType,
+				slug: templateRecord.slug,
+				isCustom: templateRecord.is_custom,
+				postType: _postType,
+				postId: _postId,
+			};
+		},
+		[]
+	);
+
+	useEffect( () => {
+		// Should reset the modal state when navigating to a new page/post.
+		setIsClosed( false );
+	}, [ postType, postId ] );
+
+	if ( ! shouldOpenModal || isClosed ) {
+		return null;
+	}
+
+	return (
+		<StartModal
+			slug={ slug }
+			isCustom={ isCustom }
+			postType={ postType }
+			onClose={ () => setIsClosed( true ) }
+		/>
+	);
+}

package/src/components/start-template-options/style.scss

@@ -0,0 +1,55 @@
+$actions-height: 92px;
+
+.editor-start-template-options__modal {
+	.editor-start-template-options__modal__actions {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: $actions-height;
+		background-color: $white;
+		margin-left: - $grid-unit-40;
+		margin-right: - $grid-unit-40;
+		padding-left: $grid-unit-40;
+		padding-right: $grid-unit-40;
+		border-top: 1px solid $gray-300;
+		z-index: z-index(".editor-start-template-options__modal__actions");
+	}
+
+	.block-editor-block-patterns-list {
+		// Since the actions container is positioned absolutely,
+		// this padding bottom ensures that the content wrapper will properly
+		// detect overflowing content and start showing scrollbars at the right
+		// moment. Without this padding, the content would render under the actions
+		// bar without causing the wrapper to show a scrollbar.
+		padding-bottom: $actions-height;
+	}
+}
+
+.editor-start-template-options__modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+
+		.block-editor-block-patterns-list__item-title {
+			display: none;
+		}
+	}
+
+	.block-editor-block-patterns-list__item {
+		// Avoid to override the BlockPatternList component
+		// default hover and focus styles.
+		&:not(:focus):not(:hover) .block-editor-block-preview__container {
+			box-shadow: 0 0 0 1px $gray-300;
+		}
+	}
+}

package/src/components/template-areas/style.scss

@@ -1,5 +1,4 @@
 .editor-template-areas {
-	margin-top: $grid-unit-20;
 	&__list {
 		margin: 0;
 		> li {

package/src/components/template-content-panel/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
+
+const PAGE_CONTENT_BLOCKS = [
+	'core/post-content',
+	'core/post-featured-image',
+	'core/post-title',
+];
+
+export default function TemplateContentPanel() {
+	const clientIds = useSelect( ( select ) => {
+		const { getBlocksByName } = select( blockEditorStore );
+		return getBlocksByName( PAGE_CONTENT_BLOCKS );
+	}, [] );
+
+	return (
+		<PanelBody title={ __( 'Content' ) }>
+			<BlockQuickNavigation clientIds={ clientIds } />
+		</PanelBody>
+	);
+}

package/src/hooks/pattern-overrides.js

@@ -19,6 +19,7 @@ const {
 	ResetOverridesControl,
 	PATTERN_TYPES,
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
+	PATTERN_SYNC_TYPES,
 } = unlock( patternsPrivateApis );
 
 /**
@@ -51,18 +52,23 @@ const withPatternOverrideControls = createHigherOrderComponent(
 // on every block.
 function ControlsWithStoreSubscription( props ) {
 	const blockEditingMode = useBlockEditingMode();
-	const { hasPatternOverridesSource, isEditingPattern } = useSelect(
+	const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
 		( select ) => {
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+			const { getCurrentPostType, getEditedPostAttribute } =
+				select( editorStore );
 
 			return {
 				// For editing link to the site editor if the theme and user permissions support it.
 				hasPatternOverridesSource: !! getBlockBindingsSource(
 					'core/pattern-overrides'
 				),
-				isEditingPattern:
-					select( editorStore ).getCurrentPostType() ===
-					PATTERN_TYPES.user,
+				isEditingSyncedPattern:
+					getCurrentPostType() === PATTERN_TYPES.user &&
+					getEditedPostAttribute( 'meta' )?.wp_pattern_sync_status !==
+						PATTERN_SYNC_TYPES.unsynced &&
+					getEditedPostAttribute( 'wp_pattern_sync_status' ) !==
+						PATTERN_SYNC_TYPES.unsynced,
 			};
 		},
 		[]
@@ -76,9 +82,9 @@ function ControlsWithStoreSubscription( props ) {
 		);
 
 	const shouldShowPatternOverridesControls =
-		isEditingPattern && blockEditingMode === 'default';
+		isEditingSyncedPattern && blockEditingMode === 'default';
 	const shouldShowResetOverridesControl =
-		! isEditingPattern &&
+		! isEditingSyncedPattern &&
 		!! props.attributes.metadata?.name &&
 		blockEditingMode !== 'disabled' &&
 		hasPatternBindings;

package/src/private-apis.js

@@ -6,22 +6,18 @@ import * as interfaceApis from '@wordpress/interface';
 /**
  * Internal dependencies
  */
-import CollapsableBlockToolbar from './components/collapsible-block-toolbar';
 import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
-import DocumentTools from './components/document-tools';
+import Header from './components/header';
 import InserterSidebar from './components/inserter-sidebar';
 import ListViewSidebar from './components/list-view-sidebar';
-import MoreMenu from './components/more-menu';
 import PatternOverridesPanel from './components/pattern-overrides-panel';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostPanelRow from './components/post-panel-row';
-import PostViewLink from './components/post-view-link';
-import PreviewDropdown from './components/preview-dropdown';
 import PreferencesModal from './components/preferences-modal';
 import PostActions from './components/post-actions';
 import { usePostActions } from './components/post-actions/actions';
@@ -30,29 +26,31 @@ import PostStatus from './components/post-status';
 import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
 import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
 import { PrivatePostExcerptPanel } from './components/post-excerpt/panel';
-import PostPublishButtonOrToggle from './components/post-publish-button/post-publish-button-or-toggle';
 import SavePublishPanels from './components/save-publish-panels';
 import PostContentInformation from './components/post-content-information';
 import PostLastEditedPanel from './components/post-last-edited-panel';
+import Sidebar from './components/sidebar';
+import {
+	mergeBaseAndUserConfigs,
+	GlobalStylesProvider,
+} from './components/global-styles-provider';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
 export const privateApis = {};
 lock( privateApis, {
-	CollapsableBlockToolbar,
-	DocumentTools,
 	EditorCanvas,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
+	GlobalStylesProvider,
+	Header,
 	InserterSidebar,
 	ListViewSidebar,
-	MoreMenu,
+	mergeBaseAndUserConfigs,
 	PatternOverridesPanel,
 	PluginPostExcerpt,
 	PostActions,
 	PostPanelRow,
-	PostViewLink,
-	PreviewDropdown,
 	PreferencesModal,
 	usePostActions,
 	PostCardPanel,
@@ -60,10 +58,10 @@ lock( privateApis, {
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
 	PrivatePostExcerptPanel,
-	PostPublishButtonOrToggle,
 	SavePublishPanels,
 	PostContentInformation,
 	PostLastEditedPanel,
+	Sidebar,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useAutoSwitchEditorSidebars,

package/src/private-apis.native.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import * as interfaceApis from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import EditorCanvas from './components/editor-canvas';
+import { ExperimentalEditorProvider } from './components/provider';
+import { lock } from './lock-unlock';
+import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
+import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars';
+import useBlockEditorSettings from './components/provider/use-block-editor-settings';
+import InserterSidebar from './components/inserter-sidebar';
+import ListViewSidebar from './components/list-view-sidebar';
+import PatternOverridesPanel from './components/pattern-overrides-panel';
+import PluginPostExcerpt from './components/post-excerpt/plugin';
+import PostPanelRow from './components/post-panel-row';
+import PreferencesModal from './components/preferences-modal';
+import PostActions from './components/post-actions';
+import { usePostActions } from './components/post-actions/actions';
+import PostCardPanel from './components/post-card-panel';
+import PostStatus from './components/post-status';
+import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
+import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
+import { PrivatePostExcerptPanel } from './components/post-excerpt/panel';
+import SavePublishPanels from './components/save-publish-panels';
+import PostContentInformation from './components/post-content-information';
+import PostLastEditedPanel from './components/post-last-edited-panel';
+
+const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
+
+export const privateApis = {};
+lock( privateApis, {
+	EditorCanvas,
+	ExperimentalEditorProvider,
+	EntitiesSavedStatesExtensible,
+	InserterSidebar,
+	ListViewSidebar,
+	PatternOverridesPanel,
+	PluginPostExcerpt,
+	PostActions,
+	PostPanelRow,
+	PreferencesModal,
+	usePostActions,
+	PostCardPanel,
+	PostStatus,
+	ToolsMoreMenuGroup,
+	ViewMoreMenuGroup,
+	PrivatePostExcerptPanel,
+	SavePublishPanels,
+	PostContentInformation,
+	PostLastEditedPanel,
+
+	// This is a temporary private API while we're updating the site editor to use EditorProvider.
+	useAutoSwitchEditorSidebars,
+	useBlockEditorSettings,
+	interfaceStore,
+	...remainingInterfaceApis,
+} );

package/src/store/private-selectors.js

@@ -75,6 +75,9 @@ export const getInsertionPoint = createRegistrySelector( ( select ) =>
 export function getListViewToggleRef( state ) {
 	return state.listViewToggleRef;
 }
+export function getInserterSidebarToggleRef( state ) {
+	return state.inserterSidebarToggleRef;
+}
 const CARD_ICONS = {
 	wp_block: symbol,
 	wp_navigation: navigation,

package/src/store/reducer.js

@@ -360,6 +360,17 @@ export function listViewToggleRef( state = { current: null } ) {
 	return state;
 }
 
+/**
+ * This reducer does nothing aside initializing a ref to the inserter sidebar toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the inserter sidebar toggle button.
+ */
+export function inserterSidebarToggleRef( state = { current: null } ) {
+	return state;
+}
+
 export function publishSidebarActive( state = false, action ) {
 	switch ( action.type ) {
 		case 'OPEN_PUBLISH_SIDEBAR':
@@ -387,6 +398,7 @@ export default combineReducers( {
 	deviceType,
 	removedPanels,
 	blockInserterPanel,
+	inserterSidebarToggleRef,
 	listViewPanel,
 	listViewToggleRef,
 	publishSidebarActive,