<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[54260] trunk: Editor: Introduces fluid typography and uses Style Engine.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/54260">54260</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/54260","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>hellofromTonya</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2022-09-20 15:41:44 +0000 (Tue, 20 Sep 2022)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/changeset/53076">[53076]</a>, <a href="https://core.trac.wordpress.org/changeset/52302">[52302]</a>, <a href="https://core.trac.wordpress.org/changeset/52069">[52069]</a>, <a href="https://core.trac.wordpress.org/changeset/51089">[51089]</a>, <a href="https://core.trac.wordpress.org/changeset/50761">[50761]</a>, <a href="https://core.trac.wordpress.org/changeset/49226">[49226]</a>.
Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See <a href="https://core.trac.wordpress.org/ticket/56467">#56467</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesblocksupportstypographyphp">trunk/src/wp-includes/block-supports/typography.php</a></li>
<li><a href="#trunksrcwpincludesclasswpthemejsonphp">trunk/src/wp-includes/class-wp-theme-json.php</a></li>
<li><a href="#trunksrcwpincludesdeprecatedphp">trunk/src/wp-includes/deprecated.php</a></li>
<li><a href="#trunktestsphpunittestsblocksupportstypographyphp">trunk/tests/phpunit/tests/block-supports/typography.php</a></li>
<li><a href="#trunktestsphpunittestsblockssupportedStylesphp">trunk/tests/phpunit/tests/blocks/supportedStyles.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesblocksupportstypographyphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/block-supports/typography.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/block-supports/typography.php 2022-09-20 15:18:34 UTC (rev 54259)
+++ trunk/src/wp-includes/block-supports/typography.php 2022-09-20 15:41:44 UTC (rev 54260)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -65,6 +65,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * the front-end.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.6.0
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 6.1.0 Used the style engine to generate CSS and classnames.
</ins><span class="cx" style="display: block; padding: 0 10px"> * @access private
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param WP_Block_Type $block_type Block type.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -85,10 +86,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return array();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $attributes = array();
- $classes = array();
- $styles = array();
-
</del><span class="cx" style="display: block; padding: 0 10px"> $has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
</span><span class="cx" style="display: block; padding: 0 10px"> $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
</span><span class="cx" style="display: block; padding: 0 10px"> $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -98,121 +95,370 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
</span><span class="cx" style="display: block; padding: 0 10px"> $has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_font_size_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' ) ) {
- $has_named_font_size = array_key_exists( 'fontSize', $block_attributes );
- $has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // 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' );
+ $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' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_named_font_size ) {
- $classes[] = sprintf( 'has-%s-font-size', _wp_to_kebab_case( $block_attributes['fontSize'] ) );
- } elseif ( $has_custom_font_size ) {
- $styles[] = sprintf( 'font-size: %s;', $block_attributes['style']['typography']['fontSize'] );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $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;
+ $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_font_family_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' ) ) {
- $has_named_font_family = array_key_exists( 'fontFamily', $block_attributes );
- $has_custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_named_font_family ) {
- $classes[] = sprintf( 'has-%s-font-family', _wp_to_kebab_case( $block_attributes['fontFamily'] ) );
- } elseif ( $has_custom_font_family ) {
- // Before using classes, the value was serialized as a CSS Custom Property.
- // We don't need this code path when it lands in core.
- $font_family_custom = $block_attributes['style']['typography']['fontFamily'];
- if ( strpos( $font_family_custom, 'var:preset|font-family' ) !== false ) {
- $index_to_splice = strrpos( $font_family_custom, '|' ) + 1;
- $font_family_slug = _wp_to_kebab_case( substr( $font_family_custom, $index_to_splice ) );
- $font_family_custom = sprintf( 'var(--wp--preset--font-family--%s)', $font_family_slug );
- }
- $styles[] = sprintf( 'font-family: %s;', $font_family_custom );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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'
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_font_style_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' ) ) {
- $font_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' );
- if ( $font_style ) {
- $styles[] = $font_style;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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'
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_font_weight_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' ) ) {
- $font_weight = wp_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' );
- if ( $font_weight ) {
- $styles[] = $font_weight;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( $has_line_height_support && ! $should_skip_line_height ) {
+ $typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_line_height_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' ) ) {
- $has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] );
- if ( $has_line_height ) {
- $styles[] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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'
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_text_decoration_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' ) ) {
- $text_decoration_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' );
- if ( $text_decoration_style ) {
- $styles[] = $text_decoration_style;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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'
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_text_transform_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' ) ) {
- $text_transform_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' );
- if ( $text_transform_style ) {
- $styles[] = $text_transform_style;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 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'
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $has_letter_spacing_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' ) ) {
- $letter_spacing_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'letterSpacing', 'letter-spacing' );
- if ( $letter_spacing_style ) {
- $styles[] = $letter_spacing_style;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $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'];
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! empty( $classes ) ) {
- $attributes['class'] = implode( ' ', $classes );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! empty( $styles['css'] ) ) {
+ $attributes['style'] = $styles['css'];
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! empty( $styles ) ) {
- $attributes['style'] = implode( ' ', $styles );
- }
</del><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return $attributes;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Generates an inline style for a typography feature e.g. text decoration,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Generates an inline style value for a typography feature e.g. text decoration,
</ins><span class="cx" style="display: block; padding: 0 10px"> * text transform, and font style.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @since 5.8.0
- * @access private
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * 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
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param array $attributes Block's attributes.
- * @param string $feature Key for the feature within the typography styles.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 6.1.0
+ *
+ * @param string $style_value A raw style value for a single typography feature from a block's style attribute.
</ins><span class="cx" style="display: block; padding: 0 10px"> * @param string $css_property Slug for the CSS property the inline style sets.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @return string CSS inline style.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @return string A CSS inline style value.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function wp_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) {
- // Retrieve current attribute value or skip if not found.
- $style_value = _wp_array_get( $attributes, array( 'style', 'typography', $feature ), false );
- if ( ! $style_value ) {
- return;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+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;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // If we don't have a preset CSS variable, we'll assume it's a regular CSS value.
- if ( strpos( $style_value, "var:preset|{$css_property}|" ) === false ) {
- return sprintf( '%s:%s;', $css_property, $style_value );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * 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 );
+}
+
+/**
+ * Checks a string for a unit and value and returns an array
+ * consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].
+ *
+ * @since 6.1.0
+ * @access private
+ *
+ * @param string $raw_value Raw size value from theme.json.
+ * @param array $options {
+ * 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`.
+ * @type string[] $acceptable_units An array of font size units. Default `[ 'rem', 'px', 'em' ]`;
+ * }
+ * @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() ) {
+ if ( empty( $raw_value ) ) {
+ return null;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // We have a preset CSS variable as the style.
- // Get the style value from the string and return CSS style.
- $index_to_splice = strrpos( $style_value, '|' ) + 1;
- $slug = substr( $style_value, $index_to_splice );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $defaults = array(
+ 'coerce_to' => '',
+ 'root_size_value' => 16,
+ 'acceptable_units' => array( 'rem', 'px', 'em' ),
+ );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Return the actual CSS inline style e.g. `text-decoration:var(--wp--preset--text-decoration--underline);`.
- return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $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];
+
+ // Default browser font size. Later, possibly could inject some JS to
+ // compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+ 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'];
+ }
+
+ return array(
+ 'value' => $value,
+ 'unit' => $unit,
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Internal implementation of CSS clamp() based on available min/max viewport
+ * width and min/max font sizes.
+ *
+ * @since 6.1.0
+ * @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.
+ * }
+ * @return string|null A font-size value using clamp() on success. Else, null.
+ */
+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;
+
+ // Grab the minimum font size and normalize it in order to use the value for calculations.
+ $minimum_font_size = wp_get_typography_value_and_unit( $minimum_font_size_raw );
+
+ // We get a 'preferred' unit to keep units consistent when calculating, otherwise the result will not be accurate.
+ $font_size_unit = isset( $minimum_font_size['unit'] ) ? $minimum_font_size['unit'] : 'rem';
+
+ // Grab the maximum font size and normalize it in order to use the value for calculations.
+ $maximum_font_size = wp_get_typography_value_and_unit(
+ $maximum_font_size_raw,
+ array(
+ 'coerce_to' => $font_size_unit,
+ )
+ );
+
+ // Protect against unsupported units.
+ if ( ! $maximum_font_size || ! $minimum_font_size ) {
+ return null;
+ }
+
+ // Use rem for accessible fluid target font scaling.
+ $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,
+ )
+ );
+
+ /*
+ * 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'] ) );
+ $linear_factor = round( $linear_factor, 3 ) * $scale_factor;
+ $fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor)";
+
+ 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
+ *
+ * @param array $preset {
+ * Required. fontSizes preset value as seen in theme.json.
+ *
+ * @type string $name Name of the font size preset.
+ * @type string $slug Kebab-case unique identifier for the font size preset.
+ * @type string $size CSS font-size value, including units where applicable.
+ * }
+ * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+ * Default is `false`.
+ * @return string Font-size value.
+ */
+function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
+ // Checks if fluid font sizes are activated.
+ $typography_settings = wp_get_global_settings( array( 'typography' ) );
+ $should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;
+
+ if ( ! $should_use_fluid_typography ) {
+ return $preset['size'];
+ }
+
+ // Defaults.
+ $default_maximum_viewport_width = '1600px';
+ $default_minimum_viewport_width = '768px';
+ $default_minimum_font_size_factor = 0.75;
+ $default_maximum_font_size_factor = 1.5;
+ $default_scale_factor = 1;
+
+ // 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'] );
+
+ // Protect against unsupported units.
+ if ( empty( $preferred_size['unit'] ) ) {
+ return $preset['size'];
+ }
+
+ // If no fluid min or max font sizes are available, create some using min/max font size factors.
+ if ( ! $minimum_font_size_raw ) {
+ $minimum_font_size_raw = ( $preferred_size['value'] * $default_minimum_font_size_factor ) . $preferred_size['unit'];
+ }
+
+ if ( ! $maximum_font_size_raw ) {
+ $maximum_font_size_raw = ( $preferred_size['value'] * $default_maximum_font_size_factor ) . $preferred_size['unit'];
+ }
+
+ $fluid_font_size_value = wp_get_computed_fluid_typography_value(
+ array(
+ 'minimum_viewport_width' => $default_minimum_viewport_width,
+ 'maximum_viewport_width' => $default_maximum_viewport_width,
+ '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;
+ }
+
+ return $preset['size'];
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Register the block support.
</span><span class="cx" style="display: block; padding: 0 10px"> WP_Block_Supports::get_instance()->register(
</span><span class="cx" style="display: block; padding: 0 10px"> 'typography',
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpthemejsonphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-theme-json.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-theme-json.php 2022-09-20 15:18:34 UTC (rev 54259)
+++ trunk/src/wp-includes/class-wp-theme-json.php 2022-09-20 15:41:44 UTC (rev 54260)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -150,7 +150,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'path' => array( 'typography', 'fontSizes' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'prevent_override' => false,
</span><span class="cx" style="display: block; padding: 0 10px"> 'use_default_names' => true,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'value_key' => 'size',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'value_func' => 'wp_get_typography_font_size_value',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'css_vars' => '--wp--preset--font-size--$slug',
</span><span class="cx" style="display: block; padding: 0 10px"> 'classes' => array( '.has-$slug-font-size' => 'font-size' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'properties' => array( 'font-size' ),
</span></span></pre></div>
<a id="trunksrcwpincludesdeprecatedphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/deprecated.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/deprecated.php 2022-09-20 15:18:34 UTC (rev 54259)
+++ trunk/src/wp-includes/deprecated.php 2022-09-20 15:41:44 UTC (rev 54260)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4456,3 +4456,43 @@
</span><span class="cx" style="display: block; padding: 0 10px"> _deprecated_function( __FUNCTION__, '6.1.0' );
</span><span class="cx" style="display: block; padding: 0 10px"> return $metadata;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Generates an inline style for a typography feature e.g. text decoration,
+ * text transform, and font style.
+ *
+ * @since 5.8.0
+ * @access private
+ * @deprecated 6.1.0 Use wp_style_engine_get_styles() introduced in 6.1.0.
+ *
+ * @see wp_style_engine_get_styles()
+ *
+ * @param array $attributes Block's attributes.
+ * @param string $feature Key for the feature within the typography styles.
+ * @param string $css_property Slug for the CSS property the inline style sets.
+ * @return string CSS inline style.
+ */
+function wp_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) {
+ _deprecated_function( __FUNCTION__, '6.1.0', 'wp_style_engine_get_styles()' );
+
+ // Retrieve current attribute value or skip if not found.
+ $style_value = _wp_array_get( $attributes, array( 'style', 'typography', $feature ), false );
+ if ( ! $style_value ) {
+ return;
+ }
+
+ // If we don't have a preset CSS variable, we'll assume it's a regular CSS value.
+ if ( strpos( $style_value, "var:preset|{$css_property}|" ) === false ) {
+ return sprintf( '%s:%s;', $css_property, $style_value );
+ }
+
+ /*
+ * We have a preset CSS variable as the style.
+ * Get the style value from the string and return CSS style.
+ */
+ $index_to_splice = strrpos( $style_value, '|' ) + 1;
+ $slug = substr( $style_value, $index_to_splice );
+
+ // Return the actual CSS inline style e.g. `text-decoration:var(--wp--preset--text-decoration--underline);`.
+ return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug );
+}
</ins></span></pre></div>
<a id="trunktestsphpunittestsblocksupportstypographyphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/block-supports/typography.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/block-supports/typography.php 2022-09-20 15:18:34 UTC (rev 54259)
+++ trunk/tests/phpunit/tests/block-supports/typography.php 2022-09-20 15:41:44 UTC (rev 54260)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,8 +1,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * @group block-supports
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- *
- * @covers ::wp_apply_typography_support
</del><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> class Tests_Block_Supports_Typography extends WP_UnitTestCase {
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -15,16 +13,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name = null;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Unregisters block type after each test.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function tear_down() {
</span><span class="cx" style="display: block; padding: 0 10px"> unregister_block_type( $this->test_block_name );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name = null;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- parent::set_up();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ parent::tear_down();
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests whether slugs with numbers are kebab cased.
+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 54337
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ *
+ * @covers ::wp_apply_typography_support
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function test_font_size_slug_with_numbers_is_kebab_cased_properly() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function test_should_kebab_case_font_size_slug_with_numbers() {
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name = 'test/font-size-slug-with-numbers';
</span><span class="cx" style="display: block; padding: 0 10px"> register_block_type(
</span><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -52,10 +57,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $actual );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests legacy inline styles for font family.
+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 54337
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ *
+ * @covers ::wp_apply_typography_support
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function test_font_family_with_legacy_inline_styles_using_a_value() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function test_should_generate_font_family_with_legacy_inline_styles_using_a_value() {
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name = 'test/font-family-with-inline-styles-using-value';
</span><span class="cx" style="display: block; padding: 0 10px"> register_block_type(
</span><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -78,15 +88,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'serif' ) ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $actual = wp_apply_typography_support( $block_type, $block_atts );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $expected = array( 'style' => 'font-family: serif;' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $expected = array( 'style' => 'font-family:serif;' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $actual );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests skipping serialization.
+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 55505
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ *
+ * @covers ::wp_apply_typography_support
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function test_typography_with_skipped_serialization_block_supports() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function test_should_skip_serialization_for_typography_block_supports() {
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name = 'test/typography-with-skipped-serialization-block-supports';
</span><span class="cx" style="display: block; padding: 0 10px"> register_block_type(
</span><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -128,10 +142,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests skipping serialization of individual block supports properties.
+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 55505
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ *
+ * @covers ::wp_apply_typography_support
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function test_letter_spacing_with_individual_skipped_serialization_block_supports() {
- $this->test_block_name = 'test/letter-spacing-with-individua-skipped-serialization-block-supports';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function test_should_skip_serialization_for_letter_spacing_block_supports() {
+ $this->test_block_name = 'test/letter-spacing-with-individual-skipped-serialization-block-supports';
</ins><span class="cx" style="display: block; padding: 0 10px"> register_block_type(
</span><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name,
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -160,10 +178,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $actual );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests legacy css var inline styles for font family.
+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 54337
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ *
+ * @covers ::wp_apply_typography_support
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function test_font_family_with_legacy_inline_styles_using_a_css_var() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function test_should_generate_css_var_for_font_family_with_legacy_inline_styles() {
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name = 'test/font-family-with-inline-styles-using-css-var';
</span><span class="cx" style="display: block; padding: 0 10px"> register_block_type(
</span><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -186,14 +209,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'var:preset|font-family|h1' ) ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $actual = wp_apply_typography_support( $block_type, $block_atts );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $expected = array( 'style' => 'font-family: var(--wp--preset--font-family--h-1);' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $expected = array( 'style' => 'font-family:var(--wp--preset--font-family--h-1);' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $actual );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests that a classname is generated for font family.
+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 54337
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ *
+ * @covers ::wp_apply_typography_support
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function test_font_family_with_class() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function test_should_generate_classname_for_font_family() {
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name = 'test/font-family-with-class';
</span><span class="cx" style="display: block; padding: 0 10px"> register_block_type(
</span><span class="cx" style="display: block; padding: 0 10px"> $this->test_block_name,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -221,4 +249,126 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected, $actual );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Tests generating font size values, including fluid formulae, from fontSizes preset.
+ *
+ * @ticket 56467
+ *
+ * @covers ::wp_get_typography_font_size_value
+ *
+ * @dataProvider data_generate_font_size_preset_fixtures
+ *
+ * @param array $font_size_preset {
+ * Required. fontSizes preset value as seen in theme.json.
+ *
+ * @type string $name Name of the font size preset.
+ * @type string $slug Kebab-case unique identifier for the font size preset.
+ * @type string $size CSS font-size value, including units where applicable.
+ * }
+ * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+ * @param string $expected_output Expected output.
+ */
+ function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography, $expected_output ) {
+ $actual = wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography );
+
+ $this->assertSame( $expected_output, $actual );
+ }
+
+ /**
+ * Data provider.
+ *
+ * @return array
+ */
+ public function data_generate_font_size_preset_fixtures() {
+ return array(
+ 'default_return_value' => array(
+ 'font_size_preset' => array(
+ 'size' => '28px',
+ ),
+ 'should_use_fluid_typography' => false,
+ 'expected_output' => '28px',
+ ),
+
+ 'default_return_value_when_fluid_is_false' => array(
+ 'font_size_preset' => array(
+ 'size' => '28px',
+ 'fluid' => false,
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => '28px',
+ ),
+
+ 'return_fluid_value' => array(
+ 'font_size_preset' => array(
+ 'size' => '1.75rem',
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
+ ),
+
+ 'return_default_fluid_values_with_empty_fluid_array' => array(
+ 'font_size_preset' => array(
+ 'size' => '28px',
+ 'fluid' => array(),
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+ ),
+
+ 'return_default_fluid_values_with_null_value' => array(
+ 'font_size_preset' => array(
+ 'size' => '28px',
+ 'fluid' => null,
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+ ),
+
+ 'return_size_with_invalid_fluid_units' => array(
+ 'font_size_preset' => array(
+ 'size' => '10em',
+ 'fluid' => array(
+ 'min' => '20vw',
+ 'max' => '50%',
+ ),
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => '10em',
+ ),
+
+ 'return_fluid_clamp_value' => array(
+ 'font_size_preset' => array(
+ 'size' => '28px',
+ 'fluid' => array(
+ 'min' => '20px',
+ 'max' => '50rem',
+ ),
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
+ ),
+
+ 'return_clamp_value_with_default_fluid_max_value' => array(
+ 'font_size_preset' => array(
+ 'size' => '28px',
+ 'fluid' => array(
+ 'min' => '2.6rem',
+ ),
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
+ ),
+
+ 'default_return_clamp_value_with_default_fluid_min_value' => array(
+ 'font_size_preset' => array(
+ 'size' => '28px',
+ 'fluid' => array(
+ 'max' => '80px',
+ ),
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 7.091), 80px)',
+ ),
+ );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunktestsphpunittestsblockssupportedStylesphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/blocks/supportedStyles.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/blocks/supportedStyles.php 2022-09-20 15:18:34 UTC (rev 54259)
+++ trunk/tests/phpunit/tests/blocks/supportedStyles.php 2022-09-20 15:41:44 UTC (rev 54260)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -379,7 +379,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $expected_classes = 'foo-bar-class wp-block-example';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $expected_styles = 'test: style; font-size: 10px;';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $expected_styles = 'test: style; font-size:10px;';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -436,7 +436,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $expected_classes = 'foo-bar-class wp-block-example';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $expected_styles = 'test: style; line-height: 10;';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $expected_styles = 'test: style; line-height:10;';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -563,7 +563,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $expected_classes = 'foo-bar-class wp-block-example has-text-color has-background alignwide';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $expected_styles = 'test: style; color:#000; background-color:#fff; font-size: 10px; line-height: 20;';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $expected_styles = 'test: style; color:#000; background-color:#fff; font-size:10px; line-height:20;';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -606,7 +606,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $expected_classes = 'foo-bar-class wp-block-example';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $expected_styles = 'test: style; font-size: 10px;';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $expected_styles = 'test: style; font-size:10px;';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre>
</div>
</div>
</body>
</html>