@wordpress/editor 13.22.0 → 13.23.0

package/src/components/post-url/panel.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	Dropdown,
+	Button,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostURLCheck from './check';
+import PostURL from './index';
+import { usePostURLLabel } from './label';
+
+export default function PostURLPanel() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),
+		[ popoverAnchor ]
+	);
+
+	return (
+		<PostURLCheck>
+			<HStack className="editor-post-url__panel" ref={ setPopoverAnchor }>
+				<span>{ __( 'URL' ) }</span>
+				<Dropdown
+					popoverProps={ popoverProps }
+					className="editor-post-url__panel-dropdown"
+					contentClassName="editor-post-url__panel-dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />
+					) }
+					renderContent={ ( { onClose } ) => (
+						<PostURL onClose={ onClose } />
+					) }
+				/>
+			</HStack>
+		</PostURLCheck>
+	);
+}
+
+function PostURLToggle( { isOpen, onClick } ) {
+	const label = usePostURLLabel();
+	return (
+		<Button
+			className="editor-post-url__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post URL.
+			aria-label={ sprintf( __( 'Change URL: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}

package/src/components/post-url/style.scss

@@ -1,3 +1,33 @@
+.editor-post-url__panel {
+	width: 100%;
+	justify-content: flex-start;
+	align-items: flex-start;
+
+	span {
+		display: block;
+		width: 30%;
+	}
+}
+
+.editor-post-url__panel-dropdown {
+	width: 70%;
+}
+
+.components-button.editor-post-url__panel-toggle {
+	display: block;
+	max-width: 100%;
+	overflow: hidden;
+	text-align: left;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.editor-post-url__panel-dialog .editor-post-url {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
+
 .editor-post-url__link-label {
 	font-size: $default-font-size;
 	font-weight: 400;

package/src/components/provider/README.md

@@ -0,0 +1,50 @@
+# EditorProvider
+
+EditorProvider is a component which establishes a new post editing context, and serves as the entry point for a new post editor (or post with template editor). 
+
+It supports a big number of post types, including post, page, templates, custom post types, patterns, template parts.
+
+All modification and changes are performed to the `@wordpress/core-data` store.
+
+## Props
+
+### `post`
+
+-   **Type:** `Object`
+-   **Required** `yes`
+
+The post object to edit
+
+### `__unstableTemplate`
+
+-   **Type:** `Object`
+-   **Required** `no`
+
+The template object wrapper the edited post. This is optional and can only be used when the post type supports templates (like posts and pages).
+
+### `mode`
+
+-   **Type:** `String`
+-   **Required** `no`
+-   **default** `all`
+
+This is 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.
+-   `template-only`: This mode renders the editor with only the template blocks visible.
+-   `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.
+
+### `settings`
+
+-   **Type:** `Object`
+-   **Required** `no`
+
+The settings object to use for the editor. This is optional and can be used to override the default settings.
+
+### `children`
+
+-   **Type:** `Element`
+-   **Required** `no`
+
+Children elements for which the BlockEditorProvider context should apply.

package/src/components/provider/index.js

@@ -9,9 +9,11 @@ import {
 	BlockEditorProvider,
 	BlockContextProvider,
 	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -24,22 +26,194 @@ import { unlock } from '../../lock-unlock';
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 
+const noop = () => {};
+export const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
+/**
+ * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
+ *
+ * Set block editing mode to contentOnly when entering Navigation focus mode.
+ * this ensures that non-content controls on the block will be hidden and thus
+ * the user can focus on editing the Navigation Menu content only.
+ *
+ * @param {string} navigationBlockClientId ClientId.
+ */
+function useForceFocusModeForNavigation( navigationBlockClientId ) {
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( ! navigationBlockClientId ) {
+			return;
+		}
+
+		setBlockEditingMode( navigationBlockClientId, 'contentOnly' );
+
+		return () => {
+			unsetBlockEditingMode( navigationBlockClientId );
+		};
+	}, [
+		navigationBlockClientId,
+		unsetBlockEditingMode,
+		setBlockEditingMode,
+	] );
+}
+
+/**
+ * Helper method to extract the post content block types from a template.
+ *
+ * @param {Array} blocks Template blocks.
+ *
+ * @return {Array} Flattened object.
+ */
+function extractPageContentBlockTypesFromTemplateBlocks( blocks ) {
+	const result = [];
+	for ( let i = 0; i < blocks.length; i++ ) {
+		// Since the Query Block could contain PAGE_CONTENT_BLOCK_TYPES block types,
+		// we skip it because we only want to render stand-alone page content blocks in the block list.
+		if ( blocks[ i ].name === 'core/query' ) {
+			continue;
+		}
+		if ( PAGE_CONTENT_BLOCK_TYPES.includes( blocks[ i ].name ) ) {
+			result.push( createBlock( blocks[ i ].name ) );
+		}
+		if ( blocks[ i ].innerBlocks.length ) {
+			result.push(
+				...extractPageContentBlockTypesFromTemplateBlocks(
+					blocks[ i ].innerBlocks
+				)
+			);
+		}
+	}
+
+	return result;
+}
+
+/**
+ * Depending on the post, template and template mode,
+ * returns the appropriate blocks and change handlers for the block editor provider.
+ *
+ * @param {Array}   post     Block list.
+ * @param {boolean} template Whether the page content has focus (and the surrounding template is inert). If `true` return page content blocks. Default `false`.
+ * @param {string}  mode     Rendering mode.
+ * @return {Array} Block editor props.
+ */
+function useBlockEditorProps( post, template, mode ) {
+	const rootLevelPost =
+		mode === 'post-only' || ! template ? 'post' : 'template';
+	const [ postBlocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		post.type,
+		{ id: post.id }
+	);
+	const [ templateBlocks, onInputTemplate, onChangeTemplate ] =
+		useEntityBlockEditor( 'postType', template?.type, {
+			id: template?.id,
+		} );
+	const blocks = useMemo( () => {
+		if ( post.type === 'wp_navigation' ) {
+			return [
+				createBlock( 'core/navigation', {
+					ref: post.id,
+					// As the parent editor is locked with `templateLock`, the template locking
+					// must be explicitly "unset" on the block itself to allow the user to modify
+					// the block's content.
+					templateLock: false,
+				} ),
+			];
+		}
+
+		if ( mode === 'post-only' ) {
+			return [
+				createBlock(
+					'core/group',
+					{
+						layout: { type: 'constrained' },
+						style: {
+							spacing: {
+								margin: {
+									top: '4em', // Mimics the post editor.
+								},
+							},
+						},
+					},
+					extractPageContentBlockTypesFromTemplateBlocks(
+						templateBlocks
+					)
+				),
+			];
+		}
+
+		if ( rootLevelPost === 'template' ) {
+			return templateBlocks;
+		}
+
+		return postBlocks;
+	}, [
+		templateBlocks,
+		postBlocks,
+		rootLevelPost,
+		post.type,
+		post.id,
+		mode,
+	] );
+	const disableRootLevelChanges =
+		( !! template && mode === 'template-locked' ) ||
+		post.type === 'wp_navigation' ||
+		mode === 'post-only';
+	const navigationBlockClientId =
+		post.type === 'wp_navigation' && blocks && blocks[ 0 ]?.clientId;
+	useForceFocusModeForNavigation( navigationBlockClientId );
+	if ( disableRootLevelChanges ) {
+		return [ blocks, noop, noop ];
+	}
+
+	return [
+		blocks,
+		rootLevelPost === 'post' ? onInput : onInputTemplate,
+		rootLevelPost === 'post' ? onChange : onChangeTemplate,
+	];
+}
+
 export const ExperimentalEditorProvider = withRegistryProvider(
 	( {
-		__unstableTemplate,
+		mode = 'all',
 		post,
 		settings,
 		recovery,
 		initialEdits,
 		children,
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
+		__unstableTemplate: template,
 	} ) => {
+		const shouldRenderTemplate = !! template && mode !== 'post-only';
+		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
-			if ( post.type === 'wp_template' ) {
-				return {};
-			}
-			return { postId: post.id, postType: post.type };
-		}, [ post.id, post.type ] );
+			const postContext =
+				rootLevelPost.type !== 'wp_template' ||
+				( shouldRenderTemplate && mode !== 'template-only' )
+					? { postId: post.id, postType: post.type }
+					: {};
+
+			return {
+				...postContext,
+				templateSlug:
+					rootLevelPost.type === 'wp_template'
+						? rootLevelPost.slug
+						: undefined,
+			};
+		}, [
+			mode,
+			post.id,
+			post.type,
+			rootLevelPost.type,
+			rootLevelPost?.slug,
+			shouldRenderTemplate,
+		] );
 		const { editorSettings, selection, isReady } = useSelect(
 			( select ) => {
 				const {
@@ -55,16 +229,18 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			},
 			[]
 		);
-		const { id, type } = __unstableTemplate ?? post;
-		const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-			'postType',
-			type,
-			{ id }
-		);
+		const { id, type } = rootLevelPost;
 		const blockEditorSettings = useBlockEditorSettings(
 			editorSettings,
-			!! __unstableTemplate
+			type,
+			id
 		);
+		const [ blocks, onInput, onChange ] = useBlockEditorProps(
+			post,
+			template,
+			mode
+		);
+
 		const {
 			updatePostLock,
 			setupEditor,
@@ -108,7 +284,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		// Synchronize the editor settings as they change.
 		useEffect( () => {
 			updateEditorSettings( settings );
-		}, [ settings ] );
+		}, [ settings, updateEditorSettings ] );
 
 		if ( ! isReady ) {
 			return null;

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

@@ -67,8 +67,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'postsPerPage',
 	'readOnly',
 	'styles',
-	'template',
-	'templateLock',
 	'titlePlaceholder',
 	'supportsLayout',
 	'widgetTypesToHideFromLegacyWidgetBlock',
@@ -76,17 +74,20 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__unstableIsPreviewMode',
 	'__unstableResolvedAssets',
 	'__unstableIsBlockBasedTheme',
+	'__experimentalArchiveTitleTypeLabel',
+	'__experimentalArchiveTitleNameLabel',
 ];
 
 /**
  * React hook used to compute the block editor settings to use for the post editor.
  *
- * @param {Object}  settings    EditorProvider settings prop.
- * @param {boolean} hasTemplate Whether template mode is enabled.
+ * @param {Object} settings EditorProvider settings prop.
+ * @param {string} postType Editor root level post type.
+ * @param {string} postId   Editor root level post ID.
  *
  * @return {Object} Block Editor Settings.
  */
-function useBlockEditorSettings( settings, hasTemplate ) {
+function useBlockEditorSettings( settings, postType, postId ) {
 	const {
 		reusableBlocks,
 		hasUploadPermissions,
@@ -94,36 +95,42 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		userCanCreatePages,
 		pageOnFront,
 		pageForPosts,
-		postType,
 		userPatternCategories,
-	} = useSelect( ( select ) => {
-		const { canUserUseUnfilteredHTML, getCurrentPostType } =
-			select( editorStore );
-		const isWeb = Platform.OS === 'web';
-		const { canUser, getEntityRecord, getUserPatternCategories } =
-			select( coreStore );
+	} = useSelect(
+		( select ) => {
+			const isWeb = Platform.OS === 'web';
+			const {
+				canUser,
+				getRawEntityRecord,
+				getEntityRecord,
+				getUserPatternCategories,
+				getEntityRecords,
+			} = select( coreStore );
 
-		const siteSettings = canUser( 'read', 'settings' )
-			? getEntityRecord( 'root', 'site' )
-			: undefined;
+			const siteSettings = canUser( 'read', 'settings' )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
 
-		return {
-			canUseUnfilteredHTML: canUserUseUnfilteredHTML(),
-			reusableBlocks: isWeb
-				? select( coreStore ).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,
-			postType: getCurrentPostType(),
-			userPatternCategories: getUserPatternCategories(),
-		};
-	}, [] );
+			return {
+				canUseUnfilteredHTML: getRawEntityRecord(
+					'postType',
+					postType,
+					postId
+				)?._links?.hasOwnProperty( 'wp:action-unfiltered-html' ),
+				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(),
+			};
+		},
+		[ postType, postId ]
+	);
 
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -214,14 +221,26 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				fetchLinkSuggestions( search, searchOptions, settings ),
 			inserterMediaCategories,
 			__experimentalFetchRichUrlData: fetchUrlData,
+			// Todo: This only checks the top level post, not the post within a template or any other entity that can be edited.
+			// This might be better as a generic "canUser" selector.
 			__experimentalCanUserUseUnfilteredHTML: canUseUnfilteredHTML,
+			//Todo: this is only needed for native and should probably be removed.
 			__experimentalUndo: undo,
-			outlineMode: hasTemplate,
+			// Check whether we want all site editor frames to have outlines
+			// including the navigation / pattern / parts editors.
+			outlineMode: postType === 'wp_template',
+			// Check these two properties: they were not present in the site editor.
 			__experimentalCreatePageEntity: createPageEntity,
 			__experimentalUserCanCreatePages: userCanCreatePages,
 			pageOnFront,
 			pageForPosts,
-			__experimentalPreferPatternsOnRoot: hasTemplate,
+			__experimentalPreferPatternsOnRoot: postType === 'wp_template',
+			templateLock:
+				postType === 'wp_navigation' ? 'insert' : settings.templateLock,
+			template:
+				postType === 'wp_navigation'
+					? [ [ 'core/navigation', {}, [] ] ]
+					: settings.template,
 		} ),
 		[
 			settings,
@@ -232,11 +251,11 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			blockPatternCategories,
 			canUseUnfilteredHTML,
 			undo,
-			hasTemplate,
 			createPageEntity,
 			userCanCreatePages,
 			pageOnFront,
 			pageForPosts,
+			postType,
 		]
 	);
 }

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

@@ -13,8 +13,8 @@ import { store as editorStore } from '../../store';
 
 const EMPTY_BLOCKS_LIST = [];
 
-function useNativeBlockEditorSettings( settings, hasTemplate ) {
-	const editorSettings = useBlockEditorSettings( settings, hasTemplate );
+function useNativeBlockEditorSettings( settings, postType, postId ) {
+	const editorSettings = useBlockEditorSettings( settings, postType, postId );
 	const supportReusableBlock = settings.capabilities?.reusableBlock === true;
 
 	const { reusableBlocks, isTitleSelected } = useSelect(

package/src/private-apis.js

@@ -4,9 +4,13 @@
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
+import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 
 export const privateApis = {};
 lock( privateApis, {
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
+
+	// This is a temporary private API while we're updating the site editor to use EditorProvider.
+	useBlockEditorSettings,
 } );