vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 12:20:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Introduces fluid typography and uses Style Engine.

Browse Source 
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.

git-svn-id: https://develop.svn.wordpress.org/trunk@54260 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork
2022-09-20 15:41:44 +00:00
parent 72a1591d94
commit b2849b7718
5 changed files with 536 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/phpunit/tests/block-supports/typography.php
+162 -12
View File
@@ -1,8 +1,6 @@
<?php
/**
* @group block-supports
*
* @covers ::wp_apply_typography_support
*/
class Tests_Block_Supports_Typography extends WP_UnitTestCase {
/**
@@ -15,16 +13,23 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
$this->test_block_name = null;
}
/**
* Unregisters block type after each test.
*/
function tear_down() {
unregister_block_type( $this->test_block_name );
$this->test_block_name = null;
parent::set_up();
parent::tear_down();
}
/**
* Tests whether slugs with numbers are kebab cased.
*
* @ticket 54337
*
* @covers ::wp_apply_typography_support
*/
function test_font_size_slug_with_numbers_is_kebab_cased_properly() {
function test_should_kebab_case_font_size_slug_with_numbers() {
$this->test_block_name = 'test/font-size-slug-with-numbers';
register_block_type(
$this->test_block_name,
@@ -52,10 +57,15 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
$this->assertSame( $expected, $actual );
}
/**
* Tests legacy inline styles for font family.
*
* @ticket 54337
*
* @covers ::wp_apply_typography_support
*/
function test_font_family_with_legacy_inline_styles_using_a_value() {
function test_should_generate_font_family_with_legacy_inline_styles_using_a_value() {
$this->test_block_name = 'test/font-family-with-inline-styles-using-value';
register_block_type(
$this->test_block_name,
@@ -78,15 +88,19 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
$block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'serif' ) ) );
$actual = wp_apply_typography_support( $block_type, $block_atts );
$expected = array( 'style' => 'font-family: serif;' );
$expected = array( 'style' => 'font-family:serif;' );
$this->assertSame( $expected, $actual );
}
/**
* Tests skipping serialization.
*
* @ticket 55505
*
* @covers ::wp_apply_typography_support
*/
function test_typography_with_skipped_serialization_block_supports() {
function test_should_skip_serialization_for_typography_block_supports() {
$this->test_block_name = 'test/typography-with-skipped-serialization-block-supports';
register_block_type(
$this->test_block_name,
@@ -128,10 +142,14 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
}
/**
* Tests skipping serialization of individual block supports properties.
*
* @ticket 55505
*
* @covers ::wp_apply_typography_support
*/
function test_letter_spacing_with_individual_skipped_serialization_block_supports() {
$this->test_block_name = 'test/letter-spacing-with-individua-skipped-serialization-block-supports';
function test_should_skip_serialization_for_letter_spacing_block_supports() {
$this->test_block_name = 'test/letter-spacing-with-individual-skipped-serialization-block-supports';
register_block_type(
$this->test_block_name,
array(
@@ -160,10 +178,15 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
$this->assertSame( $expected, $actual );
}
/**
* Tests legacy css var inline styles for font family.
*
* @ticket 54337
*
* @covers ::wp_apply_typography_support
*/
function test_font_family_with_legacy_inline_styles_using_a_css_var() {
function test_should_generate_css_var_for_font_family_with_legacy_inline_styles() {
$this->test_block_name = 'test/font-family-with-inline-styles-using-css-var';
register_block_type(
$this->test_block_name,
@@ -186,14 +209,19 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
$block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'var:preset|font-family|h1' ) ) );
$actual = wp_apply_typography_support( $block_type, $block_atts );
$expected = array( 'style' => 'font-family: var(--wp--preset--font-family--h-1);' );
$expected = array( 'style' => 'font-family:var(--wp--preset--font-family--h-1);' );
$this->assertSame( $expected, $actual );
}
/**
* Tests that a classname is generated for font family.
*
* @ticket 54337
*
* @covers ::wp_apply_typography_support
*/
function test_font_family_with_class() {
function test_should_generate_classname_for_font_family() {
$this->test_block_name = 'test/font-family-with-class';
register_block_type(
$this->test_block_name,
@@ -221,4 +249,126 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
$this->assertSame( $expected, $actual );
}
/**
* 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)',
),
);
}
}
tests/phpunit/tests/blocks/supportedStyles.php
+4 -4
View File
@@ -379,7 +379,7 @@ class Tests_Blocks_SupportedStyles extends WP_UnitTestCase {
);
$expected_classes = 'foo-bar-class wp-block-example';
$expected_styles = 'test: style; font-size: 10px;';
$expected_styles = 'test: style; font-size:10px;';
$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
}
@@ -436,7 +436,7 @@ class Tests_Blocks_SupportedStyles extends WP_UnitTestCase {
);
$expected_classes = 'foo-bar-class wp-block-example';
$expected_styles = 'test: style; line-height: 10;';
$expected_styles = 'test: style; line-height:10;';
$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
}
@@ -563,7 +563,7 @@ class Tests_Blocks_SupportedStyles extends WP_UnitTestCase {
);
$expected_classes = 'foo-bar-class wp-block-example has-text-color has-background alignwide';
$expected_styles = 'test: style; color:#000; background-color:#fff; font-size: 10px; line-height: 20;';
$expected_styles = 'test: style; color:#000; background-color:#fff; font-size:10px; line-height:20;';
$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
}
@@ -606,7 +606,7 @@ class Tests_Blocks_SupportedStyles extends WP_UnitTestCase {
);
$expected_classes = 'foo-bar-class wp-block-example';
$expected_styles = 'test: style; font-size: 10px;';
$expected_styles = 'test: style; font-size:10px;';
$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
}