@wordpress/editor 13.31.0 → 13.33.0

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

package/src/hooks/pattern-overrides.js

@@ -6,6 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useBlockEditingMode } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,7 +15,7 @@ import { store as editorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
 const {
-	useSetPatternBindings,
+	PatternOverridesControls,
 	ResetOverridesControl,
 	PATTERN_TYPES,
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
@@ -38,7 +39,6 @@ const withPatternOverrideControls = createHigherOrderComponent(
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ isSupportedBlock && <BindingUpdater { ...props } /> }
 				{ props.isSelected && isSupportedBlock && (
 					<ControlsWithStoreSubscription { ...props } />
 				) }
@@ -47,22 +47,24 @@ const withPatternOverrideControls = createHigherOrderComponent(
 	}
 );
 
-function BindingUpdater( props ) {
-	const postType = useSelect(
-		( select ) => select( editorStore ).getCurrentPostType(),
-		[]
-	);
-	useSetPatternBindings( props, postType );
-	return null;
-}
-
 // Split into a separate component to avoid a store subscription
 // on every block.
 function ControlsWithStoreSubscription( props ) {
 	const blockEditingMode = useBlockEditingMode();
-	const isEditingPattern = useSelect(
-		( select ) =>
-			select( editorStore ).getCurrentPostType() === PATTERN_TYPES.user,
+	const { hasPatternOverridesSource, isEditingPattern } = useSelect(
+		( select ) => {
+			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+
+			return {
+				// For editing link to the site editor if the theme and user permissions support it.
+				hasPatternOverridesSource: !! getBlockBindingsSource(
+					'core/pattern-overrides'
+				),
+				isEditingPattern:
+					select( editorStore ).getCurrentPostType() ===
+					PATTERN_TYPES.user,
+			};
+		},
 		[]
 	);
 
@@ -73,14 +75,23 @@ function ControlsWithStoreSubscription( props ) {
 			( binding ) => binding.source === 'core/pattern-overrides'
 		);
 
+	const shouldShowPatternOverridesControls =
+		isEditingPattern && blockEditingMode === 'default';
 	const shouldShowResetOverridesControl =
 		! isEditingPattern &&
 		!! props.attributes.metadata?.name &&
 		blockEditingMode !== 'disabled' &&
 		hasPatternBindings;
 
+	if ( ! hasPatternOverridesSource ) {
+		return null;
+	}
+
 	return (
 		<>
+			{ shouldShowPatternOverridesControls && (
+				<PatternOverridesControls { ...props } />
+			) }
 			{ shouldShowResetOverridesControl && (
 				<ResetOverridesControl { ...props } />
 			) }

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

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import * as interfaceApis from '@wordpress/interface';
+
 /**
  * Internal dependencies
  */
@@ -5,16 +10,24 @@ import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
+import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 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 PostActions from './components/post-actions';
+import { usePostActions } from './components/post-actions/actions';
+import PostCardPanel from './components/post-card-panel';
+import PostStatus from './components/post-status';
+
+const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
 export const privateApis = {};
 lock( privateApis, {
@@ -25,12 +38,20 @@ lock( privateApis, {
 	InserterSidebar,
 	ListViewSidebar,
 	ModeSwitcher,
+	PatternOverridesPanel,
 	PluginPostExcerpt,
+	PostActions,
 	PostPanelRow,
 	PostViewLink,
 	PreviewDropdown,
 	PreferencesModal,
+	usePostActions,
+	PostCardPanel,
+	PostStatus,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
+	useAutoSwitchEditorSidebars,
 	useBlockEditorSettings,
+	interfaceStore,
+	...remainingInterfaceApis,
 } );

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,12 @@ 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';
+export const PATTERN_POST_TYPE = 'wp_block';
+export const NAVIGATION_POST_TYPE = 'wp_navigation';
+export const TEMPLATE_ORIGINS = {
+	custom: 'custom',
+	theme: 'theme',
+	plugin: 'plugin',
+};