From b726d4b15dee9d3fae653bdd57246b219edd11e0 Mon Sep 17 00:00:00 2001 From: Laurel Date: Thu, 27 Feb 2025 09:12:00 -0800 Subject: [PATCH] fix: restore non-API version of the editor styles (#2062) --- includes/class-newspack-blocks-api.php | 14 -- ...s-wp-rest-newspack-articles-controller.php | 13 -- src/blocks/homepage-articles/editor.js | 11 -- src/blocks/homepage-articles/editor.scss | 121 ++++++++++++++++-- 4 files changed, 113 insertions(+), 46 deletions(-) diff --git a/includes/class-newspack-blocks-api.php b/includes/class-newspack-blocks-api.php index c45d077ba..7c6755de7 100644 --- a/includes/class-newspack-blocks-api.php +++ b/includes/class-newspack-blocks-api.php @@ -387,20 +387,6 @@ 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' ) ); 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 4209c0b1f..32009d073 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,19 +107,6 @@ 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 e616cabaf..a58481086 100644 --- a/src/blocks/homepage-articles/editor.js +++ b/src/blocks/homepage-articles/editor.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { registerBlockType } from '@wordpress/blocks'; -import apiFetch from '@wordpress/api-fetch'; /** * Internal dependencies @@ -15,13 +14,3 @@ 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 ac5848db0..5ea10e9bf 100644 --- a/src/blocks/homepage-articles/editor.scss +++ b/src/blocks/homepage-articles/editor.scss @@ -4,21 +4,34 @@ @use "../../shared/sass/mixins"; .wpnbha { - article .entry-title { - margin: 0 0 0.25em; + .editor-rich-text { + width: 100%; } - @include mixins.media( tablet ) { - &.ts-4 article .entry-title { - font-size: 1.6em; + /* Image styles */ + .post-thumbnail { + margin: 0; + margin-bottom: 0.25em; + + img { + height: auto; + width: 100%; } - } - .editor-rich-text { - width: 100%; + figcaption { + margin-bottom: 0.5em; + } } /* Article meta */ + .entry-meta { + display: flex; + font-size: 0.8em; + flex-wrap: wrap; + align-items: center; + margin-top: 0.5em; + } + .cat-links { font-size: variables.$font__size-xs; } @@ -36,7 +49,99 @@ margin: 0.5em 0; } + /* Typescale */ + // Default typescale: + .entry-title { + font-size: 1.2em; + margin: 0 0 0.25em; + } + .avatar { + height: 25px; + width: 25px; + } + + @include mixins.media( tablet ) { + &.ts-4 article .entry-title { + font-size: 1.6em; + } + } + + .newspack-post-subtitle { + &--in-homepage-block { + margin-top: 0.3em; + margin-bottom: 0; + line-height: 1.4; + font-style: italic; + } + } + + // Different typescales: + &.ts-10, + &.ts-9, + &.ts-8 { + .entry-title { + line-height: 1.1; + } + } + + $typescales: ( + "ts-10" ( + ".entry-title": "2.6em", + ".newspack-post-subtitle": "1.4em", + ), + "ts-9" ( + ".entry-title": "2.4em", + ".newspack-post-subtitle": "1.4em", + ), + "ts-8" ( + ".entry-title": "2.2em", + ".newspack-post-subtitle": "1.4em", + ), + "ts-7" ( + ".entry-title": "2em", + ".newspack-post-subtitle": "1.4em", + ), + "ts-6" ( + ".entry-title": "1.7em", + ".newspack-post-subtitle": "1.4em", + ), + "ts-5" ( + ".entry-title": "1.4em", + ".newspack-post-subtitle": "1.2em", + ), + "ts-3" ( + ".entry-title": "1em", + ".newspack-post-subtitle": "0.8em", + ".entry-wrapper p": "0.8em", + ".entry-wrapper .more-link": "0.8em", + ), + "ts-2" ( + ".entry-title": "0.9em", + "article .newspack-post-subtitle": "0.8em", + "article .entry-wrapper p": "0.8em", + "article .entry-wrapper .more-link": "0.8em", + ), + "ts-1" ( + ".entry-title": "0.9em", + "article .newspack-post-subtitle": "0.8em", + "article .entry-wrapper p": "0.8em", + "article .entry-wrapper .more-link": "0.8em", + ), + ); + + // Loop through all our $typescales and generate font size CSS: + @each $type, $selectors in $typescales { + @each $selector, $values in $selectors { + @each $value in $values { + &.#{$type} { + #{$selector} { + font-size: #{$value}; + } + } + } + } + } } .editor-styles-wrapper.wpnbha__wp-block-button__wrapper {