Changeset 54497
- Timestamp:
- 10/11/2022 06:42:20 PM (2 years ago)
- Location:
- trunk
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/block-supports/typography.php
r54387 r54497 120 120 ? $block_attributes['style']['typography']['fontSize'] 121 121 : null; 122 $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size; 122 $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value( 123 array( 124 'size' => $custom_font_size, 125 ) 126 ); 123 127 } 124 128 … … 246 250 247 251 /** 252 * Renders typography styles/content to the block wrapper. 253 * 254 * @since 6.1.0 255 * 256 * @param string $block_content Rendered block content. 257 * @param array $block Block object. 258 * @return string Filtered block content. 259 */ 260 function wp_render_typography_support( $block_content, $block ) { 261 if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) { 262 return $block_content; 263 } 264 265 $custom_font_size = $block['attrs']['style']['typography']['fontSize']; 266 $fluid_font_size = wp_get_typography_font_size_value( array( 'size' => $custom_font_size ) ); 267 268 /* 269 * Checks that $fluid_font_size does not match $custom_font_size, 270 * which means it's been mutated by the fluid font size functions. 271 */ 272 if ( ! empty( $fluid_font_size ) && $fluid_font_size !== $custom_font_size ) { 273 // Replaces the first instance of `font-size:$custom_font_size` with `font-size:$fluid_font_size`. 274 return preg_replace( '/font-size\s*:\s*' . preg_quote( $custom_font_size, '/' ) . '\s*;?/', 'font-size:' . esc_attr( $fluid_font_size ) . ';', $block_content, 1 ); 275 } 276 277 return $block_content; 278 } 279 280 /** 248 281 * Checks a string for a unit and value and returns an array 249 * consisting of `'value'` and `'unit'`, e.g. , [ '42', 'rem' ].282 * consisting of `'value'` and `'unit'`, e.g. array( '42', 'rem' ). 250 283 * 251 284 * @since 6.1.0 252 * @access private 253 * 254 * @param string $raw_value Raw size value from theme.json. 255 * @param array $options { 285 * 286 * @param string|int|float $raw_value Raw size value from theme.json. 287 * @param array $options { 256 288 * Optional. An associative array of options. Default is empty array. 257 289 * 258 290 * @type string $coerce_to Coerce the value to rem or px. Default `'rem'`. 259 291 * @type int $root_size_value Value of root font size for rem|em <-> px conversion. Default `16`. 260 * @type string[] $acceptable_units An array of font size units. Default ` [ 'rem', 'px', 'em' ]`;292 * @type string[] $acceptable_units An array of font size units. Default `array( 'rem', 'px', 'em' )`; 261 293 * } 262 294 * @return array|null An array consisting of `'value'` and `'unit'` properties on success. … … 264 296 */ 265 297 function wp_get_typography_value_and_unit( $raw_value, $options = array() ) { 298 if ( ! is_string( $raw_value ) && ! is_int( $raw_value ) && ! is_float( $raw_value ) ) { 299 _doing_it_wrong( 300 __FUNCTION__, 301 __( 'Raw size value must be a string, integer, or float.' ), 302 '6.1.0' 303 ); 304 return null; 305 } 306 266 307 if ( empty( $raw_value ) ) { 267 308 return null; 309 } 310 311 // Converts numbers to pixel values by default. 312 if ( is_numeric( $raw_value ) ) { 313 $raw_value = $raw_value . 'px'; 268 314 } 269 315 … … 289 335 $unit = $matches[2]; 290 336 291 // Default browser font size. Later, possibly could inject some JS to 292 // compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`. 337 /* 338 * Default browser font size. Later, possibly could inject some JS to 339 * compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`. 340 */ 293 341 if ( 'px' === $options['coerce_to'] && ( 'em' === $unit || 'rem' === $unit ) ) { 294 342 $value = $value * $options['root_size_value']; … … 324 372 * @type int $scale_factor A scale factor to determine how fast a font scales within boundaries. 325 373 * } 326 * @return string|null A font-size value using clamp() on success . Else,null.374 * @return string|null A font-size value using clamp() on success, otherwise null. 327 375 */ 328 376 function wp_get_computed_fluid_typography_value( $args = array() ) { … … 396 444 * Required. fontSizes preset value as seen in theme.json. 397 445 * 398 * @type string $name Name of the font size preset.399 * @type string $slug Kebab-caseunique identifier for the font size preset.400 * @type string $size CSS font-size value, including units whereapplicable.446 * @type string $name Name of the font size preset. 447 * @type string $slug Kebab-case, unique identifier for the font size preset. 448 * @type string|int|float $size CSS font-size value, including units if applicable. 401 449 * } 402 450 * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. 403 * Default is `false`.404 * @return string Font-size value.451 * Default is false. 452 * @return string|null Font-size value or null if a size is not passed in $preset. 405 453 */ 406 454 function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) { 455 if ( ! isset( $preset['size'] ) ) { 456 return null; 457 } 458 459 /* 460 * Catches empty values and 0/'0'. 461 * Fluid calculations cannot be performed on 0. 462 */ 463 if ( empty( $preset['size'] ) ) { 464 return $preset['size']; 465 } 466 407 467 // Checks if fluid font sizes are activated. 408 468 $typography_settings = wp_get_global_settings( array( 'typography' ) ); -
trunk/src/wp-includes/class-wp-theme-json.php
r54411 r54497 1676 1676 } 1677 1677 1678 // Calculates fluid typography rules where available. 1679 if ( 'font-size' === $css_property ) { 1680 /* 1681 * wp_get_typography_font_size_value() will check 1682 * if fluid typography has been activated and also 1683 * whether the incoming value can be converted to a fluid value. 1684 * Values that already have a clamp() function will not pass the test, 1685 * and therefore the original $value will be returned. 1686 */ 1687 $value = wp_get_typography_font_size_value( array( 'size' => $value ) ); 1688 } 1689 1678 1690 $declarations[] = array( 1679 1691 'name' => $css_property, -
trunk/src/wp-includes/default-filters.php
r54358 r54497 688 688 add_action( 'wp_loaded', '_add_template_loader_filters' ); 689 689 690 // Fluid typography. 691 add_filter( 'render_block', 'wp_render_typography_support', 10, 2 ); 692 690 693 // User preferences. 691 694 add_action( 'init', 'wp_register_persisted_preferences_meta' ); -
trunk/tests/phpunit/tests/block-supports/typography.php
r54260 r54497 9 9 private $test_block_name; 10 10 11 /** 12 * Stores the current test theme root. 13 * 14 * @var string|null 15 */ 16 private $theme_root; 17 18 /** 19 * Caches the original theme directory global value in order 20 * to restore it in tear_down(). 21 * 22 * @var string|null 23 */ 24 private $orig_theme_dir; 25 11 26 function set_up() { 12 27 parent::set_up(); 28 13 29 $this->test_block_name = null; 30 31 // Sets up the `wp-content/themes/` directory to ensure consistency when running tests. 32 $this->theme_root = realpath( DIR_TESTDATA . '/themedir1' ); 33 $this->orig_theme_dir = $GLOBALS['wp_theme_directories']; 34 $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root ); 35 36 $theme_root_callback = function () { 37 return $this->theme_root; 38 }; 39 add_filter( 'theme_root', $theme_root_callback ); 40 add_filter( 'stylesheet_root', $theme_root_callback ); 41 add_filter( 'template_root', $theme_root_callback ); 42 43 // Clear caches. 44 wp_clean_themes_cache(); 45 unset( $GLOBALS['wp_themes'] ); 14 46 } 15 47 … … 18 50 */ 19 51 function tear_down() { 52 // Restores the original theme directory setup. 53 $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir; 54 wp_clean_themes_cache(); 55 unset( $GLOBALS['wp_themes'] ); 56 57 // Resets test block name. 20 58 unregister_block_type( $this->test_block_name ); 21 59 $this->test_block_name = null; 60 22 61 parent::tear_down(); 23 62 } … … 290 329 ), 291 330 331 'size: int 0' => array( 332 'font_size_preset' => array( 333 'size' => 0, 334 ), 335 'should_use_fluid_typography' => true, 336 'expected_output' => 0, 337 ), 338 339 'size: string 0' => array( 340 'font_size_preset' => array( 341 'size' => '0', 342 ), 343 'should_use_fluid_typography' => true, 344 'expected_output' => '0', 345 ), 346 347 'default_return_value_when_size_is_undefined' => array( 348 'font_size_preset' => array( 349 'size' => null, 350 ), 351 'should_use_fluid_typography' => false, 352 'expected_output' => null, 353 ), 354 292 355 'default_return_value_when_fluid_is_false' => array( 293 356 'font_size_preset' => array( … … 299 362 ), 300 363 364 'default_return_value_when_value_is_already_clamped' => array( 365 'font_size_preset' => array( 366 'size' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)', 367 'fluid' => false, 368 ), 369 'should_use_fluid_typography' => true, 370 'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)', 371 ), 372 373 'default_return_value_with_unsupported_unit' => array( 374 'font_size_preset' => array( 375 'size' => '1000%', 376 'fluid' => false, 377 ), 378 'should_use_fluid_typography' => true, 379 'expected_output' => '1000%', 380 ), 381 301 382 'return_fluid_value' => array( 302 383 'font_size_preset' => array( … … 305 386 'should_use_fluid_typography' => true, 306 387 'expected_output' => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)', 388 ), 389 390 'return_fluid_value_with_floats_with_units' => array( 391 'font_size_preset' => array( 392 'size' => '100.175px', 393 ), 394 'should_use_fluid_typography' => true, 395 'expected_output' => 'clamp(75.13125px, 4.695703125rem + ((1vw - 7.68px) * 9.03), 150.2625px)', 396 ), 397 398 'return_fluid_value_with_integer_coerced_to_px' => array( 399 'font_size_preset' => array( 400 'size' => 33, 401 ), 402 'should_use_fluid_typography' => true, 403 'expected_output' => 'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)', 404 ), 405 406 'return_fluid_value_with_float_coerced_to_px' => array( 407 'font_size_preset' => array( 408 'size' => 100.23, 409 ), 410 'should_use_fluid_typography' => true, 411 'expected_output' => 'clamp(75.1725px, 4.69828125rem + ((1vw - 7.68px) * 9.035), 150.345px)', 307 412 ), 308 413 … … 372 477 ); 373 478 } 479 480 /** 481 * Tests that custom font sizes are converted to fluid values 482 * in inline block supports styles 483 * when "settings.typography.fluid" is set to true. 484 * 485 * @ticket 56467 486 * 487 * @covers ::wp_register_typography_support 488 * 489 * @dataProvider data_generate_block_supports_font_size_fixtures 490 * 491 * @param string $font_size_value The block supports custom font size value. 492 * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. 493 * @param string $expected_output Expected value of style property from wp_apply_typography_support(). 494 */ 495 public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) { 496 if ( $should_use_fluid_typography ) { 497 switch_theme( 'block-theme-child-with-fluid-typography' ); 498 } else { 499 switch_theme( 'default' ); 500 } 501 502 $this->test_block_name = 'test/font-size-fluid-value'; 503 register_block_type( 504 $this->test_block_name, 505 array( 506 'api_version' => 2, 507 'attributes' => array( 508 'style' => array( 509 'type' => 'object', 510 ), 511 ), 512 'supports' => array( 513 'typography' => array( 514 'fontSize' => true, 515 ), 516 ), 517 ) 518 ); 519 $registry = WP_Block_Type_Registry::get_instance(); 520 $block_type = $registry->get_registered( $this->test_block_name ); 521 $block_attributes = array( 522 'style' => array( 523 'typography' => array( 524 'fontSize' => $font_size_value, 525 ), 526 ), 527 ); 528 529 $actual = wp_apply_typography_support( $block_type, $block_attributes ); 530 $expected = array( 'style' => $expected_output ); 531 532 $this->assertSame( $expected, $actual ); 533 } 534 535 /** 536 * Data provider for test_should_covert_font_sizes_to_fluid_values(). 537 * 538 * @return array 539 */ 540 public function data_generate_block_supports_font_size_fixtures() { 541 return array( 542 'default_return_value' => array( 543 'font_size_value' => '50px', 544 'should_use_fluid_typography' => false, 545 'expected_output' => 'font-size:50px;', 546 ), 547 'return_value_with_fluid_typography' => array( 548 'font_size_value' => '50px', 549 'should_use_fluid_typography' => true, 550 'expected_output' => 'font-size:clamp(37.5px, 2.34375rem + ((1vw - 7.68px) * 4.507), 75px);', 551 ), 552 ); 553 } 554 555 /** 556 * Tests that a block element's custom font size in the inline style attribute 557 * is replaced with a fluid value when "settings.typography.fluid" is set to true, 558 * and the correct block content is generated. 559 * 560 * @ticket 56467 561 * 562 * @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures 563 * 564 * @param string $block_content HTML block content. 565 * @param string $font_size_value The block supports custom font size value. 566 * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. 567 * @param string $expected_output Expected value of style property from wp_apply_typography_support(). 568 */ 569 public function test_should_replace_inline_font_styles_with_fluid_values( $block_content, $font_size_value, $should_use_fluid_typography, $expected_output ) { 570 if ( $should_use_fluid_typography ) { 571 switch_theme( 'block-theme-child-with-fluid-typography' ); 572 } else { 573 switch_theme( 'default' ); 574 } 575 576 $block = array( 577 'blockName' => 'core/image', 578 'attrs' => array( 579 'style' => array( 580 'typography' => array( 581 'fontSize' => $font_size_value, 582 ), 583 ), 584 ), 585 ); 586 $actual = wp_render_typography_support( $block_content, $block ); 587 588 $this->assertSame( $expected_output, $actual ); 589 } 590 591 /** 592 * Data provider for test_should_replace_inline_font_styles_with_fluid_values(). 593 * 594 * @return array 595 */ 596 public function data_generate_replace_inline_font_styles_with_fluid_values_fixtures() { 597 return array( 598 'default_return_content' => array( 599 'block_content' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>', 600 'font_size_value' => '4rem', 601 'should_use_fluid_typography' => false, 602 'expected_output' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>', 603 ), 604 'return_content_with_replaced_fluid_font_size_inline_style' => array( 605 'block_content' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>', 606 'font_size_value' => '4rem', 607 'should_use_fluid_typography' => true, 608 'expected_output' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(3rem, 3rem + ((1vw - 0.48rem) * 5.769), 6rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>', 609 ), 610 'return_content_if_no_inline_font_size_found' => array( 611 'block_content' => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>', 612 'font_size_value' => '20px', 613 'should_use_fluid_typography' => true, 614 'expected_output' => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>', 615 ), 616 'return_content_css_var' => array( 617 'block_content' => '<p class="has-medium-font-size" style="font-size:var(--wp--preset--font-size--x-large);">A paragraph inside a group</p>', 618 'font_size_value' => 'var:preset|font-size|x-large', 619 'should_use_fluid_typography' => true, 620 'expected_output' => '<p class="has-medium-font-size" style="font-size:var(--wp--preset--font-size--x-large);">A paragraph inside a group</p>', 621 ), 622 'return_content_with_spaces' => array( 623 'block_content' => '<p class="has-medium-font-size" style=" font-size: 20px ; ">A paragraph inside a group</p>', 624 'font_size_value' => '20px', 625 'should_use_fluid_typography' => true, 626 'expected_output' => '<p class="has-medium-font-size" style=" font-size:clamp(15px, 0.9375rem + ((1vw - 7.68px) * 1.803), 30px); ">A paragraph inside a group</p>', 627 ), 628 'return_content_with_first_match_replace_only' => array( 629 'block_content' => "<div class=\"wp-block-group\" style=\"font-size:1em\"> \n \n<p style=\"font-size:1em\">A paragraph inside a group</p></div>", 630 'font_size_value' => '1em', 631 'should_use_fluid_typography' => true, 632 'expected_output' => "<div class=\"wp-block-group\" style=\"font-size:clamp(0.75em, 0.75em + ((1vw - 0.48em) * 1.442), 1.5em);\"> \n \n<p style=\"font-size:1em\">A paragraph inside a group</p></div>", 633 ), 634 ); 635 } 636 637 /** 638 * Tests that valid font size values are parsed. 639 * 640 * @ticket 56467 641 * 642 * @covers ::wp_get_typography_value_and_unit 643 * 644 * @dataProvider data_valid_size_wp_get_typography_value_and_unit 645 * 646 * @param mixed $raw_value Raw size value to test. 647 * @param mixed $expected An expected return value. 648 */ 649 public function test_valid_size_wp_get_typography_value_and_unit( $raw_value, $expected ) { 650 $this->assertEquals( $expected, wp_get_typography_value_and_unit( $raw_value ) ); 651 } 652 653 /** 654 * Data provider for test_valid_size_wp_get_typography_value_and_unit(). 655 * 656 * @return array 657 */ 658 public function data_valid_size_wp_get_typography_value_and_unit() { 659 return array( 660 'size: 10vh with default units do not match' => array( 661 'raw_value' => '10vh', 662 'expected' => null, 663 ), 664 'size: calc() values do not match' => array( 665 'raw_value' => 'calc(2 * 10px)', 666 'expected' => null, 667 ), 668 'size: clamp() values do not match' => array( 669 'raw_value' => 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)', 670 'expected' => null, 671 ), 672 'size: `"10"`' => array( 673 'raw_value' => '10', 674 'expected' => array( 675 'value' => 10, 676 'unit' => 'px', 677 ), 678 ), 679 'size: `11`' => array( 680 'raw_value' => 11, 681 'expected' => array( 682 'value' => 11, 683 'unit' => 'px', 684 ), 685 ), 686 'size: `11.234`' => array( 687 'raw_value' => '11.234', 688 'expected' => array( 689 'value' => 11.234, 690 'unit' => 'px', 691 ), 692 ), 693 'size: `"12rem"`' => array( 694 'raw_value' => '12rem', 695 'expected' => array( 696 'value' => 12, 697 'unit' => 'rem', 698 ), 699 ), 700 'size: `"12px"`' => array( 701 'raw_value' => '12px', 702 'expected' => array( 703 'value' => 12, 704 'unit' => 'px', 705 ), 706 ), 707 'size: `"12em"`' => array( 708 'raw_value' => '12em', 709 'expected' => array( 710 'value' => 12, 711 'unit' => 'em', 712 ), 713 ), 714 'size: `"12.74em"`' => array( 715 'raw_value' => '12.74em', 716 'expected' => array( 717 'value' => 12.74, 718 'unit' => 'em', 719 ), 720 ), 721 ); 722 } 723 724 /** 725 * Tests that invalid font size values are not parsed and trigger incorrect usage. 726 * 727 * @ticket 56467 728 * 729 * @covers ::wp_get_typography_value_and_unit 730 * 731 * @dataProvider data_invalid_size_wp_get_typography_value_and_unit 732 * @expectedIncorrectUsage wp_get_typography_value_and_unit 733 * 734 * @param mixed $raw_value Raw size value to test. 735 */ 736 public function test_invalid_size_wp_get_typography_value_and_unit( $raw_value ) { 737 $this->assertNull( wp_get_typography_value_and_unit( $raw_value ) ); 738 } 739 740 /** 741 * Data provider for test_invalid_size_wp_get_typography_value_and_unit(). 742 * 743 * @return array 744 */ 745 public function data_invalid_size_wp_get_typography_value_and_unit() { 746 return array( 747 'size: null' => array( null ), 748 'size: false' => array( false ), 749 'size: true' => array( true ), 750 'size: array' => array( array( '10' ) ), 751 ); 752 } 374 753 } -
trunk/tests/phpunit/tests/theme/themeDir.php
r53933 r54497 178 178 'Block Theme', 179 179 'Block Theme Child Theme', 180 'Block Theme Child Theme With Fluid Typography', 180 181 'Block Theme [0.4.0]', 181 182 'Block Theme [1.0.0] in subdirectory',
Note: See TracChangeset
for help on using the changeset viewer.