EditorProvider: Use an internal post content block to keep the global core/block-editor store attached to post content

docs/reference-guides/core-blocks.md

@@ -605,6 +605,15 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
 -	**Supports:** align (full, wide), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** 
 
+## Content
+
+Displays the contents of a post or page. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-content-internal))
+
+-	**Name:** core/post-content-internal
+-	**Category:** theme
+-	**Supports:** align (full, wide), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~
+-	**Attributes:** registry
+
 ## Date
 
 Display the publish date for an entry such as a post or page. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-date))

packages/block-editor/src/components/provider/with-registry-provider.js

@@ -18,22 +18,41 @@ import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 const withRegistryProvider = createHigherOrderComponent(
 	( WrappedComponent ) => {
 		return withRegistry(
-			( { useSubRegistry = true, registry, ...props } ) => {
-				if ( ! useSubRegistry ) {
-					return (
-						<WrappedComponent registry={ registry } { ...props } />
-					);
-				}
-
+			( {
+				useSubRegistry = true,
+				forceRegistry,
+				registry,
+				...props
+			} ) => {
 				const [ subRegistry, setSubRegistry ] = useState( null );
 				useEffect( () => {
+					if ( forceRegistry || ! useSubRegistry ) {
+						return;
+					}
 					const newRegistry = createRegistry( {}, registry );
 					newRegistry.registerStore(
 						blockEditorStoreName,
 						storeConfig
 					);
 					setSubRegistry( newRegistry );
-				}, [ registry ] );
+				}, [ registry, useSubRegistry, forceRegistry ] );
+
+				if ( forceRegistry ) {
+					return (
+						<RegistryProvider value={ forceRegistry }>
+							<WrappedComponent
+								registry={ forceRegistry }
+								{ ...props }
+							/>
+						</RegistryProvider>
+					);
+				}
+
+				if ( ! useSubRegistry ) {
+					return (
+						<WrappedComponent registry={ registry } { ...props } />
+					);
+				}
 
 				if ( ! subRegistry ) {
 					return null;

packages/block-library/src/index.js

@@ -82,6 +82,7 @@ import * as postCommentsCount from './post-comments-count';
 import * as postCommentsForm from './post-comments-form';
 import * as postCommentsLink from './post-comments-link';
 import * as postContent from './post-content';
+import * as postContentInternal from './post-content-internal';
 import * as postDate from './post-date';
 import * as postExcerpt from './post-excerpt';
 import * as postFeaturedImage from './post-featured-image';
@@ -196,6 +197,7 @@ const getAllBlocks = () => {
 		postExcerpt,
 		postFeaturedImage,
 		postContent,
+		postContentInternal,
 		postAuthor,
 		postAuthorName,
 		postComment,

packages/block-library/src/post-content-internal/block.json

@@ -0,0 +1,49 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/post-content-internal",
+	"title": "Content",
+	"category": "theme",
+	"description": "Displays the contents of a post or page.",
+	"textdomain": "default",
+	"usesContext": [ "postId", "postType", "queryId" ],
+	"attributes": {
+		"registry": {
+			"type": "object"
+		}
+	},
+	"supports": {
+		"inserter": false,
+		"align": [ "wide", "full" ],
+		"html": false,
+		"layout": true,
+		"dimensions": {
+			"minHeight": true
+		},
+		"spacing": {
+			"blockGap": true
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": false,
+				"text": false
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	},
+	"editorStyle": "wp-block-post-content-internal-editor"
+}

packages/block-library/src/post-content-internal/edit.js

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
+	Warning,
+	BlockEditorProvider,
+	BlockList,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { LayoutStyle } = unlock( blockEditorPrivateApis );
+
+function Content( { context: { postType, postId } = {}, attributes } ) {
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		postType,
+		{ id: postId }
+	);
+
+	const settings = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings();
+	}, [] );
+
+	const initialBlocks = useMemo( () => {
+		return [ createBlock( 'core/paragraph' ) ];
+	}, [] );
+
+	const blockProps = useBlockProps();
+	return (
+		<BlockEditorProvider
+			value={ blocks.length !== 0 ? blocks : initialBlocks }
+			onInput={ onInput }
+			onChange={ onChange }
+			settings={ settings }
+			forceRegistry={ attributes.registry }
+		>
+			<LayoutStyle
+				selector=".wp-block-post-content-internal > div"
+				layout={ attributes.layout }
+			/>
+			<div { ...blockProps }>
+				<BlockList layout={ attributes.layout } />
+			</div>
+		</BlockEditorProvider>
+	);
+}
+
+function RecursionError() {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Warning>
+				{ __( 'Block cannot be rendered inside itself.' ) }
+			</Warning>
+		</div>
+	);
+}
+
+export default function PostContentEdit( { context, ...props } ) {
+	const { postId: contextPostId, postType: contextPostType } = context;
+	const hasAlreadyRendered = useHasRecursion( contextPostId );
+
+	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
+		return <RecursionError />;
+	}
+
+	return (
+		<RecursionProvider uniqueId={ contextPostId }>
+			{ contextPostId && contextPostType && (
+				<Content context={ context } { ...props } />
+			) }
+		</RecursionProvider>
+	);
+}

