@wordpress/editor 13.31.0 → 13.33.0

package/src/components/provider/use-block-editor-settings.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Platform, useMemo, useCallback } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	store as coreStore,
@@ -12,7 +12,10 @@ import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useViewportMatch } from '@wordpress/compose';
 import { store as blocksStore } from '@wordpress/blocks';
-import { privateApis } from '@wordpress/block-editor';
+import {
+	privateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -20,10 +23,18 @@ import { privateApis } from '@wordpress/block-editor';
 import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
+import { lock, unlock } from '../../lock-unlock';
 
 const EMPTY_BLOCKS_LIST = [];
 
+function __experimentalReusableBlocksSelect( select ) {
+	return (
+		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+			per_page: -1,
+		} ) ?? EMPTY_BLOCKS_LIST
+	);
+}
+
 const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalBlockDirectory',
 	'__experimentalDiscussionSettings',
@@ -62,6 +73,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'postContentAttributes',
 	'postsPerPage',
 	'readOnly',
+	'sectionRootClientId',
 	'styles',
 	'titlePlaceholder',
 	'supportsLayout',
@@ -77,13 +89,14 @@ const BLOCK_EDITOR_SETTINGS = [
 /**
  * React hook used to compute the block editor settings to use for the post editor.
  *
- * @param {Object} settings EditorProvider settings prop.
- * @param {string} postType Editor root level post type.
- * @param {string} postId   Editor root level post ID.
+ * @param {Object} settings      EditorProvider settings prop.
+ * @param {string} postType      Editor root level post type.
+ * @param {string} postId        Editor root level post ID.
+ * @param {string} renderingMode Editor rendering mode.
  *
  * @return {Object} Block Editor Settings.
  */
-function useBlockEditorSettings( settings, postType, postId ) {
+function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		allowRightClickOverrides,
@@ -92,7 +105,6 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		hasFixedToolbar,
 		isDistractionFree,
 		keepCaretInsideBlock,
-		reusableBlocks,
 		hasUploadPermissions,
 		hiddenBlockTypes,
 		canUseUnfilteredHTML,
@@ -101,23 +113,37 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		pageForPosts,
 		userPatternCategories,
 		restBlockPatternCategories,
+		sectionRootClientId,
 	} = useSelect(
 		( select ) => {
-			const isWeb = Platform.OS === 'web';
 			const {
 				canUser,
 				getRawEntityRecord,
 				getEntityRecord,
 				getUserPatternCategories,
-				getEntityRecords,
 				getBlockPatternCategories,
 			} = select( coreStore );
 			const { get } = select( preferencesStore );
 			const { getBlockTypes } = select( blocksStore );
+			const { getBlocksByName, getBlockAttributes } =
+				select( blockEditorStore );
 			const siteSettings = canUser( 'read', 'settings' )
 				? getEntityRecord( 'root', 'site' )
 				: undefined;
 
+			function getSectionRootBlock() {
+				if ( renderingMode === 'template-locked' ) {
+					return getBlocksByName( 'core/post-content' )?.[ 0 ] ?? '';
+				}
+
+				return (
+					getBlocksByName( 'core/group' ).find(
+						( clientId ) =>
+							getBlockAttributes( clientId )?.tagName === 'main'
+					) ?? ''
+				);
+			}
+
 			return {
 				allowRightClickOverrides: get(
 					'core',
@@ -135,20 +161,16 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				hiddenBlockTypes: get( 'core', 'hiddenBlockTypes' ),
 				isDistractionFree: get( 'core', 'distractionFree' ),
 				keepCaretInsideBlock: get( 'core', 'keepCaretInsideBlock' ),
-				reusableBlocks: isWeb
-					? getEntityRecords( 'postType', 'wp_block', {
-							per_page: -1,
-					  } )
-					: EMPTY_BLOCKS_LIST, // Reusable blocks are fetched in the native version of this hook.
 				hasUploadPermissions: canUser( 'create', 'media' ) ?? true,
 				userCanCreatePages: canUser( 'create', 'pages' ),
 				pageOnFront: siteSettings?.page_on_front,
 				pageForPosts: siteSettings?.page_for_posts,
 				userPatternCategories: getUserPatternCategories(),
 				restBlockPatternCategories: getBlockPatternCategories(),
+				sectionRootClientId: getSectionRootBlock(),
 			};
 		},
-		[ postType, postId, isLargeViewport ]
+		[ postType, postId, isLargeViewport, renderingMode ]
 	);
 
 	const settingsBlockPatterns =
@@ -230,8 +252,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 
 	const forceDisableFocusMode = settings.focusMode === false;
 
-	return useMemo(
-		() => ( {
+	return useMemo( () => {
+		const blockEditorSettings = {
 			...Object.fromEntries(
 				Object.entries( settings ).filter( ( [ key ] ) =>
 					BLOCK_EDITOR_SETTINGS.includes( key )
@@ -249,7 +271,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				unlock( select( coreStore ) ).getBlockPatternsForPostType(
 					postType
 				),
-			__experimentalReusableBlocks: reusableBlocks,
+			[ unlock( privateApis ).reusableBlocksSelectKey ]:
+				__experimentalReusableBlocksSelect,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalUserPatternCategories: userPatternCategories,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
@@ -277,31 +300,34 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					? [ [ 'core/navigation', {}, [] ] ]
 					: settings.template,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
-		} ),
-		[
-			allowedBlockTypes,
-			allowRightClickOverrides,
-			focusMode,
-			forceDisableFocusMode,
-			hasFixedToolbar,
-			isDistractionFree,
-			keepCaretInsideBlock,
-			settings,
-			hasUploadPermissions,
-			reusableBlocks,
-			userPatternCategories,
-			blockPatterns,
-			blockPatternCategories,
-			canUseUnfilteredHTML,
-			undo,
-			createPageEntity,
-			userCanCreatePages,
-			pageOnFront,
-			pageForPosts,
-			postType,
-			setIsInserterOpened,
-		]
-	);
+		};
+		lock( blockEditorSettings, {
+			sectionRootClientId,
+		} );
+		return blockEditorSettings;
+	}, [
+		allowedBlockTypes,
+		allowRightClickOverrides,
+		focusMode,
+		forceDisableFocusMode,
+		hasFixedToolbar,
+		isDistractionFree,
+		keepCaretInsideBlock,
+		settings,
+		hasUploadPermissions,
+		userPatternCategories,
+		blockPatterns,
+		blockPatternCategories,
+		canUseUnfilteredHTML,
+		undo,
+		createPageEntity,
+		userCanCreatePages,
+		pageOnFront,
+		pageForPosts,
+		postType,
+		setIsInserterOpened,
+		sectionRootClientId,
+	] );
 }
 
 export default useBlockEditorSettings;

package/src/components/provider/with-registry-provider.js

@@ -35,6 +35,7 @@ const withRegistryProvider = createHigherOrderComponent(
 					},
 					registry
 				);
+				// Todo: The interface store should also be created per instance.
 				newRegistry.registerStore( 'core/editor', storeConfig );
 				setSubRegistry( newRegistry );
 			}, [ registry ] );

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

