@wordpress/editor 13.30.0 → 13.32.0

package/src/components/post-featured-image/index.js

@@ -7,7 +7,6 @@ import {
 	DropZone,
 	Button,
 	Spinner,
-	ResponsiveWrapper,
 	withNotices,
 	withFilters,
 	__experimentalHStack as HStack,
@@ -99,10 +98,7 @@ function PostFeaturedImage( {
 	const toggleRef = useRef();
 	const [ isLoading, setIsLoading ] = useState( false );
 	const { getSettings } = useSelect( blockEditorStore );
-	const { mediaWidth, mediaHeight, mediaSourceUrl } = getMediaDetails(
-		media,
-		currentPostId
-	);
+	const { mediaSourceUrl } = getMediaDetails( media, currentPostId );
 
 	function onDropFiles( filesList ) {
 		getSettings().mediaUpload( {
@@ -183,16 +179,11 @@ function PostFeaturedImage( {
 									}
 								>
 									{ !! featuredImageId && media && (
-										<ResponsiveWrapper
-											naturalWidth={ mediaWidth }
-											naturalHeight={ mediaHeight }
-											isInline
-										>
-											<img
-												src={ mediaSourceUrl }
-												alt=""
-											/>
-										</ResponsiveWrapper>
+										<img
+											className="editor-post-featured-image__preview-image"
+											src={ mediaSourceUrl }
+											alt=""
+										/>
 									) }
 									{ isLoading && <Spinner /> }
 									{ ! featuredImageId &&

package/src/components/post-featured-image/panel.js

@@ -15,7 +15,7 @@ import PostFeaturedImageCheck from './check';
 
 const PANEL_NAME = 'featured-image';
 
-function FeaturedImage() {
+export default function PostFeaturedImagePanel( { withPanelBody = true } ) {
 	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
 		const {
 			getEditedPostAttribute,
@@ -37,6 +37,14 @@ function FeaturedImage() {
 		return null;
 	}
 
+	if ( ! withPanelBody ) {
+		return (
+			<PostFeaturedImageCheck>
+				<PostFeaturedImage />
+			</PostFeaturedImageCheck>
+		);
+	}
+
 	return (
 		<PostFeaturedImageCheck>
 			<PanelBody
@@ -51,5 +59,3 @@ function FeaturedImage() {
 		</PostFeaturedImageCheck>
 	);
 }
-
-export default FeaturedImage;

package/src/components/post-featured-image/style.scss

@@ -1,7 +1,6 @@
 .editor-post-featured-image {
 	padding: 0;
 
-
 	.components-spinner {
 		position: absolute;
 		top: 50%;
@@ -9,13 +8,6 @@
 		margin-top: -9px;
 		margin-left: -9px;
 	}
-
-	// This keeps images at their intrinsic size (eg. a 50px
-	// image will never be wider than 50px).
-	.components-responsive-wrapper__content {
-		max-width: 100%;
-		width: auto;
-	}
 }
 
 .editor-post-featured-image__container {
@@ -38,26 +30,30 @@
 	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
 	overflow: hidden; // Ensure the focus style properly encapsulates the image.
+	outline-offset: -#{$border-width};
+	min-height: $grid-unit-50 * 2;
+	margin-bottom: $grid-unit-20;
 
-	// Apply a max-height.
 	display: flex;
 	justify-content: center;
-	max-height: 150px;
 }
 
 .editor-post-featured-image__preview {
 	height: auto;
+	outline: $border-width solid rgba($black, 0.1);
 
-	.components-responsive-wrapper {
+	.editor-post-featured-image__preview-image {
+		object-fit: cover;
 		width: 100%;
-		background: $gray-100;
+		object-position: 50% 50%;
+		aspect-ratio: 2/1;
 	}
 }
 
 .editor-post-featured-image__toggle {
 	border-radius: $radius-block-ui;
 	background-color: $gray-100;
-	min-height: 90px;
+	height: 100%;
 	line-height: 20px;
 	padding: $grid-unit-10 0;
 	text-align: center;

package/src/components/post-sync-status/index.js

@@ -1,26 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
-import {
-	Modal,
-	Button,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	ToggleControl,
-} from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { ReusableBlocksRenameHint } = unlock( blockEditorPrivateApis );
 
 export default function PostSyncStatus() {
 	const { syncStatus, postType } = useSelect( ( select ) => {
@@ -59,84 +47,3 @@ export default function PostSyncStatus() {
 		</PostPanelRow>
 	);
 }
-
-export function PostSyncStatusModal() {
-	const { editPost } = useDispatch( editorStore );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const [ syncType, setSyncType ] = useState( undefined );
-
-	const { postType, isNewPost } = useSelect( ( select ) => {
-		const { getEditedPostAttribute, isCleanNewPost } =
-			select( editorStore );
-		return {
-			postType: getEditedPostAttribute( 'type' ),
-			isNewPost: isCleanNewPost(),
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( isNewPost && postType === 'wp_block' ) {
-			setIsModalOpen( true );
-		}
-		// We only want the modal to open when the page is first loaded.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
-	const setSyncStatus = () => {
-		editPost( {
-			meta: {
-				wp_pattern_sync_status: syncType,
-			},
-		} );
-	};
-
-	if ( postType !== 'wp_block' || ! isNewPost ) {
-		return null;
-	}
-
-	return (
-		<>
-			{ isModalOpen && (
-				<Modal
-					title={ __( 'Set pattern sync status' ) }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName="reusable-blocks-menu-items__convert-modal"
-				>
-					<form
-						onSubmit={ ( event ) => {
-							event.preventDefault();
-							setIsModalOpen( false );
-							setSyncStatus();
-						} }
-					>
-						<VStack spacing="5">
-							<ReusableBlocksRenameHint />
-							<ToggleControl
-								label={ _x(
-									'Synced',
-									'Option that makes an individual pattern synchronized'
-								) }
-								help={ __(
-									'Sync this pattern across multiple locations.'
-								) }
-								checked={ ! syncType }
-								onChange={ () => {
-									setSyncType(
-										! syncType ? 'unsynced' : undefined
-									);
-								} }
-							/>
-							<HStack justify="right">
-								<Button variant="primary" type="submit">
-									{ __( 'Create' ) }
-								</Button>
-							</HStack>
-						</VStack>
-					</form>
-				</Modal>
-			) }
-		</>
-	);
-}

package/src/components/post-taxonomies/flat-term-selector.js

@@ -40,10 +40,13 @@ const isSameTermName = ( termA, termB ) =>
 	unescapeString( termB ).toLowerCase();
 
 const termNamesToIds = ( names, terms ) => {
-	return names.map(
-		( termName ) =>
-			terms.find( ( term ) => isSameTermName( term.name, termName ) ).id
-	);
+	return names
+		.map(
+			( termName ) =>
+				terms.find( ( term ) => isSameTermName( term.name, termName ) )
+					?.id
+		)
+		.filter( ( id ) => id !== undefined );
 };
 
 export function FlatTermSelector( { slug } ) {
@@ -193,9 +196,8 @@ export function FlatTermSelector( { slug } ) {
 		setValues( uniqueTerms );
 
 		if ( newTermNames.length === 0 ) {
-			return onUpdateTerms(
-				termNamesToIds( uniqueTerms, availableTerms )
-			);
+			onUpdateTerms( termNamesToIds( uniqueTerms, availableTerms ) );
+			return;
 		}
 
 		if ( ! hasCreateAction ) {
@@ -209,7 +211,7 @@ export function FlatTermSelector( { slug } ) {
 		)
 			.then( ( newTerms ) => {
 				const newAvailableTerms = availableTerms.concat( newTerms );
-				return onUpdateTerms(
+				onUpdateTerms(
 					termNamesToIds( uniqueTerms, newAvailableTerms )
 				);
 			} )
@@ -217,6 +219,9 @@ export function FlatTermSelector( { slug } ) {
 				createErrorNotice( error.message, {
 					type: 'snackbar',
 				} );
+				// In case of a failure, try assigning available terms.
+				// This will invalidate the optimistic update.
+				onUpdateTerms( termNamesToIds( uniqueTerms, availableTerms ) );
 			} );
 	}
 

package/src/components/post-title/index.native.js

@@ -164,7 +164,7 @@ class PostTitle extends Component {
 				accessibilityHint={ __( 'Updates the title.' ) }
 			>
 				<RichText.Raw
-					setRef={ this.setRef }
+					ref={ this.setRef }
 					accessibilityLabel={ this.getTitle( title, postType ) }
 					tagName={ 'p' }
 					tagsToEliminate={ [ 'strong' ] }

package/src/components/provider/disable-non-page-content-blocks.js

@@ -4,50 +4,70 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 
-const PAGE_CONTENT_BLOCKS = [
+const CONTENT_ONLY_BLOCKS = applyFilters( 'editor.postContentBlockTypes', [
 	'core/post-title',
 	'core/post-featured-image',
 	'core/post-content',
-];
+	'core/template-part',
+] );
 
-function useDisableNonPageContentBlocks() {
-	const contentIds = useSelect( ( select ) => {
+/**
+ * Component that when rendered, makes it so that the site editor allows only
+ * page content to be edited.
+ */
+export default function DisableNonPageContentBlocks() {
+	const contentOnlyIds = useSelect( ( select ) => {
 		const { getBlocksByName, getBlockParents, getBlockName } =
 			select( blockEditorStore );
-		return getBlocksByName( PAGE_CONTENT_BLOCKS ).filter( ( clientId ) =>
+		return getBlocksByName( CONTENT_ONLY_BLOCKS ).filter( ( clientId ) =>
 			getBlockParents( clientId ).every( ( parentClientId ) => {
 				const parentBlockName = getBlockName( parentClientId );
 				return (
+					// Ignore descendents of the query block.
 					parentBlockName !== 'core/query' &&
-					! PAGE_CONTENT_BLOCKS.includes( parentBlockName )
+					// Enable only the top-most block.
+					! CONTENT_ONLY_BLOCKS.includes( parentBlockName )
 				);
 			} )
 		);
 	}, [] );
 
+	const disabledIds = useSelect( ( select ) => {
+		const { getBlocksByName, getBlockOrder } = select( blockEditorStore );
+		return getBlocksByName( [ 'core/template-part' ] ).flatMap(
+			( clientId ) => getBlockOrder( clientId )
+		);
+	}, [] );
+
 	const { setBlockEditingMode, unsetBlockEditingMode } =
 		useDispatch( blockEditorStore );
 
 	useEffect( () => {
-		setBlockEditingMode( '', 'disabled' ); // Disable editing at the root level.
-
-		for ( const contentId of contentIds ) {
-			setBlockEditingMode( contentId, 'contentOnly' ); // Re-enable each content block.
+		setBlockEditingMode( '', 'disabled' );
+		for ( const clientId of contentOnlyIds ) {
+			setBlockEditingMode( clientId, 'contentOnly' );
 		}
+		for ( const clientId of disabledIds ) {
+			setBlockEditingMode( clientId, 'disabled' );
+		}
+
 		return () => {
 			unsetBlockEditingMode( '' );
-			for ( const contentId of contentIds ) {
-				unsetBlockEditingMode( contentId );
+			for ( const clientId of contentOnlyIds ) {
+				unsetBlockEditingMode( clientId );
+			}
+			for ( const clientId of disabledIds ) {
+				unsetBlockEditingMode( clientId );
 			}
 		};
-	}, [ contentIds, setBlockEditingMode, unsetBlockEditingMode ] );
-}
+	}, [
+		contentOnlyIds,
+		disabledIds,
+		setBlockEditingMode,
+		unsetBlockEditingMode,
+	] );
 
-/**
- * Component that when rendered, makes it so that the site editor allows only
- * page content to be edited.
- */
-export default function DisableNonPageContentBlocks() {
-	useDisableNonPageContentBlocks();
+	return null;
 }

package/src/components/provider/index.js

@@ -232,7 +232,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			setRenderingMode( settings.defaultRenderingMode ?? 'post-only' );
 		}, [ settings.defaultRenderingMode, setRenderingMode ] );
 
-		useHideBlocksFromInserter( post.type );
+		useHideBlocksFromInserter( post.type, mode );
 
 		// Register the editor commands.
 		useCommands();

package/src/components/provider/test/disable-non-page-content-blocks.js

@@ -55,6 +55,13 @@ describe( 'DisableNonPageContentBlocks', () => {
 					getBlockName( state, clientId ) {
 						return testBlocks[ clientId ];
 					},
+					getBlockOrder( state, rootClientId ) {
+						return Object.keys( testBlocks ).filter(
+							( clientId ) =>
+								clientId.startsWith( rootClientId ) &&
+								clientId !== rootClientId
+						);
+					},
 				},
 				actions: {
 					setBlockEditingMode,
@@ -69,22 +76,36 @@ describe( 'DisableNonPageContentBlocks', () => {
 			</RegistryProvider>
 		);
 
-		expect( setBlockEditingMode.mock.calls ).toEqual( [
-			[ '', 'disabled' ], // root
-			[ '10', 'contentOnly' ], // post-title
-			[ '11', 'contentOnly' ], // post-featured-image
-			[ '12', 'contentOnly' ], // post-content
-			// NOT the post-featured-image nested within post-content
-			// NOT any of the content blocks within query
-		] );
+		expect( setBlockEditingMode.mock.calls ).toEqual(
+			expect.arrayContaining( [
+				[ '', 'disabled' ], // root
+				[ '0', 'contentOnly' ], // core/template-part
+				[ '00', 'disabled' ], // core/site-title
+				[ '01', 'disabled' ], // core/navigation
+				[ '10', 'contentOnly' ], // post-title
+				[ '11', 'contentOnly' ], // post-featured-image
+				[ '12', 'contentOnly' ], // post-content
+				[ '3', 'contentOnly' ], // core/template-part
+				[ '30', 'disabled' ], // core/paragraph
+				// NOT the post-featured-image nested within post-content
+				// NOT any of the content blocks within query
+			] )
+		);
 
 		unmount();
 
-		expect( unsetBlockEditingMode.mock.calls ).toEqual( [
-			[ '' ], // root
-			[ '10' ], // post-title
-			[ '11' ], // post-featured-image
-			[ '12' ], // post-content
-		] );
+		expect( unsetBlockEditingMode.mock.calls ).toEqual(
+			expect.arrayContaining( [
+				[ '' ], // root
+				[ '0' ], // core/template-part
+				[ '00' ], // core/site-title
+				[ '01' ], // core/navigation
+				[ '10' ], // post-title
+				[ '11' ], // post-featured-image
+				[ '12' ], // post-content
+				[ '3' ], // core/template-part
+				[ '30' ], // core/paragraph
+			] )
+		);
 	} );
 } );

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,
@@ -24,6 +24,14 @@ import { 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',
@@ -92,7 +100,6 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		hasFixedToolbar,
 		isDistractionFree,
 		keepCaretInsideBlock,
-		reusableBlocks,
 		hasUploadPermissions,
 		hiddenBlockTypes,
 		canUseUnfilteredHTML,
@@ -103,13 +110,11 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		restBlockPatternCategories,
 	} = useSelect(
 		( select ) => {
-			const isWeb = Platform.OS === 'web';
 			const {
 				canUser,
 				getRawEntityRecord,
 				getEntityRecord,
 				getUserPatternCategories,
-				getEntityRecords,
 				getBlockPatternCategories,
 			} = select( coreStore );
 			const { get } = select( preferencesStore );
@@ -135,11 +140,6 @@ 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,
@@ -249,7 +249,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				unlock( select( coreStore ) ).getBlockPatternsForPostType(
 					postType
 				),
-			__experimentalReusableBlocks: reusableBlocks,
+			[ unlock( privateApis ).reusableBlocksSelectKey ]:
+				__experimentalReusableBlocksSelect,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalUserPatternCategories: userPatternCategories,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
@@ -288,7 +289,6 @@ function useBlockEditorSettings( settings, postType, postId ) {
 			keepCaretInsideBlock,
 			settings,
 			hasUploadPermissions,
-			reusableBlocks,
 			userPatternCategories,
 			blockPatterns,
 			blockPatternCategories,

package/src/components/provider/use-hide-blocks-from-inserter.js

@@ -18,8 +18,9 @@ const POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART = [
  * the template part and post content blocks need to be hidden.
  *
  * @param {string} postType Post Type
+ * @param {string} mode     Rendering mode
  */
-export function useHideBlocksFromInserter( postType ) {
+export function useHideBlocksFromInserter( postType, mode ) {
 	useEffect( () => {
 		/*
 		 * Prevent adding template part in the editor.
@@ -32,7 +33,8 @@ export function useHideBlocksFromInserter( postType ) {
 					! POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART.includes(
 						postType
 					) &&
-					blockType.name === 'core/template-part'
+					blockType.name === 'core/template-part' &&
+					mode === 'post-only'
 				) {
 					return false;
 				}
@@ -77,5 +79,5 @@ export function useHideBlocksFromInserter( postType ) {
 				'removePostContentFromInserter'
 			);
 		};
-	}, [ postType ] );
+	}, [ postType, mode ] );
 }

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;
+}