@wordpress/editor 14.17.1 → 14.19.0

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