@wordpress/editor 14.18.0 → 14.19.1

package/src/components/post-template/block-theme.js

@@ -4,12 +4,18 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+
 /**
  * Internal dependencies
  */
@@ -19,11 +25,6 @@ import ResetDefaultTemplate from './reset-default-template';
 import { unlock } from '../../lock-unlock';
 import CreateNewTemplate from './create-new-template';
 
-const POPOVER_PROPS = {
-	className: 'editor-post-template__dropdown',
-	placement: 'bottom-start',
-};
-
 export default function BlockThemeControl( { id } ) {
 	const {
 		isTemplateHidden,
@@ -52,7 +53,9 @@ export default function BlockThemeControl( { id } ) {
 		id
 	);
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const { setRenderingMode } = useDispatch( editorStore );
+	const { setRenderingMode, setDefaultRenderingMode } = unlock(
+		useDispatch( editorStore )
+	);
 
 	const canCreateTemplate = useSelect(
 		( select ) =>
@@ -63,6 +66,21 @@ export default function BlockThemeControl( { id } ) {
 		[]
 	);
 
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			className: 'editor-post-template__dropdown',
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
 	if ( ! hasResolved ) {
 		return null;
 	}
@@ -90,60 +108,62 @@ export default function BlockThemeControl( { id } ) {
 		}
 	};
 	return (
-		<DropdownMenu
-			popoverProps={ POPOVER_PROPS }
-			focusOnMount
-			toggleProps={ {
-				size: 'compact',
-				variant: 'tertiary',
-				tooltipPosition: 'middle left',
-			} }
-			label={ __( 'Template options' ) }
-			text={ decodeEntities( template.title ) }
-			icon={ null }
-		>
-			{ ( { onClose } ) => (
-				<>
-					<MenuGroup>
-						{ canCreateTemplate && (
+		<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
+			<DropdownMenu
+				popoverProps={ popoverProps }
+				focusOnMount
+				toggleProps={ {
+					size: 'compact',
+					variant: 'tertiary',
+					tooltipPosition: 'middle left',
+				} }
+				label={ __( 'Template options' ) }
+				text={ decodeEntities( template.title ) }
+				icon={ null }
+			>
+				{ ( { onClose } ) => (
+					<>
+						<MenuGroup>
+							{ canCreateTemplate && (
+								<MenuItem
+									onClick={ () => {
+										onNavigateToEntityRecord( {
+											postId: template.id,
+											postType: 'wp_template',
+										} );
+										onClose();
+										mayShowTemplateEditNotice();
+									} }
+								>
+									{ __( 'Edit template' ) }
+								</MenuItem>
+							) }
+
+							<SwapTemplateButton onClick={ onClose } />
+							<ResetDefaultTemplate onClick={ onClose } />
+							{ canCreateTemplate && (
+								<CreateNewTemplate onClick={ onClose } />
+							) }
+						</MenuGroup>
+						<MenuGroup>
 							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								isSelected={ ! isTemplateHidden }
+								role="menuitemcheckbox"
 								onClick={ () => {
-									onNavigateToEntityRecord( {
-										postId: template.id,
-										postType: 'wp_template',
-									} );
-									onClose();
-									mayShowTemplateEditNotice();
+									const newRenderingMode = isTemplateHidden
+										? 'template-locked'
+										: 'post-only';
+									setRenderingMode( newRenderingMode );
+									setDefaultRenderingMode( newRenderingMode );
 								} }
 							>
-								{ __( 'Edit template' ) }
+								{ __( 'Show template' ) }
 							</MenuItem>
-						) }
-
-						<SwapTemplateButton onClick={ onClose } />
-						<ResetDefaultTemplate onClick={ onClose } />
-						{ canCreateTemplate && (
-							<CreateNewTemplate onClick={ onClose } />
-						) }
-					</MenuGroup>
-					<MenuGroup>
-						<MenuItem
-							icon={ ! isTemplateHidden ? check : undefined }
-							isSelected={ ! isTemplateHidden }
-							role="menuitemcheckbox"
-							onClick={ () => {
-								setRenderingMode(
-									isTemplateHidden
-										? 'template-locked'
-										: 'post-only'
-								);
-							} }
-						>
-							{ __( 'Show template' ) }
-						</MenuItem>
-					</MenuGroup>
-				</>
-			) }
-		</DropdownMenu>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</PostPanelRow>
 	);
 }

package/src/components/post-template/classic-theme.js

@@ -16,11 +16,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { store as editorStore } from '../../store';
 import CreateNewTemplateModal from './create-new-template-modal';
 import { useAllowSwitchingTemplates } from './hooks';
-
-const POPOVER_PROPS = {
-	className: 'editor-post-template__dropdown',
-	placement: 'bottom-start',
-};
+import PostPanelRow from '../post-panel-row';
 
 function PostTemplateToggle( { isOpen, onClick } ) {
 	const templateTitle = useSelect( ( select ) => {
@@ -216,17 +212,37 @@ function PostTemplateDropdownContent( { onClose } ) {
 }
 
 function ClassicThemeControl() {
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			className: 'editor-post-template__dropdown',
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
 	return (
-		<Dropdown
-			popoverProps={ POPOVER_PROPS }
-			focusOnMount
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<PostTemplateToggle isOpen={ isOpen } onClick={ onToggle } />
-			) }
-			renderContent={ ( { onClose } ) => (
-				<PostTemplateDropdownContent onClose={ onClose } />
-			) }
-		/>
+		<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostTemplateToggle
+						isOpen={ isOpen }
+						onClick={ onToggle }
+					/>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<PostTemplateDropdownContent onClose={ onClose } />
+				) }
+			/>
+		</PostPanelRow>
 	);
 }
 

package/src/components/post-template/create-new-template-modal.js

@@ -126,6 +126,7 @@ export default function CreateNewTemplateModal( { onClose } ) {
 						placeholder={ DEFAULT_TITLE }
 						disabled={ isBusy }
 						help={ __(
+							// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 							'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
 						) }
 					/>

package/src/components/post-template/panel.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -11,7 +10,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '../../store';
 import ClassicThemeControl from './classic-theme';
 import BlockThemeControl from './block-theme';
-import PostPanelRow from '../post-panel-row';
 
 /**
  * Displays the template controls based on the current editor settings and user permissions.
@@ -65,19 +63,11 @@ export default function PostTemplatePanel() {
 	}, [] );
 
 	if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
-		return (
-			<PostPanelRow label={ __( 'Template' ) }>
-				<ClassicThemeControl />
-			</PostPanelRow>
-		);
+		return <ClassicThemeControl />;
 	}
 
 	if ( isBlockTheme && !! templateId ) {
-		return (
-			<PostPanelRow label={ __( 'Template' ) }>
-				<BlockThemeControl id={ templateId } />
-			</PostPanelRow>
-		);
+		return <BlockThemeControl id={ templateId } />;
 	}
 	return null;
 }

package/src/components/post-text-editor/style.scss

@@ -41,8 +41,6 @@ textarea.editor-post-text-editor {
 
 	&::-moz-placeholder {
 		color: $dark-gray-placeholder;
-		// Override Firefox default.
-		opacity: 1;
 	}
 
 	&:-ms-input-placeholder {

package/src/components/preferences-modal/block-visibility.js

@@ -14,6 +14,7 @@ import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { BlockManager } = unlock( blockEditorPrivateApis );
+const EMPTY_ARRAY = [];
 
 export default function BlockVisibility() {
 	const { showBlockTypes, hideBlockTypes } = unlock(
@@ -31,7 +32,7 @@ export default function BlockVisibility() {
 				select( editorStore ).getEditorSettings().allowedBlockTypes,
 			hiddenBlockTypes:
 				select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ??
-				[],
+				EMPTY_ARRAY,
 		};
 	}, [] );
 

package/src/components/preferences-modal/index.js

@@ -88,7 +88,7 @@ function PreferencesModalContents( { extraSections = {} } ) {
 									scope="core"
 									featureName="showListViewByDefault"
 									help={ __(
-										'Opens the List View sidebar by default.'
+										'Opens the List View panel by default.'
 									) }
 									label={ __( 'Always open List View' ) }
 								/>

package/src/components/preview-dropdown/index.js

@@ -56,7 +56,9 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			templateId: getCurrentTemplateId(),
 		};
 	}, [] );
-	const { setDeviceType, setRenderingMode } = useDispatch( editorStore );
+	const { setDeviceType, setRenderingMode, setDefaultRenderingMode } = unlock(
+		useDispatch( editorStore )
+	);
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
@@ -160,11 +162,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 								isSelected={ ! isTemplateHidden }
 								role="menuitemcheckbox"
 								onClick={ () => {
-									setRenderingMode(
-										isTemplateHidden
-											? 'template-locked'
-											: 'post-only'
-									);
+									const newRenderingMode = isTemplateHidden
+										? 'template-locked'
+										: 'post-only';
+									setRenderingMode( newRenderingMode );
+									setDefaultRenderingMode( newRenderingMode );
 								} }
 							>
 								{ __( 'Show template' ) }

package/src/components/provider/index.js

@@ -56,11 +56,6 @@ const NON_CONTEXTUAL_POST_TYPES = [
 	'wp_template_part',
 ];
 
-/**
- * These are rendering modes that the editor supports.
- */
-const RENDERING_MODES = [ 'post-only', 'template-locked' ];
-
 /**
  * Depending on the post, template and template mode,
  * returns the appropriate blocks and change handlers for the block editor provider.
@@ -183,34 +178,28 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					getEditorSelection,
 					getRenderingMode,
 					__unstableIsEditorReady,
-				} = select( editorStore );
-				const {
-					getEntitiesConfig,
-					getPostType,
-					hasFinishedResolution,
-				} = select( coreStore );
+					getDefaultRenderingMode,
+				} = unlock( select( editorStore ) );
+				const { getEntitiesConfig } = select( coreStore );
 
-				const postTypeSupports = getPostType( post.type )?.supports;
-				const hasLoadedPostObject = hasFinishedResolution(
-					'getPostType',
-					[ post.type ]
-				);
-
-				const _defaultMode = Array.isArray( postTypeSupports?.editor )
-					? postTypeSupports.editor.find(
-							( features ) => 'default-mode' in features
-					  )?.[ 'default-mode' ]
-					: undefined;
-				const hasDefaultMode = RENDERING_MODES.includes( _defaultMode );
+				const _defaultMode = getDefaultRenderingMode( post.type );
+				/**
+				 * To avoid content "flash", wait until rendering mode has been resolved.
+				 * This is important for the initial render of the editor.
+				 *
+				 * - Wait for template to be resolved if the default mode is 'template-locked'.
+				 * - Wait for default mode to be resolved otherwise.
+				 */
+				const hasResolvedMode =
+					_defaultMode === 'template-locked'
+						? hasTemplate
+						: _defaultMode !== undefined;
 
 				return {
 					editorSettings: getEditorSettings(),
-					isReady: __unstableIsEditorReady() && hasLoadedPostObject,
+					isReady: __unstableIsEditorReady() && hasResolvedMode,
 					mode: getRenderingMode(),
-					defaultMode:
-						hasTemplate && hasDefaultMode
-							? _defaultMode
-							: 'post-only',
+					defaultMode: _defaultMode,
 					selection: getEditorSelection(),
 					postTypeEntities:
 						post.type === 'wp_template'
@@ -221,7 +210,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			[ post.type, hasTemplate ]
 		);
 
-		const shouldRenderTemplate = !! template && mode !== 'post-only';
+		const shouldRenderTemplate = hasTemplate && mode !== 'post-only';
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
 			const postContext = {};
@@ -338,7 +327,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 
 		// Sets the right rendering mode when loading the editor.
 		useEffect( () => {
-			setRenderingMode( defaultMode );
+			if ( defaultMode ) {
+				setRenderingMode( defaultMode );
+			}
 		}, [ defaultMode, setRenderingMode ] );
 
 		useHideBlocksFromInserter( post.type, mode );

package/src/components/sidebar/header.js

@@ -22,7 +22,7 @@ const SidebarHeader = ( _, ref ) => {
 		return {
 			documentLabel:
 				// translators: Default label for the Document sidebar tab, not selected.
-				getPostTypeLabel() || _x( 'Document', 'noun, sidebar' ),
+				getPostTypeLabel() || _x( 'Document', 'noun, panel' ),
 		};
 	}, [] );
 

package/src/components/sidebar/index.js

@@ -103,7 +103,7 @@ const SidebarContent = ( {
 			headerClassName="editor-sidebar__panel-tabs"
 			title={
 				/* translators: button label text should, if possible, be under 16 characters. */
-				_x( 'Settings', 'sidebar button label' )
+				_x( 'Settings', 'panel button label' )
 			}
 			toggleShortcut={ keyboardShortcut }
 			icon={ isRTL() ? drawerLeft : drawerRight }

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

@@ -1,8 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
+import { Flex, FlexItem, Modal, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import {
+	store as blockEditorStore,
+	__experimentalBlockPatternsList as BlockPatternsList,
+} from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as interfaceStore } from '@wordpress/interface';
 
@@ -11,11 +19,132 @@ import { store as interfaceStore } from '@wordpress/interface';
  */
 import { store as editorStore } from '../../store';
 
+export function useStartPatterns() {
+	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
+	// and it has no postTypes declared and the current post type is page or if
+	// the current post type is part of the postTypes declared.
+	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
+		( select ) => {
+			const { getPatternsByBlockTypes, getBlocksByName } =
+				select( blockEditorStore );
+			const { getCurrentPostType, getRenderingMode } =
+				select( editorStore );
+			const rootClientId =
+				getRenderingMode() === 'post-only'
+					? ''
+					: getBlocksByName( 'core/post-content' )?.[ 0 ];
+			return {
+				blockPatternsWithPostContentBlockType: getPatternsByBlockTypes(
+					'core/post-content',
+					rootClientId
+				),
+				postType: getCurrentPostType(),
+			};
+		},
+		[]
+	);
+
+	return useMemo( () => {
+		if ( ! blockPatternsWithPostContentBlockType?.length ) {
+			return [];
+		}
+
+		/*
+		 * Filter patterns without postTypes declared if the current postType is page
+		 * or patterns that declare the current postType in its post type array.
+		 */
+		return blockPatternsWithPostContentBlockType.filter( ( pattern ) => {
+			return (
+				( postType === 'page' && ! pattern.postTypes ) ||
+				( Array.isArray( pattern.postTypes ) &&
+					pattern.postTypes.includes( postType ) )
+			);
+		} );
+	}, [ postType, blockPatternsWithPostContentBlockType ] );
+}
+
+function PatternSelection( { blockPatterns, onChoosePattern } ) {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postType, postId } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+
+		return {
+			postType: getCurrentPostType(),
+			postId: getCurrentPostId(),
+		};
+	}, [] );
+	return (
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			onClickPattern={ ( _pattern, blocks ) => {
+				editEntityRecord( 'postType', postType, postId, {
+					blocks,
+					content: ( { blocks: blocksForSerialization = [] } ) =>
+						__unstableSerializeAndClean( blocksForSerialization ),
+				} );
+				onChoosePattern();
+			} }
+		/>
+	);
+}
+
+function StartPageOptionsModal( { onClose } ) {
+	const [ showStartPatterns, setShowStartPatterns ] = useState( true );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const startPatterns = useStartPatterns();
+	const hasStartPattern = startPatterns.length > 0;
+
+	if ( ! hasStartPattern ) {
+		return null;
+	}
+
+	function handleClose() {
+		onClose();
+		setPreference( 'core', 'enableChoosePatternModal', showStartPatterns );
+	}
+
+	return (
+		<Modal
+			className="editor-start-page-options__modal"
+			title={ __( 'Choose a pattern' ) }
+			isFullScreen
+			onRequestClose={ handleClose }
+		>
+			<div className="editor-start-page-options__modal-content">
+				<PatternSelection
+					blockPatterns={ startPatterns }
+					onChoosePattern={ handleClose }
+				/>
+			</div>
+			<Flex
+				className="editor-start-page-options__modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						checked={ showStartPatterns }
+						label={ __( 'Show starter patterns' ) }
+						help={ __(
+							'Shows starter patterns when creating a new page.'
+						) }
+						onChange={ ( newValue ) => {
+							setShowStartPatterns( newValue );
+						} }
+					/>
+				</FlexItem>
+			</Flex>
+		</Modal>
+	);
+}
+
 export default function StartPageOptions() {
-	const { postId, enabled } = useSelect( ( select ) => {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const { isEditedPostDirty, isEditedPostEmpty } = useSelect( editorStore );
+	const { isModalActive } = useSelect( interfaceStore );
+	const { enabled, postId } = useSelect( ( select ) => {
 		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
-		const preferencesModalActive =
-			select( interfaceStore ).isModalActive( 'editor/preferences' );
 		const choosePatternModalEnabled = select( preferencesStore ).get(
 			'core',
 			'enableChoosePatternModal'
@@ -23,36 +152,33 @@ export default function StartPageOptions() {
 		return {
 			postId: getCurrentPostId(),
 			enabled:
-				choosePatternModalEnabled &&
-				! preferencesModalActive &&
-				'page' === getCurrentPostType(),
+				choosePatternModalEnabled && 'page' === getCurrentPostType(),
 		};
 	}, [] );
-	const { isEditedPostDirty, isEditedPostEmpty } = useSelect( editorStore );
-	const { setIsInserterOpened } = useDispatch( editorStore );
 
+	// Note: The `postId` ensures the effect re-runs when pages are switched without remounting the component.
+	// Examples: changing pages in the List View, creating a new page via Command Palette.
 	useEffect( () => {
-		if ( ! enabled ) {
-			return;
-		}
-
 		const isFreshPage = ! isEditedPostDirty() && isEditedPostEmpty();
-		if ( isFreshPage ) {
-			setIsInserterOpened( {
-				tab: 'patterns',
-				category: 'core/starter-content',
-			} );
+		// Prevents immediately opening when features is enabled via preferences modal.
+		const isPreferencesModalActive = isModalActive( 'editor/preferences' );
+		if ( ! enabled || ! isFreshPage || isPreferencesModalActive ) {
+			return;
 		}
 
-		// Note: The `postId` ensures the effect re-runs when pages are switched without remounting the component.
-		// Examples: changing pages in the List View, creating a new page via Command Palette.
+		// Open the modal after the initial render for a new page.
+		setIsOpen( true );
 	}, [
-		postId,
 		enabled,
-		setIsInserterOpened,
+		postId,
 		isEditedPostDirty,
 		isEditedPostEmpty,
+		isModalActive,
 	] );
 
-	return null;
+	if ( ! isOpen ) {
+		return null;
+	}
+
+	return <StartPageOptionsModal onClose={ () => setIsOpen( false ) } />;
 }