Fluid typography: convert server-side block support values (#44762)

* For serverside rendered typography block support styles, covert font size values to fluid values in the inline styles if fluid typography is activated. Added unit tests * Add fluid font size to Nav Link * Add fluid typography to Search block * Fix fluid typography for Submenu block with open on click * Fix fluid typography for Page List block * Remove unnecessary parameter * Call esc_attr only once on the whole typography string Co-authored-by: tellthemachines <isabel@tellthemachines.com>
WordPress · Oct 10, 2022 · e435413 · e435413
1 parent d20cc8b
commit e435413
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 12 deletions.
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
@@ -108,7 +108,11 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	if ( $has_font_size_support && ! $should_skip_font_size ) {
 		$preset_font_size                    = array_key_exists( 'fontSize', $block_attributes ) ? "var:preset|font-size|{$block_attributes['fontSize']}" : null;
 		$custom_font_size                    = isset( $block_attributes['style']['typography']['fontSize'] ) ? $block_attributes['style']['typography']['fontSize'] : null;
-		$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size;
+		$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : gutenberg_get_typography_font_size_value(
+			array(
+				'size' => $custom_font_size,
+			)
+		);
 	}
 
 	if ( $has_font_family_support && ! $should_skip_font_family ) {

diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
@@ -98,7 +98,14 @@ function block_core_navigation_link_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf(
+			'font-size: %s;',
+			gutenberg_get_typography_font_size_value(
+				array(
+					'size' => $context['style']['typography']['fontSize'],
+				)
+			)
+		);
 	}
 
 	return $font_sizes;

diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
@@ -98,7 +98,14 @@ function block_core_navigation_submenu_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf(
+			'font-size: %s;',
+			gutenberg_get_typography_font_size_value(
+				array(
+					'size' => $context['style']['typography']['fontSize'],
+				)
+			)
+		);
 	}
 
 	return $font_sizes;

diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
@@ -119,7 +119,14 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf(
+			'font-size: %s;',
+			gutenberg_get_typography_font_size_value(
+				array(
+					'size' => $context['style']['typography']['fontSize'],
+				)
+			)
+		);
 	}
 
 	return $font_sizes;

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
@@ -381,7 +381,7 @@ function styles_for_block_core_search( $attributes ) {
 	}
 
 	// Get typography styles to be shared across inner elements.
-	$typography_styles = get_typography_styles_for_block_core_search( $attributes );
+	$typography_styles = esc_attr( get_typography_styles_for_block_core_search( $attributes ) );
 	if ( ! empty( $typography_styles ) ) {
 		$label_styles [] = $typography_styles;
 		$button_styles[] = $typography_styles;
@@ -442,31 +442,39 @@ function get_typography_styles_for_block_core_search( $attributes ) {
 
 	// Add typography styles.
 	if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) {
-		$typography_styles[] = sprintf( 'font-size: %s;', esc_attr( $attributes['style']['typography']['fontSize'] ) );
+		$typography_styles[] = sprintf(
+			'font-size: %s;',
+			gutenberg_get_typography_font_size_value(
+				array(
+					'size' => $attributes['style']['typography']['fontSize'],
+				)
+			)
+		);
+
 	}
 
 	if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) {
-		$typography_styles[] = sprintf( 'font-family: %s;', esc_attr( $attributes['style']['typography']['fontFamily'] ) );
+		$typography_styles[] = sprintf( 'font-family: %s;', $attributes['style']['typography']['fontFamily'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['letterSpacing'] ) ) {
-		$typography_styles[] = sprintf( 'letter-spacing: %s;', esc_attr( $attributes['style']['typography']['letterSpacing'] ) );
+		$typography_styles[] = sprintf( 'letter-spacing: %s;', $attributes['style']['typography']['letterSpacing'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['fontWeight'] ) ) {
-		$typography_styles[] = sprintf( 'font-weight: %s;', esc_attr( $attributes['style']['typography']['fontWeight'] ) );
+		$typography_styles[] = sprintf( 'font-weight: %s;', $attributes['style']['typography']['fontWeight'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['fontStyle'] ) ) {
-		$typography_styles[] = sprintf( 'font-style: %s;', esc_attr( $attributes['style']['typography']['fontStyle'] ) );
+		$typography_styles[] = sprintf( 'font-style: %s;', $attributes['style']['typography']['fontStyle'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['lineHeight'] ) ) {
-		$typography_styles[] = sprintf( 'line-height: %s;', esc_attr( $attributes['style']['typography']['lineHeight'] ) );
+		$typography_styles[] = sprintf( 'line-height: %s;', $attributes['style']['typography']['lineHeight'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['textTransform'] ) ) {
-		$typography_styles[] = sprintf( 'text-transform: %s;', esc_attr( $attributes['style']['typography']['textTransform'] ) );
+		$typography_styles[] = sprintf( 'text-transform: %s;', $attributes['style']['typography']['textTransform'] );
 	}
 
 	return implode( '', $typography_styles );

diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
@@ -445,6 +445,79 @@ public function data_generate_font_size_preset_fixtures() {
 	 * in inline block supports styles,
 	 * when "settings.typography.fluid" is set to `true`.
 	 *
+	 * @covers ::gutenberg_register_typography_support
+	 *
+	 * @dataProvider data_generate_block_supports_font_size_fixtures
+	 *
+	 * @param string $font_size_value             The block supports custom font size value.
+	 * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+	 * @param string $expected_output             Expected value of style property from gutenberg_apply_typography_support().
+	 */
+	public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) {
+		if ( $should_use_fluid_typography ) {
+			switch_theme( 'block-theme-child-with-fluid-typography' );
+		} else {
+			switch_theme( 'default' );
+		}
+
+		$this->test_block_name = 'test/font-size-fluid-value';
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 2,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'typography' => array(
+						'fontSize' => true,
+					),
+				),
+			)
+		);
+		$registry         = WP_Block_Type_Registry::get_instance();
+		$block_type       = $registry->get_registered( $this->test_block_name );
+		$block_attributes = array(
+			'style' => array(
+				'typography' => array(
+					'fontSize' => $font_size_value,
+				),
+			),
+		);
+
+		$actual   = gutenberg_apply_typography_support( $block_type, $block_attributes );
+		$expected = array( 'style' => $expected_output );
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Data provider for test_should_covert_font_sizes_to_fluid_values.
+	 *
+	 * @return array
+	 */
+	public function data_generate_block_supports_font_size_fixtures() {
+		return array(
+			'default_return_value'               => array(
+				'font_size_value'             => '50px',
+				'should_use_fluid_typography' => false,
+				'expected_output'             => 'font-size:50px;',
+			),
+			'return_value_with_fluid_typography' => array(
+				'font_size_value'             => '50px',
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'font-size:clamp(37.5px, 2.34375rem + ((1vw - 7.68px) * 4.507), 75px);',
+			),
+		);
+	}
+
+	/**
+	 * Tests that a block element's custom font size in the inline style attribute
+	 * is replaced with a fluid value when "settings.typography.fluid" is set to `true`,
+	 * and the correct block content is generated.
+	 *
 	 * @covers ::gutenberg_render_typography_support
 	 *
 	 * @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures