From c474c42b7379bc98cb9fbd8eb9c3ca8cba8b3092 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 11 Oct 2022 11:41:20 +1100
Subject: [PATCH 01/11] Fluid Typography: Backport PHP changes
---
src/wp-includes/block-supports/typography.php | 47 +++-
src/wp-includes/class-wp-theme-json.php | 12 +
.../theme.json | 9 +
.../tests/block-supports/typography.php | 213 ++++++++++++++++++
4 files changed, 276 insertions(+), 5 deletions(-)
create mode 100644 tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json
diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php
index 9d947088e2d2c..1abd56533ef5c 100644
--- a/src/wp-includes/block-supports/typography.php
+++ b/src/wp-includes/block-supports/typography.php
@@ -119,7 +119,11 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] )
? $block_attributes['style']['typography']['fontSize']
: null;
- $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size;
+ $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value(
+ array(
+ 'size' => $custom_font_size,
+ )
+ );
}
if ( $has_font_family_support && ! $should_skip_font_family ) {
@@ -244,6 +248,33 @@ function wp_typography_get_preset_inline_style_value( $style_value, $css_propert
return sprintf( 'var(--wp--preset--%s--%s);', $css_property, $slug );
}
+/**
+ * Renders typography styles/content to the block wrapper.
+ *
+ * @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;
+}
+
/**
* Checks a string for a unit and value and returns an array
* consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].
@@ -395,15 +426,19 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
* @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.
+ * @type string $name Name of the font size preset.
+ * @type string $slug Kebab-case unique identifier for the font size preset.
+ * @type string|int $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.
+ * @return string|null Font-size value or `null` if a size is not passed in $preset.
*/
function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
+ if ( ! isset( $preset['size'] ) || empty( $preset['size'] ) ) {
+ return null;
+ }
+
// 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;
@@ -473,3 +508,5 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph
'apply' => 'wp_apply_typography_support',
)
);
+
+add_filter( 'render_block', 'wp_render_typography_support', 10, 2 );
diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php
index 550d83a2af12e..006272a0581f3 100644
--- a/src/wp-includes/class-wp-theme-json.php
+++ b/src/wp-includes/class-wp-theme-json.php
@@ -1675,6 +1675,18 @@ protected static function compute_style_properties( $styles, $settings = array()
continue;
}
+ // Calculates fluid typography rules where available.
+ if ( 'font-size' === $css_property ) {
+ /*
+ * wp_get_typography_font_size_value() will check
+ * if fluid typography has been activated and also
+ * whether the incoming value can be converted to a fluid value.
+ * Values that already have a "clamp()" function will not pass the test,
+ * and therefore the original $value will be returned.
+ */
+ $value = wp_get_typography_font_size_value( array( 'size' => $value ) );
+ }
+
$declarations[] = array(
'name' => $css_property,
'value' => $value,
diff --git a/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json b/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json
new file mode 100644
index 0000000000000..93234766eddd2
--- /dev/null
+++ b/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json
@@ -0,0 +1,9 @@
+{
+ "version": 2,
+ "settings": {
+ "appearanceTools": true,
+ "typography": {
+ "fluid": true
+ }
+ }
+}
diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php
index a7e6a225678fa..fba8d49ce4cdd 100644
--- a/tests/phpunit/tests/block-supports/typography.php
+++ b/tests/phpunit/tests/block-supports/typography.php
@@ -8,17 +8,56 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
*/
private $test_block_name;
+ /**
+ * Stores the current test theme root.
+ *
+ * @var string|null
+ */
+ private $theme_root;
+
+ /**
+ * Caches the original theme directory global value in order
+ * to restore it in tear down.
+ *
+ * @var string|null
+ */
+ private $orig_theme_dir;
+
function set_up() {
parent::set_up();
+
$this->test_block_name = null;
+
+ // Sets up the `wp-content/themes/` directory to ensure consistency when running tests.
+ $this->theme_root = realpath( __DIR__ . '/../data/themedir1' );
+ $this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
+ $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
+
+ $theme_root_callback = function () {
+ return $this->theme_root;
+ };
+ add_filter( 'theme_root', $theme_root_callback );
+ add_filter( 'stylesheet_root', $theme_root_callback );
+ add_filter( 'template_root', $theme_root_callback );
+
+ // Clear caches.
+ wp_clean_themes_cache();
+ unset( $GLOBALS['wp_themes'] );
}
/**
* Unregisters block type after each test.
*/
function tear_down() {
+ // Restores the original theme directory setup.
+ $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
+ wp_clean_themes_cache();
+ unset( $GLOBALS['wp_themes'] );
+
+ // Resets test block name.
unregister_block_type( $this->test_block_name );
$this->test_block_name = null;
+
parent::tear_down();
}
@@ -298,6 +337,25 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => '28px',
),
+ 'default_return_value_when_value_is_already_clamped' => array(
+ 'font_size_preset' => array(
+ 'size' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+ 'fluid' => false,
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+ ),
+
+ 'default_return_value_with_unsupported_unit' => array(
+ 'font_size_preset' => array(
+ 'size' => '1000%',
+ 'fluid' => false,
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => '1000%',
+ ),
+
+
'return_fluid_value' => array(
'font_size_preset' => array(
'size' => '1.75rem',
@@ -371,4 +429,159 @@ public function data_generate_font_size_preset_fixtures() {
),
);
}
+
+ /**
+ * Tests that custom font sizes are converted to fluid values
+ * in inline block supports styles,
+ * when "settings.typography.fluid" is set to `true`.
+ *
+ * @ticket 56467
+ *
+ * @covers ::wp_register_typography_support
+ *
+ * @dataProvider data_generate_block_supports_font_size_fixtures
+ *
+ * @param string $font_size_value The block supports custom font size value.
+ * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+ * @param string $expected_output Expected value of style property from wp_apply_typography_support().
+ */
+ public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) {
+ if ( $should_use_fluid_typography ) {
+ switch_theme( 'block-theme-child-with-fluid-typography' );
+ } else {
+ switch_theme( 'default' );
+ }
+
+ $this->test_block_name = 'test/font-size-fluid-value';
+ register_block_type(
+ $this->test_block_name,
+ array(
+ 'api_version' => 2,
+ 'attributes' => array(
+ 'style' => array(
+ 'type' => 'object',
+ ),
+ ),
+ 'supports' => array(
+ 'typography' => array(
+ 'fontSize' => true,
+ ),
+ ),
+ )
+ );
+ $registry = WP_Block_Type_Registry::get_instance();
+ $block_type = $registry->get_registered( $this->test_block_name );
+ $block_attributes = array(
+ 'style' => array(
+ 'typography' => array(
+ 'fontSize' => $font_size_value,
+ ),
+ ),
+ );
+
+ $actual = wp_apply_typography_support( $block_type, $block_attributes );
+ $expected = array( 'style' => $expected_output );
+
+ $this->assertSame( $expected, $actual );
+ }
+
+ /**
+ * Data provider for test_should_covert_font_sizes_to_fluid_values.
+ *
+ * @return array
+ */
+ public function data_generate_block_supports_font_size_fixtures() {
+ return array(
+ 'default_return_value' => array(
+ 'font_size_value' => '50px',
+ 'should_use_fluid_typography' => false,
+ 'expected_output' => 'font-size:50px;',
+ ),
+ 'return_value_with_fluid_typography' => array(
+ 'font_size_value' => '50px',
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'font-size:clamp(37.5px, 2.34375rem + ((1vw - 7.68px) * 4.507), 75px);',
+ ),
+ );
+ }
+
+ /**
+ * Tests that a block element's custom font size in the inline style attribute
+ * is replaced with a fluid value when "settings.typography.fluid" is set to `true`,
+ * and the correct block content is generated.
+ *
+ * @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures
+ *
+ * @param string $block_content HTML block content.
+ * @param string $font_size_value The block supports custom font size value.
+ * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+ * @param string $expected_output Expected value of style property from wp_apply_typography_support().
+ */
+ public function test_should_replace_inline_font_styles_with_fluid_values( $block_content, $font_size_value, $should_use_fluid_typography, $expected_output ) {
+ if ( $should_use_fluid_typography ) {
+ switch_theme( 'block-theme-child-with-fluid-typography' );
+ } else {
+ switch_theme( 'default' );
+ }
+
+ $block = array(
+ 'blockName' => 'core/image',
+ 'attrs' => array(
+ 'style' => array(
+ 'typography' => array(
+ 'fontSize' => $font_size_value,
+ ),
+ ),
+ ),
+ );
+ $actual = wp_render_typography_support( $block_content, $block );
+
+ $this->assertSame( $expected_output, $actual );
+ }
+
+ /**
+ * Data provider for test_should_replace_inline_font_styles_with_fluid_values.
+ *
+ * @return array
+ */
+ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtures() {
+ return array(
+ 'default_return_content' => array(
+ 'block_content' => 'This is a heading
',
+ 'font_size_value' => '4rem',
+ 'should_use_fluid_typography' => false,
+ 'expected_output' => 'This is a heading
',
+ ),
+ 'return_content_with_replaced_fluid_font_size_inline_style' => array(
+ 'block_content' => 'This is a heading
',
+ 'font_size_value' => '4rem',
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'This is a heading
',
+ ),
+ 'return_content_if_no_inline_font_size_found' => array(
+ 'block_content' => 'A paragraph inside a group
',
+ 'font_size_value' => '20px',
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'A paragraph inside a group
',
+ ),
+ 'return_content_css_var' => array(
+ 'block_content' => 'A paragraph inside a group
',
+ 'font_size_value' => 'var:preset|font-size|x-large',
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'A paragraph inside a group
',
+ ),
+ 'return_content_with_spaces' => array(
+ 'block_content' => 'A paragraph inside a group
',
+ 'font_size_value' => '20px',
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'A paragraph inside a group
',
+ ),
+ 'return_content_with_first_match_replace_only' => array(
+ 'block_content' => " \n \n
A paragraph inside a group
\n \n
A paragraph inside a group