@@ -0,0 +1,135 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } 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 { useAsyncList } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+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( () => {
+		// 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 shownBlockPatterns = useAsyncList( blockPatterns );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postType, postId } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+
+		return {
+			postType: getCurrentPostType(),
+			postId: getCurrentPostId(),
+		};
+	}, [] );
+	return (
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			shownPatterns={ shownBlockPatterns }
+			onClickPattern={ ( _pattern, blocks ) => {
+				editEntityRecord( 'postType', postType, postId, { blocks } );
+				onChoosePattern();
+			} }
+		/>
+	);
+}
+
+function StartPageOptionsModal( { onClose } ) {
+	const startPatterns = useStartPatterns();
+	const hasStartPattern = startPatterns.length > 0;
+
+	if ( ! hasStartPattern ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			title={ __( 'Choose a pattern' ) }
+			isFullScreen
+			onRequestClose={ onClose }
+		>
+			<div className="editor-start-page-options__modal-content">
+				<PatternSelection
+					blockPatterns={ startPatterns }
+					onChoosePattern={ onClose }
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default function StartPageOptions() {
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { shouldEnableModal, postType, postId } = useSelect( ( select ) => {
+		const {
+			isEditedPostDirty,
+			isEditedPostEmpty,
+			getCurrentPostType,
+			getCurrentPostId,
+			getEditorSettings,
+		} = select( editorStore );
+		const { __unstableIsPreviewMode: isPreviewMode } = getEditorSettings();
+
+		return {
+			shouldEnableModal:
+				! isPreviewMode && ! isEditedPostDirty() && isEditedPostEmpty(),
+			postType: getCurrentPostType(),
+			postId: getCurrentPostId(),
+		};
+	}, [] );
+
+	useEffect( () => {
+		// Should reset the modal state when navigating to a new page/post.
+		setIsClosed( false );
+	}, [ postType, postId ] );
+
+	if ( ! shouldEnableModal || isClosed ) {
+		return null;
+	}
+
+	return <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;
+}

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

@@ -0,0 +1,26 @@
+// 2 column masonry layout.
+.editor-start-page-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;
+		margin-bottom: $grid-unit-30;
+
+		.block-editor-block-preview__container {
+			min-height: 100px;
+		}
+
+		.block-editor-block-preview__content {
+			width: 100%;
+		}
+	}
+}

