From 77dcd20cf61591b8b979e7361ac0f66b2f7fd421 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 7 Oct 2022 12:23:01 +1100 Subject: [PATCH 1/7] 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 --- lib/block-supports/typography.php | 7 ++- phpunit/block-supports/typography-test.php | 73 ++++++++++++++++++++++ 2 files changed, 79 insertions(+), 1 deletion(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 22dfdba97fbb8..3adcd71649358 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -108,7 +108,12 @@ 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, + 'fluid' => true, + ) + ); } if ( $has_font_family_support && ! $should_skip_font_family ) { diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index d21619a3a5286..23df95afa1b9b 100644 --- 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 From 2690b936be054ce6ff39f47d3fe169a38cde9aef Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 7 Oct 2022 15:03:50 +1100 Subject: [PATCH 2/7] Add fluid font size to Nav Link --- packages/block-library/src/navigation-link/index.php | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 69d61f0e26a16..8455b2847150e 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -98,7 +98,15 @@ 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'], + 'fluid' => true, + ) + ) + ); } return $font_sizes; From 4e2d5c2768fa01fb676572e84a5652fe57fbb6b8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 7 Oct 2022 15:30:23 +1100 Subject: [PATCH 3/7] Add fluid typography to Search block --- packages/block-library/src/search/index.php | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 46e08134b384d..30239351c619f 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -442,7 +442,16 @@ 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' => esc_attr( $attributes['style']['typography']['fontSize'] ), + 'fluid' => true, + ) + ) + ); + } if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) { From 3595f9f7cb6599ed5e59a478078ec9f5a4c2fe5c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 7 Oct 2022 16:42:35 +1100 Subject: [PATCH 4/7] Fix fluid typography for Submenu block with open on click --- .../block-library/src/navigation-submenu/index.php | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php index f48254824e5cc..e5f73c6ffb4d9 100644 --- a/packages/block-library/src/navigation-submenu/index.php +++ b/packages/block-library/src/navigation-submenu/index.php @@ -98,7 +98,15 @@ 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'], + 'fluid' => true, + ) + ) + ); } return $font_sizes; From 3ea17bf60a18256e3ae5ca7aeee26a00bd47536a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 7 Oct 2022 16:48:29 +1100 Subject: [PATCH 5/7] Fix fluid typography for Page List block --- packages/block-library/src/page-list/index.php | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index ceffd4730a32d..12857b2f91d5f 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -119,7 +119,15 @@ 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'], + 'fluid' => true, + ) + ) + ); } return $font_sizes; From 5c2176ed55269110daf64cd8859074d38f8fa6fc Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 10 Oct 2022 11:55:37 +1100 Subject: [PATCH 6/7] Remove unnecessary parameter --- lib/block-supports/typography.php | 3 +-- packages/block-library/src/navigation-link/index.php | 3 +-- packages/block-library/src/navigation-submenu/index.php | 3 +-- packages/block-library/src/page-list/index.php | 3 +-- packages/block-library/src/search/index.php | 3 +-- 5 files changed, 5 insertions(+), 10 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 3adcd71649358..9cd0197e1cb21 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -110,8 +110,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $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 : gutenberg_get_typography_font_size_value( array( - 'size' => $custom_font_size, - 'fluid' => true, + 'size' => $custom_font_size, ) ); } diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 8455b2847150e..ba8f547b3221a 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -102,8 +102,7 @@ function block_core_navigation_link_build_css_font_sizes( $context ) { 'font-size: %s;', gutenberg_get_typography_font_size_value( array( - 'size' => $context['style']['typography']['fontSize'], - 'fluid' => true, + 'size' => $context['style']['typography']['fontSize'], ) ) ); diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php index e5f73c6ffb4d9..f412b380b9c52 100644 --- a/packages/block-library/src/navigation-submenu/index.php +++ b/packages/block-library/src/navigation-submenu/index.php @@ -102,8 +102,7 @@ function block_core_navigation_submenu_build_css_font_sizes( $context ) { 'font-size: %s;', gutenberg_get_typography_font_size_value( array( - 'size' => $context['style']['typography']['fontSize'], - 'fluid' => true, + 'size' => $context['style']['typography']['fontSize'], ) ) ); diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index 12857b2f91d5f..2ec17dc3fa183 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -123,8 +123,7 @@ function block_core_page_list_build_css_font_sizes( $context ) { 'font-size: %s;', gutenberg_get_typography_font_size_value( array( - 'size' => $context['style']['typography']['fontSize'], - 'fluid' => true, + 'size' => $context['style']['typography']['fontSize'], ) ) ); diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 30239351c619f..fcb0a5a863ee8 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -446,8 +446,7 @@ function get_typography_styles_for_block_core_search( $attributes ) { 'font-size: %s;', gutenberg_get_typography_font_size_value( array( - 'size' => esc_attr( $attributes['style']['typography']['fontSize'] ), - 'fluid' => true, + 'size' => esc_attr( $attributes['style']['typography']['fontSize'] ), ) ) ); From 4039afe03c877ecb7a5a531444dee35eb1062de3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 10 Oct 2022 15:57:26 +1100 Subject: [PATCH 7/7] Call esc_attr only once on the whole typography string --- packages/block-library/src/search/index.php | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index fcb0a5a863ee8..851131a5fb5d7 100644 --- 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; @@ -446,7 +446,7 @@ function get_typography_styles_for_block_core_search( $attributes ) { 'font-size: %s;', gutenberg_get_typography_font_size_value( array( - 'size' => esc_attr( $attributes['style']['typography']['fontSize'] ), + 'size' => $attributes['style']['typography']['fontSize'], ) ) ); @@ -454,27 +454,27 @@ function get_typography_styles_for_block_core_search( $attributes ) { } 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 );