From 80ca75daf5239824cf1fc4315293231f0d54b9d1 Mon Sep 17 00:00:00 2001 From: Adam Borowski Date: Fri, 6 Oct 2023 13:17:51 +0200 Subject: [PATCH 1/9] feat: inline base font-sizes --- src/blocks/homepage-articles/editor.scss | 43 +++++++++++ src/blocks/homepage-articles/view.php | 98 +++++++++++++++++++++++- src/blocks/homepage-articles/view.scss | 27 ------- 3 files changed, 139 insertions(+), 29 deletions(-) diff --git a/src/blocks/homepage-articles/editor.scss b/src/blocks/homepage-articles/editor.scss index 6edf4b579..c85296a5d 100644 --- a/src/blocks/homepage-articles/editor.scss +++ b/src/blocks/homepage-articles/editor.scss @@ -6,6 +6,49 @@ article { .entry-title { margin: 0 0 0.25em; + font-size: 1.2em; + } + } + + &.ts-10 article { + .entry-title { + font-size: 2.6em; + } + } + &.ts-9 article { + .entry-title { + font-size: 2.4em; + } + } + &.ts-8 article { + .entry-title { + font-size: 2.2em; + } + } + &.ts-7 article { + .entry-title { + font-size: 2em; + } + } + &.ts-6 article { + .entry-title { + font-size: 1.7em; + } + } + &.ts-5 article { + .entry-title { + font-size: 1.4em; + } + } + &.ts-3 article { + .entry-title { + font-size: 1em; + } + } + &.ts-1 article, + &.ts-2 article { + .entry-title { + font-size: 0.9em; } } diff --git a/src/blocks/homepage-articles/view.php b/src/blocks/homepage-articles/view.php index 9968cf0e8..d14b2eb09 100644 --- a/src/blocks/homepage-articles/view.php +++ b/src/blocks/homepage-articles/view.php @@ -70,6 +70,82 @@ 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. + * + * @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; + } + + + + have_posts() ) : ?> + if ( $article_query->have_posts() ) : + ?>
Date: Fri, 6 Oct 2023 15:39:57 +0200 Subject: [PATCH 2/9] feat: add more CLS-causing CSS --- src/blocks/homepage-articles/editor.scss | 16 ++++++++++++++++ src/blocks/homepage-articles/view.php | 17 +++++++++++++++++ src/blocks/homepage-articles/view.scss | 17 ----------------- 3 files changed, 33 insertions(+), 17 deletions(-) diff --git a/src/blocks/homepage-articles/editor.scss b/src/blocks/homepage-articles/editor.scss index c85296a5d..007e0428e 100644 --- a/src/blocks/homepage-articles/editor.scss +++ b/src/blocks/homepage-articles/editor.scss @@ -10,6 +10,10 @@ } } + p { + margin: 0.5em 0; + } + &.ts-10 article { .entry-title { font-size: 2.6em; @@ -52,6 +56,18 @@ } } + .post-thumbnail { + margin: 0; + margin-bottom: 0.25em; + img { + height: auto; + width: 100%; + } + figcaption { + margin-bottom: 0.5em; + } + } + .editor-rich-text { width: 100%; } diff --git a/src/blocks/homepage-articles/view.php b/src/blocks/homepage-articles/view.php index d14b2eb09..f7b95f0b7 100644 --- a/src/blocks/homepage-articles/view.php +++ b/src/blocks/homepage-articles/view.php @@ -113,6 +113,8 @@ function newspack_blocks_collect_all_attribute_values( $blocks ) { /** * 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. */ @@ -135,6 +137,21 @@ function newspack_blocks_get_homepage_articles_css_string( $attrs ) { .wpnbha .entry-title { font-size: 1.2em; } + .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; + } + Date: Fri, 6 Oct 2023 15:55:01 +0200 Subject: [PATCH 3/9] refactor: use a single source of truth for the styles --- includes/class-newspack-blocks-api.php | 9 +++ ...s-wp-rest-newspack-articles-controller.php | 13 ++++ src/blocks/homepage-articles/editor.js | 18 +++++- src/blocks/homepage-articles/editor.scss | 59 ------------------- 4 files changed, 38 insertions(+), 61 deletions(-) diff --git a/includes/class-newspack-blocks-api.php b/includes/class-newspack-blocks-api.php index c52301020..fd814bd73 100644 --- a/includes/class-newspack-blocks-api.php +++ b/includes/class-newspack-blocks-api.php @@ -397,6 +397,15 @@ 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 ) ] ); + } } add_action( 'rest_api_init', array( 'Newspack_Blocks_API', 'register_video_playlist_endpoint' ) ); diff --git a/src/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php b/src/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php index 95edcec92..2e06891d9 100644 --- a/src/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php +++ b/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' ); + }, + ] + ); } /** diff --git a/src/blocks/homepage-articles/editor.js b/src/blocks/homepage-articles/editor.js index a0bcc6ba3..e616cabaf 100644 --- a/src/blocks/homepage-articles/editor.js +++ b/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 ); +} ); diff --git a/src/blocks/homepage-articles/editor.scss b/src/blocks/homepage-articles/editor.scss index 007e0428e..6edf4b579 100644 --- a/src/blocks/homepage-articles/editor.scss +++ b/src/blocks/homepage-articles/editor.scss @@ -6,65 +6,6 @@ article { .entry-title { margin: 0 0 0.25em; - font-size: 1.2em; - } - } - - p { - margin: 0.5em 0; - } - - &.ts-10 article { - .entry-title { - font-size: 2.6em; - } - } - &.ts-9 article { - .entry-title { - font-size: 2.4em; - } - } - &.ts-8 article { - .entry-title { - font-size: 2.2em; - } - } - &.ts-7 article { - .entry-title { - font-size: 2em; - } - } - &.ts-6 article { - .entry-title { - font-size: 1.7em; - } - } - &.ts-5 article { - .entry-title { - font-size: 1.4em; - } - } - &.ts-3 article { - .entry-title { - font-size: 1em; - } - } - &.ts-1 article, - &.ts-2 article { - .entry-title { - font-size: 0.9em; - } - } - - .post-thumbnail { - margin: 0; - margin-bottom: 0.25em; - img { - height: auto; - width: 100%; - } - figcaption { - margin-bottom: 0.5em; } } From 3bbb1b48164b5ac9a8b06dd718204d900ff58444 Mon Sep 17 00:00:00 2001 From: Adam Borowski Date: Fri, 6 Oct 2023 16:16:45 +0200 Subject: [PATCH 4/9] feat: more inline styles --- src/blocks/homepage-articles/view.php | 29 +++++++++++++++++++++++- src/blocks/homepage-articles/view.scss | 31 -------------------------- 2 files changed, 28 insertions(+), 32 deletions(-) diff --git a/src/blocks/homepage-articles/view.php b/src/blocks/homepage-articles/view.php index f7b95f0b7..ab1c3a349 100644 --- a/src/blocks/homepage-articles/view.php +++ b/src/blocks/homepage-articles/view.php @@ -155,7 +155,34 @@ function newspack_blocks_get_homepage_articles_css_string( $attrs ) { diff --git a/src/blocks/homepage-articles/view.scss b/src/blocks/homepage-articles/view.scss index ac6b92f2c..496ebee32 100644 --- a/src/blocks/homepage-articles/view.scss +++ b/src/blocks/homepage-articles/view.scss @@ -518,9 +518,6 @@ &.ts-10, &.ts-9, &.ts-8 { - .entry-title { - line-height: 1.1; - } @include mixins.media( tablet ) { article .avatar { height: 2.4em; @@ -529,15 +526,6 @@ } } - &.ts-10, - &.ts-9, - &.ts-8, - &.ts-7 { - .newspack-post-subtitle { - font-size: 1.4em; - } - } - &.ts-10 article { @include mixins.media( tablet ) { .entry-title { @@ -595,9 +583,6 @@ } &.ts-6 article { - .newspack-post-subtitle { - font-size: 1.4em; - } @include mixins.media( tablet ) { .entry-title { font-size: 2em; @@ -615,9 +600,6 @@ } &.ts-5 article { - .newspack-post-subtitle { - font-size: 1.2em; - } @include mixins.media( tablet ) { .entry-title { font-size: 1.8em; @@ -637,12 +619,6 @@ /* Type Scale 4: default */ &.ts-3 article { - .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; @@ -661,13 +637,6 @@ &.ts-2 article, &.ts-1 article { - .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, From 40deb7b061dfa6c1649618f83ef8a19546b931b9 Mon Sep 17 00:00:00 2001 From: Adam Borowski Date: Fri, 6 Oct 2023 16:18:18 +0200 Subject: [PATCH 5/9] refactor: remove unneeded classname --- src/blocks/homepage-articles/edit.js | 5 +---- .../homepage-articles/templates/article.php | 2 +- src/blocks/homepage-articles/view.scss | 17 +++++++---------- 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/blocks/homepage-articles/edit.js b/src/blocks/homepage-articles/edit.js index 5d9d4939e..3f94e960d 100644 --- a/src/blocks/homepage-articles/edit.js +++ b/src/blocks/homepage-articles/edit.js @@ -195,10 +195,7 @@ class Edit extends Component { ) } { IS_SUBTITLE_SUPPORTED_IN_THEME && showSubtitle && ( - + { post.meta.newspack_post_subtitle || '' } ) } diff --git a/src/blocks/homepage-articles/templates/article.php b/src/blocks/homepage-articles/templates/article.php index 122ab5355..f1bb2bc2d 100644 --- a/src/blocks/homepage-articles/templates/article.php +++ b/src/blocks/homepage-articles/templates/article.php @@ -125,7 +125,7 @@ class="" $subtitle = get_post_meta( $post_id, 'newspack_post_subtitle', true ); ?> -
+
true, diff --git a/src/blocks/homepage-articles/view.scss b/src/blocks/homepage-articles/view.scss index 496ebee32..9cdefac86 100644 --- a/src/blocks/homepage-articles/view.scss +++ b/src/blocks/homepage-articles/view.scss @@ -485,6 +485,13 @@ gap: 0.5em; line-height: 1; } + + .newspack-post-subtitle { + margin-top: 0.3em; + margin-bottom: 0; + line-height: 1.4; + font-style: italic; + } } /* @@ -740,13 +747,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; - } -} From 395984e0997abf929a15c81e6a4ad22d47a4bdd8 Mon Sep 17 00:00:00 2001 From: Adam Borowski Date: Fri, 6 Oct 2023 16:24:59 +0200 Subject: [PATCH 6/9] feat: handle post subtitle styles --- includes/class-newspack-blocks-api.php | 7 ++++++- src/blocks/homepage-articles/view.php | 10 ++++++++++ src/blocks/homepage-articles/view.scss | 8 -------- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/includes/class-newspack-blocks-api.php b/includes/class-newspack-blocks-api.php index fd814bd73..8902980c8 100644 --- a/includes/class-newspack-blocks-api.php +++ b/includes/class-newspack-blocks-api.php @@ -404,7 +404,12 @@ public static function add_post_title_wildcard_search( $where, $query ) { * @return WP_REST_Response. */ public static function css_endpoint() { - return newspack_blocks_get_homepage_articles_css_string( [ 'typeScale' => range( 1, 10 ) ] ); + return newspack_blocks_get_homepage_articles_css_string( + [ + 'typeScale' => range( 1, 10 ), + 'showSubtitle' => [ 1 ], + ] + ); } } diff --git a/src/blocks/homepage-articles/view.php b/src/blocks/homepage-articles/view.php index ab1c3a349..c69ddbe11 100644 --- a/src/blocks/homepage-articles/view.php +++ b/src/blocks/homepage-articles/view.php @@ -185,6 +185,16 @@ function newspack_blocks_get_homepage_articles_css_string( $attrs ) { } } } + if ( isset( $attrs['showSubtitle'] ) && in_array( 1, $attrs['showSubtitle'], false ) ) { + echo esc_html( + '.newspack-post-subtitle { + margin-top: 0.3em; + margin-bottom: 0; + line-height: 1.4; + font-style: italic; + }' + ); + } ?> Date: Fri, 6 Oct 2023 16:57:31 +0200 Subject: [PATCH 7/9] feat: handle entry meta styles --- src/blocks/homepage-articles/view.php | 13 +++++++++++++ src/blocks/homepage-articles/view.scss | 16 ---------------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/blocks/homepage-articles/view.php b/src/blocks/homepage-articles/view.php index c69ddbe11..3da493339 100644 --- a/src/blocks/homepage-articles/view.php +++ b/src/blocks/homepage-articles/view.php @@ -137,6 +137,19 @@ function newspack_blocks_get_homepage_articles_css_string( $attrs ) { .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; diff --git a/src/blocks/homepage-articles/view.scss b/src/blocks/homepage-articles/view.scss index 560e20dbd..728250617 100644 --- a/src/blocks/homepage-articles/view.scss +++ b/src/blocks/homepage-articles/view.scss @@ -239,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; } @@ -492,22 +487,11 @@ */ /* stylelint-disable no-duplicate-selectors */ .wpnbha { - /* 'Normal' size */ article { - .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; From a8bc9ce79876f49a6896a800aa2218ca40243b8d Mon Sep 17 00:00:00 2001 From: Adam Borowski Date: Mon, 9 Oct 2023 10:10:03 +0200 Subject: [PATCH 8/9] refactor: lint issue --- src/blocks/homepage-articles/view.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/homepage-articles/view.php b/src/blocks/homepage-articles/view.php index 3da493339..8b7ff9fba 100644 --- a/src/blocks/homepage-articles/view.php +++ b/src/blocks/homepage-articles/view.php @@ -198,7 +198,7 @@ function newspack_blocks_get_homepage_articles_css_string( $attrs ) { } } } - if ( isset( $attrs['showSubtitle'] ) && in_array( 1, $attrs['showSubtitle'], false ) ) { + 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; From f97e39a37afe0b44cf740713c11cbe05d64124ef Mon Sep 17 00:00:00 2001 From: Adam Borowski Date: Fri, 3 Nov 2023 16:00:07 +0100 Subject: [PATCH 9/9] fix: prevent including the style tag in API response --- src/blocks/homepage-articles/view.php | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/blocks/homepage-articles/view.php b/src/blocks/homepage-articles/view.php index 8b7ff9fba..4436bd860 100644 --- a/src/blocks/homepage-articles/view.php +++ b/src/blocks/homepage-articles/view.php @@ -231,6 +231,7 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) { // 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() ), @@ -238,9 +239,11 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) { ); $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(); ?> " $content = ob_get_clean(); Newspack_Blocks::enqueue_view_assets( 'homepage-articles' ); - return $content; + return $inline_style_html . $content; } /**