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 @tellthemachines
ramonjd and tellthemachines committed Oct 11, 2022
1 parent 06334a7 commit 0a95882
Show file tree
Hide file tree
Showing 6 changed files with 288 additions and 27 deletions.
6 changes: 5 additions & 1 deletion lib/block-supports/typography.php
View file
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
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
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
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
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
Loading

0 comments on commit 0a95882

Please sign in to comment.