Skip to content

Commit 5ca0471

Browse files
ramonjdramonjd
committed
Block Supports: Add width to dimensions supports
This PR introduces `dimensions.width` to the list of available block supports. This block support enables, in the future, the removal of the custom width and height controls in blocks such as Button, Column and many others in favor of customizations via block supports. Props aaronrobertshaw, andrewserong, ramonopoly, welcher, mamaduka, wildworks, youknowriad, isabel_brison. Fixes #64200. git-svn-id: https://develop.svn.wordpress.org/trunk@61619 602fd350-edb4-49c9-b593-d223f7449a82
1 parent af57119 commit 5ca0471

5 files changed

Lines changed: 106 additions & 12 deletions

File tree

‎src/wp-includes/block-supports/dimensions.php‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,27 +51,32 @@ function wp_register_dimensions_support( $block_type ) {
5151
* @return array Block dimensions CSS classes and inline styles.
5252
*/
5353
function wp_apply_dimensions_support( $block_type, $block_attributes ) {
54-
if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) {
55-
return array();
56-
}
57-
5854
$attributes = array();
5955

60-
// Width support to be added in near future.
56+
if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) {
57+
return $attributes;
58+
}
6159

62-
$has_min_height_support = block_has_support( $block_type, array( 'dimensions', 'minHeight' ), false );
63-
$block_styles = $block_attributes['style'] ?? null;
60+
$block_styles = $block_attributes['style'] ?? null;
6461

6562
if ( ! $block_styles ) {
6663
return $attributes;
6764
}
6865

