@wordpress/editor 13.31.0 → 13.32.0

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

@@ -12,7 +12,6 @@
 
 .editor-post-featured-image__container {
 	position: relative;
-	aspect-ratio: 2/1;
 
 	&:hover,
 	&:focus,
@@ -31,8 +30,9 @@
 	@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: $border-width solid rgba(0, 0, 0, 0.1);
 	outline-offset: -#{$border-width};
+	min-height: $grid-unit-50 * 2;
+	margin-bottom: $grid-unit-20;
 
 	display: flex;
 	justify-content: center;
@@ -40,6 +40,7 @@
 
 .editor-post-featured-image__preview {
 	height: auto;
+	outline: $border-width solid rgba($black, 0.1);
 
 	.editor-post-featured-image__preview-image {
 		object-fit: cover;

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/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/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/hooks/use-select-nearest-editable-block.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const DISTANCE_THRESHOLD = 500;
+
+function clamp( value, min, max ) {
+	return Math.min( Math.max( value, min ), max );
+}
+
+function distanceFromRect( x, y, rect ) {
+	const dx = x - clamp( x, rect.left, rect.right );
+	const dy = y - clamp( y, rect.top, rect.bottom );
+	return Math.sqrt( dx * dx + dy * dy );
+}
+
+export default function useSelectNearestEditableBlock( {
+	isEnabled = true,
+} = {} ) {
+	const { getEnabledClientIdsTree, getBlockName, getBlockOrder } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	return useRefEffect(
+		( element ) => {
+			if ( ! isEnabled ) {
+				return;
+			}
+
+			const selectNearestEditableBlock = ( x, y ) => {
+				const editableBlockClientIds =
+					getEnabledClientIdsTree().flatMap( ( { clientId } ) => {
+						const blockName = getBlockName( clientId );
+						if ( blockName === 'core/template-part' ) {
+							return [];
+						}
+						if ( blockName === 'core/post-content' ) {
+							const innerBlocks = getBlockOrder( clientId );
+							if ( innerBlocks.length ) {
+								return innerBlocks;
+							}
+						}
+						return [ clientId ];
+					} );
+
+				let nearestDistance = Infinity,
+					nearestClientId = null;
+
+				for ( const clientId of editableBlockClientIds ) {
+					const block = element.querySelector(
+						`[data-block="${ clientId }"]`
+					);
+					if ( ! block ) {
+						continue;
+					}
+					const rect = block.getBoundingClientRect();
+					const distance = distanceFromRect( x, y, rect );
+					if (
+						distance < nearestDistance &&
+						distance < DISTANCE_THRESHOLD
+					) {
+						nearestDistance = distance;
+						nearestClientId = clientId;
+					}
+				}
+
+				if ( nearestClientId ) {
+					selectBlock( nearestClientId );
+				}
+			};
+
+			const handleClick = ( event ) => {
+				const shouldSelect =
+					event.target === element ||
+					event.target.classList.contains( 'is-root-container' );
+				if ( shouldSelect ) {
+					selectNearestEditableBlock( event.clientX, event.clientY );
+				}
+			};
+
+			element.addEventListener( 'click', handleClick );
+			return () => element.removeEventListener( 'click', handleClick );
+		},
+		[ isEnabled ]
+	);
+}

package/src/private-apis.js

@@ -10,11 +10,14 @@ import DocumentTools from './components/document-tools';
 import InserterSidebar from './components/inserter-sidebar';
 import ListViewSidebar from './components/list-view-sidebar';
 import ModeSwitcher from './components/mode-switcher';
+import PatternOverridesPanel from './components/pattern-overrides-panel';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostPanelRow from './components/post-panel-row';
 import PostViewLink from './components/post-view-link';
 import PreviewDropdown from './components/preview-dropdown';
 import PreferencesModal from './components/preferences-modal';
+import { usePostActions } from './components/post-actions/actions';
+import PostCardPanel from './components/post-card-panel';
 
 export const privateApis = {};
 lock( privateApis, {
@@ -25,11 +28,14 @@ lock( privateApis, {
 	InserterSidebar,
 	ListViewSidebar,
 	ModeSwitcher,
+	PatternOverridesPanel,
 	PluginPostExcerpt,
 	PostPanelRow,
 	PostViewLink,
 	PreviewDropdown,
 	PreferencesModal,
+	usePostActions,
+	PostCardPanel,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,

package/src/store/actions.js

@@ -406,7 +406,7 @@ export const enablePublishSidebar =
 	( { registry } ) => {
 		registry
 			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'isPublishSidebarEnabled', true );
+			.set( 'core', 'isPublishSidebarEnabled', true );
 	};
 
 /**
@@ -417,7 +417,7 @@ export const disablePublishSidebar =
 	( { registry } ) => {
 		registry
 			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'isPublishSidebarEnabled', false );
+			.set( 'core', 'isPublishSidebarEnabled', false );
 	};
 
 /**
@@ -583,7 +583,6 @@ export function updateEditorSettings( settings ) {
 /**
  * Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes:
  *
- * -   `all`: This is the default mode. It renders the post editor with all the features available. If a template is provided, it's preferred over the post.
  * -   `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template.
  * -   `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable.
  *
@@ -820,6 +819,41 @@ export const switchEditorMode =
 		}
 	};
 
+/**
+ * Returns an action object used in signalling that the user opened the publish
+ * sidebar.
+ *
+ * @return {Object} Action object
+ */
+export function openPublishSidebar() {
+	return {
+		type: 'OPEN_PUBLISH_SIDEBAR',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user closed the
+ * publish sidebar.
+ *
+ * @return {Object} Action object.
+ */
+export function closePublishSidebar() {
+	return {
+		type: 'CLOSE_PUBLISH_SIDEBAR',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user toggles the publish sidebar.
+ *
+ * @return {Object} Action object
+ */
+export function togglePublishSidebar() {
+	return {
+		type: 'TOGGLE_PUBLISH_SIDEBAR',
+	};
+}
+
 /**
  * Backward compatibility
  */

package/src/store/constants.js

@@ -18,3 +18,5 @@ export const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID';
 export const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
 export const ONE_MINUTE_IN_MS = 60 * 1000;
 export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ];
+export const TEMPLATE_POST_TYPE = 'wp_template';
+export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';