Add - Sync block editor typography with the Customizer body font

.themegrill-qa/suite.json

@@ -193,6 +193,12 @@
       "js/isotope*.js",
       "js/waypoints*.js",
       "js/jquery.counterup*.js"
+    ],
+    "block-editor": [
+      "functions.php",
+      "inc/customizer.php",
+      "inc/kirki/**",
+      "style-editor-block.css"
     ]
   }
 }

functions.php

@@ -121,11 +121,89 @@ function flash_setup() {
  * @since Flash 1.3.5
  */
 function flash_block_editor_styles() {
-	wp_enqueue_style( 'flash-editor-googlefonts', '//fonts.googleapis.com/css?family=Montserrat:400,700&display=swap' );
 	wp_enqueue_style( 'flash-block-editor-styles', get_template_directory_uri() . '/style-editor-block.css' );
+
+	$editor_css = flash_block_editor_dynamic_css();
+
+	if ( $editor_css ) {
+		wp_add_inline_style( 'flash-block-editor-styles', $editor_css );
+	}
 }
 add_action( 'enqueue_block_editor_assets', 'flash_block_editor_styles', 1, 1 );
 
+function flash_block_editor_dynamic_css() {
+	$default = array(
+		'font-family' => 'Montserrat',
+		'variant'     => 'regular',
+	);
+
+	// The free theme's body typography only offers family and variant, so only those reach post content.
+	$font = wp_parse_args( get_theme_mod( 'flash_body_font', $default ), $default );
+
+	$family = $font['font-family'];
+	if ( false !== strpos( $family, ' ' ) && false === strpos( $family, '"' ) ) {
+		$family = '"' . $family . '"';
+	}
+
+	$font_weight = str_replace( 'italic', '', $font['variant'] );
+	$font_weight = in_array( $font_weight, array( '', 'regular' ), true ) ? '400' : $font_weight;
+	$font_style  = false !== strpos( $font['variant'], 'italic' ) ? 'italic' : 'normal';
+
+	$css = '.editor-styles-wrapper, .editor-styles-wrapper > * { font-family: ' . wp_strip_all_tags( $family ) . ', sans-serif; font-weight: ' . wp_strip_all_tags( $font_weight ) . '; font-style: ' . wp_strip_all_tags( $font_style ) . '; }';
+
+	/*
+	 * The front end colors post text and headings with Colors > Heading Colors > Headings
+	 * (or the color scheme's text color), and only overrides the stylesheet's #606060 when
+	 * it differs from the default. The editor follows the same rule.
+	 */
+	$color_scheme = flash_get_color_scheme();
+	$main_color   = get_theme_mod( 'main_text_color', $color_scheme[2] );
+
+	if ( 'default' !== get_theme_mod( 'color_scheme', 'default' ) || $main_color !== $color_scheme[2] ) {
+		$css .= '.editor-styles-wrapper, .editor-styles-wrapper > * { color: ' . wp_strip_all_tags( $main_color ) . '; }';
+	}
+
+	// Primary Color: the front end only colors links in post content when it differs from the scheme default.
+	$link_color = get_theme_mod( 'link_color', $color_scheme[1] );
+
+	if ( $link_color !== $color_scheme[1] ) {
+		$css .= '.editor-styles-wrapper a { color: ' . wp_strip_all_tags( $link_color ) . '; }';
+	}
+
+	return $css;
+}
+
+function flash_block_editor_fonts() {
+	// Only load the canvas font in the block editor. Kirki's font helper is missing when another Kirki version takes over.
+	if ( ! is_admin() || ! class_exists( '\Kirki\Module\Webfonts\Fonts' ) ) {
+		return;
+	}
+
+	$screen = get_current_screen();
+
+	if ( ! $screen || ! $screen->is_block_editor() ) {
+		return;
+	}
+
+	$default = array(
+		'font-family' => 'Montserrat',
+		'variant'     => 'regular',
+	);
+
+	$font   = wp_parse_args( get_theme_mod( 'flash_body_font', $default ), $default );
+	$family = $font['font-family'];
+
+	if ( ! \Kirki\Module\Webfonts\Fonts::is_google_font( $family ) ) {
+		return;
+	}
+
+	$weight = 'italic' === $font['variant'] ? '400i' : str_replace( array( 'regular', 'bold', 'italic' ), array( '400', '', 'i' ), $font['variant'] );
+	$url    = 'https://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', trim( $family ) ) . ':' . $weight . '&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai&display=swap';
+
+	wp_enqueue_style( 'flash-editor-googlefonts', $url );
+}
+add_action( 'enqueue_block_assets', 'flash_block_editor_fonts' );
+
 // Theme version.
 $flash_theme = wp_get_theme();
 define( 'FLASH_THEME_VERSION', $flash_theme->get( 'Version' ) );

