@wordpress/editor 14.18.0 → 14.19.0

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 ) } />;
 }

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

@@ -1,3 +1,30 @@
+$actions-height: 92px;
+
+.editor-start-page-options__modal {
+	.editor-start-page-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-page-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;
+	}
+}
+
 // 2 column masonry layout.
 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
 	column-count: 2;

package/src/components/visual-editor/edit-template-blocks-notification.js

@@ -94,7 +94,7 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			size="medium"
 		>
 			{ __(
-				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?'
+				'You’ve tried to select a block that is part of a template that may be used elsewhere on your site. Would you like to edit the template?'
 			) }
 		</ConfirmDialog>
 	);

package/src/store/private-actions.js

@@ -492,3 +492,36 @@ export const removeTemplates =
 				.createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
 	};
+
+/**
+ * Set the default rendering mode preference for the current post type.
+ *
+ * @param {string} mode The rendering mode to set as default.
+ */
+export const setDefaultRenderingMode =
+	( mode ) =>
+	( { select, registry } ) => {
+		const postType = select.getCurrentPostType();
+		const theme = registry
+			.select( coreStore )
+			.getCurrentTheme()?.stylesheet;
+		const renderingModes =
+			registry
+				.select( preferencesStore )
+				.get( 'core', 'renderingModes' )?.[ theme ] ?? {};
+
+		if ( renderingModes[ postType ] === mode ) {
+			return;
+		}
+
+		const newModes = {
+			[ theme ]: {
+				...renderingModes,
+				[ postType ]: mode,
+			},
+		};
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'renderingModes', newModes );
+	};

package/src/store/private-selectors.js

@@ -16,6 +16,7 @@ import {
 	verse,
 } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -34,6 +35,11 @@ const EMPTY_INSERTION_POINT = {
 	filterValue: undefined,
 };
 
+/**
+ * These are rendering modes that the editor supports.
+ */
+const RENDERING_MODES = [ 'post-only', 'template-locked' ];
+
 /**
  * Get the inserter.
  *
@@ -215,3 +221,54 @@ export const getPostBlocksByName = createRegistrySelector( ( select ) =>
 		() => [ select( blockEditorStore ).getBlocks() ]
 	)
 );
+
+/**
+ * Returns the default rendering mode for a post type by user preference or post type configuration.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} postType The post type.
+ *
+ * @return {string} The default rendering mode. Returns `undefined` while resolving value.
+ */
+export const getDefaultRenderingMode = createRegistrySelector(
+	( select ) => ( state, postType ) => {
+		const { getPostType, getCurrentTheme, hasFinishedResolution } =
+			select( coreStore );
+
+		// This needs to be called before `hasFinishedResolution`.
+		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+		const currentTheme = getCurrentTheme();
+		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+		const postTypeEntity = getPostType( postType );
+
+		// Wait for the post type and theme resolution.
+		if (
+			! hasFinishedResolution( 'getPostType', [ postType ] ) ||
+			! hasFinishedResolution( 'getCurrentTheme' )
+		) {
+			return undefined;
+		}
+
+		const theme = currentTheme?.stylesheet;
+		const defaultModePreference = select( preferencesStore ).get(
+			'core',
+			'renderingModes'
+		)?.[ theme ]?.[ postType ];
+		const postTypeDefaultMode = Array.isArray(
+			postTypeEntity?.supports?.editor
+		)
+			? postTypeEntity.supports.editor.find(
+					( features ) => 'default-mode' in features
+			  )?.[ 'default-mode' ]
+			: undefined;
+
+		const defaultMode = defaultModePreference || postTypeDefaultMode;
+
+		// Fallback gracefully to 'post-only' when rendering mode is not supported.
+		if ( ! RENDERING_MODES.includes( defaultMode ) ) {
+			return 'post-only';
+		}
+
+		return defaultMode;
+	}
+);

package/src/utils/media-upload/index.js

@@ -28,6 +28,7 @@ const noop = () => {};
  * @param {Function} $0.onError           Function called when an error happens.
  * @param {Function} $0.onFileChange      Function called each time a file or a temporary representation of the file is available.
  * @param {Function} $0.onSuccess         Function called after the final representation of the file is available.
+ * @param {boolean}  $0.multiple          Whether to allow multiple files to be uploaded.
  */
 export default function mediaUpload( {
 	additionalData = {},
@@ -37,6 +38,7 @@ export default function mediaUpload( {
 	onError = noop,
 	onFileChange,
 	onSuccess,
+	multiple = true,
 } ) {
 	const { getCurrentPost, getEditorSettings } = select( editorStore );
 	const {
@@ -92,5 +94,6 @@ export default function mediaUpload( {
 			onError( message );
 		},
 		wpAllowedMimeTypes,
+		multiple,
 	} );
 }