@automattic/newspack-blocks 2.1.0 → 2.2.0

package/src/blocks/checkout-button/block.json

@@ -45,6 +45,9 @@
 		},
 		"afterSuccessURL": {
 			"type": "string"
+		},
+		"width": {
+			"type": "number"
 		}
 	},
 	"supports": {

package/src/blocks/checkout-button/edit.js

@@ -25,6 +25,7 @@ import {
 	SelectControl,
 	FormTokenField,
 	Button,
+	ButtonGroup,
 	Spinner,
 } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
@@ -53,6 +54,35 @@ function getNYP( product ) {
 	};
 }
 
+function WidthPanel( { selectedWidth, setAttributes } ) {
+	function handleChange( newWidth ) {
+		// Check if we are toggling the width off
+		const width = selectedWidth === newWidth ? undefined : newWidth;
+
+		// Update attributes.
+		setAttributes( { width } );
+	}
+
+	return (
+		<PanelBody title={ __( 'Width settings', 'newspack-blocks' ) }>
+			<ButtonGroup aria-label={ __( 'Button width', 'newspack-blocks' ) }>
+				{ [ 25, 50, 75, 100 ].map( widthValue => {
+					return (
+						<Button
+							key={ widthValue }
+							size="small"
+							variant={ widthValue === selectedWidth ? 'primary' : undefined }
+							onClick={ () => handleChange( widthValue ) }
+						>
+							{ widthValue }%
+						</Button>
+					);
+				} ) }
+			</ButtonGroup>
+		</PanelBody>
+	);
+}
+
 function ProductControl( props ) {
 	const [ inFlight, setInFlight ] = useState( false );
 	const [ suggestions, setSuggestions ] = useState( {} );
@@ -156,7 +186,7 @@ function ProductControl( props ) {
 
 function CheckoutButtonEdit( props ) {
 	const { attributes, setAttributes, className } = props;
-	const { placeholder, style, text, product, price, variation } = attributes;
+	const { placeholder, style, text, product, price, variation, width } = attributes;
 
 	const [ productData, setProductData ] = useState( {} );
 	const [ variations, setVariations ] = useState( [] );
@@ -214,6 +244,7 @@ function CheckoutButtonEdit( props ) {
 				className={ classnames( blockProps.className, {
 					[ `wp-block-button` ]: true,
 					[ `has-custom-font-size` ]: blockProps.style.fontSize,
+					[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 				} ) }
 			>
 				<RichText
@@ -331,6 +362,9 @@ function CheckoutButtonEdit( props ) {
 					</PanelBody>
 				) }
 			</InspectorControls>
+			<InspectorControls>
+				<WidthPanel selectedWidth={ width } setAttributes={ setAttributes } />
+			</InspectorControls>
 		</>
 	);
 }

package/src/blocks/checkout-button/save.js

@@ -16,7 +16,8 @@ import {
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
-	const { textAlign, fontSize, style, text, product, price, variation, is_variable } = attributes;
+	const { textAlign, fontSize, style, text, product, price, variation, is_variable, width } =
+		attributes;
 
 	if ( ! text || ! product ) {
 		return null;
@@ -44,6 +45,7 @@ export default function save( { attributes, className } ) {
 
 	const wrapperClasses = classnames( className, {
 		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 	} );
 
 	return (

package/src/blocks/checkout-button/view.scss

@@ -6,13 +6,26 @@
 		}
 	}
 	&.aligncenter {
-    form {
-      display: flex;
-      flex-direction: column;
-    }
+		form {
+			display: flex;
+			flex-direction: column;
+		}
 		button {
-      margin-left: auto;
-      margin-right: auto;
+			margin-left: auto;
+			margin-right: auto;
 		}
 	}
+
+	&.wp-block-button__width-25 button {
+		width: 25%;
+	}
+	&.wp-block-button__width-50 button {
+		width: 50%;
+	}
+	&.wp-block-button__width-75 button {
+		width: 75%;
+	}
+	&.wp-block-button__width-100 button {
+		width: 100%;
+	}
 }

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

@@ -107,6 +107,19 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 				},
 			]
 		);
