![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Changeset 55947
- Timestamp:
- 06/20/2023 07:58:03 AM (3 years ago)
- Location:
- trunk
- Files:
-
- 2 edited
-
src/wp-includes/block-supports/typography.php (modified) (3 diffs)
-
tests/phpunit/tests/block-supports/typography.php (modified) (19 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/block-supports/typography.php
r55946 r55947 461 461 * @since 6.1.1 Adjusted rules for min and max font sizes. 462 462 * @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support. 463 * @since 6.3.0 Using layout.wideSize as max viewport width .463 * @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale. 464 464 * 465 465 * @param array $preset { … … 508 508 509 509 // Defaults. 510 $default_maximum_viewport_width = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px'; 511 $default_minimum_viewport_width = '768px'; 512 $default_minimum_font_size_factor = 0.75; 513 $default_scale_factor = 1; 514 $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) ); 515 $default_minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px'; 510 $default_maximum_viewport_width = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px'; 511 $default_minimum_viewport_width = '320px'; 512 $default_minimum_font_size_factor_max = 0.75; 513 $default_minimum_font_size_factor_min = 0.25; 514 $default_scale_factor = 1; 515 $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && 516 ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) ); 517 $default_minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px'; 516 518 517 519 // Font sizes. … … 568 570 */ 569 571 if ( ! $minimum_font_size_raw ) { 570 $calculated_minimum_font_size = round( 571 $preferred_size['value'] * $default_minimum_font_size_factor, 572 3 573 ); 572 $preferred_font_size_in_px = 'px' === $preferred_size['unit'] ? $preferred_size['value'] : $preferred_size['value'] * 16; 573 574 /* 575 * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum, 576 * that is, how quickly the size factor reaches 0 given increasing font size values. 577 * For a - b * log2(), lower values of b will make the curve move towards the minimum faster. 578 * The scale factor is constrained between min and max values. 579 */ 580 $minimum_font_size_factor = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max ); 581 $calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 ); 574 582 575 583 // Only use calculated min font size if it's > $minimum_font_size_limit value. -
trunk/tests/phpunit/tests/block-supports/typography.php
r55946 r55947 294 294 * @ticket 56467 295 295 * @ticket 57065 296 * @ticket 58523 296 297 * 297 298 * @covers ::wp_get_typography_font_size_value … … 386 387 ), 387 388 'should_use_fluid_typography' => true, 388 'expected_output' => 'clamp(1. 313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',389 'expected_output' => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)', 389 390 ), 390 391 … … 394 395 ), 395 396 'should_use_fluid_typography' => true, 396 'expected_output' => 'clamp(1. 313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',397 'expected_output' => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)', 397 398 ), 398 399 399 400 'returns clamp value for floats' => array( 400 401 'font_size' => array( 401 'size' => ' 100.175px',402 ), 403 'should_use_fluid_typography' => true, 404 'expected_output' => 'clamp( 75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',402 'size' => '70.175px', 403 ), 404 'should_use_fluid_typography' => true, 405 'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', 405 406 ), 406 407 … … 410 411 ), 411 412 'should_use_fluid_typography' => true, 412 'expected_output' => 'clamp(2 4.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',413 'expected_output' => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)', 413 414 ), 414 415 415 416 'coerces float to `px` and returns clamp value' => array( 416 417 'font_size_preset' => array( 417 'size' => 100.23,418 ), 419 'should_use_fluid_typography' => true, 420 'expected_output' => 'clamp( 75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',418 'size' => 70.175, 419 ), 420 'should_use_fluid_typography' => true, 421 'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', 421 422 ), 422 423 … … 427 428 ), 428 429 'should_use_fluid_typography' => true, 429 'expected_output' => 'clamp( 21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',430 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', 430 431 ), 431 432 … … 436 437 ), 437 438 'should_use_fluid_typography' => true, 438 'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)', 439 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', 440 ), 441 442 'returns clamp value where min and max fluid values defined' => array( 443 'font_size' => array( 444 'size' => '80px', 445 'fluid' => array( 446 'min' => '70px', 447 'max' => '125px', 448 ), 449 ), 450 'should_use_fluid_typography' => true, 451 'expected_output' => 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)', 452 ), 453 454 'returns clamp value where max is equal to size' => array( 455 'font_size' => array( 456 'size' => '7.8125rem', 457 'fluid' => array( 458 'min' => '4.375rem', 459 'max' => '7.8125rem', 460 ), 461 ), 462 'should_use_fluid_typography' => true, 463 'expected_output' => 'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)', 439 464 ), 440 465 … … 448 473 ), 449 474 'should_use_fluid_typography' => true, 450 'expected_output' => 'clamp(5rem, 5rem + ((1vw - 0. 48rem) * -5.769), 32px)',475 'expected_output' => 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)', 451 476 ), 452 477 … … 488 513 ), 489 514 'should_use_fluid_typography' => true, 490 'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',515 'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)', 491 516 ), 492 517 493 518 'returns clamp value where no fluid max size is set' => array( 494 519 'font_size_preset' => array( 520 'size' => '50px', 521 'fluid' => array( 522 'min' => '2.6rem', 523 ), 524 ), 525 'should_use_fluid_typography' => true, 526 'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)', 527 ), 528 529 'returns clamp value where no fluid min size is set' => array( 530 'font_size_preset' => array( 495 531 'size' => '28px', 496 532 'fluid' => array( 497 'min' => '2.6rem',498 ),499 ),500 'should_use_fluid_typography' => true,501 'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',502 ),503 504 'returns clamp value where no fluid min size is set' => array(505 'font_size_preset' => array(506 'size' => '28px',507 'fluid' => array(508 533 'max' => '80px', 509 534 ), 510 535 ), 511 536 'should_use_fluid_typography' => true, 512 'expected_output' => 'clamp( 21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',537 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)', 513 538 ), 514 539 … … 522 547 ), 523 548 'should_use_fluid_typography' => true, 524 'expected_output' => 'clamp(0.5rem, 0.5rem + ((1vw - 0. 48rem) * 8.654), 5rem)',549 'expected_output' => 'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)', 525 550 ), 526 551 … … 533 558 ), 534 559 'should_use_fluid_typography' => true, 535 'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',560 'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)', 536 561 ), 537 562 … … 544 569 ), 545 570 'should_use_fluid_typography' => true, 546 'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0. 48rem) * 36.779), 20rem)',571 'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)', 547 572 ), 548 573 … … 556 581 ), 557 582 'should_use_fluid_typography' => true, 558 'expected_output' => 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)', 583 'expected_output' => 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)', 584 ), 585 586 'should apply scaled min font size for em values when custom min font size is not set' => array( 587 'font_size' => array( 588 'size' => '12rem', 589 ), 590 'should_use_fluid_typography' => true, 591 'expected_output' => 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)', 592 ), 593 594 'should apply scaled min font size for px values when custom min font size is not set' => array( 595 'font_size' => array( 596 'size' => '200px', 597 ), 598 'should_use_fluid_typography' => true, 599 'expected_output' => 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)', 600 ), 601 602 'should not apply scaled min font size for minimum font size when custom min font size is set' => array( 603 'font_size' => array( 604 'size' => '200px', 605 'fluid' => array( 606 'min' => '100px', 607 ), 608 ), 609 'should_use_fluid_typography' => true, 610 'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)', 559 611 ), 560 612 ); … … 570 622 * @ticket 57529 571 623 * @ticket 58522 624 * @ticket 58523 572 625 * 573 626 * @covers ::wp_register_typography_support … … 630 683 'font_size_value' => '15px', 631 684 'theme_slug' => 'block-theme-child-with-fluid-typography', 632 'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px);',685 'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);', 633 686 ), 634 687 'returns value when font size <= default min font size bound' => array( … … 640 693 'font_size_value' => '17px', 641 694 'theme_slug' => 'block-theme-child-with-fluid-typography-config', 642 'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.431), 17px);',695 'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 3.2px) * 0.147), 17px);', 643 696 ), 644 697 'returns value when font size <= custom min font size bound' => array( … … 657 710 * @ticket 56467 658 711 * @ticket 57065 712 * @ticket 58523 659 713 * 660 714 * @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures … … 704 758 'font_size_value' => '4rem', 705 759 'should_use_fluid_typography' => true, 706 '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) * 1.923), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',760 '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(2.2rem, 2.2rem + ((1vw - 0.2rem) * 2.25), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>', 707 761 ), 708 762 'return_content_if_no_inline_font_size_found' => array( … … 722 776 'font_size_value' => '20px', 723 777 'should_use_fluid_typography' => true, 724 'expected_output' => '<p class="has-medium-font-size" style=" font-size:clamp(1 5px, 0.938rem + ((1vw - 7.68px) * 0.601), 20px); ">A paragraph inside a group</p>',778 'expected_output' => '<p class="has-medium-font-size" style=" font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.469), 20px); ">A paragraph inside a group</p>', 725 779 ), 726 780 'return_content_with_first_match_replace_only' => array( … … 728 782 'font_size_value' => '1.5em', 729 783 'should_use_fluid_typography' => true, 730 'expected_output' => "<div class=\"wp-block-group\" style=\"font-size:clamp( 1.125em, 1.125rem + ((1vw - 0.48em) * 0.721), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",784 'expected_output' => "<div class=\"wp-block-group\" style=\"font-size:clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>", 731 785 ), 732 786 );
Note:
See TracChangeset
for help on using the changeset viewer.
