Skip to content

Commit d0f45af

Browse files
aaronrobertshawramonjdtalldan
authored and
Gulamdastgir-Momin
committed
Block Supports: Revert stabilization of typography, border, skip serialization and default controls supports (WordPress#68163)
* Revert "Global Styles: Fix handling of booleans when stabilizing block supports (WordPress#67552)" This reverts commit 4335c45. * Revert "Block Supports: Extend stabilization to common experimental block support flags (WordPress#67018)" This reverts commit 5513d7a. * Revert "Borders: Stabilize border block supports within block processing (WordPress#66918)" This reverts commit b5ee9da. * Revert "Process Block Type: Copy deprecation to a new object instead of mutating when stabilizing supports (WordPress#66849)" This reverts commit 457fcf8. * Revert "Typography: Stabilize typography block supports within block processing (WordPress#63401)" This reverts commit 48341a1. Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>
1 parent 12837e1 commit d0f45af

File tree

25 files changed

+139
-1437
lines changed

25 files changed

+139
-1437
lines changed

‎backport-changelog/6.8/7069.md‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎docs/explanations/architecture/styles.md‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,8 @@ The user may change the state of this block by applying different styles: a text
3737
After some user modifications to the block, the initial markup may become something like this:
3838

3939
```html
40-
<p
41-
class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
42-
style="line-height: 1em"
43-
></p>
40+
<p class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
41+
style="line-height: 1em"></p>
4442
```
4543

4644
This is what we refer to as "user-provided block styles", also know as "local styles" or "serialized styles". Essentially, each tool (font size, color, etc) ends up adding some classes and/or inline styles to the block markup. The CSS styling for these classes is part of the block, global, or theme stylesheets.
@@ -125,7 +123,7 @@ The block supports API only serializes the font size value to the wrapper, resul
125123

126124
This is an active area of work you can follow [in the tracking issue](https://github.com/WordPress/gutenberg/issues/38167). The linked proposal is exploring a different way to serialize the user changes: instead of each block support serializing its own data (for example, classes such as `has-small-font-size`, `has-green-color`) the idea is the block would get a single class instead (for example, `wp-style-UUID`) and the CSS styling for that class will be generated in the server by WordPress.
127125

128-
While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `skipSerialization`. For example:
126+
While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `__experimentalSkipSerialization`. For example:
129127

130128
```json
131129
{
@@ -134,15 +132,15 @@ While work continues in that proposal, there's an escape hatch, an experimental
134132
"supports": {
135133
"typography": {
136134
"fontSize": true,
137-
"skipSerialization": true
135+
"__experimentalSkipSerialization": true
138136
}
139137
}
140138
}
141139
```
142140

143141
This means that the typography block support will do all of the things (create a UI control, bind the block attribute to the control, etc) except serializing the user values into the HTML markup. The classes and inline styles will not be automatically applied to the wrapper and it is the block author's responsibility to implement this in the `edit`, `save`, and `render_callback` functions. See [this issue](https://github.com/WordPress/gutenberg/issues/28913) for examples of how it was done for some blocks provided by WordPress.
144142

145-
Note that, if `skipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc).
143+
Note that, if `__experimentalSkipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc).
146144

147145
To enable for a _single_ property only, you may use an array to declare which properties are to be skipped. In the example below, only `fontSize` will skip serialization, leaving other items within the `typography` group (e.g. `lineHeight`, `fontFamily` .etc) unaffected.
148146

@@ -154,7 +152,7 @@ To enable for a _single_ property only, you may use an array to declare which pr
154152
"typography": {
155153
"fontSize": true,
156154
"lineHeight": true,
157-
"skipSerialization": [ "fontSize" ]
155+
"__experimentalSkipSerialization": [ "fontSize" ]
158156
}
159157
}
160158
}
@@ -475,7 +473,7 @@ If blocks do this, they need to be registered in the server using the `block.jso
475473

476474
Every chunk of styles can only use a single selector.
477475

478-
This is particularly relevant if the block is using `skipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more.
476+
This is particularly relevant if the block is using `__experimentalSkipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more.
479477

480478
#### 3. **Only a single property per block**
481479

‎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( 'border' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
20+
if ( block_has_support( $block_type, array( '__experimentalBorder' ) ) && ! 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, 'border', 'radius' )
55+
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', '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, 'border', 'style' )
70+
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', '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, 'border', 'width' )
79+
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', '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, 'border', 'color' )
94+
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', '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, '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,
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,
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 `border` support flag is a boolean `true` all border
132+
* If the `__experimentalBorder` support flag is a boolean `true` all border
133133
* support features are available. Otherwise, the specific feature's support
134-
* flag nested under `border` must be enabled for the feature
134+
* flag nested under `experimentalBorder` 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 `"border": true`.
144+
// Check if all border support features have been opted into via `"__experimentalBorder": true`.
145145
if ( $block_type instanceof WP_Block_Type ) {
146-
$block_type_supports_border = $block_type->supports['border'] ?? $default_value;
146+
$block_type_supports_border = $block_type->supports['__experimentalBorder'] ?? $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 `border`.
154-
return block_has_support( $block_type, array( 'border', $feature ), $default_value );
153+
// via nested flag under `__experimentalBorder`.
154+
return block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default_value );
155155
}
156156

157157
// Register the block support.

‎lib/block-supports/typography.php‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,16 @@ function gutenberg_register_typography_support( $block_type ) {
2020
return;
2121
}
2222

23-
$has_font_family_support = $typography_supports['fontFamily'] ?? false;
23+
$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
2424
$has_font_size_support = $typography_supports['fontSize'] ?? false;
25-
$has_font_style_support = $typography_supports['fontStyle'] ?? false;
26-
$has_font_weight_support = $typography_supports['fontWeight'] ?? false;
27-
$has_letter_spacing_support = $typography_supports['letterSpacing'] ?? false;
25+
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
26+
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
27+
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
2828
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
2929
$has_text_align_support = $typography_supports['textAlign'] ?? false;
3030
$has_text_columns_support = $typography_supports['textColumns'] ?? false;
31-
$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
32-
$has_text_transform_support = $typography_supports['textTransform'] ?? false;
31+
$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
32+
$has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false;
3333
$has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;
3434

3535
$has_typography_support = $has_font_family_support
@@ -91,16 +91,16 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
9191
return array();
9292
}
9393

94-
$has_font_family_support = $typography_supports['fontFamily'] ?? false;
94+
$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
9595
$has_font_size_support = $typography_supports['fontSize'] ?? false;
96-
$has_font_style_support = $typography_supports['fontStyle'] ?? false;
97-
$has_font_weight_support = $typography_supports['fontWeight'] ?? false;
98-
$has_letter_spacing_support = $typography_supports['letterSpacing'] ?? false;
96+
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
97+
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
98+
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
9999
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
100100
$has_text_align_support = $typography_supports['textAlign'] ?? false;
101101
$has_text_columns_support = $typography_supports['textColumns'] ?? false;
102-
$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
103-
$has_text_transform_support = $typography_supports['textTransform'] ?? false;
102+
$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
103+
$has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false;
104104
$has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;
105105

106106
// Whether to skip individual block support features.

‎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-
'border' => 'border',
619-
'color' => 'color',
620-
'spacing' => 'spacing',
621-
'typography' => 'typography',
618+
'__experimentalBorder' => 'border',
619+
'color' => 'color',
620+
'spacing' => 'spacing',
621+
'typography' => 'typography',
622622
);
623623

624624
/**

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

Lines changed: 0 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -5,151 +5,6 @@
55
* @package gutenberg
66
*/
77

8-
/**
9-
* Filters the block type arguments during registration to stabilize
10-
* experimental block supports.
11-
*
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.
14-
*
15-
* @param array $args Array of arguments for registering a block type.
16-
* @return array Array of arguments for registering a block type.
17-
*/
18-
function gutenberg_stabilize_experimental_block_supports( $args ) {
19-
if ( empty( $args['supports'] ) ) {
20-
return $args;
21-
}
22-
23-
$experimental_supports_map = array( '__experimentalBorder' => 'border' );
24-
$common_experimental_properties = array(
25-
'__experimentalDefaultControls' => 'defaultControls',
26-
'__experimentalSkipSerialization' => 'skipSerialization',
27-
);
28-
$experimental_support_properties = array(
29-
'typography' => array(
30-
'__experimentalFontFamily' => 'fontFamily',
31-
'__experimentalFontStyle' => 'fontStyle',
32-
'__experimentalFontWeight' => 'fontWeight',
33-
'__experimentalLetterSpacing' => 'letterSpacing',
34-
'__experimentalTextDecoration' => 'textDecoration',
35-
'__experimentalTextTransform' => 'textTransform',
36-
),
37-
);
38-
$done = array();
39-
40-
$updated_supports = array();
41-
foreach ( $args['supports'] as $support => $config ) {
42-
/*
43-
* If this support config has already been stabilized, skip it.
44-
* A stable support key occurring after an experimental key, gets
45-
* stabilized then so that the two configs can be merged effectively.
46-
*/
47-
if ( isset( $done[ $support ] ) ) {
48-
continue;
49-
}
50-
51-
$stable_support_key = $experimental_supports_map[ $support ] ?? $support;
52-
53-
/*
54-
* Use the support's config as is when it's not in need of stabilization.
55-
*
56-
* A support does not need stabilization if:
57-
* - The support key doesn't need stabilization AND
58-
* - Either:
59-
* - The config isn't an array, so can't have experimental properties OR
60-
* - The config is an array but has no experimental properties to stabilize.
61-
*/
62-
if ( $support === $stable_support_key &&
63-
( ! is_array( $config ) ||
64-
( ! isset( $experimental_support_properties[ $stable_support_key ] ) &&
65-
empty( array_intersect_key( $common_experimental_properties, $config ) )
66-
)
67-
)
68-
) {
69-
$updated_supports[ $support ] = $config;
70-
continue;
71-
}
72-
73-
$stabilize_config = function ( $unstable_config, $stable_support_key ) use ( $experimental_support_properties, $common_experimental_properties ) {
74-
if ( ! is_array( $unstable_config ) ) {
75-
return $unstable_config;
76-
}
77-
78-
$stable_config = array();
79-
foreach ( $unstable_config as $key => $value ) {
80-
// Get stable key from support-specific map, common properties map, or keep original.
81-
$stable_key = $experimental_support_properties[ $stable_support_key ][ $key ] ??
82-
$common_experimental_properties[ $key ] ??
83-
$key;
84-
85-
$stable_config[ $stable_key ] = $value;
86-
87-
/*
88-
* The `__experimentalSkipSerialization` key needs to be kept until
89-
* WP 6.8 becomes the minimum supported version. This is due to the
90-
* core `wp_should_skip_block_supports_serialization` function only
91-
* checking for `__experimentalSkipSerialization` in earlier versions.
92-
*/
93-
if ( '__experimentalSkipSerialization' === $key || 'skipSerialization' === $key ) {
94-
$stable_config['__experimentalSkipSerialization'] = $value;
95-
}
96-
}
97-
return $stable_config;
98-
};
99-
100-
// Stabilize the config value.
101-
$stable_config = is_array( $config ) ? $stabilize_config( $config, $stable_support_key ) : $config;
102-
103-
/*
104-
* If a plugin overrides the support config with the `register_block_type_args`
105-
* filter, both experimental and stable configs may be present. In that case,
106-
* use the order keys are defined in to determine the final value.
107-
* - If config is an array, merge the arrays in their order of definition.
108-
* - If config is not an array, use the value defined last.
109-
*
110-
* The reason for preferring the last defined key is that after filters
111-
* are applied, the last inserted key is likely the most up-to-date value.
112-
* We cannot determine with certainty which value was "last modified" so
113-
* the insertion order is the best guess. The extreme edge case of multiple
114-
* filters tweaking the same support property will become less over time as
115-
* extenders migrate existing blocks and plugins to stable keys.
116-
*/
117-
if ( $support !== $stable_support_key && isset( $args['supports'][ $stable_support_key ] ) ) {
118-
$key_positions = array_flip( array_keys( $args['supports'] ) );
119-
$experimental_first =
120-
( $key_positions[ $support ] ?? PHP_INT_MAX ) <
121-
( $key_positions[ $stable_support_key ] ?? PHP_INT_MAX );
122-
123-
/*
124-
* To merge the alternative support config effectively, it also needs to be
125-
* stabilized before merging to keep stabilized and experimental flags in
126-
* sync.
127-
*/
128-
$args['supports'][ $stable_support_key ] = $stabilize_config( $args['supports'][ $stable_support_key ], $stable_support_key );
129-
// Prevents reprocessing this support as it was stabilized above.
130-
$done[ $stable_support_key ] = true;
131-
132-
if ( is_array( $stable_config ) && is_array( $args['supports'][ $stable_support_key ] ) ) {
133-
$stable_config = $experimental_first
134-
? array_merge( $stable_config, $args['supports'][ $stable_support_key ] )
135-
: array_merge( $args['supports'][ $stable_support_key ], $stable_config );
136-
} else {
137-
$stable_config = $experimental_first
138-
? $args['supports'][ $stable_support_key ]
139-
: $stable_config;
140-
}
141-
}
142-
143-
$updated_supports[ $stable_support_key ] = $stable_config;
144-
}
145-
146-
$args['supports'] = $updated_supports;
147-
148-
return $args;
149-
}
150-
151-
add_filter( 'register_block_type_args', 'gutenberg_stabilize_experimental_block_supports', PHP_INT_MAX, 1 );
152-
1538
function gutenberg_apply_block_hooks_to_post_content( $content ) {
1549
// The `the_content` filter does not provide the post that the content is coming from.
15510
// However, we can infer it by calling `get_post()`, which will return the current post

‎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-
border: {
858+
__experimentalBorder: {
859859
radius: true,
860860
__experimentalSelector: 'img, .crop-area',
861861
},

0 commit comments

Comments
 (0)