fix: restore non-API version of the editor styles (#2062)

Automattic · Feb 27, 2025 · b726d4b · b726d4b
1 parent c6a0424
commit b726d4b
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {