Skip to content

Commit

Permalink
Fluid typography: convert server-side block support values (#44762)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
ramonjd and tellthemachines authored Oct 10, 2022
1 parent d20cc8b commit e435413
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 12 deletions.
6 changes: 5 additions & 1 deletion lib/block-supports/typography.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down
9 changes: 8 additions & 1 deletion packages/block-library/src/navigation-link/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 8 additions & 1 deletion packages/block-library/src/navigation-submenu/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 8 additions & 1 deletion packages/block-library/src/page-list/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
24 changes: 16 additions & 8 deletions packages/block-library/src/search/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 );
Expand Down
73 changes: 73 additions & 0 deletions phpunit/block-supports/typography-test.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit e435413

Please sign in to comment.