Skip to content

Commit b5ee9da

Browse files
aaronrobertshawandrewserongramonjdkarthick-murugan
authored
Borders: Stabilize border block supports within block processing (#66918)
Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: karthick-murugan <[email protected]>
1 parent 7d8dee1 commit b5ee9da

File tree

12 files changed

+510
-141
lines changed

12 files changed

+510
-141
lines changed

‎backport-changelog/6.8/7069.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
https://github.com/WordPress/wordpress-develop/pull/7069
22

33
* https://github.com/WordPress/gutenberg/pull/63401
4+
* https://github.com/WordPress/gutenberg/pull/66918

‎lib/block-supports/border.php‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function gutenberg_register_border_support( $block_type ) {
1717
$block_type->attributes = array();
1818
}
1919

20-
if ( block_has_support( $block_type, array( '__experimentalBorder' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
20+
if ( block_has_support( $block_type, array( 'border' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
2121
$block_type->attributes['style'] = array(
2222
'type' => 'object',
2323
);
@@ -52,7 +52,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
5252
if (
5353
gutenberg_has_border_feature_support( $block_type, 'radius' ) &&
5454
isset( $block_attributes['style']['border']['radius'] ) &&
55-
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'radius' )
55+
! wp_should_skip_block_supports_serialization( $block_type, 'border', 'radius' )
5656
) {
5757
$border_radius = $block_attributes['style']['border']['radius'];
5858

@@ -67,7 +67,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
6767
if (
6868
gutenberg_has_border_feature_support( $block_type, 'style' ) &&
6969
isset( $block_attributes['style']['border']['style'] ) &&
70-
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' )
70+
! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' )
7171
) {
7272
$border_block_styles['style'] = $block_attributes['style']['border']['style'];
7373
}
@@ -76,7 +76,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
7676
if (
7777
$has_border_width_support &&
7878
isset( $block_attributes['style']['border']['width'] ) &&
79-
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
79+
! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' )
8080
) {
8181
$border_width = $block_attributes['style']['border']['width'];
8282

@@ -91,7 +91,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
9191
// Border color.
9292
if (
9393
$has_border_color_support &&
94-
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
94+
! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' )
9595
) {
9696
$preset_border_color = array_key_exists( 'borderColor', $block_attributes ) ? "var:preset|color|{$block_attributes['borderColor']}" : null;
9797
$custom_border_color = $block_attributes['style']['border']['color'] ?? null;
@@ -103,9 +103,9 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
103103
foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) {
104104
$border = $block_attributes['style']['border'][ $side ] ?? null;
105105
$border_side_values = array(
106-
'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ? $border['width'] : null,
107-
'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) ? $border['color'] : null,
108-
'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ? $border['style'] : null,
106+
'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' ) ? $border['width'] : null,
107+
'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' ) ? $border['color'] : null,
108+
'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' ) ? $border['style'] : null,
109109
);
110110
$border_block_styles[ $side ] = $border_side_values;
111111
}
@@ -129,9 +129,9 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
129129
/**
130130
* Checks whether the current block type supports the border feature requested.
131131
*
132-
* If the `__experimentalBorder` support flag is a boolean `true` all border
132+
* If the `border` support flag is a boolean `true` all border
133133
* support features are available. Otherwise, the specific feature's support
134-
* flag nested under `experimentalBorder` must be enabled for the feature
134+
* flag nested under `border` must be enabled for the feature
135135
* to be opted into.
136136
*
137137
* @param WP_Block_Type $block_type Block type to check for support.
@@ -141,17 +141,17 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
141141
* @return boolean Whether or not the feature is supported.
142142
*/
143143
function gutenberg_has_border_feature_support( $block_type, $feature, $default_value = false ) {
144-
// Check if all border support features have been opted into via `"__experimentalBorder": true`.
144+
// Check if all border support features have been opted into via `"border": true`.
145145
if ( $block_type instanceof WP_Block_Type ) {
146-
$block_type_supports_border = $block_type->supports['__experimentalBorder'] ?? $default_value;
146+
$block_type_supports_border = $block_type->supports['border'] ?? $default_value;
147147
if ( true === $block_type_supports_border ) {
148148
return true;
149149
}
150150
}
151151

152152
// Check if the specific feature has been opted into individually
153-
// via nested flag under `__experimentalBorder`.
154-
return block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default_value );
153+
// via nested flag under `border`.
154+
return block_has_support( $block_type, array( 'border', $feature ), $default_value );
155155
}
156156

157157
// Register the block support.

‎lib/class-wp-theme-json-gutenberg.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -615,10 +615,10 @@ class WP_Theme_JSON_Gutenberg {
615615
* @var string[]
616616
*/
617617
const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
618-
'__experimentalBorder' => 'border',
619-
'color' => 'color',
620-
'spacing' => 'spacing',
621-
'typography' => 'typography',
618+
'border' => 'border',
619+
'color' => 'color',
620+
'spacing' => 'spacing',
621+
'typography' => 'typography',
622622
);
623623

624624
/**

‎lib/compat/wordpress-6.8/blocks.php‎

Lines changed: 73 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,94 @@
66
*/
77

88
/**
9-
* Filters the block type arguments during registration to stabilize experimental block supports.
9+
* Filters the block type arguments during registration to stabilize
10+
* experimental block supports.
1011
*
11-
* This is a temporary compatibility shim as the approach in core is for this to be handled
12-
* within the WP_Block_Type class rather than requiring a filter.
12+
* This is a temporary compatibility shim as the approach in core is for this
13+
* to be handled within the WP_Block_Type class rather than requiring a filter.
1314
*
1415
* @param array $args Array of arguments for registering a block type.
1516
* @return array Array of arguments for registering a block type.
1617
*/
1718
function gutenberg_stabilize_experimental_block_supports( $args ) {
18-
if ( empty( $args['supports']['typography'] ) ) {
19+
if ( empty( $args['supports'] ) ) {
1920
return $args;
2021
}
2122

22-
$experimental_typography_supports_to_stable = array(
23-
'__experimentalFontFamily' => 'fontFamily',
24-
'__experimentalFontStyle' => 'fontStyle',
25-
'__experimentalFontWeight' => 'fontWeight',
26-
'__experimentalLetterSpacing' => 'letterSpacing',
27-
'__experimentalTextDecoration' => 'textDecoration',
28-
'__experimentalTextTransform' => 'textTransform',
23+
$experimental_to_stable_keys = array(
24+
'typography' => array(
25+
'__experimentalFontFamily' => 'fontFamily',
26+
'__experimentalFontStyle' => 'fontStyle',
27+
'__experimentalFontWeight' => 'fontWeight',
28+
'__experimentalLetterSpacing' => 'letterSpacing',
29+
'__experimentalTextDecoration' => 'textDecoration',
30+
'__experimentalTextTransform' => 'textTransform',
31+
),
32+
'__experimentalBorder' => 'border',
2933
);
3034

31-
$current_typography_supports = $args['supports']['typography'];
32-
$stable_typography_supports = array();
35+
$updated_supports = array();
36+
foreach ( $args['supports'] as $support => $config ) {
37+
// Add the support's config as is when it's not in need of stabilization.
38+
if ( empty( $experimental_to_stable_keys[ $support ] ) ) {
39+
$updated_supports[ $support ] = $config;
40+
continue;
41+
}
42+
43+
// Stabilize the support's key if needed e.g. __experimentalBorder => border.
44+
if ( is_string( $experimental_to_stable_keys[ $support ] ) ) {
45+
$stabilized_key = $experimental_to_stable_keys[ $support ];
46+
47+
// If there is no stabilized key present, use the experimental config as is.
48+
if ( ! array_key_exists( $stabilized_key, $args['supports'] ) ) {
49+
$updated_supports[ $stabilized_key ] = $config;
50+
continue;
51+
}
52+
53+
/*
54+
* Determine the order of keys, so the last defined can be preferred.
55+
*
56+
* The reason for preferring the last defined key is that after filters
57+
* are applied, the last inserted key is likely the most up-to-date value.
58+
* We cannot determine with certainty which value was "last modified" so
59+
* the insertion order is the best guess. The extreme edge case of multiple
60+
* filters tweaking the same support property will become less over time as
61+
* extenders migrate existing blocks and plugins to stable keys.
62+
*/
63+
$key_positions = array_flip( array_keys( $args['supports'] ) );
64+
$experimental_index = $key_positions[ $support ] ?? -1;
65+
$stabilized_index = $key_positions[ $stabilized_key ] ?? -1;
66+
$experimental_first = $experimental_index < $stabilized_index;
67+
68+
// Update support config, prefer the last defined value.
69+
if ( is_array( $config ) ) {
70+
$updated_supports[ $stabilized_key ] = $experimental_first
71+
? array_merge( $config, $args['supports'][ $stabilized_key ] )
72+
: array_merge( $args['supports'][ $stabilized_key ], $config );
73+
} else {
74+
$updated_supports[ $stabilized_key ] = $experimental_first
75+
? $args['supports'][ $stabilized_key ]
76+
: $config;
77+
}
78+
79+
continue;
80+
}
3381

34-
foreach ( $current_typography_supports as $key => $value ) {
35-
if ( array_key_exists( $key, $experimental_typography_supports_to_stable ) ) {
36-
$stable_typography_supports[ $experimental_typography_supports_to_stable[ $key ] ] = $value;
37-
} else {
38-
$stable_typography_supports[ $key ] = $value;
82+
// Stabilize individual support feature keys e.g. __experimentalFontFamily => fontFamily.
83+
if ( is_array( $experimental_to_stable_keys[ $support ] ) ) {
84+
$stable_support_config = array();
85+
foreach ( $config as $key => $value ) {
86+
if ( array_key_exists( $key, $experimental_to_stable_keys[ $support ] ) ) {
87+
$stable_support_config[ $experimental_to_stable_keys[ $support ][ $key ] ] = $value;
88+
} else {
89+
$stable_support_config[ $key ] = $value;
90+
}
91+
}
92+
$updated_supports[ $support ] = $stable_support_config;
3993
}
4094
}
4195

42-
$args['supports']['typography'] = $stable_typography_supports;
96+
$args['supports'] = $updated_supports;
4397

4498
return $args;
4599
}

‎packages/block-editor/src/components/global-styles/test/use-global-styles-output.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -855,7 +855,7 @@ describe( 'global styles renderer', () => {
855855

856856
it( 'should return block selectors data with old experimental selectors', () => {
857857
const imageSupports = {
858-
__experimentalBorder: {
858+
border: {
859859
radius: true,
860860
__experimentalSelector: 'img, .crop-area',
861861
},

‎packages/block-editor/src/components/global-styles/use-global-styles-output.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const ELEMENT_CLASS_NAMES = {
4747
// List of block support features that can have their related styles
4848
// generated under their own feature level selector rather than the block's.
4949
const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
50-
__experimentalBorder: 'border',
50+
border: 'border',
5151
color: 'color',
5252
spacing: 'spacing',
5353
typography: 'typography',

‎packages/block-editor/src/hooks/border.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
import { store as blockEditorStore } from '../store';
3232
import { __ } from '@wordpress/i18n';
3333

34-
export const BORDER_SUPPORT_KEY = '__experimentalBorder';
34+
export const BORDER_SUPPORT_KEY = 'border';
3535
export const SHADOW_SUPPORT_KEY = 'shadow';
3636

3737
const getColorByProperty = ( colors, property, value ) => {

‎packages/block-editor/src/hooks/supports.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Platform } from '@wordpress/element';
66

77
const ALIGN_SUPPORT_KEY = 'align';
88
const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
9-
const BORDER_SUPPORT_KEY = '__experimentalBorder';
9+
const BORDER_SUPPORT_KEY = 'border';
1010
const COLOR_SUPPORT_KEY = 'color';
1111
const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
1212
const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';

‎packages/blocks/src/api/constants.js‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,12 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
5858
},
5959
borderColor: {
6060
value: [ 'border', 'color' ],
61-
support: [ '__experimentalBorder', 'color' ],
61+
support: [ 'border', 'color' ],
6262
useEngine: true,
6363
},
6464
borderRadius: {
6565
value: [ 'border', 'radius' ],
66-
support: [ '__experimentalBorder', 'radius' ],
66+
support: [ 'border', 'radius' ],
6767
properties: {
6868
borderTopLeftRadius: 'topLeft',
6969
borderTopRightRadius: 'topRight',
@@ -74,72 +74,72 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
7474
},
7575
borderStyle: {
7676
value: [ 'border', 'style' ],
77-
support: [ '__experimentalBorder', 'style' ],
77+
support: [ 'border', 'style' ],
7878
useEngine: true,
7979
},
8080
borderWidth: {
8181
value: [ 'border', 'width' ],
82-
support: [ '__experimentalBorder', 'width' ],
82+
support: [ 'border', 'width' ],
8383
useEngine: true,
8484
},
8585
borderTopColor: {
8686
value: [ 'border', 'top', 'color' ],
87-
support: [ '__experimentalBorder', 'color' ],
87+
support: [ 'border', 'color' ],
8888
useEngine: true,
8989
},
9090
borderTopStyle: {
9191
value: [ 'border', 'top', 'style' ],
92-
support: [ '__experimentalBorder', 'style' ],
92+
support: [ 'border', 'style' ],
9393
useEngine: true,
9494
},
9595
borderTopWidth: {
9696
value: [ 'border', 'top', 'width' ],
97-
support: [ '__experimentalBorder', 'width' ],
97+
support: [ 'border', 'width' ],
9898
useEngine: true,
9999
},
100100
borderRightColor: {
101101
value: [ 'border', 'right', 'color' ],
102-
support: [ '__experimentalBorder', 'color' ],
102+
support: [ 'border', 'color' ],
103103
useEngine: true,
104104
},
105105
borderRightStyle: {
106106
value: [ 'border', 'right', 'style' ],
107-
support: [ '__experimentalBorder', 'style' ],
107+
support: [ 'border', 'style' ],
108108
useEngine: true,
109109
},
110110
borderRightWidth: {
111111
value: [ 'border', 'right', 'width' ],
112-
support: [ '__experimentalBorder', 'width' ],
112+
support: [ 'border', 'width' ],
113113
useEngine: true,
114114
},
115115
borderBottomColor: {
116116
value: [ 'border', 'bottom', 'color' ],
117-
support: [ '__experimentalBorder', 'color' ],
117+
support: [ 'border', 'color' ],
118118
useEngine: true,
119119
},
120120
borderBottomStyle: {
121121
value: [ 'border', 'bottom', 'style' ],
122-
support: [ '__experimentalBorder', 'style' ],
122+
support: [ 'border', 'style' ],
123123
useEngine: true,
124124
},
125125
borderBottomWidth: {
126126
value: [ 'border', 'bottom', 'width' ],
127-
support: [ '__experimentalBorder', 'width' ],
127+
support: [ 'border', 'width' ],
128128
useEngine: true,
129129
},
130130
borderLeftColor: {
131131
value: [ 'border', 'left', 'color' ],
132-
support: [ '__experimentalBorder', 'color' ],
132+
support: [ 'border', 'color' ],
133133
useEngine: true,
134134
},
135135
borderLeftStyle: {
136136
value: [ 'border', 'left', 'style' ],
137-
support: [ '__experimentalBorder', 'style' ],
137+
support: [ 'border', 'style' ],
138138
useEngine: true,
139139
},
140140
borderLeftWidth: {
141141
value: [ 'border', 'left', 'width' ],
142-
support: [ '__experimentalBorder', 'width' ],
142+
support: [ 'border', 'width' ],
143143
useEngine: true,
144144
},
145145
color: {
@@ -298,11 +298,14 @@ export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = {
298298
'spacing.spacingSizes': true,
299299
};
300300

301-
export const TYPOGRAPHY_SUPPORTS_EXPERIMENTAL_TO_STABLE = {
302-
__experimentalFontFamily: 'fontFamily',
303-
__experimentalFontStyle: 'fontStyle',
304-
__experimentalFontWeight: 'fontWeight',
305-
__experimentalLetterSpacing: 'letterSpacing',
306-
__experimentalTextDecoration: 'textDecoration',
307-
__experimentalTextTransform: 'textTransform',
301+
export const EXPERIMENTAL_TO_STABLE_KEYS = {
302+
typography: {
303+
__experimentalFontFamily: 'fontFamily',
304+
__experimentalFontStyle: 'fontStyle',
305+
__experimentalFontWeight: 'fontWeight',
306+
__experimentalLetterSpacing: 'letterSpacing',
307+
__experimentalTextDecoration: 'textDecoration',
308+
__experimentalTextTransform: 'textTransform',
309+
},
310+
__experimentalBorder: 'border',
308311
};

0 commit comments

Comments
 (0)