+
+		// 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' );
+				},
+			]
+		);
 	}
 
 	/**

package/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>
 					) }

package/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 );
+} );

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

@@ -104,28 +104,26 @@ call_user_func(
 				<?php
 			endif;
 
-			if ( '' === $attributes['sectionHeader'] ) :
+			if ( '' === $attributes['sectionHeader'] ) {
 				// Don't link the title if the post lacks a valid URL.
-				if ( ! $post_link ) :
+				if ( ! $post_link ) {
 					the_title( '<h2 class="entry-title">', '</h2>' );
-				else :
+				} else {
 					the_title( '<h2 class="entry-title"><a href="' . esc_url( $post_link ) . '" rel="bookmark">', '</a></h2>' );
-				endif;
-			else :
+				}
+			} elseif ( ! $post_link ) {
 				// Don't link the title if the post lacks a valid URL.
-				if ( ! $post_link ) :
-					the_title( '<h3 class="entry-title">', '</h3>' );
-				else :
-					the_title( '<h3 class="entry-title"><a href="' . esc_url( $post_link ) . '" rel="bookmark">', '</a></h3>' );
-				endif;
-			endif;
+				the_title( '<h3 class="entry-title">', '</h3>' );
+			} else {
+				the_title( '<h3 class="entry-title"><a href="' . esc_url( $post_link ) . '" rel="bookmark">', '</a></h3>' );
+			}
 			?>
 			<?php
 			if ( $attributes['showSubtitle'] ) :
 				$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,

package/src/blocks/homepage-articles/templates/articles-list.php

@@ -12,8 +12,8 @@ call_user_func(
 		echo Newspack_Blocks::template_inc( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 			__DIR__ . '/articles-loop.php',
 			array(
-				'attributes'    => $data['attributes'],
-				'article_query' => $data['article_query'],
+				'attributes'    => $data['attributes'], // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+				'article_query' => $data['article_query'], // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 			)
 		);
 	},

package/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 newspack_blocks_render_block_homepage_articles( $attributes ) {
 
 	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 ); ?>"
@@ -204,9 +368,9 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) {
 				echo Newspack_Blocks::template_inc( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 					__DIR__ . '/templates/articles-list.php',
 					[
-						'articles_rest_url' => $articles_rest_url,
-						'article_query'     => $article_query,
-						'attributes'        => $attributes,
+						'articles_rest_url' => $articles_rest_url, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+						'article_query'     => $article_query, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+						'attributes'        => $attributes, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 					]
 				);
 				?>
@@ -240,7 +404,7 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) {
 	$content = ob_get_clean();
 	Newspack_Blocks::enqueue_view_assets( 'homepage-articles' );
 
-	return $content;
+	return $inline_style_html . $content;
 }
 
 /**
@@ -308,7 +472,7 @@ function newspack_blocks_format_byline( $author_info ) {
 		array_reduce(
 			$author_info,
 			function ( $accumulator, $author ) use ( $author_info, &$index ) {
-				$index ++;
+				$index++;
 				$penultimate = count( $author_info ) - 2;
 
 				$get_author_posts_url = get_author_posts_url( $author->ID );
@@ -359,14 +523,16 @@ function newspack_blocks_format_categories( $post_id ) {
 		}
 	}
 
+	if ( ! is_a( $category, 'WP_Term' ) ) {
+		return '';
+	}
+
 	$category_link      = get_category_link( $category->term_id );
 	$category_formatted = esc_html( $category->name );
 
 	if ( ! empty( $category_link ) ) {
-		$category_formatted = '<a href="' . esc_attr( $category_link ) . '">' . esc_html( $category->name ) . '</a>';
+		$category_formatted = '<a href="' . esc_url( $category_link ) . '">' . $category_formatted . '</a>';
 	}
 
-	if ( $category ) {
-		return apply_filters( 'newspack_blocks_categories', $category_formatted );
-	}
+	return apply_filters( 'newspack_blocks_categories', $category_formatted );
 }

package/src/blocks/homepage-articles/view.scss

@@ -136,19 +136,6 @@
 	}
 
 	/* Image styles */
