Output post classes in the editor (#60642)

Co-authored-by: huubl <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: TimothyBJacobs <[email protected]>
WordPress · May 1, 2024 · 907c8b1 · 907c8b1 · github-actions · May 1, 2024
1 parent ed47bc8
commit 907c8b1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 4 deletions.
diff --git a/lib/compat/wordpress-6.6/rest-api.php b/lib/compat/wordpress-6.6/rest-api.php
@@ -29,3 +29,50 @@ function wp_api_template_access_controller( $args, $post_type ) {
 	}
 }
 add_filter( 'register_post_type_args', 'wp_api_template_access_controller', 10, 2 );
+
+/**
+ * Adds the post classes to the REST API response.
+ *
+ * @param  array  $post  The response object data.
+ *
+ * @return array
+ */
+function gutenberg_add_class_list_to_api_response( $post ) {
+
+	if ( ! isset( $post['id'] ) ) {
+		return array();
+	}
+
+	return get_post_class( array(), $post['id'] );
+}
+
+/**
+ * Adds the post classes to public post types in the REST API.
+ */
+function gutenberg_add_class_list_to_public_post_types() {
+	$post_types = get_post_types(
+		array(
+			'public'       => true,
+			'show_in_rest' => true,
+		),
+		'names'
+	);
+
+	if ( ! empty( $post_types ) ) {
+		register_rest_field(
+			$post_types,
+			'class_list',
+			array(
+				'get_callback' => 'gutenberg_add_class_list_to_api_response',
+				'schema'       => array(
+					'description' => __( 'An array of the class names for the post container element.', 'gutenberg' ),
+					'type'        => 'array',
+					'items'       => array(
+						'type' => 'string',
+					),
+				),
+			)
+		);
+	}
+}
+add_action( 'rest_api_init', 'gutenberg_add_class_list_to_public_post_types' );
diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
@@ -27,9 +27,9 @@ const TEMPLATE = [
 	[ 'core/post-excerpt' ],
 ];
 
-function PostTemplateInnerBlocks() {
+function PostTemplateInnerBlocks( { classList } ) {
 	const innerBlocksProps = useInnerBlocksProps(
-		{ className: 'wp-block-post' },
+		{ className: classnames( 'wp-block-post', classList ) },
 		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
 	);
 	return <li { ...innerBlocksProps } />;
@@ -38,13 +38,14 @@ function PostTemplateInnerBlocks() {
 function PostTemplateBlockPreview( {
 	blocks,
 	blockContextId,
+	classList,
 	isHidden,
 	setActiveBlockContextId,
 } ) {
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
 		props: {
-			className: 'wp-block-post',
+			className: classnames( 'wp-block-post', classList ),
 		},
 	} );
 
@@ -213,6 +214,7 @@ export default function PostTemplateEdit( {
 			posts?.map( ( post ) => ( {
 				postType: post.type,
 				postId: post.id,
+				classList: post.class_list ?? '',
 			} ) ),
 		[ posts ]
 	);
@@ -280,11 +282,14 @@ export default function PostTemplateEdit( {
 							{ blockContext.postId ===
 							( activeBlockContextId ||
 								blockContexts[ 0 ]?.postId ) ? (
-								<PostTemplateInnerBlocks />
+								<PostTemplateInnerBlocks
+									classList={ blockContext.classList }
+								/>
 							) : null }
 							<MemoizedPostTemplateBlockPreview
 								blocks={ blocks }
 								blockContextId={ blockContext.postId }
+								classList={ blockContext.classList }
 								setActiveBlockContextId={
 									setActiveBlockContextId
 								}