@wordpress/editor 13.33.0 → 13.35.0

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

@@ -12,42 +12,56 @@ 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 ModeSwitcher from './components/mode-switcher';
 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';
 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';
+import Sidebar from './components/sidebar';
+import {
+	mergeBaseAndUserConfigs,
+	GlobalStylesProvider,
+} from './components/global-styles-provider';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
 export const privateApis = {};
 lock( privateApis, {
-	DocumentTools,
 	EditorCanvas,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
+	GlobalStylesProvider,
+	Header,
 	InserterSidebar,
 	ListViewSidebar,
-	ModeSwitcher,
+	mergeBaseAndUserConfigs,
 	PatternOverridesPanel,
 	PluginPostExcerpt,
 	PostActions,
 	PostPanelRow,
-	PostViewLink,
-	PreviewDropdown,
 	PreferencesModal,
 	usePostActions,
 	PostCardPanel,
 	PostStatus,
+	ToolsMoreMenuGroup,
+	ViewMoreMenuGroup,
+	PrivatePostExcerptPanel,
+	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,

package/src/store/selectors.js

@@ -838,7 +838,9 @@ export const getSuggestedPostFormat = createRegistrySelector(
 	( select ) => () => {
 		const blocks = select( blockEditorStore ).getBlocks();
 
-		if ( blocks.length > 2 ) return null;
+		if ( blocks.length > 2 ) {
+			return null;
+		}
 
 		let name;
 		// If there is only one block in the content of the post grab its name

package/src/style.scss

@@ -2,27 +2,35 @@
 
 @import "./components/autocompleters/style.scss";
 @import "./components/block-manager/style.scss";
+@import "./components/collapsible-block-toolbar/style.scss";
+@import "./components/block-settings-menu/style.scss";
 @import "./components/document-bar/style.scss";
 @import "./components/document-outline/style.scss";
 @import "./components/document-tools/style.scss";
 @import "./components/editor-notices/style.scss";
 @import "./components/entities-saved-states/style.scss";
 @import "./components/error-boundary/style.scss";
+@import "./components/header/style.scss";
 @import "./components/inserter-sidebar/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/list-view-sidebar/style.scss";
 @import "./components/post-author/style.scss";
 @import "./components/post-actions/style.scss";
 @import "./components/post-card-panel/style.scss";
+@import "./components/post-content-information/style.scss";
+@import "./components/post-discussion/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";
+@import "./components/post-last-edited-panel/style.scss";
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
 @import "./components/post-panel-row/style.scss";
+@import "./components/post-panel-section/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
 @import "./components/post-schedule/style.scss";
+@import "./components/post-slug/style.scss";
 @import "./components/post-status/style.scss";
 @import "./components/post-sync-status/style.scss";
 @import "./components/post-taxonomies/style.scss";
@@ -33,6 +41,9 @@
 @import "./components/post-visibility/style.scss";
 @import "./components/post-trash/style.scss";
 @import "./components/preview-dropdown/style.scss";
+@import "./components/save-publish-panels/style.scss";
 @import "./components/start-page-options/style.scss";
+@import "./components/start-template-options/style.scss";
+@import "./components/sidebar/style.scss";
 @import "./components/table-of-contents/style.scss";
 @import "./components/template-areas/style.scss";

package/src/components/post-slug/test/check.js

@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import PostSlugCheck from '../check';
-
-describe( 'PostSlugCheck', () => {
-	it( 'should render control', () => {
-		render( <PostSlugCheck>slug</PostSlugCheck> );
-
-		expect( screen.getByText( 'slug' ) ).toBeVisible();
-	} );
-} );