Changeset 57491
- Timestamp:
- 01/31/2024 02:52:25 AM (8 months ago)
- Location:
- trunk
- Files:
-
- 1 added
- 5 edited
-
src/wp-includes/block-supports/dimensions.php (modified) (1 diff)
-
src/wp-includes/class-wp-theme-json.php (modified) (9 diffs)
-
src/wp-includes/style-engine/class-wp-style-engine.php (modified) (2 diffs)
-
tests/phpunit/tests/block-supports/wpRenderDimensionsSupport.php (added)
-
tests/phpunit/tests/style-engine/styleEngine.php (modified) (1 diff)
-
tests/phpunit/tests/theme/wpThemeJson.php (modified) (5 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/block-supports/dimensions.php
r56753 r57491 84 84 } 85 85 86 /** 87 * Renders server-side dimensions styles to the block wrapper. 88 * This block support uses the `render_block` hook to ensure that 89 * it is also applied to non-server-rendered blocks. 90 * 91 * @since 6.5.0 92 * @access private 93 * 94 * @param string $block_content Rendered block content. 95 * @param array $block Block object. 96 * @return string Filtered block content. 97 */ 98 function wp_render_dimensions_support( $block_content, $block ) { 99 $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); 100 $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); 101 $has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false ); 102 103 if ( 104 ! $has_aspect_ratio_support || 105 wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' ) 106 ) { 107 return $block_content; 108 } 109 110 $dimensions_block_styles = array(); 111 $dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null; 112 113 // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule. 114 if ( 115 isset( $dimensions_block_styles['aspectRatio'] ) 116 ) { 117 $dimensions_block_styles['minHeight'] = 'unset'; 118 } elseif ( 119 isset( $block_attributes['style']['dimensions']['minHeight'] ) || 120 isset( $block_attributes['minHeight'] ) 121 ) { 122 $dimensions_block_styles['aspectRatio'] = 'unset'; 123 } 124 125 $styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) ); 126 127 if ( ! empty( $styles['css'] ) ) { 128 // Inject dimensions styles to the first element, presuming it's the wrapper, if it exists. 129 $tags = new WP_HTML_Tag_Processor( $block_content ); 130 131 if ( $tags->next_tag() ) { 132 $existing_style = $tags->get_attribute( 'style' ); 133 $updated_style = ''; 134 135 if ( ! empty( $existing_style ) ) { 136 $updated_style = $existing_style; 137 if ( ! str_ends_with( $existing_style, ';' ) ) { 138 $updated_style .= ';'; 139 } 140 } 141 142 $updated_style .= $styles['css']; 143 $tags->set_attribute( 'style', $updated_style ); 144 145 if ( ! empty( $styles['classnames'] ) ) { 146 foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) { 147 if ( 148 str_contains( $class_name, 'aspect-ratio' ) && 149 ! isset( $block_attributes['style']['dimensions']['aspectRatio'] ) 150 ) { 151 continue; 152 } 153 $tags->add_class( $class_name ); 154 } 155 } 156 } 157 158 return $tags->get_updated_html(); 159 } 160 161 return $block_content; 162 } 163 164 add_filter( 'render_block', 'wp_render_dimensions_support', 10, 2 ); 165 86 166 // Register the block support. 87 167 WP_Block_Supports::get_instance()->register( -
trunk/src/wp-includes/class-wp-theme-json.php
r57490 r57491 205 205 * @since 6.3.0 Added `column-count` property. 206 206 * @since 6.4.0 Added `writing-mode` property. 207 * @since 6.5.0 Added `aspect-ratio` property. 207 208 * 208 209 * @var array 209 210 */ 210 211 const PROPERTIES_METADATA = array( 212 'aspect-ratio' => array( 'dimensions', 'aspectRatio' ), 211 213 'background' => array( 'color', 'gradient' ), 212 214 'background-color' => array( 'color', 'background' ), … … 345 347 * @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`, 346 348 * `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`. 347 * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and348 * `background.backgroundSize` .349 * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`, 350 * `background.backgroundSize` and `dimensions.aspectRatio`. 349 351 * @var array 350 352 */ … … 381 383 'custom' => null, 382 384 'dimensions' => array( 383 'minHeight' => null, 385 'aspectRatio' => null, 386 'minHeight' => null, 384 387 ), 385 388 'layout' => array( … … 439 442 * @since 6.2.0 Added `outline`, and `minHeight` properties. 440 443 * @since 6.3.0 Added support for `typography.textColumns`. 444 * @since 6.5.0 Added support for `dimensions.aspectRatio`. 441 445 * 442 446 * @var array … … 459 463 ), 460 464 'dimensions' => array( 461 'minHeight' => null, 465 'aspectRatio' => null, 466 'minHeight' => null, 462 467 ), 463 468 'filter' => array( … … 576 581 * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`. 577 582 * @since 6.4.0 Added `background.backgroundImage`. 578 * @since 6.5.0 Added `background.backgroundSize` .583 * @since 6.5.0 Added `background.backgroundSize` and `dimensions.aspectRatio`. 579 584 * @var array 580 585 */ … … 590 595 array( 'color', 'button' ), 591 596 array( 'color', 'caption' ), 597 array( 'dimensions', 'aspectRatio' ), 592 598 array( 'dimensions', 'minHeight' ), 593 599 array( 'position', 'sticky' ), … … 1922 1928 * @since 5.9.0 Added the `$settings` and `$properties` parameters. 1923 1929 * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters. 1930 * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set. 1924 1931 * 1925 1932 * @param array $styles Styles to process. … … 1991 1998 */ 1992 1999 $value = wp_get_typography_font_size_value( array( 'size' => $value ) ); 2000 } 2001 2002 if ( 'aspect-ratio' === $css_property ) { 2003 // For aspect ratio to work, other dimensions rules must be unset. 2004 // This ensures that a fixed height does not override the aspect ratio. 2005 $declarations[] = array( 2006 'name' => 'min-height', 2007 'value' => 'unset', 2008 ); 1993 2009 } 1994 2010 -
trunk/src/wp-includes/style-engine/class-wp-style-engine.php
r57254 r57491 24 24 * @since 6.3.0 Added support for text-columns. 25 25 * @since 6.4.0 Added support for background.backgroundImage. 26 * @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat. 26 * @since 6.5.0 Added support for background.backgroundPosition, 27 * background.backgroundRepeat and dimensions.aspectRatio. 27 28 */ 28 29 #[AllowDynamicProperties] … … 191 192 ), 192 193 'dimensions' => array( 193 'minHeight' => array( 194 'aspectRatio' => array( 195 'property_keys' => array( 196 'default' => 'aspect-ratio', 197 ), 198 'path' => array( 'dimensions', 'aspectRatio' ), 199 'classnames' => array( 200 'has-aspect-ratio' => true, 201 ), 202 ), 203 'minHeight' => array( 194 204 'property_keys' => array( 195 205 'default' => 'min-height', -
trunk/tests/phpunit/tests/style-engine/styleEngine.php
r57254 r57491 185 185 ), 186 186 187 'inline_valid_aspect_ratio_style' => array( 188 'block_styles' => array( 189 'dimensions' => array( 190 'aspectRatio' => '4/3', 191 'minHeight' => 'unset', 192 ), 193 ), 194 'options' => null, 195 'expected_output' => array( 196 'css' => 'aspect-ratio:4/3;min-height:unset;', 197 'declarations' => array( 198 'aspect-ratio' => '4/3', 199 'min-height' => 'unset', 200 ), 201 'classnames' => 'has-aspect-ratio', 202 ), 203 ), 204 187 205 'inline_valid_shadow_style' => array( 188 206 'block_styles' => array( -
trunk/tests/phpunit/tests/theme/wpThemeJson.php
r57361 r57491 280 280 ), 281 281 'dimensions' => array( 282 'minHeight' => true, 282 'aspectRatio' => true, 283 'minHeight' => true, 283 284 ), 284 285 'position' => array( … … 317 318 ), 318 319 'dimensions' => array( 319 'minHeight' => true, 320 'aspectRatio' => true, 321 'minHeight' => true, 320 322 ), 321 323 'position' => array( … … 496 498 * @ticket 58549 497 499 * @ticket 58550 500 * @ticket 60365 498 501 */ 499 502 public function test_get_stylesheet() { … … 568 571 ), 569 572 'blocks' => array( 573 'core/cover' => array( 574 'dimensions' => array( 575 'aspectRatio' => '16/9', 576 ), 577 ), 570 578 'core/group' => array( 571 579 'color' => array( … … 646 654 647 655 $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; 648 $styles = '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)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}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{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block- group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}';656 $styles = '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)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}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{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-cover{min-height: unset;aspect-ratio: 16/9;}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}'; 649 657 $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; 650 658 $all = $variables . $styles . $presets;
Note: See TracChangeset
for help on using the changeset viewer.