package/src/components/template-areas/index.js

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+function TemplateAreaItem( { area, clientId } ) {
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
+	const templatePartArea = useSelect(
+		( select ) => {
+			const defaultAreas =
+				select(
+					editorStore
+				).__experimentalGetDefaultTemplatePartAreas();
+
+			return defaultAreas.find(
+				( defaultArea ) => defaultArea.area === area
+			);
+		},
+		[ area ]
+	);
+
+	const highlightBlock = () => toggleBlockHighlight( clientId, true );
+	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
+
+	return (
+		<Button
+			className="editor-template-areas__item"
+			icon={ templatePartArea?.icon }
+			onMouseOver={ highlightBlock }
+			onMouseLeave={ cancelHighlightBlock }
+			onFocus={ highlightBlock }
+			onBlur={ cancelHighlightBlock }
+			onClick={ () => {
+				selectBlock( clientId );
+			} }
+		>
+			{ templatePartArea?.label }
+		</Button>
+	);
+}
+
+export default function TemplateAreas() {
+	const templateParts = useSelect(
+		( select ) =>
+			unlock( select( editorStore ) ).getCurrentTemplateTemplateParts(),
+		[]
+	);
+
+	if ( ! templateParts.length ) {
+		return null;
+	}
+
+	return (
+		<section className="editor-template-areas">
+			<Heading level={ 3 } className="editor-template-areas__title">
+				{ __( 'Areas' ) }
+			</Heading>
+
+			<ul className="editor-template-areas__list">
+				{ templateParts.map( ( { templatePart, block } ) => (
+					<li key={ block.clientId }>
+						<TemplateAreaItem
+							area={ templatePart.area }
+							clientId={ block.clientId }
+						/>
+					</li>
+				) ) }
+			</ul>
+		</section>
+	);
+}

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

@@ -0,0 +1,23 @@
+.editor-template-areas {
+	margin-top: $grid-unit-20;
+	&__list {
+		margin: 0;
+		> li {
+			margin: 0;
+		}
+	}
+
+	&__item {
+		width: 100%;
+
+		// Override the default padding.
+		&.components-button.has-icon {
+			padding: 0;
+		}
+	}
+}
+
+h3.components-heading.editor-template-areas__title {
+	font-weight: 500;
+	margin: 0 0 $grid-unit-10;
+}

