Skip to content

Commit

Permalink
Block Supports: Revert stabilization of typography, border, skip seri…
Browse files Browse the repository at this point in the history 
…alization and default controls supports (#68163)

* Revert "Global Styles: Fix handling of booleans when stabilizing block supports (#67552)"

This reverts commit 4335c45.

* Revert "Block Supports: Extend stabilization to common experimental block support flags (#67018)"

This reverts commit 5513d7a.

* Revert "Borders: Stabilize border block supports within block processing (#66918)"

This reverts commit b5ee9da.

* Revert "Process Block Type: Copy deprecation to a new object instead of mutating when stabilizing supports (#66849)"

This reverts commit 457fcf8.

* Revert "Typography: Stabilize typography block supports within block processing (#63401)"

This reverts commit 48341a1.

Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: talldan <[email protected]>
  • Loading branch information
@aaronrobertshaw @ramonjd @talldan
4 people authored Dec 24, 2024
1 parent d9b726b commit 603a41f
Show file tree
Hide file tree
Showing 25 changed files with 139 additions and 1,437 deletions.
6 changes: 0 additions & 6 deletions backport-changelog/6.8/7069.md
View file

This file was deleted.

16 changes: 7 additions & 9 deletions docs/explanations/architecture/styles.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,8 @@ The user may change the state of this block by applying different styles: a text
After some user modifications to the block, the initial markup may become something like this:

```html
<p
class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
style="line-height: 1em"
></p>
<p class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
style="line-height: 1em"></p>
```

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.
Expand Down Expand Up @@ -125,7 +123,7 @@ The block supports API only serializes the font size value to the wrapper, resul

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.

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:
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:

```json
{
Expand All @@ -134,15 +132,15 @@ While work continues in that proposal, there's an escape hatch, an experimental
"supports": {
"typography": {
"fontSize": true,
"skipSerialization": true
"__experimentalSkipSerialization": true
}
}
}
```

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.

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).
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).

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.

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

Every chunk of styles can only use a single selector.

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.
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.

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

Expand Down
28 changes: 14 additions & 14 deletions lib/block-supports/border.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function gutenberg_register_border_support( $block_type ) {
$block_type->attributes = array();
}

