Post content: show placeholder if trying to render itself (#24010)

Co-authored-by: Noah Allen <noahtallen@gmail.com>

packages/block-library/src/editor.scss

@@ -30,6 +30,7 @@
 @import "./navigation-link/editor.scss";
 @import "./nextpage/editor.scss";
 @import "./paragraph/editor.scss";
+@import "./post-content/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./post-author/editor.scss";
 @import "./pullquote/editor.scss";

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

@@ -2,17 +2,38 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import PostContentInnerBlocks from './inner-blocks';
 
-export default function PostContentEdit( { context: { postId, postType } } ) {
-	if ( postId && postType ) {
+export default function PostContentEdit( {
+	context: { postId: contextPostId, postType: contextPostType },
+} ) {
+	const { id: currentPostId, type: currentPostType } = useSelect(
+		( select ) => select( 'core/editor' ).getCurrentPost() ?? {}
+	);
+
+	// Only render InnerBlocks if the context is different from the active post
+	// to avoid infinite recursion of post content.
+	if (
+		contextPostId &&
+		contextPostType &&
+		contextPostId !== currentPostId &&
+		contextPostType !== currentPostType
+	) {
 		return (
-			<PostContentInnerBlocks postType={ postType } postId={ postId } />
+			<PostContentInnerBlocks
+				postType={ contextPostType }
+				postId={ contextPostId }
+			/>
 		);
 	}
-	return <p>{ __( 'This is a placeholder for post content.' ) }</p>;
+	return (
+		<div className="wp-block-post-content__placeholder">
+			<span>{ __( 'This is a placeholder for post content.' ) }</span>
+		</div>
+	);
 }

packages/block-library/src/post-content/editor.scss

@@ -0,0 +1,11 @@
+.wp-block-post-content__placeholder {
+	height: 100px;
+	border: 1px dashed;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	span {
+		font-style: italic;
+	}
+}

packages/block-library/src/query-loop/edit.js

@@ -18,12 +18,9 @@ import { useQueryContext } from '../query';
 const TEMPLATE = [ [ 'core/post-title' ], [ 'core/post-content' ] ];
 export default function QueryLoopEdit( {
 	clientId,
-	context: {
-		query: { perPage, offset, categoryIds },
-		queryContext,
-	},
+	context: { query: { perPage, offset, categoryIds } = {}, queryContext },
 } ) {
-	const [ { page } ] = useQueryContext() || queryContext;
+	const [ { page } ] = useQueryContext() || queryContext || [ {} ];
 	const [ activeBlockContext, setActiveBlockContext ] = useState();
 
 	const { posts, blocks } = useSelect(