<!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>[58950] trunk: Fluid typography: allow individual preset overrides</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/58950">58950</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/58950","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ramonopoly</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-08-29 05:20:51 +0000 (Thu, 29 Aug 2024)</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'>Fluid typography: allow individual preset overrides
In theme.json, individual font sizes may opt out of fluid typography if it is turned on globally.
This commit ensures that individual font size presets can also opt in to fluid typography if it is not turned on globally.
Props aaronrobertshaw, mmaattiiaass, ramonopoly, wildworks.
Fixes <a href="https://core.trac.wordpress.org/ticket/61932">#61932</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesblocksupportstypographyphp">trunk/src/wp-includes/block-supports/typography.php</a></li>
<li><a href="#trunktestsphpunittestsblocksupportstypographyphp">trunk/tests/phpunit/tests/block-supports/typography.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 2024-08-28 22:46:27 UTC (rev 58949)
+++ trunk/src/wp-includes/block-supports/typography.php 2024-08-29 05:20:51 UTC (rev 58950)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -518,6 +518,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale.
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema.
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.6.0 Deprecated bool argument $should_use_fluid_typography.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 6.7.0 Font size presets can enable fluid typography individually, even if it’s disabled globally.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $preset {
</span><span class="cx" style="display: block; padding: 0 10px"> * Required. fontSizes preset value as seen in theme.json.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -538,10 +539,11 @@
</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">- * Catches empty values and 0/'0'.
- * Fluid calculations cannot be performed on 0.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Catches falsy values and 0/'0'. Fluid calculations cannot be performed on `0`.
+ * Also returns early when a preset font size explicitly disables fluid typography with `false`.
</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( $preset['size'] ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $fluid_font_size_settings = $preset['fluid'] ?? null;
+ if ( false === $fluid_font_size_settings || empty( $preset['size'] ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return $preset['size'];
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -564,15 +566,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $global_settings
</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">- $typography_settings = isset( $settings['typography'] ) ? $settings['typography'] : array();
- $should_use_fluid_typography = ! empty( $typography_settings['fluid'] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $typography_settings = $settings['typography'] ?? array();
</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 ( ! $should_use_fluid_typography ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Return early when fluid typography is disabled in the settings, and there
+ * are no local settings to enable it for the individual preset.
+ *
+ * If this condition isn't met, either the settings or individual preset settings
+ * have enabled fluid typography.
+ */
+ if ( empty( $typography_settings['fluid'] ) && empty( $fluid_font_size_settings ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return $preset['size'];
</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">- // $typography_settings['fluid'] can be a bool or an array. Normalize to array.
- $fluid_settings = is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $fluid_settings = isset( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
</ins><span class="cx" style="display: block; padding: 0 10px"> $layout_settings = isset( $settings['layout'] ) ? $settings['layout'] : array();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Defaults.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -592,14 +599,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : $default_minimum_font_size_limit;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // 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'];
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> // Try to grab explicit min and max fluid font sizes.
</span><span class="cx" style="display: block; padding: 0 10px"> $minimum_font_size_raw = isset( $fluid_font_size_settings['min'] ) ? $fluid_font_size_settings['min'] : null;
</span><span class="cx" style="display: block; padding: 0 10px"> $maximum_font_size_raw = isset( $fluid_font_size_settings['max'] ) ? $fluid_font_size_settings['max'] : null;
</span></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 2024-08-28 22:46:27 UTC (rev 58949)
+++ trunk/tests/phpunit/tests/block-supports/typography.php 2024-08-29 05:20:51 UTC (rev 58950)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -295,6 +295,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 57065
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 58523
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 61118
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @ticket 61932
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @covers ::wp_get_typography_font_size_value
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -359,7 +360,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'font_size_preset' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'size' => null,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'settings' => null,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'settings' => array(
+ 'typography' => array(
+ 'fluid' => true,
+ ),
+ ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'expected_output' => null,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -429,8 +434,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'returns already clamped value' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'font_size_preset' => array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
- 'fluid' => false,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
</ins><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'settings' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'typography' => array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -442,8 +446,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> 'returns value with unsupported unit' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'font_size_preset' => array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'size' => '1000%',
- 'fluid' => false,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'size' => '1000%',
</ins><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'settings' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'typography' => array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -773,6 +776,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Individual preset settings override global settings.
+ 'should convert individual preset size to fluid if fluid is disabled in global settings' => array(
+ 'font_size' => array(
+ 'size' => '17px',
+ 'fluid' => true,
+ ),
+ 'settings' => array(
+ 'typography' => array(),
+ ),
+ 'expected_output' => 'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)',
+ ),
+ 'should use individual preset settings if fluid is disabled in global settings' => array(
+ 'font_size' => array(
+ 'size' => '17px',
+ 'fluid' => array(
+ 'min' => '16px',
+ 'max' => '26px',
+ ),
+ ),
+ 'settings' => array(
+ 'typography' => array(
+ 'fluid' => false,
+ ),
+ ),
+ 'expected_output' => 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.781), 26px)',
+ ),
</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></span></pre>
</div>
</div>
</body>
</html>