package/src/components/template-validation-notice/index.js

@@ -1,63 +1,61 @@
 /**
  * WordPress dependencies
  */
-import { Notice } from '@wordpress/components';
+import {
+	Notice,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
-function TemplateValidationNotice( { isValid, ...props } ) {
+export default function TemplateValidationNotice() {
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
+	const isValid = useSelect( ( select ) => {
+		return select( blockEditorStore ).isValidTemplate();
+	}, [] );
+	const { setTemplateValidity, synchronizeTemplate } =
+		useDispatch( blockEditorStore );
+
 	if ( isValid ) {
 		return null;
 	}
 
-	const confirmSynchronization = () => {
-		if (
-			// eslint-disable-next-line no-alert
-			window.confirm(
-				__(
-					'Resetting the template may result in loss of content, do you want to continue?'
-				)
-			)
-		) {
-			props.synchronizeTemplate();
-		}
-	};
-
 	return (
-		<Notice
-			className="editor-template-validation-notice"
-			isDismissible={ false }
-			status="warning"
-			actions={ [
-				{
-					label: __( 'Keep it as is' ),
-					onClick: props.resetTemplateValidity,
-				},
-				{
-					label: __( 'Reset the template' ),
-					onClick: confirmSynchronization,
-				},
-			] }
-		>
-			{ __(
-				'The content of your post doesn’t match the template assigned to your post type.'
-			) }
-		</Notice>
+		<>
+			<Notice
+				className="editor-template-validation-notice"
+				isDismissible={ false }
+				status="warning"
+				actions={ [
+					{
+						label: __( 'Keep it as is' ),
+						onClick: () => setTemplateValidity( true ),
+					},
+					{
+						label: __( 'Reset the template' ),
+						onClick: () => setShowConfirmDialog( true ),
+					},
+				] }
+			>
+				{ __(
+					'The content of your post doesn’t match the template assigned to your post type.'
+				) }
+			</Notice>
+			<ConfirmDialog
+				isOpen={ showConfirmDialog }
+				confirmButtonText={ __( 'Reset' ) }
+				onConfirm={ () => {
+					setShowConfirmDialog( false );
+					synchronizeTemplate();
+				} }
+				onCancel={ () => setShowConfirmDialog( false ) }
+			>
+				{ __(
+					'Resetting the template may result in loss of content, do you want to continue?'
+				) }
+			</ConfirmDialog>
+		</>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => ( {
-		isValid: select( blockEditorStore ).isValidTemplate(),
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		const { setTemplateValidity, synchronizeTemplate } =
-			dispatch( blockEditorStore );
-		return {
-			resetTemplateValidity: () => setTemplateValidity( true ),
-			synchronizeTemplate,
-		};
-	} ),
-] )( TemplateValidationNotice );

package/src/components/theme-support-check/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -9,12 +9,14 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-export function ThemeSupportCheck( {
-	themeSupports,
-	children,
-	postType,
-	supportKeys,
-} ) {
+export default function ThemeSupportCheck( { children, supportKeys } ) {
+	const { postType, themeSupports } = useSelect( ( select ) => {
+		return {
+			postType: select( editorStore ).getEditedPostAttribute( 'type' ),
+			themeSupports: select( coreStore ).getThemeSupports(),
+		};
+	}, [] );
+
 	const isSupported = (
 		Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
 	).some( ( key ) => {
@@ -35,12 +37,3 @@ export function ThemeSupportCheck( {
 
 	return children;
 }
-
-export default withSelect( ( select ) => {
-	const { getThemeSupports } = select( coreStore );
-	const { getEditedPostAttribute } = select( editorStore );
-	return {
-		postType: getEditedPostAttribute( 'type' ),
-		themeSupports: getThemeSupports(),
-	};
-} )( ThemeSupportCheck );