packages/block-library/src/post-content-internal/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { postContent as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/post-content-internal/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

packages/editor/src/components/provider/constants.js

@@ -2,4 +2,5 @@ export const PAGE_CONTENT_BLOCK_TYPES = [
 	'core/post-title',
 	'core/post-featured-image',
 	'core/post-content',
+	'core/post-content-internal',
 ];

packages/editor/src/components/provider/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useLayoutEffect, useMemo } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { EntityProvider, useEntityBlockEditor } from '@wordpress/core-data';
 import {
@@ -130,12 +130,14 @@ function extractPageContentBlockTypesFromTemplateBlocks( blocks ) {
  * 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.
+ * @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.
+ * @param {Object}  globalRegistry Global registry.
+ *
  * @return {Array} Block editor props.
  */
-function useBlockEditorProps( post, template, mode ) {
+function useBlockEditorProps( post, template, mode, globalRegistry ) {
 	const rootLevelPost =
 		mode === 'post-only' || ! template ? 'post' : 'template';
 	const [ postBlocks, onInput, onChange ] = useEntityBlockEditor(
@@ -192,6 +194,21 @@ function useBlockEditorProps( post, template, mode ) {
 				[ block ]
 			);
 		} );
+		const swappedPostContentBlocks = innerBlocksWithLayout.map(
+			( block ) => {
+				if ( block.name === 'core/post-content' ) {
+					return createBlock( 'core/post-content-internal', {
+						...block.attributes,
+						// For backwards compatibility reasons, we need to keep
+						// the global registry's core/block-editor store
+						// pointing to the store containing only the post blocks.
+						registry: globalRegistry,
+					} );
+				}
+
+				return block;
+			}
+		);
 
 		// This group block is only here to leave some space at the top of the canvas.
 		return [
@@ -206,7 +223,7 @@ function useBlockEditorProps( post, template, mode ) {
 						},
 					},
 				},
-				innerBlocksWithLayout
+				swappedPostContentBlocks
 			),
 		];
 	}, [ mode, templateBlocks, postContentLayout ] );
@@ -263,6 +280,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
 		__unstableTemplate: template,
 	} ) => {
+		const registry = useRegistry();
 		const mode = useSelect(
 			( select ) => select( editorStore ).getRenderingMode(),
 			[]
@@ -315,7 +333,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		const [ blocks, onInput, onChange ] = useBlockEditorProps(
 			post,
 			template,
-			mode
+			mode,
+			registry
 		);
 
 		const {
@@ -376,12 +395,15 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 				>
 					<BlockContextProvider value={ defaultBlockContext }>
 						<BlockEditorProviderComponent
+							key={ mode }
 							value={ blocks }
 							onChange={ onChange }
 							onInput={ onInput }
 							selection={ selection }
 							settings={ blockEditorSettings }
-							useSubRegistry={ false }
+							useSubRegistry={
+								mode === 'post-only' ? true : false
+							}
 						>
 							{ children }
 							<PatternsMenuItems />