69-
$skip_min_height = wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'minHeight' );
70-
$dimensions_block_styles = array();
71-
$dimensions_block_styles['minHeight'] = null;
72-
if ( $has_min_height_support && ! $skip_min_height ) {
73-
$dimensions_block_styles['minHeight'] = $block_styles['dimensions']['minHeight'] ?? null;
66+
$dimensions_block_styles = array();
67+
$supported_features = array( 'minHeight', 'width' );
68+
69+
foreach ( $supported_features as $feature ) {
70+
$has_support = block_has_support( $block_type, array( 'dimensions', $feature ), false );
71+
$skip_serialization = wp_should_skip_block_supports_serialization( $block_type, 'dimensions', $feature );
72+
73+
$dimensions_block_styles[ $feature ] = null;
74+
75+
if ( $has_support && ! $skip_serialization ) {
76+
$dimensions_block_styles[ $feature ] = $block_styles['dimensions'][ $feature ] ?? null;
77+
}
7478
}
79+
7580
$styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
7681

7782
if ( ! empty( $styles['css'] ) ) {

‎src/wp-includes/class-wp-theme-json.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ class WP_Theme_JSON {
237237
* @since 6.5.0 Added `aspect-ratio` property.
238238
* @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
239239
* @since 6.7.0 Added `background-attachment` property.
240+
* @since 7.0.0 Added `dimensions.width`.
240241
* @var array
241242
*/
242243
const PROPERTIES_METADATA = array(
@@ -301,6 +302,7 @@ class WP_Theme_JSON {
301302
'text-transform' => array( 'typography', 'textTransform' ),
302303
'filter' => array( 'filter', 'duotone' ),
303304
'box-shadow' => array( 'shadow' ),
305+
'width' => array( 'dimensions', 'width' ),
304306
'writing-mode' => array( 'typography', 'writingMode' ),
305307
);
306308

@@ -396,6 +398,7 @@ class WP_Theme_JSON {
396398
* 'typography.defaultFontSizes', and 'spacing.defaultSpacingSizes'.
397399
* @since 6.9.0 Added support for `border.radiusSizes`.
398400
* @since 7.0.0 Added type markers to the schema for boolean values.
401+
* Added support for `dimensions.width`.
399402
* @var array
400403
*/
401404
const VALID_SETTINGS = array(
@@ -435,6 +438,7 @@ class WP_Theme_JSON {
435438
'aspectRatios' => null,
436439
'defaultAspectRatios' => null,
437440
'minHeight' => null,
441+
'width' => null,
438442
),
439443
'layout' => array(
440444
'contentSize' => null,
@@ -528,6 +532,7 @@ class WP_Theme_JSON {
528532
* @since 6.3.0 Added support for `typography.textColumns`.
529533
* @since 6.5.0 Added support for `dimensions.aspectRatio`.
530534
* @since 6.6.0 Added `background` sub properties to top-level only.
535+
* @since 7.0.0 Added support for `dimensions.width`.
531536
* @var array
532537
*/
533538
const VALID_STYLES = array(
@@ -556,6 +561,7 @@ class WP_Theme_JSON {
556561
'dimensions' => array(
557562
'aspectRatio' => null,
558563
'minHeight' => null,
564+
'width' => null,
559565
),
560566
'filter' => array(
561567
'duotone' => null,
@@ -655,11 +661,13 @@ class WP_Theme_JSON {
655661
* generated under their own feature level selector rather than the block's.
656662
*
657663
* @since 6.1.0
664+
* @since 7.0.0 Added support for `dimensions`.
658665
* @var string[]
659666
*/
660667
const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
661668
'__experimentalBorder' => 'border',
662669
'color' => 'color',
670+
'dimensions' => 'dimensions',
663671
'spacing' => 'spacing',
664672
'typography' => 'typography',
665673
);
@@ -764,6 +772,7 @@ public static function get_element_class_name( $element ) {
764772
* @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
765773
* @since 6.4.0 Added `background.backgroundImage`.
766774
* @since 6.5.0 Added `background.backgroundSize` and `dimensions.aspectRatio`.
775+
* @since 7.0.0 Added `dimensions.width`.
767776
* @var array
768777
*/
769778
const APPEARANCE_TOOLS_OPT_INS = array(
@@ -779,6 +788,7 @@ public static function get_element_class_name( $element ) {
779788
array( 'color', 'caption' ),
780789
array( 'dimensions', 'aspectRatio' ),
781790
array( 'dimensions', 'minHeight' ),
791+
array( 'dimensions', 'width' ),
782792
array( 'position', 'sticky' ),
783793
array( 'spacing', 'blockGap' ),
784794
array( 'spacing', 'margin' ),

‎src/wp-includes/style-engine/class-wp-style-engine.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,12 @@ final class WP_Style_Engine {
219219
'spacing' => '--wp--preset--spacing--$slug',
220220
),
221221
),
222+
'width' => array(
223+
'property_keys' => array(
224+
'default' => 'width',
225+
),
226+
'path' => array( 'dimensions', 'width' ),
227+
),
222228
),
223229
'spacing' => array(
224230
'padding' => array(

‎tests/phpunit/tests/block-supports/wpApplyDimensionsSupport.php‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,4 +100,75 @@ public function data_minimum_height_block_support() {
100100
),
101101
);
102102
}
103+
104+
/**
105+
* Tests that width block support works as expected.
106+
*
107+
* @ticket 64200
108+
*
109+
* @covers ::wp_apply_dimensions_support
110+
*
111+
* @dataProvider data_width_block_support
112+
*
113+
* @param string $block_name The test block name to register.
114+
* @param mixed $dimensions The dimensions block support settings.
115+
* @param mixed $expected The expected results.
116+
*/
117+
public function test_width_block_support( $block_name, $dimensions, $expected ) {
118+
$this->test_block_name = $block_name;
119+
register_block_type(
120+
$this->test_block_name,
121+
array(
122+
'api_version' => 2,
123+
'attributes' => array(
124+
'style' => array(
125+
'type' => 'object',
126+
),
127+
),
128+
'supports' => array(
129+
'dimensions' => $dimensions,
130+
),
131+
)
132+
);
133+
$registry = WP_Block_Type_Registry::get_instance();
134+
$block_type = $registry->get_registered( $this->test_block_name );
135+
$block_attrs = array(
136+
'style' => array(
137+
'dimensions' => array(
138+
'width' => '300px',
139+
),
140+
),
141+
);
142+
143+
$actual = wp_apply_dimensions_support( $block_type, $block_attrs );
144+
145+
$this->assertSame( $expected, $actual );
146+
}
147+
148+
/**
149+
* Data provider.
150+
*
151+
* @return array
152+
*/
153+
public function data_width_block_support() {
154+
return array(
155+
'style is applied' => array(
156+
'block_name' => 'test/width-style-is-applied',
157+
'dimensions' => array(
158+
'width' => true,
159+
),
160+
'expected' => array(
161+
'style' => 'width:300px;',
162+
),
163+
),
164+
'style output is skipped when individual feature serialization is skipped' => array(
165+
'block_name' => 'test/width-with-individual-skipped-serialization-block-supports',
166+
'dimensions' => array(
167+
'width' => true,
168+
'__experimentalSkipSerialization' => array( 'width' ),
169+
),
170+
'expected' => array(),
171+
),
172+
);
173+
}
103174
}

‎tests/phpunit/tests/theme/wpThemeJson.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,7 @@ public function test_get_settings_appearance_true_opts_in() {
281281
'dimensions' => array(
282282
'aspectRatio' => true,
283283
'minHeight' => true,
284+
'width' => true,
284285
),
285286
'position' => array(
286287
'sticky' => true,
@@ -320,6 +321,7 @@ public function test_get_settings_appearance_true_opts_in() {
320321
'dimensions' => array(
321322
'aspectRatio' => true,
322323
'minHeight' => true,
324+
'width' => true,
323325
),
324326
'position' => array(
325327
'sticky' => true,

0 commit comments

Comments
 (0)