if ( block_has_support( $block_type, array( 'border' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
if ( block_has_support( $block_type, array( '__experimentalBorder' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
Expand Down Expand Up @@ -52,7 +52,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
if (
gutenberg_has_border_feature_support( $block_type, 'radius' ) &&
isset( $block_attributes['style']['border']['radius'] ) &&
! wp_should_skip_block_supports_serialization( $block_type, 'border', 'radius' )
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'radius' )
) {
$border_radius = $block_attributes['style']['border']['radius'];

Expand All @@ -67,7 +67,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
if (
gutenberg_has_border_feature_support( $block_type, 'style' ) &&
isset( $block_attributes['style']['border']['style'] ) &&
! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' )
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' )
) {
$border_block_styles['style'] = $block_attributes['style']['border']['style'];
}
Expand All @@ -76,7 +76,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
if (
$has_border_width_support &&
isset( $block_attributes['style']['border']['width'] ) &&
! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' )
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
) {
$border_width = $block_attributes['style']['border']['width'];

Expand All @@ -91,7 +91,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
// Border color.
if (
$has_border_color_support &&
! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' )
! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
) {
$preset_border_color = array_key_exists( 'borderColor', $block_attributes ) ? "var:preset|color|{$block_attributes['borderColor']}" : null;
$custom_border_color = $block_attributes['style']['border']['color'] ?? null;
Expand All @@ -103,9 +103,9 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) {
$border = $block_attributes['style']['border'][ $side ] ?? null;
$border_side_values = array(
'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' ) ? $border['width'] : null,
'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' ) ? $border['color'] : null,
'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' ) ? $border['style'] : null,
'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ? $border['width'] : null,
'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) ? $border['color'] : null,
'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ? $border['style'] : null,
);
$border_block_styles[ $side ] = $border_side_values;
}
Expand All @@ -129,9 +129,9 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
/**
* Checks whether the current block type supports the border feature requested.
*
* If the `border` support flag is a boolean `true` all border
* If the `__experimentalBorder` support flag is a boolean `true` all border
* support features are available. Otherwise, the specific feature's support
* flag nested under `border` must be enabled for the feature
* flag nested under `experimentalBorder` must be enabled for the feature
* to be opted into.
*
* @param WP_Block_Type $block_type Block type to check for support.
Expand All @@ -141,17 +141,17 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
* @return boolean Whether or not the feature is supported.
*/
function gutenberg_has_border_feature_support( $block_type, $feature, $default_value = false ) {
// Check if all border support features have been opted into via `"border": true`.
// Check if all border support features have been opted into via `"__experimentalBorder": true`.
if ( $block_type instanceof WP_Block_Type ) {
$block_type_supports_border = $block_type->supports['border'] ?? $default_value;
$block_type_supports_border = $block_type->supports['__experimentalBorder'] ?? $default_value;
if ( true === $block_type_supports_border ) {
return true;
}
}

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

// Register the block support.
Expand Down
24 changes: 12 additions & 12 deletions lib/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@ function gutenberg_register_typography_support( $block_type ) {
return;
}

$has_font_family_support = $typography_supports['fontFamily'] ?? false;
$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
$has_font_size_support = $typography_supports['fontSize'] ?? false;
$has_font_style_support = $typography_supports['fontStyle'] ?? false;
$has_font_weight_support = $typography_supports['fontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['letterSpacing'] ?? false;
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
$has_text_align_support = $typography_supports['textAlign'] ?? false;
$has_text_columns_support = $typography_supports['textColumns'] ?? false;
$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
$has_text_transform_support = $typography_supports['textTransform'] ?? false;
$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
$has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false;
$has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;

$has_typography_support = $has_font_family_support
Expand Down Expand Up @@ -91,16 +91,16 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
return array();
}

$has_font_family_support = $typography_supports['fontFamily'] ?? false;
$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
$has_font_size_support = $typography_supports['fontSize'] ?? false;
$has_font_style_support = $typography_supports['fontStyle'] ?? false;
$has_font_weight_support = $typography_supports['fontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['letterSpacing'] ?? false;
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
$has_text_align_support = $typography_supports['textAlign'] ?? false;
$has_text_columns_support = $typography_supports['textColumns'] ?? false;
$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
$has_text_transform_support = $typography_supports['textTransform'] ?? false;
$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
$has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false;
$has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;

// Whether to skip individual block support features.
Expand Down
8 changes: 4 additions & 4 deletions lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -615,10 +615,10 @@ class WP_Theme_JSON_Gutenberg {
* @var string[]
*/
const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
'border' => 'border',
'color' => 'color',
'spacing' => 'spacing',
'typography' => 'typography',
'__experimentalBorder' => 'border',
'color' => 'color',
'spacing' => 'spacing',
'typography' => 'typography',
);

/**
Expand Down
145 changes: 0 additions & 145 deletions lib/compat/wordpress-6.8/blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,151 +5,6 @@
* @package gutenberg
*/

/**
* Filters the block type arguments during registration to stabilize
* experimental block supports.
*
* This is a temporary compatibility shim as the approach in core is for this
* to be handled within the WP_Block_Type class rather than requiring a filter.
*
* @param array $args Array of arguments for registering a block type.
* @return array Array of arguments for registering a block type.
*/
function gutenberg_stabilize_experimental_block_supports( $args ) {
if ( empty( $args['supports'] ) ) {
return $args;
}

$experimental_supports_map = array( '__experimentalBorder' => 'border' );
$common_experimental_properties = array(
'__experimentalDefaultControls' => 'defaultControls',
'__experimentalSkipSerialization' => 'skipSerialization',
);
$experimental_support_properties = array(
'typography' => array(
'__experimentalFontFamily' => 'fontFamily',
'__experimentalFontStyle' => 'fontStyle',
'__experimentalFontWeight' => 'fontWeight',
'__experimentalLetterSpacing' => 'letterSpacing',
'__experimentalTextDecoration' => 'textDecoration',
'__experimentalTextTransform' => 'textTransform',
),
);
$done = array();

$updated_supports = array();
foreach ( $args['supports'] as $support => $config ) {
/*
* If this support config has already been stabilized, skip it.
* A stable support key occurring after an experimental key, gets
* stabilized then so that the two configs can be merged effectively.
*/
if ( isset( $done[ $support ] ) ) {
continue;
}

$stable_support_key = $experimental_supports_map[ $support ] ?? $support;

/*
* Use the support's config as is when it's not in need of stabilization.
*
* A support does not need stabilization if:
* - The support key doesn't need stabilization AND
* - Either:
* - The config isn't an array, so can't have experimental properties OR
* - The config is an array but has no experimental properties to stabilize.
*/
if ( $support === $stable_support_key &&
( ! is_array( $config ) ||
( ! isset( $experimental_support_properties[ $stable_support_key ] ) &&
empty( array_intersect_key( $common_experimental_properties, $config ) )
)
)
) {
$updated_supports[ $support ] = $config;
continue;
}

$stabilize_config = function ( $unstable_config, $stable_support_key ) use ( $experimental_support_properties, $common_experimental_properties ) {
if ( ! is_array( $unstable_config ) ) {
return $unstable_config;
}

$stable_config = array();
foreach ( $unstable_config as $key => $value ) {
// Get stable key from support-specific map, common properties map, or keep original.
$stable_key = $experimental_support_properties[ $stable_support_key ][ $key ] ??
$common_experimental_properties[ $key ] ??
$key;

$stable_config[ $stable_key ] = $value;

/*
* The `__experimentalSkipSerialization` key needs to be kept until
* WP 6.8 becomes the minimum supported version. This is due to the
* core `wp_should_skip_block_supports_serialization` function only
* checking for `__experimentalSkipSerialization` in earlier versions.
*/
if ( '__experimentalSkipSerialization' === $key || 'skipSerialization' === $key ) {
$stable_config['__experimentalSkipSerialization'] = $value;
}
}
return $stable_config;
};

// Stabilize the config value.
$stable_config = is_array( $config ) ? $stabilize_config( $config, $stable_support_key ) : $config;

/*
* If a plugin overrides the support config with the `register_block_type_args`
* filter, both experimental and stable configs may be present. In that case,
* use the order keys are defined in to determine the final value.
* - If config is an array, merge the arrays in their order of definition.
* - If config is not an array, use the value defined last.
*
* The reason for preferring the last defined key is that after filters
* are applied, the last inserted key is likely the most up-to-date value.
* We cannot determine with certainty which value was "last modified" so
* the insertion order is the best guess. The extreme edge case of multiple
* filters tweaking the same support property will become less over time as
* extenders migrate existing blocks and plugins to stable keys.
*/
if ( $support !== $stable_support_key && isset( $args['supports'][ $stable_support_key ] ) ) {
$key_positions = array_flip( array_keys( $args['supports'] ) );
$experimental_first =
( $key_positions[ $support ] ?? PHP_INT_MAX ) <
( $key_positions[ $stable_support_key ] ?? PHP_INT_MAX );

/*
* To merge the alternative support config effectively, it also needs to be
* stabilized before merging to keep stabilized and experimental flags in
* sync.
*/
$args['supports'][ $stable_support_key ] = $stabilize_config( $args['supports'][ $stable_support_key ], $stable_support_key );
// Prevents reprocessing this support as it was stabilized above.
$done[ $stable_support_key ] = true;

if ( is_array( $stable_config ) && is_array( $args['supports'][ $stable_support_key ] ) ) {
$stable_config = $experimental_first
? array_merge( $stable_config, $args['supports'][ $stable_support_key ] )
: array_merge( $args['supports'][ $stable_support_key ], $stable_config );
} else {
$stable_config = $experimental_first
? $args['supports'][ $stable_support_key ]
: $stable_config;
}
}

$updated_supports[ $stable_support_key ] = $stable_config;
}

$args['supports'] = $updated_supports;

return $args;
}

add_filter( 'register_block_type_args', 'gutenberg_stabilize_experimental_block_supports', PHP_INT_MAX, 1 );

function gutenberg_apply_block_hooks_to_post_content( $content ) {
// The `the_content` filter does not provide the post that the content is coming from.
// However, we can infer it by calling `get_post()`, which will return the current post
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -855,7 +855,7 @@ describe( 'global styles renderer', () => {

it( 'should return block selectors data with old experimental selectors', () => {
const imageSupports = {
border: {
__experimentalBorder: {
radius: true,
__experimentalSelector: 'img, .crop-area',
},
Expand Down
Loading

1 comment on commit 603a41f

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 603a41f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12474677504
📝 Reported issues:

Please sign in to comment.