@wordpress/editor 13.32.0 → 13.33.0

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

@@ -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,7 +23,7 @@ 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 = [];
 
@@ -70,6 +73,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'postContentAttributes',
 	'postsPerPage',
 	'readOnly',
+	'sectionRootClientId',
 	'styles',
 	'titlePlaceholder',
 	'supportsLayout',
@@ -85,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,
@@ -108,6 +113,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		pageForPosts,
 		userPatternCategories,
 		restBlockPatternCategories,
+		sectionRootClientId,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -119,10 +125,25 @@ function useBlockEditorSettings( settings, postType, postId ) {
 			} = 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',
@@ -146,9 +167,10 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				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 )
@@ -278,30 +300,34 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					? [ [ 'core/navigation', {}, [] ] ]
 					: settings.template,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
-		} ),
-		[
-			allowedBlockTypes,
-			allowRightClickOverrides,
-			focusMode,
-			forceDisableFocusMode,
-			hasFixedToolbar,
-			isDistractionFree,
-			keepCaretInsideBlock,
-			settings,
-			hasUploadPermissions,
-			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-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 );

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

@@ -3,27 +3,38 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { ThemeSupportCheck } from '../index';
+import ThemeSupportCheck from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( themeSupports = {}, postType = 'post' ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getEditedPostAttribute: () => postType,
+			getThemeSupports: () => themeSupports,
+		} ) );
+	} );
+}
 
 describe( 'ThemeSupportCheck', () => {
 	it( "should not render if there's no support check provided", () => {
+		setupUseSelectMock( { 'post-thumbnails': true } );
 		render( <ThemeSupportCheck>foobar</ThemeSupportCheck> );
 		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if post-thumbnails are supported', () => {
-		const themeSupports = {
-			'post-thumbnails': true,
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock( { 'post-thumbnails': true } );
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -31,16 +42,14 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( 'should render if post-thumbnails are supported for the post type', () => {
-		const themeSupports = {
-			'post-thumbnails': [ 'post' ],
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock(
+			{
+				'post-thumbnails': [ 'post' ],
+			},
+			'post'
+		);
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				postType={ 'post' }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -48,16 +57,14 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( "should not render if post-thumbnails aren't supported for the post type", () => {
-		const themeSupports = {
-			'post-thumbnails': [ 'post' ],
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock(
+			{
+				'post-thumbnails': [ 'post' ],
+			},
+			'page'
+		);
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				postType={ 'page' }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -65,16 +72,14 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( 'should not render if post-thumbnails is limited and false is passed for postType', () => {
-		const themeSupports = {
-			'post-thumbnails': [ 'post' ],
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock(
+			{
+				'post-thumbnails': [ 'post' ],
+			},
+			false
+		);
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				postType={ false }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -82,15 +87,11 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( "should not render if theme doesn't support post-thumbnails", () => {
-		const themeSupports = {
+		setupUseSelectMock( {
 			'post-thumbnails': false,
-		};
-		const supportKeys = 'post-thumbnails';
+		} );
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);