Add post classes next to wp-post-block in the editor

WordPress · Apr 10, 2024 · d8e437c · d8e437c
1 parent e1842bb
commit d8e437c
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 4 deletions.
diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
@@ -27,9 +27,35 @@ const TEMPLATE = [
 	[ 'core/post-excerpt' ],
 ];
 
-function PostTemplateInnerBlocks() {
+function useClassNameFromBlockContext( postId, postType ) {
+	const post = useSelect(
+		( select ) =>
+			select( coreStore ).getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			),
+		[ postType, postId ]
+	);
+
+	const { post_class: postClass } = post;
+
+	let classes = 'wp-block-post';
+
+	if ( postClass ) {
+		classes = classnames( classes, postClass );
+	}
+	return classes;
+}
+
+function PostTemplateInnerBlocks( { blockContextId, blockContextPostType } ) {
+	const classes = useClassNameFromBlockContext(
+		blockContextId,
+		blockContextPostType
+	);
+
 	const innerBlocksProps = useInnerBlocksProps(
-		{ className: 'wp-block-post' },
+		{ className: classes },
 		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
 	);
 	return <li { ...innerBlocksProps } />;
@@ -38,13 +64,19 @@ function PostTemplateInnerBlocks() {
 function PostTemplateBlockPreview( {
 	blocks,
 	blockContextId,
+	blockContextPostType,
 	isHidden,
 	setActiveBlockContextId,
 } ) {
+	const classes = useClassNameFromBlockContext(
+		blockContextId,
+		blockContextPostType
+	);
+
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
 		props: {
-			className: 'wp-block-post',
+			className: classes,
 		},
 	} );
 
@@ -280,11 +312,17 @@ export default function PostTemplateEdit( {
 							{ blockContext.postId ===
 							( activeBlockContextId ||
 								blockContexts[ 0 ]?.postId ) ? (
-								<PostTemplateInnerBlocks />
+								<PostTemplateInnerBlocks
+									blockContextId={ blockContext.postId }
+									blockContextPostType={
+										blockContext.postType
+									}
+								/>
 							) : null }
 							<MemoizedPostTemplateBlockPreview
 								blocks={ blocks }
 								blockContextId={ blockContext.postId }
+								blockContextPostType={ blockContext.postType }
 								setActiveBlockContextId={
 									setActiveBlockContextId
 								}

diff --git a/packages/block-library/src/post-template/index.php b/packages/block-library/src/post-template/index.php
@@ -160,3 +160,28 @@ function register_block_core_post_template() {
 	);
 }
 add_action( 'init', 'register_block_core_post_template' );
+
+/**
+ * Adds the post classes to the REST API response.
+ *
+ * @since 6.6.0?
+ */
+function add_post_class_to_api( $data, $post, $context ) {
+	$data->data['post_class'] = get_post_class( '', $post->ID );
+
+	return $data;
+}
+
+/**
+ * Adds the post classes to all post types in the REST API.
+ *
+ * @since 6.6.0?
+ */
+function add_post_class_to_all_post_types() {
+	$post_types = get_post_types( array( 'public' => true ), 'names' );
+
+	foreach ( $post_types as $post_type ) {
+		add_filter( "rest_prepare_{$post_type}", 'add_post_class_to_api', 10, 3 );
+	}
+}
+add_action( 'rest_api_init', 'add_post_class_to_all_post_types' );