Inline HPB styles in a style tag

includes/class-newspack-blocks-api.php

@@ -397,6 +397,20 @@ public static function add_post_title_wildcard_search( $where, $query ) {
 		$where .= ' AND post_title LIKE "%' . $search . '%" ';
 		return $where;
 	}
+
+	/**
+	 * Return CSS for the Homepage Articles block, when rendered in the editor.
+	 *
+	 * @return WP_REST_Response.
+	 */
+	public static function css_endpoint() {
+		return newspack_blocks_get_homepage_articles_css_string(
+			[
+				'typeScale'    => range( 1, 10 ),
+				'showSubtitle' => [ 1 ],
+			]
+		);
+	}
 }
 
 add_action( 'rest_api_init', array( 'Newspack_Blocks_API', 'register_video_playlist_endpoint' ) );

src/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php

@@ -107,6 +107,19 @@ public function register_routes() {
 				},
 			]
 		);
+
+		// Endpoint to get styles in the editor.
+		register_rest_route(
+			$this->namespace,
+			'/homepage-articles-css',
+			[
+				'methods'             => \WP_REST_Server::READABLE,
+				'callback'            => [ 'Newspack_Blocks_API', 'css_endpoint' ],
+				'permission_callback' => function() {
+					return current_user_can( 'edit_posts' );
+				},
+			]
+		);
 	}
 
 	/**

src/blocks/homepage-articles/edit.js

@@ -195,10 +195,7 @@ class Edit extends Component {
 						</h3>
 					) }
 					{ IS_SUBTITLE_SUPPORTED_IN_THEME && showSubtitle && (
-						<RawHTML
-							key="subtitle"
-							className="newspack-post-subtitle newspack-post-subtitle--in-homepage-block"
-						>
+						<RawHTML key="subtitle" className="newspack-post-subtitle">
 							{ post.meta.newspack_post_subtitle || '' }
 						</RawHTML>
 					) }

src/blocks/homepage-articles/editor.js

@@ -1,13 +1,27 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
 import { settings, name } from '.';
 import { name as carouselBlockName } from '../carousel';
-
 import { registerQueryStore } from './store';
 
 const BLOCK_NAME = `newspack-blocks/${ name }`;
 
 registerBlockType( BLOCK_NAME, settings );
 registerQueryStore( [ BLOCK_NAME, `newspack-blocks/${ carouselBlockName }` ] );
+
+// Fetch CSS and insert it in a style tag.
+apiFetch( {
+	path: '/newspack-blocks/v1/homepage-articles-css',
+} ).then( css => {
+	const style = document.createElement( 'style' );
+	style.innerHTML = css;
+	style.id = 'newspack-blocks-homepage-articles-styles';
+	document.head.appendChild( style );
+} );

src/blocks/homepage-articles/templates/article.php

@@ -125,7 +125,7 @@ class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"
 				$subtitle = get_post_meta( $post_id, 'newspack_post_subtitle', true );
 
 				?>
-				<div class="newspack-post-subtitle newspack-post-subtitle--in-homepage-block">
+				<div class="newspack-post-subtitle">
 					<?php
 					$allowed_tags = array(
 						'b'      => true,

src/blocks/homepage-articles/view.php

@@ -70,6 +70,149 @@ function newspack_blocks_filter_hpb_sizes( $sizes ) {
 	return $sizes;
 }
 
+/**
+ * Retrieve Homepage Articles blocks from blocks, recursively.
+ *
+ * @param array  $blocks The blocks to search.
+ * @param string $block_name The block name to search for.
+ */
+function newspack_blocks_retrieve_homepage_articles_blocks( $blocks, $block_name ) {
+	$ha_blocks = [];
+	foreach ( $blocks as $block ) {
+		if ( $block_name === $block['blockName'] ) {
+			$ha_blocks = array_merge( $ha_blocks, [ $block ] );
+		}
+		if ( is_array( $block['innerBlocks'] ) ) {
+			$ha_blocks = array_merge( $ha_blocks, newspack_blocks_retrieve_homepage_articles_blocks( $block['innerBlocks'], $block_name ) );
+		}
+	}
+	return $ha_blocks;
+}
+
+/**
+ * Collect all attributes' values used in a set of blocks.
+ *
+ * @param array $blocks The blocks to search.
+ */
+function newspack_blocks_collect_all_attribute_values( $blocks ) {
+	$result = [];
+
+	foreach ( $blocks as $block ) {
+		foreach ( $block as $key => $value ) {
+			if ( ! isset( $result[ $key ] ) ) {
+				$result[ $key ] = [];
+			}
+			if ( ! in_array( $value, $result[ $key ], true ) ) {
+				$result[ $key ][] = $value;
+			}
+		}
+	}
+
+	return $result;
+}
+
+/**
+ * Output a CSS string based on attributes used in a set of blocks.
+ * This is to mitigate CLS. Any CSS that might cause CLS should be output here,
+ * inline and before the blocks are printed.
+ *
+ * @param array $attrs The attributes used in the blocks.
+ */
+function newspack_blocks_get_homepage_articles_css_string( $attrs ) {
+	$entry_title_type_scale = [
+		'0.7em',
+		'0.9em',
+		'1em',
+		'1.2em',
+		'1.4em',
+		'1.7em',
+		'2em',
+		'2.2em',
+		'2.4em',
+		'2.6em',
+	];
+
+	ob_start();
+	?>
+		.wpnbha .entry-title {
+			font-size: 1.2em;
+		}
+		.wpnbha .entry-meta {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			margin-top: 0.5em;
+		}
+		.wpnbha article .entry-meta {
+			font-size: 0.8em;
+		}
+		.wpnbha article .avatar {
+			height: 25px;
+			width: 25px;
+		}
+		.wpnbha .post-thumbnail{
+			margin: 0;
+			margin-bottom: 0.25em;
+		}
+		.wpnbha .post-thumbnail img {
+			height: auto;
+			width: 100%;
+		}
+		.wpnbha .post-thumbnail figcaption {
+			margin-bottom: 0.5em;
+		}
+		.wpnbha p {
+			margin: 0.5em 0;
+		}
+
+		<?php
+		if ( isset( $attrs['typeScale'] ) ) {
+			foreach ( $attrs['typeScale'] as $scale ) {
+				echo esc_html(
+					".wpnbha.ts-$scale .entry-title{font-size: {$entry_title_type_scale[$scale - 1]}}"
+				);
+				if ( in_array( $scale, [ 8, 9, 10 ], true ) ) {
+					echo esc_html(
+						".wpnbha.ts-$scale .entry-title {line-height: 1.1;}"
+					);
+				}
+				if ( in_array( $scale, [ 7, 8, 9, 10 ], true ) ) {
+					echo esc_html(
+						".wpnbha.ts-$scale .newspack-post-subtitle {font-size: 1.4em;}"
+					);
+				}
+				if ( in_array( $scale, [ 6 ], true ) ) {
+					echo esc_html(
+						".wpnbha.ts-$scale article .newspack-post-subtitle {font-size: 1.4em;}"
+					);
+				}
+				if ( in_array( $scale, [ 5 ], true ) ) {
+					echo esc_html(
+						".wpnbha.ts-$scale article .newspack-post-subtitle {font-size: 1.2em;}"
+					);
+				}
+				if ( in_array( $scale, [ 1, 2, 3 ], true ) ) {
+					echo esc_html(
+						".wpnbha.ts-$scale article .newspack-post-subtitle,.entry-wrapper p,.entry-wrapper .more-link,.entry-meta {font-size: 0.8em;}"
+					);
+				}
+			}
+		}
+		if ( isset( $attrs['showSubtitle'] ) && in_array( 1, $attrs['showSubtitle'], false ) ) { // phpcs:ignore WordPress.PHP.StrictInArray.FoundNonStrictFalse
+			echo esc_html(
+				'.newspack-post-subtitle {
+					margin-top: 0.3em;
+					margin-bottom: 0;
+					line-height: 1.4;
+					font-style: italic;
+				}'
+			);
+		}
+		?>
+	<?php
+	return ob_get_clean();
+}
+
 /**
  * Renders the `newspack-blocks/homepage-posts` block on server.
  *
@@ -83,10 +226,30 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) {
 		return;
 	}
 
+	$block_name = apply_filters( 'newspack_blocks_block_name', 'newspack-blocks/homepage-articles' );
+
+	// Gather all Homepage Articles blocks on the page and output only the needed CSS.
+	// This CSS will be printed right after .entry-content.
+	global $newspack_blocks_hpb_all_blocks;
+	$inline_style_html = '';
+	if ( ! is_array( $newspack_blocks_hpb_all_blocks ) ) {
+		$newspack_blocks_hpb_all_blocks = newspack_blocks_retrieve_homepage_articles_blocks(
+			parse_blocks( get_the_content() ),
+			$block_name
+		);
+		$all_used_attrs                 = newspack_blocks_collect_all_attribute_values( array_column( $newspack_blocks_hpb_all_blocks, 'attrs' ) );
+		$css_string                     = newspack_blocks_get_homepage_articles_css_string( $all_used_attrs );
+		ob_start();
+		?>
+			<style id="newspack-blocks-inline-css" type="text/css"><?php echo esc_html( $css_string ); ?></style>
+		<?php
+		$inline_style_html = ob_get_clean();
+	}
+
 	// This will let the FSE plugin know we need CSS/JS now.
 	do_action( 'newspack_blocks_render_homepage_articles' );
 
-	$article_query = new WP_Query( Newspack_Blocks::build_articles_query( $attributes, apply_filters( 'newspack_blocks_block_name', 'newspack-blocks/homepage-articles' ) ) );
+	$article_query = new WP_Query( Newspack_Blocks::build_articles_query( $attributes, $block_name ) );
 
 	$classes = Newspack_Blocks::block_classes( 'homepage-articles', $attributes, [ 'wpnbha' ] );
 
@@ -189,7 +352,8 @@ function( $attribute ) {
 
 	ob_start();
 
-	if ( $article_query->have_posts() ) : ?>
+	if ( $article_query->have_posts() ) :
+		?>
 		<div
 			class="<?php echo esc_attr( $classes ); ?>"
 			style="<?php echo esc_attr( $styles ); ?>"
@@ -240,7 +404,7 @@ class="<?php echo esc_attr( $classes ); ?>"
 	$content = ob_get_clean();
 	Newspack_Blocks::enqueue_view_assets( 'homepage-articles' );
 
-	return $content;
+	return $inline_style_html . $content;
 }
 
 /**