2020-10-13 15:10:30 +02:00
|
|
|
<?php
|
|
|
|
/**
|
|
|
|
* Typography block support flag.
|
|
|
|
*
|
|
|
|
* @package WordPress
|
2021-04-15 17:19:43 +02:00
|
|
|
* @since 5.6.0
|
2020-10-13 15:10:30 +02:00
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Registers the style and typography block attributes for block types that support it.
|
|
|
|
*
|
2021-04-15 17:19:43 +02:00
|
|
|
* @since 5.6.0
|
2023-06-22 10:18:19 +02:00
|
|
|
* @since 6.3.0 Added support for text-columns.
|
2020-10-20 15:36:16 +02:00
|
|
|
* @access private
|
|
|
|
*
|
2020-10-13 15:10:30 +02:00
|
|
|
* @param WP_Block_Type $block_type Block Type.
|
|
|
|
*/
|
|
|
|
function wp_register_typography_support( $block_type ) {
|
2021-04-15 17:19:43 +02:00
|
|
|
if ( ! property_exists( $block_type, 'supports' ) ) {
|
|
|
|
return;
|
2020-10-13 15:10:30 +02:00
|
|
|
}
|
|
|
|
|
2021-06-08 10:09:53 +02:00
|
|
|
$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
|
|
|
|
if ( ! $typography_supports ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
|
|
|
|
$has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
|
|
|
|
$has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
|
|
|
|
$has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
|
2021-11-09 03:17:17 +01:00
|
|
|
$has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
|
2021-06-08 10:09:53 +02:00
|
|
|
$has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
|
2023-06-22 10:18:19 +02:00
|
|
|
$has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
|
2021-06-08 10:09:53 +02:00
|
|
|
$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
|
|
|
|
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
|
|
|
|
|
|
|
|
$has_typography_support = $has_font_family_support
|
|
|
|
|| $has_font_size_support
|
2021-04-15 17:19:43 +02:00
|
|
|
|| $has_font_style_support
|
2021-06-08 10:09:53 +02:00
|
|
|
|| $has_font_weight_support
|
2021-11-09 03:17:17 +01:00
|
|
|
|| $has_letter_spacing_support
|
2021-04-15 17:19:43 +02:00
|
|
|
|| $has_line_height_support
|
2023-06-22 10:18:19 +02:00
|
|
|
|| $has_text_columns_support
|
2021-06-08 10:09:53 +02:00
|
|
|
|| $has_text_decoration_support
|
|
|
|
|| $has_text_transform_support;
|
2020-10-13 15:10:30 +02:00
|
|
|
|
|
|
|
if ( ! $block_type->attributes ) {
|
|
|
|
$block_type->attributes = array();
|
|
|
|
}
|
|
|
|
|
2021-04-15 17:19:43 +02:00
|
|
|
if ( $has_typography_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
|
2020-10-13 15:10:30 +02:00
|
|
|
$block_type->attributes['style'] = array(
|
|
|
|
'type' => 'object',
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( $has_font_size_support && ! array_key_exists( 'fontSize', $block_type->attributes ) ) {
|
|
|
|
$block_type->attributes['fontSize'] = array(
|
|
|
|
'type' => 'string',
|
|
|
|
);
|
|
|
|
}
|
2022-10-04 18:47:13 +02:00
|
|
|
|
|
|
|
if ( $has_font_family_support && ! array_key_exists( 'fontFamily', $block_type->attributes ) ) {
|
|
|
|
$block_type->attributes['fontFamily'] = array(
|
|
|
|
'type' => 'string',
|
|
|
|
);
|
|
|
|
}
|
2020-10-13 15:10:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2021-12-02 00:16:04 +01:00
|
|
|
* Adds CSS classes and inline styles for typography features such as font sizes
|
2021-04-15 17:19:43 +02:00
|
|
|
* to the incoming attributes array. This will be applied to the block markup in
|
|
|
|
* the front-end.
|
2020-10-13 15:10:30 +02:00
|
|
|
*
|
2021-04-15 17:19:43 +02:00
|
|
|
* @since 5.6.0
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
* @since 6.1.0 Used the style engine to generate CSS and classnames.
|
2023-06-22 10:18:19 +02:00
|
|
|
* @since 6.3.0 Added support for text-columns.
|
2020-10-20 15:36:16 +02:00
|
|
|
* @access private
|
|
|
|
*
|
2021-12-02 00:16:04 +01:00
|
|
|
* @param WP_Block_Type $block_type Block type.
|
|
|
|
* @param array $block_attributes Block attributes.
|
2021-04-15 17:19:43 +02:00
|
|
|
* @return array Typography CSS classes and inline styles.
|
2020-10-13 15:10:30 +02:00
|
|
|
*/
|
2020-10-20 15:36:16 +02:00
|
|
|
function wp_apply_typography_support( $block_type, $block_attributes ) {
|
2021-04-15 17:19:43 +02:00
|
|
|
if ( ! property_exists( $block_type, 'supports' ) ) {
|
|
|
|
return array();
|
2020-10-13 15:10:30 +02:00
|
|
|
}
|
|
|
|
|
2021-06-08 10:09:53 +02:00
|
|
|
$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
|
|
|
|
if ( ! $typography_supports ) {
|
|
|
|
return array();
|
|
|
|
}
|
|
|
|
|
2022-04-05 14:08:02 +02:00
|
|
|
if ( wp_should_skip_block_supports_serialization( $block_type, 'typography' ) ) {
|
2021-06-08 10:09:53 +02:00
|
|
|
return array();
|
|
|
|
}
|
|
|
|
|
|
|
|
$has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
|
|
|
|
$has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
|
|
|
|
$has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
|
|
|
|
$has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
|
2021-11-09 03:17:17 +01:00
|
|
|
$has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
|
2021-06-08 10:09:53 +02:00
|
|
|
$has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
|
2023-06-22 10:18:19 +02:00
|
|
|
$has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
|
2021-06-08 10:09:53 +02:00
|
|
|
$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
|
|
|
|
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
|
2021-05-21 12:14:23 +02:00
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
// Whether to skip individual block support features.
|
|
|
|
$should_skip_font_size = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' );
|
|
|
|
$should_skip_font_family = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' );
|
|
|
|
$should_skip_font_style = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
|
|
|
|
$should_skip_font_weight = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
|
|
|
|
$should_skip_line_height = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
|
2023-06-22 10:18:19 +02:00
|
|
|
$should_skip_text_columns = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' );
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
$should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
|
|
|
|
$should_skip_text_transform = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
|
|
|
|
$should_skip_letter_spacing = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' );
|
2020-10-13 15:10:30 +02:00
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
$typography_block_styles = array();
|
|
|
|
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;
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value(
|
|
|
|
array(
|
|
|
|
'size' => $custom_font_size,
|
|
|
|
)
|
|
|
|
);
|
2021-04-15 17:19:43 +02:00
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if ( $has_font_family_support && ! $should_skip_font_family ) {
|
|
|
|
$preset_font_family = array_key_exists( 'fontFamily', $block_attributes )
|
|
|
|
? "var:preset|font-family|{$block_attributes['fontFamily']}"
|
|
|
|
: null;
|
|
|
|
$custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] )
|
|
|
|
? wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontFamily'], 'font-family' )
|
|
|
|
: null;
|
|
|
|
$typography_block_styles['fontFamily'] = $preset_font_family ? $preset_font_family : $custom_font_family;
|
2021-04-15 17:19:43 +02:00
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if (
|
|
|
|
$has_font_style_support &&
|
|
|
|
! $should_skip_font_style &&
|
|
|
|
isset( $block_attributes['style']['typography']['fontStyle'] )
|
|
|
|
) {
|
|
|
|
$typography_block_styles['fontStyle'] = wp_typography_get_preset_inline_style_value(
|
|
|
|
$block_attributes['style']['typography']['fontStyle'],
|
|
|
|
'font-style'
|
|
|
|
);
|
2021-04-15 17:19:43 +02:00
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if (
|
|
|
|
$has_font_weight_support &&
|
|
|
|
! $should_skip_font_weight &&
|
|
|
|
isset( $block_attributes['style']['typography']['fontWeight'] )
|
|
|
|
) {
|
|
|
|
$typography_block_styles['fontWeight'] = wp_typography_get_preset_inline_style_value(
|
|
|
|
$block_attributes['style']['typography']['fontWeight'],
|
|
|
|
'font-weight'
|
|
|
|
);
|
2020-10-13 15:10:30 +02:00
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if ( $has_line_height_support && ! $should_skip_line_height ) {
|
|
|
|
$typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ) );
|
2020-10-13 15:10:30 +02:00
|
|
|
}
|
|
|
|
|
2023-06-22 10:18:19 +02:00
|
|
|
if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) {
|
|
|
|
$typography_block_styles['textColumns'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'textColumns' ), null );
|
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if (
|
|
|
|
$has_text_decoration_support &&
|
|
|
|
! $should_skip_text_decoration &&
|
|
|
|
isset( $block_attributes['style']['typography']['textDecoration'] )
|
|
|
|
) {
|
|
|
|
$typography_block_styles['textDecoration'] = wp_typography_get_preset_inline_style_value(
|
|
|
|
$block_attributes['style']['typography']['textDecoration'],
|
|
|
|
'text-decoration'
|
|
|
|
);
|
2021-04-15 17:19:43 +02:00
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if (
|
|
|
|
$has_text_transform_support &&
|
|
|
|
! $should_skip_text_transform &&
|
|
|
|
isset( $block_attributes['style']['typography']['textTransform'] )
|
|
|
|
) {
|
|
|
|
$typography_block_styles['textTransform'] = wp_typography_get_preset_inline_style_value(
|
|
|
|
$block_attributes['style']['typography']['textTransform'],
|
|
|
|
'text-transform'
|
|
|
|
);
|
2021-04-15 17:19:43 +02:00
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if (
|
|
|
|
$has_letter_spacing_support &&
|
|
|
|
! $should_skip_letter_spacing &&
|
|
|
|
isset( $block_attributes['style']['typography']['letterSpacing'] )
|
|
|
|
) {
|
|
|
|
$typography_block_styles['letterSpacing'] = wp_typography_get_preset_inline_style_value(
|
|
|
|
$block_attributes['style']['typography']['letterSpacing'],
|
|
|
|
'letter-spacing'
|
|
|
|
);
|
2021-11-09 03:17:17 +01:00
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
$attributes = array();
|
|
|
|
$styles = wp_style_engine_get_styles(
|
|
|
|
array( 'typography' => $typography_block_styles ),
|
|
|
|
array( 'convert_vars_to_classnames' => true )
|
|
|
|
);
|
|
|
|
|
|
|
|
if ( ! empty( $styles['classnames'] ) ) {
|
|
|
|
$attributes['class'] = $styles['classnames'];
|
2020-10-20 15:36:16 +02:00
|
|
|
}
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
|
|
|
|
if ( ! empty( $styles['css'] ) ) {
|
|
|
|
$attributes['style'] = $styles['css'];
|
2020-10-20 15:36:16 +02:00
|
|
|
}
|
|
|
|
|
2020-10-13 15:10:30 +02:00
|
|
|
return $attributes;
|
|
|
|
}
|
2020-10-20 15:36:16 +02:00
|
|
|
|
2021-04-15 17:19:43 +02:00
|
|
|
/**
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
* Generates an inline style value for a typography feature e.g. text decoration,
|
2021-04-15 17:19:43 +02:00
|
|
|
* text transform, and font style.
|
|
|
|
*
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
* Note: This function is for backwards compatibility.
|
|
|
|
* * It is necessary to parse older blocks whose typography styles contain presets.
|
|
|
|
* * It mostly replaces the deprecated `wp_typography_get_css_variable_inline_style()`,
|
|
|
|
* but skips compiling a CSS declaration as the style engine takes over this role.
|
|
|
|
* @link https://github.com/wordpress/gutenberg/pull/27555
|
|
|
|
*
|
|
|
|
* @since 6.1.0
|
2021-04-15 17:19:43 +02:00
|
|
|
*
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
* @param string $style_value A raw style value for a single typography feature from a block's style attribute.
|
2021-04-15 17:19:43 +02:00
|
|
|
* @param string $css_property Slug for the CSS property the inline style sets.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
* @return string A CSS inline style value.
|
2021-04-15 17:19:43 +02:00
|
|
|
*/
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
function wp_typography_get_preset_inline_style_value( $style_value, $css_property ) {
|
|
|
|
// If the style value is not a preset CSS variable go no further.
|
|
|
|
if ( empty( $style_value ) || ! str_contains( $style_value, "var:preset|{$css_property}|" ) ) {
|
|
|
|
return $style_value;
|
2021-04-15 17:19:43 +02:00
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
/*
|
|
|
|
* For backwards compatibility.
|
|
|
|
* Presets were removed in WordPress/gutenberg#27555.
|
|
|
|
* A preset CSS variable is the style.
|
|
|
|
* Gets the style value from the string and return CSS style.
|
|
|
|
*/
|
|
|
|
$index_to_splice = strrpos( $style_value, '|' ) + 1;
|
|
|
|
$slug = _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
|
|
|
|
|
|
|
|
// Return the actual CSS inline style value,
|
|
|
|
// e.g. `var(--wp--preset--text-decoration--underline);`.
|
|
|
|
return sprintf( 'var(--wp--preset--%s--%s);', $css_property, $slug );
|
|
|
|
}
|
|
|
|
|
2022-10-11 20:44:13 +02:00
|
|
|
/**
|
|
|
|
* Renders typography styles/content to the block wrapper.
|
|
|
|
*
|
|
|
|
* @since 6.1.0
|
|
|
|
*
|
|
|
|
* @param string $block_content Rendered block content.
|
|
|
|
* @param array $block Block object.
|
|
|
|
* @return string Filtered block content.
|
|
|
|
*/
|
|
|
|
function wp_render_typography_support( $block_content, $block ) {
|
|
|
|
if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) {
|
|
|
|
return $block_content;
|
|
|
|
}
|
|
|
|
|
|
|
|
$custom_font_size = $block['attrs']['style']['typography']['fontSize'];
|
|
|
|
$fluid_font_size = wp_get_typography_font_size_value( array( 'size' => $custom_font_size ) );
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Checks that $fluid_font_size does not match $custom_font_size,
|
|
|
|
* which means it's been mutated by the fluid font size functions.
|
|
|
|
*/
|
|
|
|
if ( ! empty( $fluid_font_size ) && $fluid_font_size !== $custom_font_size ) {
|
|
|
|
// Replaces the first instance of `font-size:$custom_font_size` with `font-size:$fluid_font_size`.
|
|
|
|
return preg_replace( '/font-size\s*:\s*' . preg_quote( $custom_font_size, '/' ) . '\s*;?/', 'font-size:' . esc_attr( $fluid_font_size ) . ';', $block_content, 1 );
|
|
|
|
}
|
|
|
|
|
|
|
|
return $block_content;
|
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
/**
|
|
|
|
* Checks a string for a unit and value and returns an array
|
2022-10-11 20:44:13 +02:00
|
|
|
* consisting of `'value'` and `'unit'`, e.g. array( '42', 'rem' ).
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
*
|
|
|
|
* @since 6.1.0
|
|
|
|
*
|
2022-10-11 20:44:13 +02:00
|
|
|
* @param string|int|float $raw_value Raw size value from theme.json.
|
|
|
|
* @param array $options {
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
* Optional. An associative array of options. Default is empty array.
|
|
|
|
*
|
|
|
|
* @type string $coerce_to Coerce the value to rem or px. Default `'rem'`.
|
|
|
|
* @type int $root_size_value Value of root font size for rem|em <-> px conversion. Default `16`.
|
2022-10-11 20:44:13 +02:00
|
|
|
* @type string[] $acceptable_units An array of font size units. Default `array( 'rem', 'px', 'em' )`;
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
* }
|
|
|
|
* @return array|null An array consisting of `'value'` and `'unit'` properties on success.
|
|
|
|
* `null` on failure.
|
|
|
|
*/
|
|
|
|
function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
|
2022-10-11 20:44:13 +02:00
|
|
|
if ( ! is_string( $raw_value ) && ! is_int( $raw_value ) && ! is_float( $raw_value ) ) {
|
|
|
|
_doing_it_wrong(
|
|
|
|
__FUNCTION__,
|
|
|
|
__( 'Raw size value must be a string, integer, or float.' ),
|
|
|
|
'6.1.0'
|
|
|
|
);
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if ( empty( $raw_value ) ) {
|
|
|
|
return null;
|
2021-04-15 17:19:43 +02:00
|
|
|
}
|
|
|
|
|
2022-10-11 20:44:13 +02:00
|
|
|
// Converts numbers to pixel values by default.
|
|
|
|
if ( is_numeric( $raw_value ) ) {
|
|
|
|
$raw_value = $raw_value . 'px';
|
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
$defaults = array(
|
|
|
|
'coerce_to' => '',
|
|
|
|
'root_size_value' => 16,
|
|
|
|
'acceptable_units' => array( 'rem', 'px', 'em' ),
|
|
|
|
);
|
|
|
|
|
|
|
|
$options = wp_parse_args( $options, $defaults );
|
|
|
|
|
|
|
|
$acceptable_units_group = implode( '|', $options['acceptable_units'] );
|
|
|
|
$pattern = '/^(\d*\.?\d+)(' . $acceptable_units_group . '){1,1}$/';
|
|
|
|
|
|
|
|
preg_match( $pattern, $raw_value, $matches );
|
|
|
|
|
|
|
|
// Bails out if not a number value and a px or rem unit.
|
|
|
|
if ( ! isset( $matches[1] ) || ! isset( $matches[2] ) ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
$value = $matches[1];
|
|
|
|
$unit = $matches[2];
|
|
|
|
|
2022-10-11 20:44:13 +02:00
|
|
|
/*
|
|
|
|
* Default browser font size. Later, possibly could inject some JS to
|
|
|
|
* compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
|
|
|
|
*/
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if ( 'px' === $options['coerce_to'] && ( 'em' === $unit || 'rem' === $unit ) ) {
|
|
|
|
$value = $value * $options['root_size_value'];
|
|
|
|
$unit = $options['coerce_to'];
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( 'px' === $unit && ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) ) {
|
|
|
|
$value = $value / $options['root_size_value'];
|
|
|
|
$unit = $options['coerce_to'];
|
|
|
|
}
|
|
|
|
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
/*
|
|
|
|
* No calculation is required if swapping between em and rem yet,
|
|
|
|
* since we assume a root size value. Later we might like to differentiate between
|
|
|
|
* :root font size (rem) and parent element font size (em) relativity.
|
|
|
|
*/
|
|
|
|
if ( ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) && ( 'em' === $unit || 'rem' === $unit ) ) {
|
|
|
|
$unit = $options['coerce_to'];
|
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
return array(
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
'value' => round( $value, 3 ),
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
'unit' => $unit,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal implementation of CSS clamp() based on available min/max viewport
|
|
|
|
* width and min/max font sizes.
|
|
|
|
*
|
|
|
|
* @since 6.1.0
|
2023-06-20 07:28:25 +02:00
|
|
|
* @since 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
* @access private
|
|
|
|
*
|
|
|
|
* @param array $args {
|
|
|
|
* Optional. An associative array of values to calculate a fluid formula
|
|
|
|
* for font size. Default is empty array.
|
|
|
|
*
|
|
|
|
* @type string $maximum_viewport_width Maximum size up to which type will have fluidity.
|
|
|
|
* @type string $minimum_viewport_width Minimum viewport size from which type will have fluidity.
|
|
|
|
* @type string $maximum_font_size Maximum font size for any clamp() calculation.
|
|
|
|
* @type string $minimum_font_size Minimum font size for any clamp() calculation.
|
|
|
|
* @type int $scale_factor A scale factor to determine how fast a font scales within boundaries.
|
|
|
|
* }
|
2022-10-11 20:44:13 +02:00
|
|
|
* @return string|null A font-size value using clamp() on success, otherwise null.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
*/
|
|
|
|
function wp_get_computed_fluid_typography_value( $args = array() ) {
|
|
|
|
$maximum_viewport_width_raw = isset( $args['maximum_viewport_width'] ) ? $args['maximum_viewport_width'] : null;
|
|
|
|
$minimum_viewport_width_raw = isset( $args['minimum_viewport_width'] ) ? $args['minimum_viewport_width'] : null;
|
|
|
|
$maximum_font_size_raw = isset( $args['maximum_font_size'] ) ? $args['maximum_font_size'] : null;
|
|
|
|
$minimum_font_size_raw = isset( $args['minimum_font_size'] ) ? $args['minimum_font_size'] : null;
|
|
|
|
$scale_factor = isset( $args['scale_factor'] ) ? $args['scale_factor'] : null;
|
|
|
|
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
// Normalizes the minimum font size in order to use the value for calculations.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
$minimum_font_size = wp_get_typography_value_and_unit( $minimum_font_size_raw );
|
|
|
|
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
/*
|
|
|
|
* We get a 'preferred' unit to keep units consistent when calculating,
|
|
|
|
* otherwise the result will not be accurate.
|
|
|
|
*/
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
$font_size_unit = isset( $minimum_font_size['unit'] ) ? $minimum_font_size['unit'] : 'rem';
|
|
|
|
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
// Normalizes the maximum font size in order to use the value for calculations.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
$maximum_font_size = wp_get_typography_value_and_unit(
|
|
|
|
$maximum_font_size_raw,
|
|
|
|
array(
|
|
|
|
'coerce_to' => $font_size_unit,
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
// Checks for mandatory min and max sizes, and protects against unsupported units.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if ( ! $maximum_font_size || ! $minimum_font_size ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
// Uses rem for accessible fluid target font scaling.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
$minimum_font_size_rem = wp_get_typography_value_and_unit(
|
|
|
|
$minimum_font_size_raw,
|
|
|
|
array(
|
|
|
|
'coerce_to' => 'rem',
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
// Viewport widths defined for fluid typography. Normalize units.
|
|
|
|
$maximum_viewport_width = wp_get_typography_value_and_unit(
|
|
|
|
$maximum_viewport_width_raw,
|
|
|
|
array(
|
|
|
|
'coerce_to' => $font_size_unit,
|
|
|
|
)
|
|
|
|
);
|
|
|
|
$minimum_viewport_width = wp_get_typography_value_and_unit(
|
|
|
|
$minimum_viewport_width_raw,
|
|
|
|
array(
|
|
|
|
'coerce_to' => $font_size_unit,
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
2023-06-20 07:28:25 +02:00
|
|
|
// Protects against unsupported units in min and max viewport widths.
|
|
|
|
if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
/*
|
|
|
|
* Build CSS rule.
|
|
|
|
* Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
|
|
|
|
*/
|
|
|
|
$view_port_width_offset = round( $minimum_viewport_width['value'] / 100, 3 ) . $font_size_unit;
|
|
|
|
$linear_factor = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) );
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
$linear_factor_scaled = round( $linear_factor * $scale_factor, 3 );
|
|
|
|
$linear_factor_scaled = empty( $linear_factor_scaled ) ? 1 : $linear_factor_scaled;
|
|
|
|
$fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor_scaled)";
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
|
|
|
|
return "clamp($minimum_font_size_raw, $fluid_target_font_size, $maximum_font_size_raw)";
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns a font-size value based on a given font-size preset.
|
|
|
|
* Takes into account fluid typography parameters and attempts to return a CSS
|
|
|
|
* formula depending on available, valid values.
|
|
|
|
*
|
|
|
|
* @since 6.1.0
|
Editor: Improve how `min`/`max` font sizes are calculated for fluid typography.
- Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a `clamp()` function.
- In the absence of any fluid `min`/`max` values, the lower bound rule of `>16px` will be enforced. This applies to custom values from the editor or single-value `theme.json` styles. Font sizes below this will not be clamped.
- In a preset, if a `fluid.min` value has been specified, the lower bound rule of `>16px` won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
- In a preset, if there is NOT a `fluid.max` but there is `fluid.min`, use the incoming "size" value as the `max`.
- In a preset, if there is NOT a `fluid.min` but there is a `fluid.max`, use `size * min_size_factor` as the `min`. The lower bound rule of `>16px` is enforced here, because the block editor is computing the `min` value. This is consistent with the way minimum sizes are calculated for single or custom values.
Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Fixes #57075.
Built from https://develop.svn.wordpress.org/trunk@54823
git-svn-id: http://core.svn.wordpress.org/trunk@54375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-11-11 18:48:12 +01:00
|
|
|
* @since 6.1.1 Adjusted rules for min and max font sizes.
|
2023-01-24 21:40:10 +01:00
|
|
|
* @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support.
|
2023-06-20 10:00:19 +02:00
|
|
|
* @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale.
|
2023-09-07 06:30:21 +02:00
|
|
|
* @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
*
|
|
|
|
* @param array $preset {
|
|
|
|
* Required. fontSizes preset value as seen in theme.json.
|
|
|
|
*
|
2022-10-11 20:44:13 +02:00
|
|
|
* @type string $name Name of the font size preset.
|
|
|
|
* @type string $slug Kebab-case, unique identifier for the font size preset.
|
|
|
|
* @type string|int|float $size CSS font-size value, including units if applicable.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
* }
|
|
|
|
* @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
|
2022-10-11 20:44:13 +02:00
|
|
|
* Default is false.
|
|
|
|
* @return string|null Font-size value or null if a size is not passed in $preset.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
*/
|
|
|
|
function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
|
2022-10-11 20:44:13 +02:00
|
|
|
if ( ! isset( $preset['size'] ) ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Catches empty values and 0/'0'.
|
|
|
|
* Fluid calculations cannot be performed on 0.
|
|
|
|
*/
|
|
|
|
if ( empty( $preset['size'] ) ) {
|
|
|
|
return $preset['size'];
|
|
|
|
}
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
// Checks if fluid font sizes are activated.
|
2023-06-20 07:28:25 +02:00
|
|
|
$global_settings = wp_get_global_settings();
|
|
|
|
$typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array();
|
|
|
|
$layout_settings = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array();
|
|
|
|
|
2023-01-24 21:40:10 +01:00
|
|
|
if (
|
|
|
|
isset( $typography_settings['fluid'] ) &&
|
|
|
|
( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) )
|
|
|
|
) {
|
|
|
|
$should_use_fluid_typography = true;
|
|
|
|
}
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
|
|
|
|
if ( ! $should_use_fluid_typography ) {
|
|
|
|
return $preset['size'];
|
|
|
|
}
|
|
|
|
|
2023-01-24 21:40:10 +01:00
|
|
|
$fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] )
|
|
|
|
? $typography_settings['fluid']
|
|
|
|
: array();
|
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
// Defaults.
|
2023-09-07 06:30:21 +02:00
|
|
|
$default_maximum_viewport_width = '1600px';
|
2023-06-20 10:00:19 +02:00
|
|
|
$default_minimum_viewport_width = '320px';
|
|
|
|
$default_minimum_font_size_factor_max = 0.75;
|
|
|
|
$default_minimum_font_size_factor_min = 0.25;
|
|
|
|
$default_scale_factor = 1;
|
2023-09-07 06:30:21 +02:00
|
|
|
$default_minimum_font_size_limit = '14px';
|
|
|
|
|
|
|
|
// Defaults overrides.
|
|
|
|
$minimum_viewport_width = isset( $fluid_settings['minViewportWidth'] ) ? $fluid_settings['minViewportWidth'] : $default_minimum_viewport_width;
|
|
|
|
$maximum_viewport_width = isset( $layout_settings['wideSize'] ) && ! empty( wp_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : $default_maximum_viewport_width;
|
|
|
|
if ( isset( $fluid_settings['maxViewportWidth'] ) ) {
|
|
|
|
$maximum_viewport_width = $fluid_settings['maxViewportWidth'];
|
|
|
|
}
|
|
|
|
$has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
|
|
|
|
$minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : $default_minimum_font_size_limit;
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
|
|
|
|
// Font sizes.
|
|
|
|
$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
|
|
|
|
|
|
|
|
// A font size has explicitly bypassed fluid calculations.
|
|
|
|
if ( false === $fluid_font_size_settings ) {
|
|
|
|
return $preset['size'];
|
|
|
|
}
|
|
|
|
|
|
|
|
// Try to grab explicit min and max fluid font sizes.
|
|
|
|
$minimum_font_size_raw = isset( $fluid_font_size_settings['min'] ) ? $fluid_font_size_settings['min'] : null;
|
|
|
|
$maximum_font_size_raw = isset( $fluid_font_size_settings['max'] ) ? $fluid_font_size_settings['max'] : null;
|
|
|
|
|
|
|
|
// Font sizes.
|
|
|
|
$preferred_size = wp_get_typography_value_and_unit( $preset['size'] );
|
|
|
|
|
Editor: Improve how `min`/`max` font sizes are calculated for fluid typography.
- Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a `clamp()` function.
- In the absence of any fluid `min`/`max` values, the lower bound rule of `>16px` will be enforced. This applies to custom values from the editor or single-value `theme.json` styles. Font sizes below this will not be clamped.
- In a preset, if a `fluid.min` value has been specified, the lower bound rule of `>16px` won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
- In a preset, if there is NOT a `fluid.max` but there is `fluid.min`, use the incoming "size" value as the `max`.
- In a preset, if there is NOT a `fluid.min` but there is a `fluid.max`, use `size * min_size_factor` as the `min`. The lower bound rule of `>16px` is enforced here, because the block editor is computing the `min` value. This is consistent with the way minimum sizes are calculated for single or custom values.
Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Fixes #57075.
Built from https://develop.svn.wordpress.org/trunk@54823
git-svn-id: http://core.svn.wordpress.org/trunk@54375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-11-11 18:48:12 +01:00
|
|
|
// Protects against unsupported units.
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
if ( empty( $preferred_size['unit'] ) ) {
|
|
|
|
return $preset['size'];
|
|
|
|
}
|
|
|
|
|
Editor: Improve how `min`/`max` font sizes are calculated for fluid typography.
- Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a `clamp()` function.
- In the absence of any fluid `min`/`max` values, the lower bound rule of `>16px` will be enforced. This applies to custom values from the editor or single-value `theme.json` styles. Font sizes below this will not be clamped.
- In a preset, if a `fluid.min` value has been specified, the lower bound rule of `>16px` won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
- In a preset, if there is NOT a `fluid.max` but there is `fluid.min`, use the incoming "size" value as the `max`.
- In a preset, if there is NOT a `fluid.min` but there is a `fluid.max`, use `size * min_size_factor` as the `min`. The lower bound rule of `>16px` is enforced here, because the block editor is computing the `min` value. This is consistent with the way minimum sizes are calculated for single or custom values.
Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Fixes #57075.
Built from https://develop.svn.wordpress.org/trunk@54823
git-svn-id: http://core.svn.wordpress.org/trunk@54375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-11-11 18:48:12 +01:00
|
|
|
/*
|
|
|
|
* Normalizes the minimum font size limit according to the incoming unit,
|
|
|
|
* in order to perform comparative checks.
|
|
|
|
*/
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
$minimum_font_size_limit = wp_get_typography_value_and_unit(
|
2023-09-07 06:30:21 +02:00
|
|
|
$minimum_font_size_limit,
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
array(
|
|
|
|
'coerce_to' => $preferred_size['unit'],
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
Editor: Improve how `min`/`max` font sizes are calculated for fluid typography.
- Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a `clamp()` function.
- In the absence of any fluid `min`/`max` values, the lower bound rule of `>16px` will be enforced. This applies to custom values from the editor or single-value `theme.json` styles. Font sizes below this will not be clamped.
- In a preset, if a `fluid.min` value has been specified, the lower bound rule of `>16px` won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
- In a preset, if there is NOT a `fluid.max` but there is `fluid.min`, use the incoming "size" value as the `max`.
- In a preset, if there is NOT a `fluid.min` but there is a `fluid.max`, use `size * min_size_factor` as the `min`. The lower bound rule of `>16px` is enforced here, because the block editor is computing the `min` value. This is consistent with the way minimum sizes are calculated for single or custom values.
Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Fixes #57075.
Built from https://develop.svn.wordpress.org/trunk@54823
git-svn-id: http://core.svn.wordpress.org/trunk@54375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-11-11 18:48:12 +01:00
|
|
|
// Don't enforce minimum font size if a font size has explicitly set a min and max value.
|
|
|
|
if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) {
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
/*
|
|
|
|
* If a minimum size was not passed to this function
|
|
|
|
* and the user-defined font size is lower than $minimum_font_size_limit,
|
Editor: Improve how `min`/`max` font sizes are calculated for fluid typography.
- Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a `clamp()` function.
- In the absence of any fluid `min`/`max` values, the lower bound rule of `>16px` will be enforced. This applies to custom values from the editor or single-value `theme.json` styles. Font sizes below this will not be clamped.
- In a preset, if a `fluid.min` value has been specified, the lower bound rule of `>16px` won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
- In a preset, if there is NOT a `fluid.max` but there is `fluid.min`, use the incoming "size" value as the `max`.
- In a preset, if there is NOT a `fluid.min` but there is a `fluid.max`, use `size * min_size_factor` as the `min`. The lower bound rule of `>16px` is enforced here, because the block editor is computing the `min` value. This is consistent with the way minimum sizes are calculated for single or custom values.
Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Fixes #57075.
Built from https://develop.svn.wordpress.org/trunk@54823
git-svn-id: http://core.svn.wordpress.org/trunk@54375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-11-11 18:48:12 +01:00
|
|
|
* do not calculate a fluid value.
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
*/
|
Editor: Improve how `min`/`max` font sizes are calculated for fluid typography.
- Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a `clamp()` function.
- In the absence of any fluid `min`/`max` values, the lower bound rule of `>16px` will be enforced. This applies to custom values from the editor or single-value `theme.json` styles. Font sizes below this will not be clamped.
- In a preset, if a `fluid.min` value has been specified, the lower bound rule of `>16px` won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
- In a preset, if there is NOT a `fluid.max` but there is `fluid.min`, use the incoming "size" value as the `max`.
- In a preset, if there is NOT a `fluid.min` but there is a `fluid.max`, use `size * min_size_factor` as the `min`. The lower bound rule of `>16px` is enforced here, because the block editor is computing the `min` value. This is consistent with the way minimum sizes are calculated for single or custom values.
Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Fixes #57075.
Built from https://develop.svn.wordpress.org/trunk@54823
git-svn-id: http://core.svn.wordpress.org/trunk@54375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-11-11 18:48:12 +01:00
|
|
|
if ( $preferred_size['value'] <= $minimum_font_size_limit['value'] ) {
|
|
|
|
return $preset['size'];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// If no fluid max font size is available use the incoming value.
|
|
|
|
if ( ! $maximum_font_size_raw ) {
|
|
|
|
$maximum_font_size_raw = $preferred_size['value'] . $preferred_size['unit'];
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* If no minimumFontSize is provided, create one using
|
|
|
|
* the given font size multiplied by the min font size scale factor.
|
|
|
|
*/
|
|
|
|
if ( ! $minimum_font_size_raw ) {
|
2023-06-20 10:00:19 +02:00
|
|
|
$preferred_font_size_in_px = 'px' === $preferred_size['unit'] ? $preferred_size['value'] : $preferred_size['value'] * 16;
|
|
|
|
|
|
|
|
/*
|
|
|
|
* The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
|
|
|
|
* that is, how quickly the size factor reaches 0 given increasing font size values.
|
|
|
|
* For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
|
|
|
|
* The scale factor is constrained between min and max values.
|
|
|
|
*/
|
|
|
|
$minimum_font_size_factor = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
|
|
|
|
$calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 );
|
Editor: Improve how `min`/`max` font sizes are calculated for fluid typography.
- Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a `clamp()` function.
- In the absence of any fluid `min`/`max` values, the lower bound rule of `>16px` will be enforced. This applies to custom values from the editor or single-value `theme.json` styles. Font sizes below this will not be clamped.
- In a preset, if a `fluid.min` value has been specified, the lower bound rule of `>16px` won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
- In a preset, if there is NOT a `fluid.max` but there is `fluid.min`, use the incoming "size" value as the `max`.
- In a preset, if there is NOT a `fluid.min` but there is a `fluid.max`, use `size * min_size_factor` as the `min`. The lower bound rule of `>16px` is enforced here, because the block editor is computing the `min` value. This is consistent with the way minimum sizes are calculated for single or custom values.
Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Fixes #57075.
Built from https://develop.svn.wordpress.org/trunk@54823
git-svn-id: http://core.svn.wordpress.org/trunk@54375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-11-11 18:48:12 +01:00
|
|
|
|
|
|
|
// Only use calculated min font size if it's > $minimum_font_size_limit value.
|
|
|
|
if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {
|
|
|
|
$minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit'];
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
} else {
|
Editor: Improve how `min`/`max` font sizes are calculated for fluid typography.
- Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a `clamp()` function.
- In the absence of any fluid `min`/`max` values, the lower bound rule of `>16px` will be enforced. This applies to custom values from the editor or single-value `theme.json` styles. Font sizes below this will not be clamped.
- In a preset, if a `fluid.min` value has been specified, the lower bound rule of `>16px` won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
- In a preset, if there is NOT a `fluid.max` but there is `fluid.min`, use the incoming "size" value as the `max`.
- In a preset, if there is NOT a `fluid.min` but there is a `fluid.max`, use `size * min_size_factor` as the `min`. The lower bound rule of `>16px` is enforced here, because the block editor is computing the `min` value. This is consistent with the way minimum sizes are calculated for single or custom values.
Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Fixes #57075.
Built from https://develop.svn.wordpress.org/trunk@54823
git-svn-id: http://core.svn.wordpress.org/trunk@54375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-11-11 18:48:12 +01:00
|
|
|
$minimum_font_size_raw = $calculated_minimum_font_size . $preferred_size['unit'];
|
Editor: Add font size constraints for fluid typography.
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.
This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/44993 #44993 Fluid typography: add font size constraints]
Follow-up to [54260], [54360], [54497], [54500].
Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646
git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-10-19 14:27:10 +02:00
|
|
|
}
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
$fluid_font_size_value = wp_get_computed_fluid_typography_value(
|
|
|
|
array(
|
2023-09-07 06:30:21 +02:00
|
|
|
'minimum_viewport_width' => $minimum_viewport_width,
|
|
|
|
'maximum_viewport_width' => $maximum_viewport_width,
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
'minimum_font_size' => $minimum_font_size_raw,
|
|
|
|
'maximum_font_size' => $maximum_font_size_raw,
|
|
|
|
'scale_factor' => $default_scale_factor,
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
if ( ! empty( $fluid_font_size_value ) ) {
|
|
|
|
return $fluid_font_size_value;
|
|
|
|
}
|
2021-04-15 17:19:43 +02:00
|
|
|
|
Editor: Introduces fluid typography and uses Style Engine.
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.
The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.
Typography changes introduced from Gutenberg:
* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.
References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography
Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54260
git-svn-id: http://core.svn.wordpress.org/trunk@53819 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 17:47:09 +02:00
|
|
|
return $preset['size'];
|
2021-04-15 17:19:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Register the block support.
|
2020-10-20 15:36:16 +02:00
|
|
|
WP_Block_Supports::get_instance()->register(
|
|
|
|
'typography',
|
|
|
|
array(
|
|
|
|
'register_attribute' => 'wp_register_typography_support',
|
|
|
|
'apply' => 'wp_apply_typography_support',
|
|
|
|
)
|
|
|
|
);
|