Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Oct 10, 2022
+118 −12
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
77dcd20
For serverside rendered typography block support styles, covert font …
ramonjd Oct 7, 2022
2690b93
Add fluid font size to Nav Link
tellthemachines Oct 7, 2022
4e2d5c2
Add fluid typography to Search block
tellthemachines Oct 7, 2022
3595f9f
Fix fluid typography for Submenu block with open on click
tellthemachines Oct 7, 2022
3ea17bf
Fix fluid typography for Page List block
tellthemachines Oct 7, 2022
5c2176e
Remove unnecessary parameter
tellthemachines Oct 10, 2022
4039afe
Call esc_attr only once on the whole typography string
tellthemachines Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion lib/block-supports/typography.php
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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