| @@ -124,8 +124,9 @@ | ||
| 124 | 124 | * `prevent_override` value for `color.duotone` to use `color.defaultDuotone`. |
| 125 | 125 | * @since 6.2.0 Added 'shadow' presets. |
| 126 | 126 | * @since 6.6.0 Updated the 'prevent_override' value for font size presets to use 'typography.defaultFontSizes' and spacing size presets to use `spacing.defaultSpacingSizes`. |
| 127 | 127 | * @since 6.6.0 Added `aspectRatios`. |
| 128 | + * @since 7.2.0 Added 'textShadow' presets. | |
| 128 | 129 | * @var array |
| 129 | 130 | */ |
| 130 | 131 | const PRESETS_METADATA = array( |
| 131 | 132 | array( |
| @@ -186,8 +187,17 @@ | ||
| 186 | 187 | 'classes' => array( '.has-$slug-font-family' => 'font-family' ), |
| 187 | 188 | 'properties' => array( 'font-family' ), |
| 188 | 189 | ), |
| 189 | 190 | array( |
| 191 | + 'path' => array( 'typography', 'textShadowPresets' ), | |
| 192 | + 'prevent_override' => array( 'typography', 'defaultTextShadowPresets' ), | |
| 193 | + 'use_default_names' => false, | |
| 194 | + 'value_key' => 'textShadow', | |
| 195 | + 'css_vars' => '--wp--preset--text-shadow--$slug', | |
| 196 | + 'classes' => array( '.has-$slug-text-shadow' => 'text-shadow' ), | |
| 197 | + 'properties' => array( 'text-shadow' ), | |
| 198 | + ), | |
| 199 | + array( | |
| 190 | 200 | 'path' => array( 'spacing', 'spacingSizes' ), |
| 191 | 201 | 'prevent_override' => array( 'spacing', 'defaultSpacingSizes' ), |
| 192 | 202 | 'use_default_names' => true, |
| 193 | 203 | 'value_key' => 'size', |
| @@ -240,9 +250,9 @@ | ||
| 240 | 250 | * removed the `--wp--style--block-gap` property. |
| 241 | 251 | * @since 6.2.0 Added `outline-*`, and `min-height` properties. |
| 242 | 252 | * @since 6.3.0 Added `writing-mode` property. |
| 243 | 253 | * @since 6.6.0 Added `background-[image|position|repeat|size]` properties. |
| 244 | - * @since 7.0.0 Added `dimensions.width`, `dimensions.height`. and | |
| 254 | + * @since 7.0.0 Added `dimensions.width`, `dimensions.height`, and | |
| 245 | 255 | * `typography.textIndent` properties. |
| 246 | 256 | * |
| 247 | 257 | * @var array |
| 248 | 258 | */ |
| @@ -389,10 +399,13 @@ | ||
| 389 | 399 | * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`. |
| 390 | 400 | * @since 6.4.0 Added `layout.allowEditing`. |
| 391 | 401 | * @since 6.4.0 Added `lightbox`. |
| 392 | 402 | * @since 7.0.0 Added type markers to the schema for boolean values. |
| 393 | - * @since 7.0.0 Added `dimensions.width`, `dimensions.height`. and | |
| 403 | + * @since 7.0.0 Added `dimensions.width`, `dimensions.height`, and | |
| 394 | 404 | * `typography.textIndent` properties. |
| 405 | + * @since 7.1.0 Added `viewport` property. | |
| 406 | + * @since 7.2.0 Added `typography.textShadow`, `typography.textShadowPresets`, | |
| 407 | + * and `typography.defaultTextShadowPresets`. | |
| 395 | 408 | * @var array |
| 396 | 409 | */ |
| 397 | 410 | const VALID_SETTINGS = array( |
| 398 | 411 | 'appearanceTools' => null, |
| @@ -401,8 +414,11 @@ | ||
| 401 | 414 | 'backgroundImage' => null, |
| 402 | 415 | 'backgroundSize' => null, |
| 403 | 416 | 'gradient' => null, |
| 404 | 417 | ), |
| 418 | + 'blockVisibility' => array( | |
| 419 | + 'allowEditing' => true, | |
| 420 | + ), | |
| 405 | 421 | 'border' => array( |
| 406 | 422 | 'color' => null, |
| 407 | 423 | 'radius' => null, |
| 408 | 424 | 'style' => null, |
| @@ -465,25 +481,32 @@ | ||
| 465 | 481 | 'presets' => null, |
| 466 | 482 | 'defaultPresets' => null, |
| 467 | 483 | ), |
| 468 | 484 | 'typography' => array( |
| 469 | - 'fluid' => null, | |
| 470 | - 'customFontSize' => null, | |
| 471 | - 'defaultFontSizes' => null, | |
| 472 | - 'dropCap' => null, | |
| 473 | - 'fontFamilies' => null, | |
| 474 | - 'fontSizes' => null, | |
| 475 | - 'fontStyle' => null, | |
| 476 | - 'fontWeight' => null, | |
| 477 | - 'letterSpacing' => null, | |
| 478 | - 'lineHeight' => null, | |
| 479 | - 'textAlign' => null, | |
| 480 | - 'textColumns' => null, | |
| 481 | - 'textDecoration' => null, | |
| 482 | - 'textIndent' => null, | |
| 483 | - 'textTransform' => null, | |
| 484 | - 'writingMode' => null, | |
| 485 | + 'fluid' => null, | |
| 486 | + 'customFontSize' => null, | |
| 487 | + 'defaultFontSizes' => null, | |
| 488 | + 'dropCap' => null, | |
| 489 | + 'fontFamilies' => null, | |
| 490 | + 'fontSizes' => null, | |
| 491 | + 'fontStyle' => null, | |
| 492 | + 'fontWeight' => null, | |
| 493 | + 'letterSpacing' => null, | |
| 494 | + 'lineHeight' => null, | |
| 495 | + 'textAlign' => null, | |
| 496 | + 'textColumns' => null, | |
| 497 | + 'textDecoration' => null, | |
| 498 | + 'textIndent' => null, | |
| 499 | + 'textTransform' => null, | |
| 500 | + 'textShadow' => null, | |
| 501 | + 'defaultTextShadowPresets' => null, | |
| 502 | + 'textShadowPresets' => null, | |
| 503 | + 'writingMode' => null, | |
| 485 | 504 | ), |
| 505 | + 'viewport' => array( | |
| 506 | + 'mobile' => null, | |
| 507 | + 'tablet' => null, | |
| 508 | + ), | |
| 486 | 509 | ); |
| 487 | 510 | |
| 488 | 511 | const FONT_FAMILY_SCHEMA = array( |
| 489 | 512 | array( |
| @@ -522,9 +545,9 @@ | ||
| 522 | 545 | * updated `blockGap` to be allowed at any level. |
| 523 | 546 | * @since 6.2.0 Added `outline`, and `minHeight` properties. |
| 524 | 547 | * @since 6.6.0 Added `background` sub properties to top-level only. |
| 525 | 548 | * @since 6.6.0 Added `dimensions.aspectRatio`. |
| 526 | - * @since 7.0.0 Added `dimensions.width`, `dimensions.height`. and | |
| 549 | + * @since 7.0.0 Added `dimensions.width`, `dimensions.height`, and | |
| 527 | 550 | * `typography.textIndent` properties. |
| 528 | 551 | * @var array |
| 529 | 552 | */ |
| 530 | 553 | const VALID_STYLES = array( |
| @@ -622,21 +645,179 @@ | ||
| 622 | 645 | 'core/navigation-link' => array( ':hover', ':focus', ':focus-visible', ':active' ), |
| 623 | 646 | ); |
| 624 | 647 | |
| 625 | 648 | /** |
| 626 | - * Responsive breakpoint state keys and their corresponding CSS media queries. | |
| 627 | - * These are available for all blocks and wrap their styles in the given media query. | |
| 628 | - * Keep in sync with RESPONSIVE_BREAKPOINTS in packages/global-styles-engine/src/core/render.tsx. | |
| 649 | + * Default viewport breakpoint sizes. | |
| 629 | 650 | * |
| 630 | 651 | * @since 7.1.0 |
| 631 | 652 | * @var array |
| 632 | 653 | */ |
| 633 | - const RESPONSIVE_BREAKPOINTS = array( | |
| 634 | - '@mobile' => '@media (width <= 480px)', | |
| 635 | - '@tablet' => '@media (480px < width <= 782px)', | |
| 654 | + const DEFAULT_VIEWPORT_BREAKPOINTS = array( | |
| 655 | + 'mobile' => '480px', | |
| 656 | + 'tablet' => '782px', | |
| 636 | 657 | ); |
| 637 | 658 | |
| 638 | 659 | /** |
| 660 | + * Returns CSS media queries for responsive viewport style states. | |
| 661 | + * | |
| 662 | + * Breakpoint values are read from `settings.viewport`, sanitized, and | |
| 663 | + * normalized before the media query strings are generated. By default, the | |
| 664 | + * returned keys are the theme.json style-state names (`@mobile`, `@tablet`). | |
| 665 | + * When `$options['include_desktop']` is truthy, `@desktop` is included. | |
| 666 | + * | |
| 667 | + * @since 7.1.0 | |
| 668 | + * | |
| 669 | + * @param mixed $viewport_settings Viewport settings from theme.json. | |
| 670 | + * @param array $options { | |
| 671 | + * Optional. Options for generating media queries. | |
| 672 | + * | |
| 673 | + * @type bool $include_desktop Whether to include the desktop media query. Default false. | |
| 674 | + * } | |
| 675 | + * @return array Responsive media queries. | |
| 676 | + */ | |
| 677 | + public static function get_viewport_media_queries( $viewport_settings = null, $options = array() ) { | |
| 678 | + $breakpoints = static::sanitize_viewport_settings( $viewport_settings ); | |
| 679 | + | |
| 680 | + $responsive_media_queries = array(); | |
| 681 | + | |
| 682 | + if ( isset( $breakpoints['mobile'] ) ) { | |
| 683 | + $responsive_media_queries['@mobile'] = "@media (width <= {$breakpoints['mobile']})"; | |
| 684 | + } | |
| 685 | + | |
| 686 | + if ( isset( $breakpoints['tablet'] ) ) { | |
| 687 | + $responsive_media_queries['@tablet'] = isset( $breakpoints['mobile'] ) | |
| 688 | + ? sprintf( | |
| 689 | + '@media (%s < width <= %s)', | |
| 690 | + $breakpoints['mobile'], | |
| 691 | + $breakpoints['tablet'] | |
| 692 | + ) | |
| 693 | + : "@media (width <= {$breakpoints['tablet']})"; | |
| 694 | + } | |
| 695 | + | |
| 696 | + if ( ! empty( $options['include_desktop'] ) ) { | |
| 697 | + if ( isset( $breakpoints['tablet'] ) ) { | |
| 698 | + $desktop_breakpoint = $breakpoints['tablet']; | |
| 699 | + } else { | |
| 700 | + $desktop_breakpoint = $breakpoints['mobile']; | |
| 701 | + } | |
| 702 | + | |
| 703 | + $responsive_media_queries['@desktop'] = | |
| 704 | + "@media (width > {$desktop_breakpoint})"; | |
| 705 | + } | |
| 706 | + | |
| 707 | + return $responsive_media_queries; | |
| 708 | + } | |
| 709 | + | |
| 710 | + /** | |
| 711 | + * Checks whether a viewport breakpoint value is a safe CSS length. | |
| 712 | + * | |
| 713 | + * Viewport breakpoints are limited to numeric `px`, `em`, and `rem` lengths. | |
| 714 | + * CSS functions, percentages, and other units are rejected because breakpoint | |
| 715 | + * values are interpolated into generated media queries. | |
| 716 | + * | |
| 717 | + * @since 7.1.0 | |
| 718 | + * | |
| 719 | + * @param mixed $value Value to check. | |
| 720 | + * @return bool Whether the value is valid. | |
| 721 | + */ | |
| 722 | + private static function is_valid_viewport_breakpoint_size( $value ) { | |
| 723 | + if ( ! is_string( $value ) ) { | |
| 724 | + return false; | |
| 725 | + } | |
| 726 | + | |
| 727 | + $value = trim( $value ); | |
| 728 | + if ( '' === $value ) { | |
| 729 | + return false; | |
| 730 | + } | |
| 731 | + | |
| 732 | + return 1 === preg_match( '/^(?:\d+|\d*\.\d+)(?:px|em|rem)$/', $value ); | |
| 733 | + } | |
| 734 | + | |
| 735 | + /** | |
| 736 | + * Converts a valid viewport breakpoint size to pixels for ordering checks. | |
| 737 | + * | |
| 738 | + * Generated media queries keep the original units. This method only | |
| 739 | + * normalizes values so `mobile` and `tablet` can be compared safely. `em` | |
| 740 | + * and `rem` lengths use a 16px base for comparison. | |
| 741 | + * | |
| 742 | + * @since 7.1.0 | |
| 743 | + * | |
| 744 | + * @param mixed $value Viewport breakpoint size. | |
| 745 | + * @return float|null Viewport breakpoint size in pixels, or null when invalid. | |
| 746 | + */ | |
| 747 | + private static function get_viewport_breakpoint_value_in_pixels( $value ) { | |
| 748 | + if ( ! static::is_valid_viewport_breakpoint_size( $value ) ) { | |
| 749 | + return null; | |
| 750 | + } | |
| 751 | + | |
| 752 | + $value = trim( $value ); | |
| 753 | + $unit = substr( $value, -3 ); | |
| 754 | + if ( 'rem' === $unit ) { | |
| 755 | + $number = (float) substr( $value, 0, -3 ); | |
| 756 | + } else { | |
| 757 | + $unit = substr( $value, -2 ); | |
| 758 | + $number = (float) substr( $value, 0, -2 ); | |
| 759 | + } | |
| 760 | + | |
| 761 | + /* | |
| 762 | + * Use the most common browser default font size as the base for em/rem | |
| 763 | + * media query conversions. This pixel value is only used to compare | |
| 764 | + * breakpoint order; generated media queries keep the original units. | |
| 765 | + */ | |
| 766 | + return 'px' === $unit ? $number : $number * 16; | |
| 767 | + } | |
| 768 | + | |
| 769 | + /** | |
| 770 | + * Sanitizes and normalizes viewport breakpoint settings. | |
| 771 | + * | |
| 772 | + * Keeps only supported breakpoint keys, trims valid CSS lengths, and returns | |
| 773 | + * the default breakpoints when no valid custom breakpoint is provided. When | |
| 774 | + * only one breakpoint is valid, it remains keyed by its configured state and | |
| 775 | + * uses a single max-width media query. When `tablet` is not larger than | |
| 776 | + * `mobile`, it is removed. | |
| 777 | + * | |
| 778 | + * @since 7.1.0 | |
| 779 | + * | |
| 780 | + * @param mixed $viewport_settings Viewport settings from theme.json. | |
| 781 | + * @return array Sanitized viewport breakpoint settings. | |
| 782 | + */ | |
| 783 | + private static function sanitize_viewport_settings( $viewport_settings ) { | |
| 784 | + if ( ! is_array( $viewport_settings ) ) { | |
| 785 | + return static::DEFAULT_VIEWPORT_BREAKPOINTS; | |
| 786 | + } | |
| 787 | + | |
| 788 | + $breakpoints = array(); | |
| 789 | + foreach ( array_keys( static::DEFAULT_VIEWPORT_BREAKPOINTS ) as $breakpoint ) { | |
| 790 | + $value = $viewport_settings[ $breakpoint ] ?? null; | |
| 791 | + $px = static::get_viewport_breakpoint_value_in_pixels( $value ); | |
| 792 | + if ( null !== $px ) { | |
| 793 | + $breakpoints[ $breakpoint ] = array( | |
| 794 | + 'value' => trim( $value ), | |
| 795 | + 'px' => $px, | |
| 796 | + ); | |
| 797 | + } | |
| 798 | + } | |
| 799 | + | |
| 800 | + if ( empty( $breakpoints ) ) { | |
| 801 | + return static::DEFAULT_VIEWPORT_BREAKPOINTS; | |
| 802 | + } | |
| 803 | + | |
| 804 | + if ( 1 === count( $breakpoints ) ) { | |
| 805 | + $breakpoint = key( $breakpoints ); | |
| 806 | + return array( $breakpoint => $breakpoints[ $breakpoint ]['value'] ); | |
| 807 | + } | |
| 808 | + | |
| 809 | + $sanitized = array( 'mobile' => $breakpoints['mobile']['value'] ); | |
| 810 | + | |
| 811 | + if ( isset( $breakpoints['tablet'] ) && $breakpoints['mobile']['px'] < $breakpoints['tablet']['px'] | |
| 812 | + ) { | |
| 813 | + $sanitized['tablet'] = $breakpoints['tablet']['value']; | |
| 814 | + } | |
| 815 | + | |
| 816 | + return $sanitized; | |
| 817 | + } | |
| 818 | + | |
| 819 | + /** | |
| 639 | 820 | * Custom states for blocks that map to CSS class selectors rather than |
| 640 | 821 | * CSS pseudo-selectors. Values use the '-' prefix (e.g. '-current') to |
| 641 | 822 | * distinguish them from real CSS pseudo-selectors and breakpoint states. |
| 642 | 823 | * |
| @@ -676,8 +857,9 @@ | ||
| 676 | 857 | 'button' => '.wp-element-button, .wp-block-button__link', |
| 677 | 858 | // The block classes are necessary to target older content that won't use the new class names. |
| 678 | 859 | 'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption', |
| 679 | 860 | 'cite' => 'cite', |
| 861 | + 'label' => 'label', | |
| 680 | 862 | 'select' => 'select', |
| 681 | 863 | 'textInput' => 'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=text],[type=tel],[type=url])', |
| 682 | 864 | ); |
| 683 | 865 | |
| @@ -749,13 +931,15 @@ | ||
| 749 | 931 | |
| 750 | 932 | /** |
| 751 | 933 | * Processes pseudo-selectors for any node (block or variation). |
| 752 | 934 | * |
| 753 | - * @param array $node The node data (block or variation). | |
| 754 | - * @param string $base_selector The base selector. | |
| 755 | - * @param array $settings The theme settings. | |
| 756 | - * @param string $block_name The block name. | |
| 757 | - * @param array|null $block_metadata Metadata about the block to get styles for. | |
| 935 | + * @since 7.0.0 | |
| 936 | + * | |
| 937 | + * @param array $node The node data (block or variation). | |
| 938 | + * @param string $base_selector The base selector. | |
| 939 | + * @param array $settings The theme settings. | |
| 940 | + * @param string $block_name The block name. | |
| 941 | + * @param array|null $block_metadata Metadata about the block to get styles for. | |
| 758 | 942 | * @param array|null $style_variation Style variation metadata. |
| 759 | 943 | * @return array Array of pseudo-selector declarations. |
| 760 | 944 | */ |
| 761 | 945 | private function process_pseudo_selectors( $node, $base_selector, $settings, $block_name, $block_metadata = null, $style_variation = null ) { |
| @@ -1063,8 +1247,10 @@ | ||
| 1063 | 1247 | * |
| 1064 | 1248 | * @since 5.8.0 |
| 1065 | 1249 | * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters. |
| 1066 | 1250 | * @since 6.6.0 Extended schema definition to allow enhanced block style variations. |
| 1251 | + * @since 7.1.1 Updated schema to allow responsive breakpoint states and pseudo-selectors | |
| 1252 | + * at the top level of `styles` for block style variation partials. | |
| 1067 | 1253 | * |
| 1068 | 1254 | * @param array $input Structure to sanitize. |
| 1069 | 1255 | * @param array $valid_block_names List of valid block names. |
| 1070 | 1256 | * @param array $valid_element_names List of valid element names. |
| @@ -1099,10 +1285,11 @@ | ||
| 1099 | 1285 | } |
| 1100 | 1286 | } |
| 1101 | 1287 | |
| 1102 | 1288 | // Build the schema based on valid block & element names. |
| 1103 | - $schema = array(); | |
| 1104 | - $schema_styles_elements = array(); | |
| 1289 | + $schema = array(); | |
| 1290 | + $schema_styles_elements = array(); | |
| 1291 | + $responsive_media_queries = static::get_viewport_media_queries( $input['settings']['viewport'] ?? null ); | |
| 1105 | 1292 | |
| 1106 | 1293 | /* |
| 1107 | 1294 | * Set allowed element pseudo selectors and responsive breakpoint states. |
| 1108 | 1295 | * Target data structure in schema: |
| @@ -1108,9 +1295,9 @@ | ||
| 1108 | 1295 | * Target data structure in schema: |
| 1109 | 1296 | * e.g. |
| 1110 | 1297 | * - top level elements: `$schema['styles']['elements']['link'][':hover']`. |
| 1111 | 1298 | * - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`. |
| 1112 | - * - block responsive elements: `$schema['styles']['blocks']['core/button']['tablet']['elements']['link'][':hover']`. | |
| 1299 | + * - block responsive elements: `$schema['styles']['blocks']['core/button']['@tablet']['elements']['link'][':hover']`. | |
| 1113 | 1300 | */ |
| 1114 | 1301 | foreach ( $valid_element_names as $element ) { |
| 1115 | 1302 | $schema_styles_elements[ $element ] = $styles_non_top_level; |
| 1116 | 1303 | |
| @@ -1120,9 +1307,9 @@ | ||
| 1120 | 1307 | } |
| 1121 | 1308 | } |
| 1122 | 1309 | |
| 1123 | 1310 | // Add responsive breakpoint states for elements. |
| 1124 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint_state ) { | |
| 1311 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint_state ) { | |
| 1125 | 1312 | $schema_styles_elements[ $element ][ $breakpoint_state ] = $styles_non_top_level; |
| 1126 | 1313 | } |
| 1127 | 1314 | } |
| 1128 | 1315 | |
| @@ -1127,9 +1314,17 @@ | ||
| 1127 | 1314 | } |
| 1128 | 1315 | |
| 1129 | 1316 | $schema_styles_blocks = array(); |
| 1130 | 1317 | $schema_settings_blocks = array(); |
| 1318 | + $breakpoint_states = array_keys( $responsive_media_queries ); | |
| 1131 | 1319 | |
| 1320 | + $common_block_settings = static::VALID_SETTINGS; | |
| 1321 | + // `viewport` and `blockVisibility` are global-only settings and cannot be set per block for now. | |
| 1322 | + unset( | |
| 1323 | + $common_block_settings['viewport'], | |
| 1324 | + $common_block_settings['blockVisibility'] | |
| 1325 | + ); | |
| 1326 | + | |
| 1132 | 1327 | /* |
| 1133 | 1328 | * Generate a schema for blocks. |
| 1134 | 1329 | * - Block styles can contain `elements`, `variations`, and responsive breakpoint state definitions. |
| 1135 | 1330 | * - Variations definitions cannot be nested. |
| @@ -1137,20 +1332,29 @@ | ||
| 1137 | 1332 | * - Variation inner `blocks` styles can contain `elements` and responsive breakpoint states. |
| 1138 | 1333 | * |
| 1139 | 1334 | * As each variation needs both a `blocks` schema and responsive `blocks` schemas |
| 1140 | 1335 | * for further nested inner `blocks`, the overall schema is generated in multiple passes. |
| 1336 | + * | |
| 1337 | + * All blocks start with the same style schema. Build that common schema | |
| 1338 | + * once, then add block-specific pseudo and custom states below. | |
| 1141 | 1339 | */ |
| 1340 | + $responsive_block_schema = $styles_non_top_level; | |
| 1341 | + $responsive_block_schema['elements'] = $schema_styles_elements; | |
| 1342 | + | |
| 1343 | + $common_block_schema = $styles_non_top_level; | |
| 1344 | + $common_block_schema['elements'] = $schema_styles_elements; | |
| 1345 | + | |
| 1346 | + foreach ( $breakpoint_states as $breakpoint_state ) { | |
| 1347 | + $common_block_schema[ $breakpoint_state ] = $responsive_block_schema; | |
| 1348 | + } | |
| 1349 | + | |
| 1142 | 1350 | foreach ( $valid_block_names as $block ) { |
| 1143 | - $schema_settings_blocks[ $block ] = static::VALID_SETTINGS; | |
| 1144 | - $schema_styles_blocks[ $block ] = $styles_non_top_level; | |
| 1145 | - $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements; | |
| 1351 | + $schema_settings_blocks[ $block ] = $common_block_settings; | |
| 1352 | + $schema_styles_blocks[ $block ] = $common_block_schema; | |
| 1146 | 1353 | |
| 1147 | - // Add responsive breakpoint states for all blocks. | |
| 1148 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint_state ) { | |
| 1149 | - $schema_styles_blocks[ $block ][ $breakpoint_state ] = $styles_non_top_level; | |
| 1150 | - $schema_styles_blocks[ $block ][ $breakpoint_state ]['elements'] = $schema_styles_elements; | |
| 1151 | - | |
| 1152 | - if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] ) ) { | |
| 1354 | + // Add responsive pseudo-selectors only to blocks that support them. | |
| 1355 | + if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] ) ) { | |
| 1356 | + foreach ( $breakpoint_states as $breakpoint_state ) { | |
| 1153 | 1357 | foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] as $pseudo_selector ) { |
| 1154 | 1358 | $schema_styles_blocks[ $block ][ $breakpoint_state ][ $pseudo_selector ] = $styles_non_top_level; |
| 1155 | 1359 | } |
| 1156 | 1360 | } |
| @@ -1202,12 +1406,11 @@ | ||
| 1202 | 1406 | foreach ( $style_variation_names as $variation_name ) { |
| 1203 | 1407 | $variation_schema = $block_style_variation_styles; |
| 1204 | 1408 | |
| 1205 | 1409 | // Add responsive breakpoint states to block style variations. |
| 1206 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint_state ) { | |
| 1410 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint_state ) { | |
| 1207 | 1411 | $variation_schema[ $breakpoint_state ] = $styles_non_top_level; |
| 1208 | 1412 | $variation_schema[ $breakpoint_state ]['elements'] = $schema_styles_elements; |
| 1209 | - $variation_schema[ $breakpoint_state ]['blocks'] = $schema_styles_blocks; | |
| 1210 | 1413 | |
| 1211 | 1414 | if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] ) ) { |
| 1212 | 1415 | foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] as $pseudo_selector ) { |
| 1213 | 1416 | $variation_schema[ $breakpoint_state ][ $pseudo_selector ] = $styles_non_top_level; |
| @@ -1235,8 +1438,49 @@ | ||
| 1235 | 1438 | $schema['settings'] = static::VALID_SETTINGS; |
| 1236 | 1439 | $schema['settings']['blocks'] = $schema_settings_blocks; |
| 1237 | 1440 | $schema['settings']['typography']['fontFamilies'] = static::schema_in_root_and_per_origin( static::FONT_FAMILY_SCHEMA ); |
| 1238 | 1441 | |
| 1442 | + /* | |
| 1443 | + * Add block style variation states to the top-level styles schema. | |
| 1444 | + * | |
| 1445 | + * Block style variations defined in a standalone JSON partial within a | |
| 1446 | + * theme's `styles` directory declare their styles at the root of the | |
| 1447 | + * `styles` object, so they are sanitized against the top-level schema. | |
| 1448 | + * It needs to allow the same states that are allowed for variations | |
| 1449 | + * declared inline in theme.json, otherwise those states are silently | |
| 1450 | + * removed as unknown keys. | |
| 1451 | + * | |
| 1452 | + * The `blockTypes` property is only present on block style variation | |
| 1453 | + * partials, so it both identifies the config as a variation and | |
| 1454 | + * determines which pseudo-selectors are valid for it. Regular | |
| 1455 | + * theme.json files are unaffected. | |
| 1456 | + */ | |
| 1457 | + if ( ! empty( $input['blockTypes'] ) && is_array( $input['blockTypes'] ) ) { | |
| 1458 | + $variation_pseudo_selectors = array(); | |
| 1459 | + foreach ( $input['blockTypes'] as $variation_block_type ) { | |
| 1460 | + if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $variation_block_type ] ) ) { | |
| 1461 | + $variation_pseudo_selectors = array_merge( | |
| 1462 | + $variation_pseudo_selectors, | |
| 1463 | + static::VALID_BLOCK_PSEUDO_SELECTORS[ $variation_block_type ] | |
| 1464 | + ); | |
| 1465 | + } | |
| 1466 | + } | |
| 1467 | + $variation_pseudo_selectors = array_unique( $variation_pseudo_selectors ); | |
| 1468 | + | |
| 1469 | + foreach ( $breakpoint_states as $breakpoint_state ) { | |
| 1470 | + $schema['styles'][ $breakpoint_state ] = $styles_non_top_level; | |
| 1471 | + $schema['styles'][ $breakpoint_state ]['elements'] = $schema_styles_elements; | |
| 1472 | + | |
| 1473 | + foreach ( $variation_pseudo_selectors as $pseudo_selector ) { | |
| 1474 | + $schema['styles'][ $breakpoint_state ][ $pseudo_selector ] = $styles_non_top_level; | |
| 1475 | + } | |
| 1476 | + } | |
| 1477 | + | |
| 1478 | + foreach ( $variation_pseudo_selectors as $pseudo_selector ) { | |
| 1479 | + $schema['styles'][ $pseudo_selector ] = $styles_non_top_level; | |
| 1480 | + } | |
| 1481 | + } | |
| 1482 | + | |
| 1239 | 1483 | // Remove anything that's not present in the schema. |
| 1240 | 1484 | foreach ( array( 'styles', 'settings' ) as $subtree ) { |
| 1241 | 1485 | if ( ! isset( $input[ $subtree ] ) ) { |
| 1242 | 1486 | continue; |
| @@ -1248,8 +1492,12 @@ | ||
| 1248 | 1492 | } |
| 1249 | 1493 | |
| 1250 | 1494 | $result = static::remove_keys_not_in_schema( $input[ $subtree ], $schema[ $subtree ] ); |
| 1251 | 1495 | |
| 1496 | + if ( 'settings' === $subtree && array_key_exists( 'viewport', $input[ $subtree ] ) ) { | |
| 1497 | + $result['viewport'] = static::sanitize_viewport_settings( $input[ $subtree ]['viewport'] ); | |
| 1498 | + } | |
| 1499 | + | |
| 1252 | 1500 | if ( empty( $result ) ) { |
| 1253 | 1501 | unset( $output[ $subtree ] ); |
| 1254 | 1502 | } else { |
| 1255 | 1503 | $output[ $subtree ] = static::resolve_custom_css_format( $result ); |
| @@ -1277,14 +1525,38 @@ | ||
| 1277 | 1525 | protected static function append_to_selector( $selector, $to_append ) { |
| 1278 | 1526 | if ( ! str_contains( $selector, ',' ) ) { |
| 1279 | 1527 | return $selector . $to_append; |
| 1280 | 1528 | } |
| 1529 | + | |
| 1530 | + /** | |
| 1531 | + * Check for an opportunity to skip the more-costly selector splitting. | |
| 1532 | + * This should be possible if there are no comments, strings, functions, | |
| 1533 | + * URLs, escapes, or comment declaration openers (CDOs). | |
| 1534 | + * | |
| 1535 | + * Note that this means the fast-path will not apply for selectors like | |
| 1536 | + * the following incomplete list: | |
| 1537 | + * | |
| 1538 | + * - `[class ~= "wide"]` | |
| 1539 | + * - `.wp-block:is(.is-style-a, .is-style-b)` | |
| 1540 | + * - `:nth-child(1)` | |
| 1541 | + * | |
| 1542 | + * These syntax forms all present opportunities where a comma may not | |
| 1543 | + * separate selectors. If none of the start characters are present, | |
| 1544 | + * there should be no way for a comma to mean anything other than a | |
| 1545 | + * comma token. The exception are syntax errors, which are not handled here. | |
| 1546 | + * | |
| 1547 | + * @link https://www.w3.org/TR/css-syntax-3/#parse-comma-separated-list-of-component-values | |
| 1548 | + */ | |
| 1549 | + if ( strlen( $selector ) === strcspn( $selector, '/\'"(<\\' ) ) { | |
| 1550 | + return str_replace( ',', $to_append . ',', $selector ) . $to_append; | |
| 1551 | + } | |
| 1552 | + | |
| 1281 | 1553 | $new_selectors = array(); |
| 1282 | 1554 | $selectors = static::split_selector_list( $selector ); |
| 1283 | 1555 | foreach ( $selectors as $sel ) { |
| 1284 | 1556 | $new_selectors[] = $sel . $to_append; |
| 1285 | 1557 | } |
| 1286 | - return implode( ',', $new_selectors ); | |
| 1558 | + return implode( ', ', $new_selectors ); | |
| 1287 | 1559 | } |
| 1288 | 1560 | |
| 1289 | 1561 | /** |
| 1290 | 1562 | * Prepends a sub-selector to an existing one. |
| @@ -1302,49 +1574,194 @@ | ||
| 1302 | 1574 | protected static function prepend_to_selector( $selector, $to_prepend ) { |
| 1303 | 1575 | if ( ! str_contains( $selector, ',' ) ) { |
| 1304 | 1576 | return $to_prepend . $selector; |
| 1305 | 1577 | } |
| 1578 | + | |
| 1579 | + /** | |
| 1580 | + * Check for an opportunity to skip the more-costly selector splitting. | |
| 1581 | + * This should be possible if there are no comments, strings, functions, | |
| 1582 | + * URLs, escapes, or comment declaration openers (CDOs). | |
| 1583 | + * | |
| 1584 | + * Note that this means the fast-path will not apply for selectors like | |
| 1585 | + * the following incomplete list: | |
| 1586 | + * | |
| 1587 | + * - `[class ~= "wide"]` | |
| 1588 | + * - `.wp-block:is(.is-style-a, .is-style-b)` | |
| 1589 | + * - `:nth-child(1)` | |
| 1590 | + * | |
| 1591 | + * These syntax forms all present opportunities where a comma may not | |
| 1592 | + * separate selectors. If none of the start characters are present, | |
| 1593 | + * there should be no way for a comma to mean anything other than a | |
| 1594 | + * comma token. The exception are syntax errors, which are not handled here. | |
| 1595 | + * | |
| 1596 | + * @link https://www.w3.org/TR/css-syntax-3/#parse-comma-separated-list-of-component-values | |
| 1597 | + */ | |
| 1598 | + if ( strlen( $selector ) === strcspn( $selector, '/\'"(<\\' ) ) { | |
| 1599 | + return $to_prepend . str_replace( ',', ',' . $to_prepend, $selector ); | |
| 1600 | + } | |
| 1601 | + | |
| 1306 | 1602 | $new_selectors = array(); |
| 1307 | 1603 | $selectors = static::split_selector_list( $selector ); |
| 1308 | 1604 | foreach ( $selectors as $sel ) { |
| 1309 | 1605 | $new_selectors[] = $to_prepend . $sel; |
| 1310 | 1606 | } |
| 1311 | - return implode( ',', $new_selectors ); | |
| 1607 | + | |
| 1608 | + return implode( ', ', $new_selectors ); | |
| 1312 | 1609 | } |
| 1313 | 1610 | |
| 1314 | 1611 | /** |
| 1315 | - * Splits a selector list by top-level commas. | |
| 1612 | + * Splits a selector list into separate selectors. | |
| 1316 | 1613 | * |
| 1614 | + * While selectors are joined by commas, not all commas separate top-level selectors. | |
| 1615 | + * This method only separates top-level selectors, so some commas may appear inside | |
| 1616 | + * strings, nested selectors, and comments. Leading and trailing CSS whitespace is | |
| 1617 | + * trimmed from the returned list items. | |
| 1618 | + * | |
| 1619 | + * Non-selector content, such as comments, are retained in the list in the same item | |
| 1620 | + * as the selector content they follow. | |
| 1621 | + * | |
| 1622 | + * Example: | |
| 1623 | + * | |
| 1624 | + * array( '.wp-block' ) === self::split_selector_list( '.wp-block' ); | |
| 1625 | + * array( '.one', '.two' ) === self::split_selector_list( '.one, .two' ); | |
| 1626 | + * | |
| 1627 | + * // Nested selector lists are retained within their containing selector. | |
| 1628 | + * array( ':is(.a, .b)', 'c' ) === self::split_selector_list( ':is(.a, .b), .c' ); | |
| 1629 | + * | |
| 1630 | + * // Commas within strings do not separate selectors. | |
| 1631 | + * $selectors = self::split_selector_list( '[data-label="Save, continue"],.fallback' ); | |
| 1632 | + * $selectors === array( '[data-label="Save, continue"]', '.fallback' ) | |
| 1633 | + * | |
| 1634 | + * array( 'lang(zh, "*-hant")', '.foo' ) === self::split_selector_list( 'lang(zh, "*-hant"), .foo' ); | |
| 1635 | + * | |
| 1636 | + * // Identifiers may contain escaped commas. | |
| 1637 | + * array( '.foo\,bar', '.baz' ) === self::split_selector_list( '.foo\,bar,.baz' ); | |
| 1638 | + * | |
| 1639 | + * // Comments stay with the selector they follow. | |
| 1640 | + * array( '.a /* a, the first *\/', '.b' ) === self::split_selector_list( '.a /* a, the first *\/,.b' ); | |
| 1641 | + * | |
| 1642 | + * @link https://www.w3.org/TR/selectors/#parse-selector | |
| 1643 | + * @link https://www.w3.org/TR/css-syntax-3/ | |
| 1644 | + * | |
| 1317 | 1645 | * @param string $selector CSS selector list. |
| 1318 | 1646 | * @return string[] Selectors. |
| 1319 | 1647 | */ |
| 1320 | - protected static function split_selector_list( $selector ) { | |
| 1648 | + protected static function split_selector_list( $selector ): array { | |
| 1321 | 1649 | if ( ! str_contains( $selector, ',' ) ) { |
| 1322 | - return array( $selector ); | |
| 1650 | + // See note on trimming CSS whitespace in main loop. | |
| 1651 | + return array( trim( $selector, " \t\n" ) ); | |
| 1323 | 1652 | } |
| 1324 | 1653 | |
| 1325 | 1654 | $selectors = array(); |
| 1326 | - $current_selector = ''; | |
| 1655 | + $selector_length = strlen( $selector ); | |
| 1327 | 1656 | $parentheses_depth = 0; |
| 1328 | - $selector_length = strlen( $selector ); | |
| 1657 | + $at = 0; | |
| 1658 | + $was_at = 0; | |
| 1329 | 1659 | |
| 1330 | - for ( $i = 0; $i < $selector_length; $i++ ) { | |
| 1331 | - $char = $selector[ $i ]; | |
| 1660 | + while ( $at < $selector_length ) { | |
| 1661 | + $next_at = $at + strcspn( $selector, '/,\'"()<-\\', $at ); | |
| 1662 | + if ( $next_at >= $selector_length ) { | |
| 1663 | + break; | |
| 1664 | + } | |
| 1332 | 1665 | |
| 1333 | - if ( '(' === $char ) { | |
| 1334 | - ++$parentheses_depth; | |
| 1335 | - } elseif ( ')' === $char && $parentheses_depth > 0 ) { | |
| 1336 | - --$parentheses_depth; | |
| 1337 | - } elseif ( ',' === $char && 0 === $parentheses_depth ) { | |
| 1338 | - $selectors[] = $current_selector; | |
| 1339 | - $current_selector = ''; | |
| 1666 | + $next_cp = $selector[ $next_at ]; | |
| 1667 | + | |
| 1668 | + // Escaped syntax characters do not act as delimiters. | |
| 1669 | + if ( '\\' === $next_cp ) { | |
| 1670 | + $at = min( $next_at + 2, $selector_length ); | |
| 1340 | 1671 | continue; |
| 1341 | 1672 | } |
| 1342 | 1673 | |
| 1343 | - $current_selector .= $char; | |
| 1674 | + /* | |
| 1675 | + * Start of a parenthesized expression, which maintains a stack of parentheses. | |
| 1676 | + * For the sake of this function, no selector list will be split inside parentheses. | |
| 1677 | + * Therefore it’s possible to jump ahead until this list completes. | |
| 1678 | + */ | |
| 1679 | + if ( '(' === $next_cp || ')' === $next_cp ) { | |
| 1680 | + $parentheses_depth += '(' === $next_cp ? 1 : -1; | |
| 1681 | + $at = $next_at + 1; | |
| 1682 | + continue; | |
| 1683 | + } | |
| 1684 | + | |
| 1685 | + // Start of a string, which will be incorporated into the selector in which it’s found. | |
| 1686 | + if ( "'" === $next_cp || '"' === $next_cp ) { | |
| 1687 | + $end_of_string = $next_at + 1; | |
| 1688 | + while ( $end_of_string < $selector_length ) { | |
| 1689 | + $end_of_string += strcspn( $selector, "{$next_cp}\\", $end_of_string ); | |
| 1690 | + if ( $end_of_string >= $selector_length ) { | |
| 1691 | + break; | |
| 1692 | + } | |
| 1693 | + | |
| 1694 | + $end_cp = $selector[ $end_of_string ]; | |
| 1695 | + | |
| 1696 | + // Skip escaped characters. | |
| 1697 | + if ( '\\' === $end_cp ) { | |
| 1698 | + $end_of_string = $end_of_string + 2; | |
| 1699 | + continue; | |
| 1700 | + } | |
| 1701 | + | |
| 1702 | + if ( $next_cp === $end_cp ) { | |
| 1703 | + ++$end_of_string; | |
| 1704 | + break; | |
| 1705 | + } | |
| 1706 | + | |
| 1707 | + ++$end_of_string; | |
| 1708 | + } | |
| 1709 | + | |
| 1710 | + $at = $end_of_string; | |
| 1711 | + continue; | |
| 1712 | + } | |
| 1713 | + | |
| 1714 | + // Start of a comment, which will be incorporated into the selector in which it’s found. | |
| 1715 | + if ( '/' === $next_cp && ( $next_at + 1 ) < $selector_length && '*' === $selector[ $next_at + 1 ] ) { | |
| 1716 | + $comment_end_at = strpos( $selector, '*/', $next_at + 1 ); | |
| 1717 | + $is_terminated = false !== $comment_end_at; | |
| 1718 | + $after_comment = $is_terminated ? $comment_end_at + 2 : strlen( $selector ); | |
| 1719 | + $at = $after_comment; | |
| 1720 | + continue; | |
| 1721 | + } | |
| 1722 | + | |
| 1723 | + // Start of a CDO or CDC, which will be incorporated into the selector in which it’s found. | |
| 1724 | + if ( | |
| 1725 | + ( '<' === $next_cp && 0 === substr_compare( $selector, '<!--', $next_at, 4 ) ) || | |
| 1726 | + ( '-' === $next_cp && 0 === substr_compare( $selector, '-->', $next_at, 3 ) ) | |
| 1727 | + ) { | |
| 1728 | + $at = $next_at + ( '<' === $next_cp ? 4 : 3 ); | |
| 1729 | + continue; | |
| 1730 | + } | |
| 1731 | + | |
| 1732 | + // Everything else is either a comma token or part of a selector. | |
| 1733 | + if ( ',' === $next_cp && 0 === $parentheses_depth ) { | |
| 1734 | + /** | |
| 1735 | + * Trim each selector so that downstream code doesn’t see whitespace | |
| 1736 | + * as the first character in a selector and get confused. | |
| 1737 | + * | |
| 1738 | + * There is inconsistency in this because comments and other syntax | |
| 1739 | + * are included which are also not part of the selector itself, but | |
| 1740 | + * a tradeoff is made between removing common syntax which carries | |
| 1741 | + * no meaning and rarer syntax which leaves auxiliary information. | |
| 1742 | + * | |
| 1743 | + * > A newline, U+0009 CHARACTER TABULATION, or U+0020 SPACE. | |
| 1744 | + * > Note that U+000D CARRIAGE RETURN and U+000C FORM FEED are | |
| 1745 | + * > not included in this definition, as they are converted | |
| 1746 | + * > to U+000A LINE FEED during preprocessing. | |
| 1747 | + * | |
| 1748 | + * @link https://www.w3.org/TR/css-syntax/#whitespace | |
| 1749 | + * @link https://www.w3.org/TR/css-syntax/#newline | |
| 1750 | + */ | |
| 1751 | + $selectors[] = trim( substr( $selector, $was_at, $next_at - $was_at ), " \t\n" ); | |
| 1752 | + $at = $next_at + 1; | |
| 1753 | + $was_at = $at; | |
| 1754 | + continue; | |
| 1755 | + } | |
| 1756 | + | |
| 1757 | + $at = $next_at + 1; | |
| 1344 | 1758 | } |
| 1345 | 1759 | |
| 1346 | - $selectors[] = $current_selector; | |
| 1760 | + if ( $was_at < $selector_length ) { | |
| 1761 | + // See note on trimming CSS whitespace in main loop. | |
| 1762 | + $selectors[] = trim( substr( $selector, $was_at ), " \t\n" ); | |
| 1763 | + } | |
| 1347 | 1764 | |
| 1348 | 1765 | return $selectors; |
| 1349 | 1766 | } |
| 1350 | 1767 | |
| @@ -1766,9 +2183,9 @@ | ||
| 1766 | 2183 | /** |
| 1767 | 2184 | * Returns the global styles custom CSS for a single block. |
| 1768 | 2185 | * This function is deprecated; please do not sync to core. |
| 1769 | 2186 | * |
| 1770 | - * @param array $css The block css node. | |
| 2187 | + * @param array $css The block css node. | |
| 1771 | 2188 | * @param string $selector The block selector. |
| 1772 | 2189 | * |
| 1773 | 2190 | * @return string The global styles custom CSS for the block. |
| 1774 | 2191 | */ |
| @@ -1893,9 +2310,10 @@ | ||
| 1893 | 2310 | |
| 1894 | 2311 | // Gap styles will only be output if the theme has block gap support, or supports a fallback gap. |
| 1895 | 2312 | // Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value. |
| 1896 | 2313 | if ( $has_block_gap_support || $has_fallback_gap_support ) { |
| 1897 | - $block_gap_value = null; | |
| 2314 | + $block_gap_value = null; | |
| 2315 | + $block_gap_row_value = null; | |
| 1898 | 2316 | // Use a fallback gap value if block gap support is not available. |
| 1899 | 2317 | if ( ! $has_block_gap_support ) { |
| 1900 | 2318 | $block_gap_value = static::ROOT_BLOCK_SELECTOR === $selector ? '0.5em' : null; |
| 1901 | 2319 | if ( ! empty( $block_type ) ) { |
| @@ -1903,18 +2321,29 @@ | ||
| 1903 | 2321 | } |
| 1904 | 2322 | } else { |
| 1905 | 2323 | $block_gap_value = static::get_property_value( $node, array( 'spacing', 'blockGap' ) ); |
| 1906 | 2324 | } |
| 2325 | + $block_gap_row_value = $block_gap_value; | |
| 1907 | 2326 | |
| 1908 | 2327 | // Support split row / column values and concatenate to a shorthand value. |
| 1909 | 2328 | if ( is_array( $block_gap_value ) ) { |
| 1910 | - if ( isset( $block_gap_value['top'] ) && isset( $block_gap_value['left'] ) ) { | |
| 1911 | - $gap_row = static::get_property_value( $node, array( 'spacing', 'blockGap', 'top' ) ); | |
| 1912 | - $gap_column = static::get_property_value( $node, array( 'spacing', 'blockGap', 'left' ) ); | |
| 1913 | - $block_gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column; | |
| 2329 | + $has_block_gap_row_value = isset( $block_gap_value['top'] ); | |
| 2330 | + $has_block_gap_column_value = isset( $block_gap_value['left'] ); | |
| 2331 | + | |
| 2332 | + if ( $has_block_gap_row_value || $has_block_gap_column_value ) { | |
| 2333 | + $block_gap_row_value = $has_block_gap_row_value | |
| 2334 | + ? static::get_property_value( $node, array( 'spacing', 'blockGap', 'top' ) ) | |
| 2335 | + : '0'; | |
| 2336 | + $block_gap_column_value = $has_block_gap_column_value | |
| 2337 | + ? static::get_property_value( $node, array( 'spacing', 'blockGap', 'left' ) ) | |
| 2338 | + : '0'; | |
| 2339 | + $block_gap_value = $block_gap_row_value === $block_gap_column_value | |
| 2340 | + ? $block_gap_row_value | |
| 2341 | + : $block_gap_row_value . ' ' . $block_gap_column_value; | |
| 1914 | 2342 | } else { |
| 1915 | - // Skip outputting gap value if not all sides are provided. | |
| 1916 | - $block_gap_value = null; | |
| 2343 | + // Skip outputting a gap value if neither supported axis is provided. | |
| 2344 | + $block_gap_value = null; | |
| 2345 | + $block_gap_row_value = null; | |
| 1917 | 2346 | } |
| 1918 | 2347 | } |
| 1919 | 2348 | |
| 1920 | 2349 | // If the block should have custom gap, add the gap styles. |
| @@ -1924,10 +2353,13 @@ | ||
| 1924 | 2353 | if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key && 'grid' !== $layout_definition_key ) { |
| 1925 | 2354 | continue; |
| 1926 | 2355 | } |
| 1927 | 2356 | |
| 1928 | - $class_name = $layout_definition['className'] ?? false; | |
| 1929 | - $spacing_rules = $layout_definition['spacingStyles'] ?? array(); | |
| 2357 | + $class_name = $layout_definition['className'] ?? false; | |
| 2358 | + $spacing_rules = $layout_definition['spacingStyles'] ?? array(); | |
| 2359 | + $layout_gap_value = in_array( $layout_definition_key, array( 'default', 'constrained' ), true ) | |
| 2360 | + ? $block_gap_row_value | |
| 2361 | + : $block_gap_value; | |
| 1930 | 2362 | |
| 1931 | 2363 | if ( |
| 1932 | 2364 | ! empty( $class_name ) && |
| 1933 | 2365 | ! empty( $spacing_rules ) |
| @@ -1940,9 +2372,9 @@ | ||
| 1940 | 2372 | ! empty( $spacing_rule['rules'] ) |
| 1941 | 2373 | ) { |
| 1942 | 2374 | // Iterate over each of the styling rules and substitute non-string values such as `null` with the real `blockGap` value. |
| 1943 | 2375 | foreach ( $spacing_rule['rules'] as $css_property => $css_value ) { |
| 1944 | - $current_css_value = is_string( $css_value ) ? $css_value : $block_gap_value; | |
| 2376 | + $current_css_value = is_string( $css_value ) ? $css_value : $layout_gap_value; | |
| 1945 | 2377 | if ( static::is_safe_css_declaration( $css_property, $current_css_value ) ) { |
| 1946 | 2378 | $declarations[] = array( |
| 1947 | 2379 | 'name' => $css_property, |
| 1948 | 2380 | 'value' => $current_css_value, |
| @@ -2081,9 +2513,9 @@ | ||
| 2081 | 2513 | * .has-value-gradient-background { |
| 2082 | 2514 | * background: value; |
| 2083 | 2515 | * } |
| 2084 | 2516 | * |
| 2085 | - * p.has-value-gradient-background { | |
| 2517 | + * :where(p).has-value-gradient-background { | |
| 2086 | 2518 | * background: value; |
| 2087 | 2519 | * } |
| 2088 | 2520 | * |
| 2089 | 2521 | * @since 5.9.0 |
| @@ -2284,10 +2716,18 @@ | ||
| 2284 | 2716 | foreach ( $slugs as $slug ) { |
| 2285 | 2717 | $css_var = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ); |
| 2286 | 2718 | $class_name = static::replace_slug_in_string( $class, $slug ); |
| 2287 | 2719 | |
| 2288 | - // $selector is often empty, so we can save ourselves the `append_to_selector()` call then. | |
| 2289 | - $new_selector = '' === $selector ? $class_name : static::append_to_selector( $selector, $class_name ); | |
| 2720 | + /* | |
| 2721 | + * $selector is often empty (root-level presets), in which case the | |
| 2722 | + * bare class is used. For block-level presets the block selector is | |
| 2723 | + * wrapped in `:where()` so the class keeps the same 0-1-0 specificity | |
| 2724 | + * as a root-level preset. Without this, block-level palette rules | |
| 2725 | + * (e.g. `p.has-x-color`) out-rank equally-important rules that also | |
| 2726 | + * target the same property at 0-1-0, such as per-instance responsive | |
| 2727 | + * state styles. | |
| 2728 | + */ | |
| 2729 | + $new_selector = '' === $selector ? $class_name : ':where(' . $selector . ')' . $class_name; | |
| 2290 | 2730 | $stylesheet .= static::to_ruleset( |
| 2291 | 2731 | $new_selector, |
| 2292 | 2732 | array( |
| 2293 | 2733 | array( |
| @@ -2330,10 +2770,8 @@ | ||
| 2330 | 2770 | |
| 2331 | 2771 | $selectors_scoped = array(); |
| 2332 | 2772 | foreach ( $scopes as $outer ) { |
| 2333 | 2773 | foreach ( $selectors as $inner ) { |
| 2334 | - $outer = trim( $outer ); | |
| 2335 | - $inner = trim( $inner ); | |
| 2336 | 2774 | if ( ! empty( $outer ) && ! empty( $inner ) ) { |
| 2337 | 2775 | $selectors_scoped[] = $outer . ' ' . $inner; |
| 2338 | 2776 | } elseif ( empty( $outer ) ) { |
| 2339 | 2777 | $selectors_scoped[] = $inner; |
| @@ -2639,15 +3077,15 @@ | ||
| 2639 | 3077 | * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set. |
| 2640 | 3078 | * @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value(). Using style engine to correctly fetch background CSS values. |
| 2641 | 3079 | * @since 6.7.0 Allow ref resolution of background properties. |
| 2642 | 3080 | * |
| 2643 | - * @param array $styles Styles to process. | |
| 2644 | - * @param array $settings Theme settings. | |
| 2645 | - * @param array $properties Properties metadata. | |
| 2646 | - * @param array $theme_json Theme JSON array. | |
| 2647 | - * @param string $selector The style block selector. | |
| 3081 | + * @param array $styles Styles to process. | |
| 3082 | + * @param array $settings Theme settings. | |
| 3083 | + * @param array $properties Properties metadata. | |
| 3084 | + * @param array $theme_json Theme JSON array. | |
| 3085 | + * @param string $selector The style block selector. | |
| 2648 | 3086 | * @param boolean $use_root_padding Whether to add custom properties at root level. |
| 2649 | - * @return array Returns the modified $declarations. | |
| 3087 | + * @return array Returns the modified $declarations. | |
| 2650 | 3088 | */ |
| 2651 | 3089 | protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) { |
| 2652 | 3090 | if ( empty( $styles ) ) { |
| 2653 | 3091 | return array(); |
| @@ -2771,10 +3209,10 @@ | ||
| 2771 | 3209 | * @since 5.9.0 Added support for values of array type, which are returned as is. |
| 2772 | 3210 | * @since 6.1.0 Added the `$theme_json` parameter. |
| 2773 | 3211 | * @since 6.7.0 Added support for background image refs |
| 2774 | 3212 | * |
| 2775 | - * @param array $styles Styles subtree. | |
| 2776 | - * @param array $path Which property to process. | |
| 3213 | + * @param array $styles Styles subtree. | |
| 3214 | + * @param array $path Which property to process. | |
| 2777 | 3215 | * @param array $theme_json Theme JSON array. |
| 2778 | 3216 | * @return string|array Style property value. |
| 2779 | 3217 | */ |
| 2780 | 3218 | protected static function get_property_value( $styles, $path, $theme_json = null ) { |
| @@ -3146,9 +3584,9 @@ | ||
| 3146 | 3584 | * @since 6.1.0 |
| 3147 | 3585 | * |
| 3148 | 3586 | * @param array $theme_json The theme.json converted to an array. |
| 3149 | 3587 | * @param array $selectors Optional list of selectors per block. |
| 3150 | - * @param array $options { | |
| 3588 | + * @param array $options { | |
| 3151 | 3589 | * Optional. An array of options for now used for internal purposes only (may change without notice). |
| 3152 | 3590 | * |
| 3153 | 3591 | * @type bool $include_block_style_variations Includes nodes for block style variations. Default false. |
| 3154 | 3592 | * @type bool $include_node_paths_only Return only block nodes node paths. Default false. |
| @@ -3161,10 +3599,11 @@ | ||
| 3161 | 3599 | if ( ! isset( $theme_json['styles']['blocks'] ) ) { |
| 3162 | 3600 | return $nodes; |
| 3163 | 3601 | } |
| 3164 | 3602 | |
| 3165 | - $include_variations = $options['include_block_style_variations'] ?? false; | |
| 3166 | - $include_node_paths_only = $options['include_node_paths_only'] ?? false; | |
| 3603 | + $include_variations = $options['include_block_style_variations'] ?? false; | |
| 3604 | + $include_node_paths_only = $options['include_node_paths_only'] ?? false; | |
| 3605 | + $responsive_media_queries = static::get_viewport_media_queries( $theme_json['settings']['viewport'] ?? null ); | |
| 3167 | 3606 | |
| 3168 | 3607 | // If only node paths are to be returned, skip selector assignment. |
| 3169 | 3608 | if ( ! $include_node_paths_only ) { |
| 3170 | 3609 | $selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors; |
| @@ -3229,14 +3668,14 @@ | ||
| 3229 | 3668 | |
| 3230 | 3669 | // Responsive block nodes: emit one node per breakpoint that has styles. |
| 3231 | 3670 | // These are rendered immediately after the base block node so that |
| 3232 | 3671 | // the cascade order is: .block{} → @media{.block{}} |
| 3233 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 3672 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 3234 | 3673 | if ( isset( $theme_json['styles']['blocks'][ $name ][ $breakpoint ] ) ) { |
| 3235 | 3674 | $nodes[] = array( |
| 3236 | 3675 | 'name' => $name, |
| 3237 | 3676 | 'path' => array( 'styles', 'blocks', $name, $breakpoint ), |
| 3238 | - 'media_query' => static::RESPONSIVE_BREAKPOINTS[ $breakpoint ], | |
| 3677 | + 'media_query' => $responsive_media_queries[ $breakpoint ], | |
| 3239 | 3678 | 'selector' => $selector, |
| 3240 | 3679 | 'selectors' => $feature_selectors, |
| 3241 | 3680 | 'elements' => $selectors[ $name ]['elements'] ?? array(), |
| 3242 | 3681 | 'variations' => $variation_selectors, |
| @@ -3249,9 +3688,9 @@ | ||
| 3249 | 3688 | if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $name ] ) ) { |
| 3250 | 3689 | foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $name ] as $pseudo_selector ) { |
| 3251 | 3690 | $has_pseudo = isset( $theme_json['styles']['blocks'][ $name ][ $pseudo_selector ] ); |
| 3252 | 3691 | $has_responsive_pseudo = false; |
| 3253 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 3692 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 3254 | 3693 | if ( isset( $theme_json['styles']['blocks'][ $name ][ $breakpoint ][ $pseudo_selector ] ) ) { |
| 3255 | 3694 | $has_responsive_pseudo = true; |
| 3256 | 3695 | break; |
| 3257 | 3696 | } |
| @@ -3294,14 +3733,14 @@ | ||
| 3294 | 3733 | |
| 3295 | 3734 | // Responsive pseudo nodes: emit one node per breakpoint that has |
| 3296 | 3735 | // this pseudo state, immediately after the default pseudo node. |
| 3297 | 3736 | // Cascade order: .block:hover{} → @media{.block:hover{}} |
| 3298 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 3737 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 3299 | 3738 | if ( isset( $theme_json['styles']['blocks'][ $name ][ $breakpoint ][ $pseudo_selector ] ) ) { |
| 3300 | 3739 | $nodes[] = array( |
| 3301 | 3740 | 'name' => $name, |
| 3302 | 3741 | 'path' => array( 'styles', 'blocks', $name, $breakpoint, $pseudo_selector ), |
| 3303 | - 'media_query' => static::RESPONSIVE_BREAKPOINTS[ $breakpoint ], | |
| 3742 | + 'media_query' => $responsive_media_queries[ $breakpoint ], | |
| 3304 | 3743 | 'selector' => static::append_to_selector( $selector, $pseudo_selector ), |
| 3305 | 3744 | 'selectors' => $pseudo_feature_selectors, |
| 3306 | 3745 | 'elements' => $selectors[ $name ]['elements'] ?? array(), |
| 3307 | 3746 | 'variations' => $variation_selectors, |
| @@ -3352,33 +3791,56 @@ | ||
| 3352 | 3791 | } |
| 3353 | 3792 | } |
| 3354 | 3793 | } |
| 3355 | 3794 | } |
| 3356 | - if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) { | |
| 3357 | - foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) { | |
| 3795 | + /* | |
| 3796 | + * Elements can be styled outside any breakpoint, inside one, or both, | |
| 3797 | + * so collect the names from all of those places before looping. An | |
| 3798 | + * element styled only inside a breakpoint still needs a node. | |
| 3799 | + */ | |
| 3800 | + $block_node = $theme_json['styles']['blocks'][ $name ] ?? array(); | |
| 3801 | + $element_names = array_keys( $block_node['elements'] ?? array() ); | |
| 3802 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 3803 | + $element_names = array_merge( | |
| 3804 | + $element_names, | |
| 3805 | + array_keys( $block_node[ $breakpoint ]['elements'] ?? array() ) | |
| 3806 | + ); | |
| 3807 | + } | |
| 3808 | + $element_names = array_unique( $element_names ); | |
| 3809 | + | |
| 3810 | + if ( ! empty( $element_names ) ) { | |
| 3811 | + foreach ( $element_names as $element ) { | |
| 3358 | 3812 | $element_path = array( 'styles', 'blocks', $name, 'elements', $element ); |
| 3359 | 3813 | if ( $include_node_paths_only ) { |
| 3360 | - $nodes[] = array( | |
| 3361 | - 'path' => $element_path, | |
| 3362 | - ); | |
| 3814 | + if ( isset( $block_node['elements'][ $element ] ) ) { | |
| 3815 | + $nodes[] = array( | |
| 3816 | + 'path' => $element_path, | |
| 3817 | + ); | |
| 3818 | + } | |
| 3363 | 3819 | continue; |
| 3364 | 3820 | } |
| 3365 | 3821 | |
| 3822 | + if ( ! isset( $selectors[ $name ]['elements'][ $element ] ) ) { | |
| 3823 | + continue; | |
| 3824 | + } | |
| 3825 | + | |
| 3366 | 3826 | $element_selector = $selectors[ $name ]['elements'][ $element ]; |
| 3367 | 3827 | |
| 3368 | - $nodes[] = array( | |
| 3369 | - 'path' => $element_path, | |
| 3370 | - 'selector' => $element_selector, | |
| 3371 | - ); | |
| 3828 | + if ( isset( $block_node['elements'][ $element ] ) ) { | |
| 3829 | + $nodes[] = array( | |
| 3830 | + 'path' => $element_path, | |
| 3831 | + 'selector' => $element_selector, | |
| 3832 | + ); | |
| 3833 | + } | |
| 3372 | 3834 | |
| 3373 | 3835 | // Responsive element nodes: one node per breakpoint that has |
| 3374 | 3836 | // styles for this element. Cascade: a{} → @media{a{}} |
| 3375 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 3837 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 3376 | 3838 | if ( isset( $theme_json['styles']['blocks'][ $name ][ $breakpoint ]['elements'][ $element ] ) ) { |
| 3377 | 3839 | $nodes[] = array( |
| 3378 | 3840 | 'path' => array( 'styles', 'blocks', $name, $breakpoint, 'elements', $element ), |
| 3379 | 3841 | 'selector' => $element_selector, |
| 3380 | - 'media_query' => static::RESPONSIVE_BREAKPOINTS[ $breakpoint ], | |
| 3842 | + 'media_query' => $responsive_media_queries[ $breakpoint ], | |
| 3381 | 3843 | ); |
| 3382 | 3844 | } |
| 3383 | 3845 | } |
| 3384 | 3846 | |
| @@ -3384,45 +3846,29 @@ | ||
| 3384 | 3846 | |
| 3385 | 3847 | // Handle any pseudo selectors for the element. |
| 3386 | 3848 | if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) { |
| 3387 | 3849 | foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) { |
| 3388 | - // Create element pseudo node if default or any responsive breakpoint has the pseudo. | |
| 3389 | - $has_element_pseudo = isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ); | |
| 3390 | - if ( ! $has_element_pseudo ) { | |
| 3391 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $bp ) { | |
| 3392 | - if ( isset( $theme_json['styles']['blocks'][ $name ][ $bp ]['elements'][ $element ][ $pseudo_selector ] ) ) { | |
| 3393 | - $has_element_pseudo = true; | |
| 3394 | - break; | |
| 3395 | - } | |
| 3396 | - } | |
| 3850 | + // Emit the default pseudo node only when the default state styles | |
| 3851 | + // the pseudo. Otherwise get_styles_for_block() falls back to the | |
| 3852 | + // element's base styles, outputting a rule the theme never defined. | |
| 3853 | + if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) { | |
| 3854 | + $nodes[] = array( | |
| 3855 | + 'path' => array( 'styles', 'blocks', $name, 'elements', $element ), | |
| 3856 | + 'selector' => static::append_to_selector( $element_selector, $pseudo_selector ), | |
| 3857 | + ); | |
| 3397 | 3858 | } |
| 3398 | 3859 | |
| 3399 | - if ( $has_element_pseudo ) { | |
| 3400 | - $element_pseudo_path = array( 'styles', 'blocks', $name, 'elements', $element ); | |
| 3401 | - if ( $include_node_paths_only ) { | |
| 3860 | + // Responsive element pseudo nodes: one node per breakpoint | |
| 3861 | + // that has this pseudo state for this element. | |
| 3862 | + // Cascade: a:hover{} → @media{a:hover{}} | |
| 3863 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 3864 | + if ( isset( $theme_json['styles']['blocks'][ $name ][ $breakpoint ]['elements'][ $element ][ $pseudo_selector ] ) ) { | |
| 3402 | 3865 | $nodes[] = array( |
| 3403 | - 'path' => $element_pseudo_path, | |
| 3866 | + 'path' => array( 'styles', 'blocks', $name, $breakpoint, 'elements', $element ), | |
| 3867 | + 'selector' => static::append_to_selector( $element_selector, $pseudo_selector ), | |
| 3868 | + 'media_query' => $responsive_media_queries[ $breakpoint ], | |
| 3404 | 3869 | ); |
| 3405 | - continue; | |
| 3406 | 3870 | } |
| 3407 | - | |
| 3408 | - $nodes[] = array( | |
| 3409 | - 'path' => $element_pseudo_path, | |
| 3410 | - 'selector' => static::append_to_selector( $element_selector, $pseudo_selector ), | |
| 3411 | - ); | |
| 3412 | - | |
| 3413 | - // Responsive element pseudo nodes: one node per breakpoint | |
| 3414 | - // that has this pseudo state for this element. | |
| 3415 | - // Cascade: a:hover{} → @media{a:hover{}} | |
| 3416 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 3417 | - if ( isset( $theme_json['styles']['blocks'][ $name ][ $breakpoint ]['elements'][ $element ][ $pseudo_selector ] ) ) { | |
| 3418 | - $nodes[] = array( | |
| 3419 | - 'path' => array( 'styles', 'blocks', $name, $breakpoint, 'elements', $element ), | |
| 3420 | - 'selector' => static::append_to_selector( $element_selector, $pseudo_selector ), | |
| 3421 | - 'media_query' => static::RESPONSIVE_BREAKPOINTS[ $breakpoint ], | |
| 3422 | - ); | |
| 3423 | - } | |
| 3424 | - } | |
| 3425 | 3871 | } |
| 3426 | 3872 | } |
| 3427 | 3873 | } |
| 3428 | 3874 | } |
| @@ -3442,14 +3888,15 @@ | ||
| 3442 | 3888 | * |
| 3443 | 3889 | * @return string Styles for the block. |
| 3444 | 3890 | */ |
| 3445 | 3891 | public function get_styles_for_block( $block_metadata ) { |
| 3446 | - $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() ); | |
| 3447 | - $use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments']; | |
| 3448 | - $selector = $block_metadata['selector']; | |
| 3449 | - $settings = $this->theme_json['settings'] ?? null; | |
| 3450 | - $is_root_selector = static::ROOT_BLOCK_SELECTOR === $selector; | |
| 3451 | - $media_query = $block_metadata['media_query'] ?? null; | |
| 3892 | + $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() ); | |
| 3893 | + $use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments']; | |
| 3894 | + $selector = $block_metadata['selector']; | |
| 3895 | + $settings = $this->theme_json['settings'] ?? null; | |
| 3896 | + $is_root_selector = static::ROOT_BLOCK_SELECTOR === $selector; | |
| 3897 | + $media_query = $block_metadata['media_query'] ?? null; | |
| 3898 | + $responsive_media_queries = static::get_viewport_media_queries( $settings['viewport'] ?? null ); | |
| 3452 | 3899 | |
| 3453 | 3900 | $feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node ); |
| 3454 | 3901 | |
| 3455 | 3902 | // Update text indent selector for paragraph blocks based on the textIndent setting. |
| @@ -3504,10 +3951,20 @@ | ||
| 3504 | 3951 | // Store variation metadata and node for layout styles generation. |
| 3505 | 3952 | // Only store if the variation has blockGap defined. |
| 3506 | 3953 | if ( isset( $style_variation_node['spacing']['blockGap'] ) ) { |
| 3507 | 3954 | // Append block selector to the variation selector for proper targeting. |
| 3508 | - $variation_metadata_with_selector = $style_variation; | |
| 3509 | - $variation_metadata_with_selector['selector'] = $style_variation['selector'] . $block_metadata['css']; | |
| 3955 | + $variation_metadata_with_selector = $style_variation; | |
| 3956 | + $variation_metadata_with_selector['selector'] = $style_variation['selector'] . $block_metadata['css']; | |
| 3957 | + | |
| 3958 | + /* | |
| 3959 | + * `get_layout_styles()` reads `name` as a block name, to check that the block | |
| 3960 | + * supports layout at all. A variation node's `name` is the variation slug, | |
| 3961 | + * which is never a registered block, so the check fails and every variation | |
| 3962 | + * gap rule is discarded. Pass the block the variation belongs to, so the | |
| 3963 | + * support check answers the question it is actually asking. | |
| 3964 | + */ | |
| 3965 | + $variation_metadata_with_selector['name'] = $block_name; | |
| 3966 | + | |
| 3510 | 3967 | $style_variation_layout_metadata[ $style_variation['selector'] ] = array( |
| 3511 | 3968 | 'metadata' => $variation_metadata_with_selector, |
| 3512 | 3969 | 'node' => $style_variation_node, |
| 3513 | 3970 | ); |
| @@ -3517,15 +3974,15 @@ | ||
| 3517 | 3974 | // This includes both base properties and feature-level selectors. |
| 3518 | 3975 | $variation_responsive_css = ''; |
| 3519 | 3976 | $variation_responsive_pseudo_css = ''; |
| 3520 | 3977 | |
| 3521 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 3978 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 3522 | 3979 | if ( ! isset( $style_variation_node[ $breakpoint ] ) ) { |
| 3523 | 3980 | continue; |
| 3524 | 3981 | } |
| 3525 | 3982 | |
| 3526 | 3983 | $breakpoint_node = $style_variation_node[ $breakpoint ]; |
| 3527 | - $breakpoint_media = static::RESPONSIVE_BREAKPOINTS[ $breakpoint ]; | |
| 3984 | + $breakpoint_media = $responsive_media_queries[ $breakpoint ]; | |
| 3528 | 3985 | // Process feature-level declarations for this breakpoint. |
| 3529 | 3986 | $breakpoint_feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $breakpoint_node ); |
| 3530 | 3987 | $breakpoint_feature_declarations = static::update_paragraph_text_indent_selector( $breakpoint_feature_declarations, $settings, $block_name ); |
| 3531 | 3988 | $breakpoint_feature_declarations = static::update_button_width_declarations( $breakpoint_feature_declarations, $settings ); |
| @@ -3561,9 +4018,13 @@ | ||
| 3561 | 4018 | // Process blockGap responsive layout styles for this variation. |
| 3562 | 4019 | if ( isset( $breakpoint_node['spacing']['blockGap'] ) ) { |
| 3563 | 4020 | $variation_layout_metadata = $style_variation; |
| 3564 | 4021 | $variation_layout_metadata['selector'] = $style_variation['selector'] . $block_metadata['css']; |
| 3565 | - $variation_responsive_css .= $this->get_layout_styles( | |
| 4022 | + | |
| 4023 | + // The variation slug is not a block name here either. See above. | |
| 4024 | + $variation_layout_metadata['name'] = $block_name; | |
| 4025 | + | |
| 4026 | + $variation_responsive_css .= $this->get_layout_styles( | |
| 3566 | 4027 | $variation_layout_metadata, |
| 3567 | 4028 | array( |
| 3568 | 4029 | 'node' => $breakpoint_node, |
| 3569 | 4030 | 'media_query' => $breakpoint_media, |
| @@ -4226,9 +4687,9 @@ | ||
| 4226 | 4687 | * Gets a `default`'s preset name by a provided slug. |
| 4227 | 4688 | * |
| 4228 | 4689 | * @since 5.9.0 |
| 4229 | 4690 | * |
| 4230 | - * @param string $slug The slug we want to find a match from default presets. | |
| 4691 | + * @param string $slug The slug we want to find a match from default presets. | |
| 4231 | 4692 | * @param array $base_path The path to inspect. It's 'settings' by default. |
| 4232 | 4693 | * @return string|null |
| 4233 | 4694 | */ |
| 4234 | 4695 | protected function get_name_from_defaults( $slug, $base_path ) { |
| @@ -4276,10 +4737,10 @@ | ||
| 4276 | 4737 | * @since 5.9.0 |
| 4277 | 4738 | * @since 6.6.0 Added support for block style variation element styles and $origin parameter. |
| 4278 | 4739 | * |
| 4279 | 4740 | * @param array $theme_json Structure to sanitize. |
| 4280 | - * @param string $origin Optional. What source of data this object represents. | |
| 4281 | - * One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'. | |
| 4741 | + * @param string $origin Optional. What source of data this object represents. | |
| 4742 | + * One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'. | |
| 4282 | 4743 | * @return array Sanitized structure. |
| 4283 | 4744 | */ |
| 4284 | 4745 | public static function remove_insecure_properties( $theme_json, $origin = 'theme' ) { |
| 4285 | 4746 | if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) { |
| @@ -4299,11 +4760,12 @@ | ||
| 4299 | 4760 | $valid_variations = static::get_valid_block_style_variations( $blocks_metadata ); |
| 4300 | 4761 | |
| 4301 | 4762 | $theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names, $valid_variations ); |
| 4302 | 4763 | |
| 4303 | - $blocks_metadata = static::get_blocks_metadata(); | |
| 4304 | - $style_options = array( 'include_block_style_variations' => true ); // Allow variations data. | |
| 4305 | - $style_nodes = static::get_style_nodes( $theme_json, $blocks_metadata, $style_options ); | |
| 4764 | + $blocks_metadata = static::get_blocks_metadata(); | |
| 4765 | + $style_options = array( 'include_block_style_variations' => true ); // Allow variations data. | |
| 4766 | + $style_nodes = static::get_style_nodes( $theme_json, $blocks_metadata, $style_options ); | |
| 4767 | + $responsive_media_queries = static::get_viewport_media_queries( $theme_json['settings']['viewport'] ?? null ); | |
| 4306 | 4768 | |
| 4307 | 4769 | foreach ( $style_nodes as $metadata ) { |
| 4308 | 4770 | $input = _wp_array_get( $theme_json, $metadata['path'], array() ); |
| 4309 | 4771 | if ( empty( $input ) ) { |
| @@ -4339,18 +4801,18 @@ | ||
| 4339 | 4801 | } |
| 4340 | 4802 | } |
| 4341 | 4803 | |
| 4342 | 4804 | // Re-add and process responsive breakpoint styles. |
| 4343 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 4805 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 4344 | 4806 | if ( isset( $input[ $breakpoint ] ) ) { |
| 4345 | 4807 | $output[ $breakpoint ] = static::remove_insecure_styles( $input[ $breakpoint ] ); |
| 4346 | 4808 | |
| 4347 | 4809 | if ( isset( $input[ $breakpoint ]['elements'] ) ) { |
| 4348 | - $output[ $breakpoint ]['elements'] = static::remove_insecure_element_styles( $input[ $breakpoint ]['elements'] ); | |
| 4810 | + $output[ $breakpoint ]['elements'] = static::remove_insecure_element_styles( $input[ $breakpoint ]['elements'], $responsive_media_queries ); | |
| 4349 | 4811 | } |
| 4350 | 4812 | |
| 4351 | 4813 | if ( isset( $input[ $breakpoint ]['blocks'] ) ) { |
| 4352 | - $output[ $breakpoint ]['blocks'] = static::remove_insecure_inner_block_styles( $input[ $breakpoint ]['blocks'] ); | |
| 4814 | + $output[ $breakpoint ]['blocks'] = static::remove_insecure_inner_block_styles( $input[ $breakpoint ]['blocks'], $responsive_media_queries ); | |
| 4353 | 4815 | } |
| 4354 | 4816 | |
| 4355 | 4817 | if ( $block_name && isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ) ) { |
| 4356 | 4818 | foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] as $pseudo_selector ) { |
| @@ -4380,26 +4842,26 @@ | ||
| 4380 | 4842 | |
| 4381 | 4843 | $variation_output = static::remove_insecure_styles( $variation_input ); |
| 4382 | 4844 | |
| 4383 | 4845 | if ( isset( $variation_input['blocks'] ) ) { |
| 4384 | - $variation_output['blocks'] = static::remove_insecure_inner_block_styles( $variation_input['blocks'] ); | |
| 4846 | + $variation_output['blocks'] = static::remove_insecure_inner_block_styles( $variation_input['blocks'], $responsive_media_queries ); | |
| 4385 | 4847 | } |
| 4386 | 4848 | |
| 4387 | 4849 | if ( isset( $variation_input['elements'] ) ) { |
| 4388 | - $variation_output['elements'] = static::remove_insecure_element_styles( $variation_input['elements'] ); | |
| 4850 | + $variation_output['elements'] = static::remove_insecure_element_styles( $variation_input['elements'], $responsive_media_queries ); | |
| 4389 | 4851 | } |
| 4390 | 4852 | |
| 4391 | 4853 | // Re-add and process responsive breakpoint styles for variations. |
| 4392 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 4854 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 4393 | 4855 | if ( isset( $variation_input[ $breakpoint ] ) ) { |
| 4394 | 4856 | $variation_output[ $breakpoint ] = static::remove_insecure_styles( $variation_input[ $breakpoint ] ); |
| 4395 | 4857 | |
| 4396 | 4858 | if ( isset( $variation_input[ $breakpoint ]['elements'] ) ) { |
| 4397 | - $variation_output[ $breakpoint ]['elements'] = static::remove_insecure_element_styles( $variation_input[ $breakpoint ]['elements'] ); | |
| 4859 | + $variation_output[ $breakpoint ]['elements'] = static::remove_insecure_element_styles( $variation_input[ $breakpoint ]['elements'], $responsive_media_queries ); | |
| 4398 | 4860 | } |
| 4399 | 4861 | |
| 4400 | 4862 | if ( isset( $variation_input[ $breakpoint ]['blocks'] ) ) { |
| 4401 | - $variation_output[ $breakpoint ]['blocks'] = static::remove_insecure_inner_block_styles( $variation_input[ $breakpoint ]['blocks'] ); | |
| 4863 | + $variation_output[ $breakpoint ]['blocks'] = static::remove_insecure_inner_block_styles( $variation_input[ $breakpoint ]['blocks'], $responsive_media_queries ); | |
| 4402 | 4864 | } |
| 4403 | 4865 | |
| 4404 | 4866 | if ( $block_name && isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ) ) { |
| 4405 | 4867 | foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] as $pseudo_selector ) { |
| @@ -4429,9 +4891,9 @@ | ||
| 4429 | 4891 | if ( empty( $input ) ) { |
| 4430 | 4892 | continue; |
| 4431 | 4893 | } |
| 4432 | 4894 | |
| 4433 | - $output = static::remove_insecure_settings( $input ); | |
| 4895 | + $output = static::remove_insecure_settings( $input, array( 'settings' ) === $metadata['path'] ); | |
| 4434 | 4896 | if ( ! empty( $output ) ) { |
| 4435 | 4897 | _wp_array_set( $sanitized, $metadata['path'], $output ); |
| 4436 | 4898 | } |
| 4437 | 4899 | } |
| @@ -4453,14 +4915,19 @@ | ||
| 4453 | 4915 | |
| 4454 | 4916 | /** |
| 4455 | 4917 | * Remove insecure element styles within a variation or block. |
| 4456 | 4918 | * |
| 4919 | + * When responsive media queries are provided, nested responsive state styles | |
| 4920 | + * for those media-query keys are re-added after the base sanitization pass. | |
| 4921 | + * | |
| 4457 | 4922 | * @since 6.8.0 |
| 4458 | 4923 | * |
| 4459 | - * @param array $elements The elements to process. | |
| 4924 | + * @param array $elements The elements to process. | |
| 4925 | + * @param array|null $responsive_media_queries Optional. Media queries whose keys define allowed | |
| 4926 | + * viewport states. Default null. | |
| 4460 | 4927 | * @return array The sanitized elements styles. |
| 4461 | 4928 | */ |
| 4462 | - protected static function remove_insecure_element_styles( $elements ) { | |
| 4929 | + protected static function remove_insecure_element_styles( $elements, $responsive_media_queries = null ) { | |
| 4463 | 4930 | $sanitized = array(); |
| 4464 | 4931 | $valid_element_names = array_keys( static::ELEMENTS ); |
| 4465 | 4932 | |
| 4466 | 4933 | foreach ( $valid_element_names as $element_name ) { |
| @@ -4475,17 +4942,19 @@ | ||
| 4475 | 4942 | } |
| 4476 | 4943 | } |
| 4477 | 4944 | } |
| 4478 | 4945 | |
| 4479 | - // Re-add and process responsive breakpoint styles for elements. | |
| 4480 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 4481 | - if ( isset( $element_input[ $breakpoint ] ) ) { | |
| 4482 | - $element_output[ $breakpoint ] = static::remove_insecure_styles( $element_input[ $breakpoint ] ); | |
| 4946 | + if ( null !== $responsive_media_queries ) { | |
| 4947 | + // Re-add and process responsive breakpoint styles for elements. | |
| 4948 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 4949 | + if ( isset( $element_input[ $breakpoint ] ) ) { | |
| 4950 | + $element_output[ $breakpoint ] = static::remove_insecure_styles( $element_input[ $breakpoint ] ); | |
| 4483 | 4951 | |
| 4484 | - if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] ) ) { | |
| 4485 | - foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] as $pseudo_selector ) { | |
| 4486 | - if ( isset( $element_input[ $breakpoint ][ $pseudo_selector ] ) ) { | |
| 4487 | - $element_output[ $breakpoint ][ $pseudo_selector ] = static::remove_insecure_styles( $element_input[ $breakpoint ][ $pseudo_selector ] ); | |
| 4952 | + if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] ) ) { | |
| 4953 | + foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] as $pseudo_selector ) { | |
| 4954 | + if ( isset( $element_input[ $breakpoint ][ $pseudo_selector ] ) ) { | |
| 4955 | + $element_output[ $breakpoint ][ $pseudo_selector ] = static::remove_insecure_styles( $element_input[ $breakpoint ][ $pseudo_selector ] ); | |
| 4956 | + } | |
| 4488 | 4957 | } |
| 4489 | 4958 | } |
| 4490 | 4959 | } |
| 4491 | 4960 | } |
| @@ -4499,31 +4968,38 @@ | ||
| 4499 | 4968 | |
| 4500 | 4969 | /** |
| 4501 | 4970 | * Remove insecure styles from inner blocks and their elements. |
| 4502 | 4971 | * |
| 4972 | + * When responsive media queries are provided, nested responsive state styles | |
| 4973 | + * for those media-query keys are re-added after the base sanitization pass. | |
| 4974 | + * | |
| 4503 | 4975 | * @since 6.8.0 |
| 4504 | 4976 | * |
| 4505 | - * @param array $blocks The block styles to process. | |
| 4977 | + * @param array $blocks The block styles to process. | |
| 4978 | + * @param array|null $responsive_media_queries Optional. Media queries whose keys define allowed | |
| 4979 | + * viewport states. Default null. | |
| 4506 | 4980 | * @return array Sanitized block type styles. |
| 4507 | 4981 | */ |
| 4508 | - protected static function remove_insecure_inner_block_styles( $blocks ) { | |
| 4982 | + protected static function remove_insecure_inner_block_styles( $blocks, $responsive_media_queries = null ) { | |
| 4509 | 4983 | $sanitized = array(); |
| 4510 | 4984 | foreach ( $blocks as $block_type => $block_input ) { |
| 4511 | 4985 | $block_output = static::remove_insecure_styles( $block_input ); |
| 4512 | 4986 | |
| 4513 | 4987 | if ( isset( $block_input['elements'] ) ) { |
| 4514 | - $block_output['elements'] = static::remove_insecure_element_styles( $block_input['elements'] ); | |
| 4988 | + $block_output['elements'] = static::remove_insecure_element_styles( $block_input['elements'], $responsive_media_queries ); | |
| 4515 | 4989 | } |
| 4516 | 4990 | |
| 4517 | - // Re-add and process responsive breakpoint styles for inner blocks. | |
| 4518 | - foreach ( array_keys( static::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) { | |
| 4519 | - if ( isset( $block_input[ $breakpoint ] ) ) { | |
| 4520 | - $block_output[ $breakpoint ] = static::remove_insecure_styles( $block_input[ $breakpoint ] ); | |
| 4991 | + if ( null !== $responsive_media_queries ) { | |
| 4992 | + // Re-add and process responsive breakpoint styles for inner blocks. | |
| 4993 | + foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) { | |
| 4994 | + if ( isset( $block_input[ $breakpoint ] ) ) { | |
| 4995 | + $block_output[ $breakpoint ] = static::remove_insecure_styles( $block_input[ $breakpoint ] ); | |
| 4521 | 4996 | |
| 4522 | - if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_type ] ) ) { | |
| 4523 | - foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_type ] as $pseudo_selector ) { | |
| 4524 | - if ( isset( $block_input[ $breakpoint ][ $pseudo_selector ] ) ) { | |
| 4525 | - $block_output[ $breakpoint ][ $pseudo_selector ] = static::remove_insecure_styles( $block_input[ $breakpoint ][ $pseudo_selector ] ); | |
| 4997 | + if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_type ] ) ) { | |
| 4998 | + foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_type ] as $pseudo_selector ) { | |
| 4999 | + if ( isset( $block_input[ $breakpoint ][ $pseudo_selector ] ) ) { | |
| 5000 | + $block_output[ $breakpoint ][ $pseudo_selector ] = static::remove_insecure_styles( $block_input[ $breakpoint ][ $pseudo_selector ] ); | |
| 5001 | + } | |
| 4526 | 5002 | } |
| 4527 | 5003 | } |
| 4528 | 5004 | } |
| 4529 | 5005 | } |
| @@ -4568,12 +5044,14 @@ | ||
| 4568 | 5044 | * without the insecure settings. |
| 4569 | 5045 | * |
| 4570 | 5046 | * @since 5.9.0 |
| 4571 | 5047 | * |
| 4572 | - * @param array $input Node to process. | |
| 5048 | + * @param array $input Node to process. | |
| 5049 | + * @param bool $allow_viewport Whether to preserve and sanitize top-level | |
| 5050 | + * viewport settings. | |
| 4573 | 5051 | * @return array |
| 4574 | 5052 | */ |
| 4575 | - protected static function remove_insecure_settings( $input ) { | |
| 5053 | + protected static function remove_insecure_settings( $input, $allow_viewport = true ) { | |
| 4576 | 5054 | $output = array(); |
| 4577 | 5055 | foreach ( static::PRESETS_METADATA as $preset_metadata ) { |
| 4578 | 5056 | foreach ( static::VALID_ORIGINS as $origin ) { |
| 4579 | 5057 | $path_with_origin = $preset_metadata['path']; |
| @@ -4624,8 +5102,12 @@ | ||
| 4624 | 5102 | |
| 4625 | 5103 | // Preserve all valid settings that have type markers in VALID_SETTINGS. |
| 4626 | 5104 | self::preserve_valid_typed_settings( $input, $output, static::VALID_SETTINGS ); |
| 4627 | 5105 | |
| 5106 | + if ( $allow_viewport && array_key_exists( 'viewport', $input ) ) { | |
| 5107 | + $output['viewport'] = static::sanitize_viewport_settings( $input['viewport'] ); | |
| 5108 | + } | |
| 5109 | + | |
| 4628 | 5110 | return $output; |
| 4629 | 5111 | } |
| 4630 | 5112 | |
| 4631 | 5113 | /** |
| @@ -5302,8 +5784,9 @@ | ||
| 5302 | 5784 | * This is used to convert the internal representation of variables to the CSS representation. |
| 5303 | 5785 | * For example, `var:preset|color|vivid-green-cyan` becomes `var(--wp--preset--color--vivid-green-cyan)`. |
| 5304 | 5786 | * |
| 5305 | 5787 | * @since 6.3.0 |
| 5788 | + * @since 7.2.0 Preset reference slugs are kebab-cased to match the generated custom properties. | |
| 5306 | 5789 | * @param string $value The variable such as var:preset|color|vivid-green-cyan to convert. |
| 5307 | 5790 | * @return string The converted variable. |
| 5308 | 5791 | */ |
| 5309 | 5792 | private static function convert_custom_properties( $value ) { |
| @@ -5310,15 +5793,32 @@ | ||
| 5310 | 5793 | $prefix = 'var:'; |
| 5311 | 5794 | $prefix_len = strlen( $prefix ); |
| 5312 | 5795 | $token_in = '|'; |
| 5313 | 5796 | $token_out = '--'; |
| 5314 | - if ( 0 === strpos( $value, $prefix ) ) { | |
| 5315 | - $unwrapped_name = str_replace( | |
| 5316 | - $token_in, | |
| 5317 | - $token_out, | |
| 5318 | - substr( $value, $prefix_len ) | |
| 5319 | - ); | |
| 5320 | - $value = "var(--wp--$unwrapped_name)"; | |
| 5797 | + if ( str_starts_with( $value, $prefix ) ) { | |
| 5798 | + $parts = explode( $token_in, substr( $value, $prefix_len ) ); | |
| 5799 | + | |
| 5800 | + /* | |
| 5801 | + * The slug of a preset reference is kebab-cased so the resulting | |
| 5802 | + * custom property matches the one generated from the preset, | |
| 5803 | + * whose slug is also kebab-cased (see `get_settings_values_by_slug()`). | |
| 5804 | + * For slugs that are not already kebab-cased (e.g. `n27`), a verbatim | |
| 5805 | + * conversion produces a reference to a custom property that does | |
| 5806 | + * not exist (`--wp--preset--font-family--n27` instead of the | |
| 5807 | + * generated `--wp--preset--font-family--n-27`). | |
| 5808 | + * | |
| 5809 | + * Duotone is the exception: its custom properties are generated by | |
| 5810 | + * `WP_Duotone_Gutenberg` from the presets it registers in | |
| 5811 | + * `get_all_global_styles_presets()`. Duotone references are | |
| 5812 | + * kebab-cased all the same: the editor and the JS style engine | |
| 5813 | + * kebab-case the references of every preset type, and | |
| 5814 | + * `WP_Duotone_Gutenberg` looks up presets by kebab-cased filter ID. | |
| 5815 | + */ | |
| 5816 | + if ( 3 === count( $parts ) && 'preset' === $parts[0] ) { | |
| 5817 | + $parts[2] = _wp_to_kebab_case( $parts[2] ); | |
| 5818 | + } | |
| 5819 | + | |
| 5820 | + $value = 'var(--wp--' . implode( $token_out, $parts ) . ')'; | |
| 5321 | 5821 | } |
| 5322 | 5822 | |
| 5323 | 5823 | return $value; |
| 5324 | 5824 | } |
| @@ -5327,9 +5827,9 @@ | ||
| 5327 | 5827 | * Given a tree, converts the internal representation of variables to the CSS representation. |
| 5328 | 5828 | * It is recursive and modifies the input in-place. |
| 5329 | 5829 | * |
| 5330 | 5830 | * @since 6.3.0 |
| 5331 | - * @param array $tree Input to process. | |
| 5831 | + * @param array $tree Input to process. | |
| 5332 | 5832 | * @return array The modified $tree. |
| 5333 | 5833 | */ |
| 5334 | 5834 | private static function resolve_custom_css_format( $tree ) { |
| 5335 | 5835 | $prefix = 'var:'; |
| @@ -5334,9 +5834,9 @@ | ||
| 5334 | 5834 | private static function resolve_custom_css_format( $tree ) { |
| 5335 | 5835 | $prefix = 'var:'; |
| 5336 | 5836 | |
| 5337 | 5837 | foreach ( $tree as $key => $data ) { |
| 5338 | - if ( is_string( $data ) && 0 === strpos( $data, $prefix ) ) { | |
| 5838 | + if ( is_string( $data ) && str_starts_with( $data, $prefix ) ) { | |
| 5339 | 5839 | $tree[ $key ] = self::convert_custom_properties( $data ); |
| 5340 | 5840 | } elseif ( is_array( $data ) ) { |
| 5341 | 5841 | $tree[ $key ] = self::resolve_custom_css_format( $data ); |
| 5342 | 5842 | } |
| @@ -5442,13 +5942,24 @@ | ||
| 5442 | 5942 | $limit = 1; |
| 5443 | 5943 | $selector_parts = static::split_selector_list( $block_selector ); |
| 5444 | 5944 | $result = array(); |
| 5445 | 5945 | |
| 5946 | + /* | |
| 5947 | + * Append the variation class to each selector's ancestor: the first | |
| 5948 | + * run of characters before any combinator (whitespace) or pseudo-class | |
| 5949 | + * (`:`). Only the first match is replaced. | |
| 5950 | + * | |
| 5951 | + * Examples ("custom" variation): | |
| 5952 | + * - `.wp-block` => `.wp-block.is-style-custom` | |
| 5953 | + * - `.wp-block .inner` => `.wp-block.is-style-custom .inner` | |
| 5954 | + * - `.wp-block:where(.a .b)` => `.wp-block.is-style-custom:where(.a .b)` | |
| 5955 | + * - `:where(.outer .inner)` => `:where(.outer.is-style-custom .inner)` | |
| 5956 | + */ | |
| 5446 | 5957 | foreach ( $selector_parts as $part ) { |
| 5447 | 5958 | $result[] = preg_replace_callback( |
| 5448 | - '/((?::\([^)]+\))?\s*)([^\s:]+)/', | |
| 5959 | + '/[^\s:]+/', | |
| 5449 | 5960 | function ( $matches ) use ( $variation_class ) { |
| 5450 | - return $matches[1] . $matches[2] . $variation_class; | |
| 5961 | + return $matches[0] . $variation_class; | |
| 5451 | 5962 | }, |
| 5452 | 5963 | $part, |
| 5453 | 5964 | $limit |
| 5454 | 5965 | ); |
| @@ -5453,9 +5964,9 @@ | ||
| 5453 | 5964 | $limit |
| 5454 | 5965 | ); |
| 5455 | 5966 | } |
| 5456 | 5967 | |
| 5457 | - return implode( ',', $result ); | |
| 5968 | + return implode( ', ', $result ); | |
| 5458 | 5969 | } |
| 5459 | 5970 | |
| 5460 | 5971 | /** |
| 5461 | 5972 | * Applies a block style variation class to a feature selector. |
| @@ -5466,9 +5977,9 @@ | ||
| 5466 | 5977 | * the variation class directly to the selector that will receive the |
| 5467 | 5978 | * declarations instead of deriving it by subtracting the root selector from |
| 5468 | 5979 | * the feature selector. |
| 5469 | 5980 | * |
| 5470 | - * @param array $style_variation Style variation metadata. | |
| 5981 | + * @param array $style_variation Style variation metadata. | |
| 5471 | 5982 | * @param string $feature_selector CSS selector for the feature. |
| 5472 | 5983 | * @return string Feature selector with block style variation selector added. |
| 5473 | 5984 | */ |
| 5474 | 5985 | protected static function get_block_style_variation_feature_selector( $style_variation, $feature_selector ) { |
| @@ -5482,10 +5993,9 @@ | ||
| 5482 | 5993 | $variation_class = ".is-style-$variation_name"; |
| 5483 | 5994 | $selector_parts = static::split_selector_list( $feature_selector ); |
| 5484 | 5995 | $selector_parts = array_map( |
| 5485 | 5996 | static function ( $selector ) use ( $variation_class ) { |
| 5486 | - $selector = trim( $selector ); | |
| 5487 | - $prefix = $variation_class . ' '; | |
| 5997 | + $prefix = $variation_class . ' '; | |
| 5488 | 5998 | |
| 5489 | 5999 | if ( str_starts_with( $selector, $prefix ) ) { |
| 5490 | 6000 | return substr( $selector, strlen( $prefix ) ); |
| 5491 | 6001 | } |
| @@ -5496,9 +6006,9 @@ | ||
| 5496 | 6006 | ); |
| 5497 | 6007 | |
| 5498 | 6008 | return static::get_block_style_variation_selector( |
| 5499 | 6009 | $variation_name, |
| 5500 | - implode( ',', $selector_parts ) | |
| 6010 | + implode( ', ', $selector_parts ) | |
| 5501 | 6011 | ); |
| 5502 | 6012 | } |
| 5503 | 6013 | |
| 5504 | 6014 | /** |