-	.post-thumbnail {
-		margin: 0;
-		margin-bottom: 0.25em;
-
-		img {
-			height: auto;
-			width: 100%;
-		}
-
-		figcaption {
-			margin-bottom: 0.5em;
-		}
-	}
 
 	figcaption {
 		font-size: variables.$font__size-xxs;
@@ -252,11 +239,6 @@
 	}
 
 	.entry-meta {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		margin-top: 0.5em;
-
 		.byline:not( :last-child ) {
 			margin-right: 1.5em;
 		}
@@ -276,10 +258,6 @@
 		margin-right: 0.5em;
 	}
 
-	p {
-		margin: 0.5em 0;
-	}
-
 	&.has-text-color {
 		.article-section-title,
 		.entry-title,
@@ -509,25 +487,11 @@
  */
 /* stylelint-disable no-duplicate-selectors  */
 .wpnbha {
-	/* 'Normal' size */
 	article {
-		.entry-title {
-			font-size: 1.2em;
-		}
-		.entry-meta {
-			font-size: 0.8em;
-		}
-
-		.avatar {
-			height: 25px;
-			width: 25px;
-		}
-
 		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 1.6em;
 			}
-
 			.avatar {
 				height: 40px;
 				width: 40px;
@@ -538,9 +502,6 @@
 	&.ts-10,
 	&.ts-9,
 	&.ts-8 {
-		.entry-title {
-			line-height: 1.1;
-		}
 		@include mixins.media( tablet ) {
 			article .avatar {
 				height: 2.4em;
@@ -549,19 +510,7 @@
 		}
 	}
 
-	&.ts-10,
-	&.ts-9,
-	&.ts-8,
-	&.ts-7 {
-		.newspack-post-subtitle {
-			font-size: 1.4em;
-		}
-	}
-
 	&.ts-10 article {
-		.entry-title {
-			font-size: 2.6em;
-		}
 		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 3.6em;
@@ -575,9 +524,6 @@
 	}
 
 	&.ts-9 article {
-		.entry-title {
-			font-size: 2.4em;
-		}
 		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 3.4em;
@@ -591,9 +537,6 @@
 	}
 
 	&.ts-8 article {
-		.entry-title {
-			font-size: 2.2em;
-		}
 		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 3em;
@@ -607,9 +550,6 @@
 	}
 
 	&.ts-7 article {
-		.entry-title {
-			font-size: 2em;
-		}
 		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 2.4em;
@@ -627,12 +567,6 @@
 	}
 
 	&.ts-6 article {
-		.entry-title {
-			font-size: 1.7em;
-		}
-		.newspack-post-subtitle {
-			font-size: 1.4em;
-		}
 		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 2em;
@@ -650,12 +584,6 @@
 	}
 
 	&.ts-5 article {
-		.entry-title {
-			font-size: 1.4em;
-		}
-		.newspack-post-subtitle {
-			font-size: 1.2em;
-		}
 		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 1.8em;
@@ -675,15 +603,6 @@
 	/* Type Scale 4: default */
 
 	&.ts-3 article {
-		.entry-title {
-			font-size: 1em;
-		}
-		.newspack-post-subtitle,
-		.entry-wrapper p,
-		.entry-wrapper .more-link,
-		.entry-meta {
-			font-size: 0.8em;
-		}
 		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 1.2em;
@@ -702,18 +621,7 @@
 
 	&.ts-2 article,
 	&.ts-1 article {
-		.entry-title {
-			font-size: 0.9em;
-		}
-		.newspack-post-subtitle,
-		.entry-wrapper p,
-		.entry-wrapper .more-link,
-		.entry-meta {
-			font-size: 0.8em;
-		}
-
 		@include mixins.media( tablet ) {
-			.newspack-post-subtitle,
 			.entry-wrapper p,
 			.entry-wrapper .more-link,
 			.entry-meta,
@@ -815,13 +723,3 @@
 		}
 	}
 }
-
-/* Styles for the Subtitle, as part of the the Block */
-.newspack-post-subtitle {
-	&--in-homepage-block {
-		margin-top: 0.3em;
-		margin-bottom: 0;
-		line-height: 1.4;
-		font-style: italic;
-	}
-}