style-editor-block.css

@@ -1,7 +1,7 @@
 /* Basic Block Editor CSS */
 .editor-styles-wrapper {
 	background-color: #ffffff;
-	color: #333;
+	color: #606060;
 	font-size: 14px;
 	font-family: Montserrat, sans-serif;
 	line-height: 1.5;
@@ -10,7 +10,7 @@
 
 .editor-styles-wrapper > * {
 	font-family: Montserrat, sans-serif;
-	color: #333;
+	color: #606060;
 }
 
 .editor-styles-wrapper .wp-block.editor-post-title__block .editor-post-title__input {

tests/e2e/specs/block-editor/typography-sync.spec.ts

@@ -0,0 +1,52 @@
+import { test, expect } from "../../fixtures";
+import { ADMIN_STATE, hasAdminCredentials } from "../../utils/login";
+
+test.use({ storageState: ADMIN_STATE });
+
+/**
+ * @area block-editor
+ * @tier fresh
+ * @source functions.php (flash_block_editor_dynamic_css, flash_block_editor_fonts)
+ * @guards themegrill/flash-pro#39
+ * @why The block editor's canvas used to show a hardcoded Montserrat/#333
+ *      regardless of Customize > Global > Typography > Base, and even that
+ *      hardcoded font never actually loaded inside the iframe (it was
+ *      enqueued on a hook whose payload doesn't reach it). On a fresh/default
+ *      install this guards that the canvas renders the theme's own
+ *      documented default font, size and color, and that the actual Google
+ *      Font file is requested inside the iframe - not just declared in CSS.
+ *      Text color must equal what the front end gives post content (#606060
+ *      from style.css in the free theme): the editor used to stay #333.
+ */
+test("the block editor canvas reflects the default body typography and loads the font @fresh @block-editor", async ({
+  page,
+}) => {
+  test.skip(!hasAdminCredentials(), "needs TGQA_ADMIN_USER / TGQA_ADMIN_PASS");
+
+  const fontRequest = page.waitForResponse(
+    (response) =>
+      response.url().includes("fonts.googleapis.com/css") &&
+      response.url().includes("family=Montserrat"),
+    { timeout: 15000 },
+  );
+
+  await page.goto("/wp-admin/post-new.php");
+
+  const frame = page.frameLocator('iframe[name="editor-canvas"]');
+  const wrapper = frame.locator(".editor-styles-wrapper").first();
+  await expect(wrapper).toBeVisible();
+
+  await expect(wrapper).toHaveCSS("font-family", /Montserrat/);
+  await expect(wrapper).toHaveCSS("font-size", "14px");
+
+  // Front-end colour of post content, from the first post.
+  const front = await page.context().newPage();
+  await front.goto("/?p=1");
+  const content = front.locator(".entry-content").first();
+  test.skip((await content.count()) === 0, "needs a post with ID 1");
+  const frontColor = await content.evaluate((e) => getComputedStyle(e).color);
+  await front.close();
+  await expect(wrapper).toHaveCSS("color", frontColor);
+
+  await fontRequest;
+});