Changeset 58171
- Timestamp:
- 05/18/2024 11:16:09 PM (4 months ago)
- Location:
- trunk
- Files:
-
- 4 edited
-
src/wp-includes/block-supports/typography.php (modified) (4 diffs)
-
src/wp-includes/class-wp-theme-json.php (modified) (4 diffs)
-
tests/phpunit/tests/block-supports/typography.php (modified) (5 diffs)
-
tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/block-supports/typography.php
r57329 r58171 499 499 * @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale. 500 500 * @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema. 501 * 502 * @param array $preset { 501 * @since 6.6.0 Deprecated bool argument $should_use_fluid_typography. 502 * 503 * @param array $preset { 503 504 * Required. fontSizes preset value as seen in theme.json. 504 505 * … … 507 508 * @type string|int|float $size CSS font-size value, including units if applicable. 508 509 * } 509 * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.510 * 510 * @param bool|array $settings Optional Theme JSON settings array that overrides any global theme settings. 511 * Default is false. 511 512 * @return string|null Font-size value or null if a size is not passed in $preset. 512 513 */ 513 function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) { 514 515 516 function wp_get_typography_font_size_value( $preset, $settings = array() ) { 514 517 if ( ! isset( $preset['size'] ) ) { 515 518 return null; … … 524 527 } 525 528 526 // Checks if fluid font sizes are activated. 527 $global_settings = wp_get_global_settings(); 528 $typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array(); 529 $layout_settings = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array(); 530 531 if ( 532 isset( $typography_settings['fluid'] ) && 533 ( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) ) 534 ) { 535 $should_use_fluid_typography = true; 536 } 529 /* 530 * As a boolean (deprecated since 6.6), $settings acts as an override to switch fluid typography "on" (`true`) or "off" (`false`). 531 */ 532 if ( is_bool( $settings ) ) { 533 _deprecated_argument( __FUNCTION__, '6.6.0', __( '`boolean` type for second argument `$settings` is deprecated. Use `array()` instead.' ) ); 534 $settings = array( 535 'typography' => array( 536 'fluid' => $settings, 537 ), 538 ); 539 } 540 541 // Fallback to global settings as default. 542 $global_settings = wp_get_global_settings(); 543 $settings = wp_parse_args( 544 $settings, 545 $global_settings 546 ); 547 548 $typography_settings = isset( $settings['typography'] ) ? $settings['typography'] : array(); 549 $should_use_fluid_typography = ! empty( $typography_settings['fluid'] ); 537 550 538 551 if ( ! $should_use_fluid_typography ) { … … 540 553 } 541 554 542 $fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] )543 ? $typography_settings['fluid']544 555 // $typography_settings['fluid'] can be a bool or an array. Normalize to array. 556 $fluid_settings = is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array(); 557 $layout_settings = isset( $settings['layout'] ) ? $settings['layout'] : array(); 545 558 546 559 // Defaults. -
trunk/src/wp-includes/class-wp-theme-json.php
r58123 r58171 1832 1832 * 1833 1833 * @since 5.9.0 1834 * @since 6.6.0 Passing $settings to the callbacks defined in static::PRESETS_METADATA. 1834 1835 * 1835 1836 * @param array $settings Settings to process. … … 1858 1859 ) { 1859 1860 $value_func = $preset_metadata['value_func']; 1860 $value = call_user_func( $value_func, $preset );1861 $value = call_user_func( $value_func, $preset, $settings ); 1861 1862 } else { 1862 1863 // If we don't have a value, then don't add it to the result. … … 2051 2052 * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters. 2052 2053 * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set. 2054 * @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value(). 2053 2055 * 2054 2056 * @param array $styles Styles to process. … … 2118 2120 * Values that already have a clamp() function will not pass the test, 2119 2121 * and therefore the original $value will be returned. 2122 * Pass the current theme_json settings to override any global settings. 2120 2123 */ 2121 $value = wp_get_typography_font_size_value( array( 'size' => $value ) );2124 $value = wp_get_typography_font_size_value( array( 'size' => $value ), $settings ); 2122 2125 } 2123 2126 -
trunk/tests/phpunit/tests/block-supports/typography.php
r57329 r58171 295 295 * @ticket 57065 296 296 * @ticket 58523 297 * @ticket 61118 297 298 * 298 299 * @covers ::wp_get_typography_font_size_value … … 300 301 * @dataProvider data_generate_font_size_preset_fixtures 301 302 * 302 * @param array $font_size_preset 303 * @param array $font_size_preset { 303 304 * Required. fontSizes preset value as seen in theme.json. 305 * 306 * @type string $name Name of the font size preset. 307 * @type string $slug Kebab-case unique identifier for the font size preset. 308 * @type string $size CSS font-size value, including units where applicable. 309 * } 310 * @param bool $settings Theme JSON settings array that overrides any global theme settings. 311 * @param string $expected_output Expected output. 312 */ 313 public function test_wp_get_typography_font_size_value( $font_size_preset, $settings, $expected_output ) { 314 $actual = wp_get_typography_font_size_value( $font_size_preset, $settings ); 315 316 $this->assertSame( $expected_output, $actual ); 317 } 318 319 /** 320 * Data provider. 321 * 322 * @return array 323 */ 324 public function data_generate_font_size_preset_fixtures() { 325 return array( 326 'returns value when fluid typography is deactivated' => array( 327 'font_size_preset' => array( 328 'size' => '28px', 329 ), 330 'settings' => null, 331 'expected_output' => '28px', 332 ), 333 334 'returns value where font size is 0' => array( 335 'font_size_preset' => array( 336 'size' => 0, 337 ), 338 'settings' => array( 339 'typography' => array( 340 'fluid' => true, 341 ), 342 ), 343 'expected_output' => 0, 344 ), 345 346 "returns value where font size is '0'" => array( 347 'font_size_preset' => array( 348 'size' => '0', 349 ), 350 'settings' => array( 351 'typography' => array( 352 'fluid' => true, 353 ), 354 ), 355 'expected_output' => '0', 356 ), 357 358 'returns value where `size` is `null`' => array( 359 'font_size_preset' => array( 360 'size' => null, 361 ), 362 'settings' => null, 363 'expected_output' => null, 364 ), 365 366 'returns value when fluid is `false`' => array( 367 'font_size_preset' => array( 368 'size' => '28px', 369 'fluid' => false, 370 ), 371 'settings' => array( 372 'typography' => array( 373 'fluid' => false, 374 ), 375 ), 376 'expected_output' => '28px', 377 ), 378 'returns value when fluid is empty array' => array( 379 'font_size' => array( 380 'size' => '28px', 381 ), 382 'settings' => array( 383 'typography' => array( 384 'fluid' => array(), 385 ), 386 ), 387 'expected_output' => '28px', 388 ), 389 'returns clamp value with minViewportWidth override' => array( 390 'font_size' => array( 391 'size' => '28px', 392 ), 393 'settings' => array( 394 'typography' => array( 395 'fluid' => array( 396 'minViewportWidth' => '500px', 397 ), 398 ), 399 ), 400 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 5px) * 0.918), 28px)', 401 ), 402 'returns clamp value with maxViewportWidth override' => array( 403 'font_size' => array( 404 'size' => '28px', 405 ), 406 'settings' => array( 407 'typography' => array( 408 'fluid' => array( 409 'maxViewportWidth' => '500px', 410 ), 411 ), 412 ), 413 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)', 414 ), 415 416 'returns clamp value with layout.wideSize override' => array( 417 'font_size' => array( 418 'size' => '28px', 419 ), 420 'settings' => array( 421 'typography' => array( 422 'fluid' => true, 423 ), 424 'layout' => array( 425 'wideSize' => '500px', 426 ), 427 ), 428 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)', 429 ), 430 'returns already clamped value' => array( 431 'font_size_preset' => array( 432 'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)', 433 'fluid' => false, 434 ), 435 'settings' => array( 436 'typography' => array( 437 'fluid' => true, 438 ), 439 ), 440 'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)', 441 ), 442 443 'returns value with unsupported unit' => array( 444 'font_size_preset' => array( 445 'size' => '1000%', 446 'fluid' => false, 447 ), 448 'settings' => array( 449 'typography' => array( 450 'fluid' => true, 451 ), 452 ), 453 'expected_output' => '1000%', 454 ), 455 456 'returns clamp value with rem min and max units' => array( 457 'font_size_preset' => array( 458 'size' => '1.75rem', 459 ), 460 'settings' => array( 461 'typography' => array( 462 'fluid' => true, 463 ), 464 ), 465 'expected_output' => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)', 466 ), 467 468 'returns clamp value with em min and max units' => array( 469 'font_size' => array( 470 'size' => '1.75em', 471 ), 472 'settings' => array( 473 'typography' => array( 474 'fluid' => true, 475 ), 476 ), 477 'expected_output' => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)', 478 ), 479 480 'returns clamp value for floats' => array( 481 'font_size' => array( 482 'size' => '70.175px', 483 ), 484 'settings' => array( 485 'typography' => array( 486 'fluid' => true, 487 ), 488 ), 489 'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', 490 ), 491 492 'coerces integer to `px` and returns clamp value' => array( 493 'font_size_preset' => array( 494 'size' => 33, 495 ), 496 'settings' => array( 497 'typography' => array( 498 'fluid' => true, 499 ), 500 ), 501 'expected_output' => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)', 502 ), 503 504 'coerces float to `px` and returns clamp value' => array( 505 'font_size_preset' => array( 506 'size' => 70.175, 507 ), 508 'settings' => array( 509 'typography' => array( 510 'fluid' => true, 511 ), 512 ), 513 'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', 514 ), 515 516 'returns clamp value when `fluid` is empty array' => array( 517 'font_size_preset' => array( 518 'size' => '28px', 519 'fluid' => array(), 520 ), 521 'settings' => array( 522 'typography' => array( 523 'fluid' => true, 524 ), 525 ), 526 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', 527 ), 528 529 'returns clamp value when `fluid` is `null`' => array( 530 'font_size_preset' => array( 531 'size' => '28px', 532 'fluid' => null, 533 ), 534 'settings' => array( 535 'typography' => array( 536 'fluid' => true, 537 ), 538 ), 539 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', 540 ), 541 542 'returns clamp value where min and max fluid values defined' => array( 543 'font_size' => array( 544 'size' => '80px', 545 'fluid' => array( 546 'min' => '70px', 547 'max' => '125px', 548 ), 549 ), 550 'settings' => array( 551 'typography' => array( 552 'fluid' => true, 553 ), 554 ), 555 'expected_output' => 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)', 556 ), 557 558 'returns clamp value where max is equal to size' => array( 559 'font_size' => array( 560 'size' => '7.8125rem', 561 'fluid' => array( 562 'min' => '4.375rem', 563 'max' => '7.8125rem', 564 ), 565 ), 566 'settings' => array( 567 'typography' => array( 568 'fluid' => true, 569 ), 570 ), 571 'expected_output' => 'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)', 572 ), 573 574 'returns clamp value if min font size is greater than max' => array( 575 'font_size_preset' => array( 576 'size' => '3rem', 577 'fluid' => array( 578 'min' => '5rem', 579 'max' => '32px', 580 ), 581 ), 582 'settings' => array( 583 'typography' => array( 584 'fluid' => true, 585 ), 586 ), 587 'expected_output' => 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)', 588 ), 589 590 'returns value with invalid min/max fluid units' => array( 591 'font_size_preset' => array( 592 'size' => '10em', 593 'fluid' => array( 594 'min' => '20vw', 595 'max' => '50%', 596 ), 597 ), 598 'settings' => array( 599 'typography' => array( 600 'fluid' => true, 601 ), 602 ), 603 'expected_output' => '10em', 604 ), 605 606 'returns value when size is < lower bounds and no fluid min/max set' => array( 607 'font_size_preset' => array( 608 'size' => '3px', 609 ), 610 'settings' => array( 611 'typography' => array( 612 'fluid' => true, 613 ), 614 ), 615 'expected_output' => '3px', 616 ), 617 618 'returns value when size is equal to lower bounds and no fluid min/max set' => array( 619 'font_size' => array( 620 'size' => '14px', 621 ), 622 'settings' => array( 623 'typography' => array( 624 'fluid' => true, 625 ), 626 ), 627 'expected_output' => '14px', 628 ), 629 630 'returns clamp value with different min max units' => array( 631 'font_size_preset' => array( 632 'size' => '28px', 633 'fluid' => array( 634 'min' => '20px', 635 'max' => '50rem', 636 ), 637 ), 638 'settings' => array( 639 'typography' => array( 640 'fluid' => true, 641 ), 642 ), 643 'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)', 644 ), 645 646 'returns clamp value where no fluid max size is set' => array( 647 'font_size_preset' => array( 648 'size' => '50px', 649 'fluid' => array( 650 'min' => '2.6rem', 651 ), 652 ), 653 'settings' => array( 654 'typography' => array( 655 'fluid' => true, 656 ), 657 ), 658 'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)', 659 ), 660 661 'returns clamp value where no fluid min size is set' => array( 662 'font_size_preset' => array( 663 'size' => '28px', 664 'fluid' => array( 665 'max' => '80px', 666 ), 667 ), 668 'settings' => array( 669 'typography' => array( 670 'fluid' => true, 671 ), 672 ), 673 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)', 674 ), 675 676 'should not apply lower bound test when fluid values are set' => array( 677 'font_size_preset' => array( 678 'size' => '1.5rem', 679 'fluid' => array( 680 'min' => '0.5rem', 681 'max' => '5rem', 682 ), 683 ), 684 'settings' => array( 685 'typography' => array( 686 'fluid' => true, 687 ), 688 ), 689 'expected_output' => 'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)', 690 ), 691 692 'should not apply lower bound test when only fluid min is set' => array( 693 'font_size' => array( 694 'size' => '20px', 695 'fluid' => array( 696 'min' => '12px', 697 ), 698 ), 699 'settings' => array( 700 'typography' => array( 701 'fluid' => true, 702 ), 703 ), 704 'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)', 705 ), 706 707 'should not apply lower bound test when only fluid max is set' => array( 708 'font_size' => array( 709 'size' => '0.875rem', 710 'fluid' => array( 711 'max' => '20rem', 712 ), 713 ), 714 'settings' => array( 715 'typography' => array( 716 'fluid' => true, 717 ), 718 ), 719 'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)', 720 ), 721 722 'returns clamp value when min and max font sizes are equal' => array( 723 'font_size_preset' => array( 724 'size' => '4rem', 725 'fluid' => array( 726 'min' => '30px', 727 'max' => '30px', 728 ), 729 ), 730 'settings' => array( 731 'typography' => array( 732 'fluid' => true, 733 ), 734 ), 735 'expected_output' => 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)', 736 ), 737 738 'should apply scaled min font size for em values when custom min font size is not set' => array( 739 'font_size' => array( 740 'size' => '12rem', 741 ), 742 'settings' => array( 743 'typography' => array( 744 'fluid' => true, 745 ), 746 ), 747 'expected_output' => 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)', 748 ), 749 750 'should apply scaled min font size for px values when custom min font size is not set' => array( 751 'font_size' => array( 752 'size' => '200px', 753 ), 754 'settings' => array( 755 'typography' => array( 756 'fluid' => true, 757 ), 758 ), 759 'expected_output' => 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)', 760 ), 761 762 'should not apply scaled min font size for minimum font size when custom min font size is set' => array( 763 'font_size' => array( 764 'size' => '200px', 765 'fluid' => array( 766 'min' => '100px', 767 ), 768 ), 769 'settings' => array( 770 'typography' => array( 771 'fluid' => true, 772 ), 773 ), 774 'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)', 775 ), 776 ); 777 } 778 779 /** 780 * Tests backwards compatibility for deprecated second argument $should_use_fluid_typography. 781 * 782 * @ticket 61118 783 * 784 * @covers ::wp_get_typography_font_size_value 785 * 786 * @expectedDeprecated wp_get_typography_font_size_value 787 * 788 * @dataProvider data_generate_font_size_preset_should_use_fluid_typography_deprecated_fixtures 789 * 790 * @param array $font_size { 791 * Required. A font size as represented in the fontSizes preset format as seen in theme.json. 304 792 * 305 793 * @type string $name Name of the font size preset. … … 308 796 * } 309 797 * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. 310 * @param string $expected_output Expected output.311 */ 312 public function test_wp_get_typography_font_size_value ( $font_size_preset, $should_use_fluid_typography, $expected_output ) {313 $actual = wp_get_typography_font_size_value( $font_size _preset, $should_use_fluid_typography );798 * @param string $expected_output Expected output of wp_get_typography_font_size_value(). 799 */ 800 public function test_wp_get_typography_font_size_value_should_use_fluid_typography_deprecated( $font_size, $should_use_fluid_typography, $expected_output ) { 801 $actual = wp_get_typography_font_size_value( $font_size, $should_use_fluid_typography ); 314 802 315 803 $this->assertSame( $expected_output, $actual ); … … 317 805 318 806 /** 319 * Data provider .807 * Data provider for test_wp_get_typography_font_size_value_should_use_fluid_typography_deprecated. 320 808 * 321 809 * @return array 322 810 */ 323 public function data_generate_font_size_preset_ fixtures() {811 public function data_generate_font_size_preset_should_use_fluid_typography_deprecated_fixtures() { 324 812 return array( 325 813 'returns value when fluid typography is deactivated' => array( 326 'font_size _preset'=> array(814 'font_size' => array( 327 815 'size' => '28px', 328 816 ), … … 330 818 'expected_output' => '28px', 331 819 ), 332 333 'returns value where font size is 0' => array( 334 'font_size_preset' => array( 335 'size' => 0, 336 ), 337 'should_use_fluid_typography' => true, 338 'expected_output' => 0, 339 ), 340 341 "returns value where font size is '0'" => array( 342 'font_size_preset' => array( 343 'size' => '0', 344 ), 345 'should_use_fluid_typography' => true, 346 'expected_output' => '0', 347 ), 348 349 'returns value where `size` is `null`' => array( 350 'font_size_preset' => array( 351 'size' => null, 352 ), 353 'should_use_fluid_typography' => false, 354 'expected_output' => null, 355 ), 356 357 'returns value when fluid is `false`' => array( 358 'font_size_preset' => array( 359 'size' => '28px', 360 'fluid' => false, 361 ), 362 'should_use_fluid_typography' => true, 363 'expected_output' => '28px', 364 ), 365 366 'returns already clamped value' => array( 367 'font_size_preset' => array( 368 'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)', 369 'fluid' => false, 370 ), 371 'should_use_fluid_typography' => true, 372 'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)', 373 ), 374 375 'returns value with unsupported unit' => array( 376 'font_size_preset' => array( 377 'size' => '1000%', 378 'fluid' => false, 379 ), 380 'should_use_fluid_typography' => true, 381 'expected_output' => '1000%', 382 ), 383 384 'returns clamp value with rem min and max units' => array( 385 'font_size_preset' => array( 386 'size' => '1.75rem', 387 ), 388 'should_use_fluid_typography' => true, 389 'expected_output' => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)', 390 ), 391 392 'returns clamp value with em min and max units' => array( 820 'returns clamp value when fluid typography is activated' => array( 393 821 'font_size' => array( 394 'size' => '1.75em', 395 ), 396 'should_use_fluid_typography' => true, 397 'expected_output' => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)', 398 ), 399 400 'returns clamp value for floats' => array( 401 'font_size' => array( 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)', 406 ), 407 408 'coerces integer to `px` and returns clamp value' => array( 409 'font_size_preset' => array( 410 'size' => 33, 411 ), 412 'should_use_fluid_typography' => true, 413 'expected_output' => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)', 414 ), 415 416 'coerces float to `px` and returns clamp value' => array( 417 'font_size_preset' => array( 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)', 422 ), 423 424 'returns clamp value when `fluid` is empty array' => array( 425 'font_size_preset' => array( 426 'size' => '28px', 427 'fluid' => array(), 822 'size' => '28px', 428 823 ), 429 824 'should_use_fluid_typography' => true, 430 825 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', 431 826 ), 432 433 'returns clamp value when `fluid` is `null`' => array( 434 'font_size_preset' => array( 435 'size' => '28px', 436 'fluid' => null, 437 ), 438 'should_use_fluid_typography' => true, 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)', 464 ), 465 466 'returns clamp value if min font size is greater than max' => array( 467 'font_size_preset' => array( 468 'size' => '3rem', 469 'fluid' => array( 470 'min' => '5rem', 471 'max' => '32px', 472 ), 473 ), 474 'should_use_fluid_typography' => true, 475 'expected_output' => 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)', 476 ), 477 478 'returns value with invalid min/max fluid units' => array( 479 'font_size_preset' => array( 480 'size' => '10em', 481 'fluid' => array( 482 'min' => '20vw', 483 'max' => '50%', 484 ), 485 ), 486 'should_use_fluid_typography' => true, 487 'expected_output' => '10em', 488 ), 489 490 'returns value when size is < lower bounds and no fluid min/max set' => array( 491 'font_size_preset' => array( 492 'size' => '3px', 493 ), 494 'should_use_fluid_typography' => true, 495 'expected_output' => '3px', 496 ), 497 498 'returns value when size is equal to lower bounds and no fluid min/max set' => array( 499 'font_size' => array( 500 'size' => '14px', 501 ), 502 'should_use_fluid_typography' => true, 503 'expected_output' => '14px', 504 ), 505 506 'returns clamp value with different min max units' => array( 507 'font_size_preset' => array( 508 'size' => '28px', 509 'fluid' => array( 510 'min' => '20px', 511 'max' => '50rem', 512 ), 513 ), 514 'should_use_fluid_typography' => true, 515 'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)', 516 ), 517 518 'returns clamp value where no fluid max size is set' => array( 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( 531 'size' => '28px', 532 'fluid' => array( 533 'max' => '80px', 534 ), 535 ), 536 'should_use_fluid_typography' => true, 537 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)', 538 ), 539 540 'should not apply lower bound test when fluid values are set' => array( 541 'font_size_preset' => array( 542 'size' => '1.5rem', 543 'fluid' => array( 544 'min' => '0.5rem', 545 'max' => '5rem', 546 ), 547 ), 548 'should_use_fluid_typography' => true, 549 'expected_output' => 'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)', 550 ), 551 552 'should not apply lower bound test when only fluid min is set' => array( 553 'font_size' => array( 554 'size' => '20px', 555 'fluid' => array( 556 'min' => '12px', 557 ), 558 ), 559 'should_use_fluid_typography' => true, 560 'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)', 561 ), 562 563 'should not apply lower bound test when only fluid max is set' => array( 564 'font_size' => array( 565 'size' => '0.875rem', 566 'fluid' => array( 567 'max' => '20rem', 568 ), 569 ), 570 'should_use_fluid_typography' => true, 571 'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)', 572 ), 573 574 'returns clamp value when min and max font sizes are equal' => array( 575 'font_size_preset' => array( 576 'size' => '4rem', 577 'fluid' => array( 578 'min' => '30px', 579 'max' => '30px', 580 ), 581 ), 582 'should_use_fluid_typography' => true, 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)', 827 ); 828 } 829 830 /** 831 * Tests that theme json settings passed to wp_get_typography_font_size_value 832 * override global theme settings. 833 * 834 * @ticket 61118 835 * 836 * @covers ::wp_get_typography_font_size_value 837 * 838 * @dataProvider data_generate_should_override_theme_settings_fixtures 839 * 840 * @param array $font_size { 841 * Required. A font size as represented in the fontSizes preset format as seen in theme.json. 842 * 843 * @type string $name Name of the font size preset. 844 * @type string $slug Kebab-case unique identifier for the font size preset. 845 * @type string $size CSS font-size value, including units where applicable. 846 * } 847 * @param bool $settings Theme JSON settings array that overrides any global theme settings. 848 * @param string $expected_output Expected output of wp_get_typography_font_size_value(). 849 */ 850 public function test_should_override_theme_settings( $font_size, $settings, $expected_output ) { 851 switch_theme( 'block-theme-child-with-fluid-typography' ); 852 $actual = wp_get_typography_font_size_value( $font_size, $settings ); 853 854 $this->assertSame( $expected_output, $actual ); 855 } 856 857 /** 858 * Data provider for test_wp_get_typography_font_size_value_should_use_fluid_typography_deprecated. 859 * 860 * @return array 861 */ 862 public function data_generate_should_override_theme_settings_fixtures() { 863 return array( 864 'returns clamp value when theme activates fluid typography' => array( 865 'font_size' => array( 866 'size' => '28px', 867 ), 868 'settings' => null, 869 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', 870 ), 871 'returns value when settings argument deactivates fluid typography' => array( 872 'font_size' => array( 873 'size' => '28px', 874 ), 875 'settings' => array( 876 'typography' => array( 877 'fluid' => false, 878 ), 879 ), 880 'expected_output' => '28px', 881 ), 882 883 'returns clamp value when settings argument sets a fluid.minViewportWidth value' => array( 884 'font_size' => array( 885 'size' => '28px', 886 ), 887 'settings' => array( 888 'typography' => array( 889 'fluid' => array( 890 'minViewportWidth' => '500px', 891 ), 892 ), 893 ), 894 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 5px) * 0.918), 28px)', 895 ), 896 897 'returns clamp value when settings argument sets a layout.wideSize value' => array( 898 'font_size' => array( 899 'size' => '28px', 900 ), 901 'settings' => array( 902 'layout' => array( 903 'wideSize' => '500px', 904 ), 905 ), 906 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)', 907 ), 908 909 'returns clamp value with maxViewportWidth preferred over fallback layout.wideSize value' => array( 910 'font_size' => array( 911 'size' => '28px', 912 ), 913 'settings' => array( 914 'typography' => array( 915 'fluid' => array( 916 'maxViewportWidth' => '1000px', 917 ), 918 ), 919 'layout' => array( 920 'wideSize' => '500px', 921 ), 922 ), 923 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 1.485), 28px)', 611 924 ), 612 925 ); -
trunk/tests/phpunit/tests/theme/wpThemeJson.php
r58123 r58171 1418 1418 } 1419 1419 1420 /* 1421 * Tests that settings passed to WP_Theme_JSON override merged theme data. 1422 * 1423 * @ticket 61118 1424 */ 1425 public function test_get_stylesheet_generates_fluid_typography_values() { 1426 register_block_type( 1427 'test/clamp-me', 1428 array( 1429 'api_version' => 3, 1430 ) 1431 ); 1432 $theme_json = new WP_Theme_JSON( 1433 array( 1434 'version' => WP_Theme_JSON::LATEST_SCHEMA, 1435 'settings' => array( 1436 'typography' => array( 1437 'fluid' => true, 1438 'fontSizes' => array( 1439 array( 1440 'size' => '16px', 1441 'slug' => 'pickles', 1442 'name' => 'Pickles', 1443 ), 1444 array( 1445 'size' => '22px', 1446 'slug' => 'toast', 1447 'name' => 'Toast', 1448 ), 1449 ), 1450 ), 1451 ), 1452 'styles' => array( 1453 'typography' => array( 1454 'fontSize' => '1em', 1455 ), 1456 'elements' => array( 1457 'h1' => array( 1458 'typography' => array( 1459 'fontSize' => '100px', 1460 ), 1461 ), 1462 ), 1463 'blocks' => array( 1464 'test/clamp-me' => array( 1465 'typography' => array( 1466 'fontSize' => '48px', 1467 ), 1468 ), 1469 ), 1470 ), 1471 ), 1472 'default' 1473 ); 1474 1475 unregister_block_type( 'test/clamp-me' ); 1476 1477 // Results also include root site blocks styles. 1478 $this->assertSame( 1479 'body{--wp--preset--font-size--pickles: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.156), 16px);--wp--preset--font-size--toast: clamp(14.642px, 0.915rem + ((1vw - 3.2px) * 0.575), 22px);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{font-size: clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.156), 1em);}h1{font-size: clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 3.893), 100px);}.wp-block-test-clamp-me{font-size: clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 1.571), 48px);}.has-pickles-font-size{font-size: var(--wp--preset--font-size--pickles) !important;}.has-toast-font-size{font-size: var(--wp--preset--font-size--toast) !important;}', 1480 $theme_json->get_stylesheet() 1481 ); 1482 } 1483 1420 1484 public function test_allow_indirect_properties() { 1421 1485 $actual = WP_Theme_JSON::remove_insecure_properties(
Note: See TracChangeset
for help on using the changeset viewer.