Refactor to use block_supports_styles API field on public post types

lib/blocks.php

@@ -627,7 +627,6 @@ function gutenberg_multiple_block_styles( $metadata ) {
  *
  * @param string $content The content to be rendered.
  * @param string $action  The type of action to use, e.g. `wp_footer` or `admin_footer`.
- *
  */
 function gutenberg_render_block_support_style( $content, $action = 'wp_footer' ) {
 	// Ideally styles should be loaded in the head, but blocks may be parsed
@@ -646,9 +645,9 @@ function () use ( $content ) {
 	// otherwise not rendered for the Post Content block within the site editor.
 	if ( defined( 'REST_REQUEST' ) && REST_REQUEST ) {
 		add_filter(
-			'wp_render_block_support_styles',
-			function ( $block_support_styles ) use ( $content ) {
-				return $block_support_styles . $content;
+			'wp_render_block_supports_styles',
+			function ( $block_supports_styles ) use ( $content ) {
+				return $block_supports_styles . $content;
 			},
 			10,
 			1
@@ -657,15 +656,34 @@ function ( $block_support_styles ) use ( $content ) {
 }
 
 /**
- * Append the rendered block support styles to the end of post content, if registered.
+ * Apply the block supports styles filters, rendering out all registered style
+ * markup that will be used in API responses.
  *
- * This is used to ensure that in responses via the REST API, where `wp_footer`
- * is not called, that styles are still available for blocks in post content.
+ * @return string The concatenated block supports styles to be output in an API response.
+ */
+function gutenberg_render_block_supports_styles_to_api_response() {
+	return apply_filters( 'wp_render_block_supports_styles', '' );
+}
+
+/**
+ * Register a separate block_support_styles field on public post type API endpoints.
  *
- * @param  string $content Rendered post content.
- * @return string          Post content with layout styles appended.
+ * This field contains styles generated by block supports that are typically rendered
+ * in `wp_footer` or `admin_footer` in server-rendered views of the front end of a site
+ * or the block editor.
  */
-function gutenberg_append_block_support_styles_to_the_content( $content ) {
-	return $content . apply_filters( 'wp_render_block_support_styles', '' );
+function gutenberg_register_block_supports_styles_api_field() {
+	$post_types = get_post_types( array( 'public' => true ) );
+
+	foreach( $post_types as $post_type ) {
+		register_rest_field(
+			$post_type,
+			'block_supports_styles',
+			array(
+				'get_callback' => 'gutenberg_render_block_supports_styles_to_api_response',
+				'schema' => array( 'type' => 'string' ),
+			)
+		);
+	}
 }
-add_filter( 'the_content', 'gutenberg_append_block_support_styles_to_the_content', 10, 1 );
+add_action( 'rest_api_init', 'gutenberg_register_block_supports_styles_api_field' );

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

@@ -12,20 +12,24 @@ import {
 	store as blockEditorStore,
 	Warning,
 } from '@wordpress/block-editor';
-import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
+import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
 function ReadOnlyContent( { userCanEdit, postType, postId } ) {
-	const [ , , content ] = useEntityProp(
-		'postType',
-		postType,
-		'content',
-		postId
-	);
+	const { content, blockSupportsStyles } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const currentPost = getEntityRecord( 'postType', postType, postId );
+
+		return {
+			content: currentPost?.content,
+			blockSupportsStyles: currentPost?.block_supports_styles,
+		};
+	} );
+
 	const blockProps = useBlockProps();
 	return content?.protected && ! userCanEdit ? (
 		<div { ...blockProps }>
@@ -34,6 +38,9 @@ function ReadOnlyContent( { userCanEdit, postType, postId } ) {
 	) : (
 		<div { ...blockProps }>
 			<RawHTML key="html">{ content?.rendered }</RawHTML>
+			<RawHTML key="footer-styles">
+				{ blockSupportsStyles ? blockSupportsStyles : null }
+			</RawHTML>
 		</div>
 	);
 }