diff --git a/backport-changelog/6.8/7686.md b/backport-changelog/6.8/7686.md new file mode 100644 index 00000000000000..7bfa35c9e827fd --- /dev/null +++ b/backport-changelog/6.8/7686.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7686 + +* https://github.com/WordPress/gutenberg/pull/65968 \ No newline at end of file diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php index bd4c772675a5ed..3133a4ee778a92 100644 --- a/lib/block-supports/border.php +++ b/lib/block-supports/border.php @@ -17,7 +17,8 @@ function gutenberg_register_border_support( $block_type ) { $block_type->attributes = array(); } - if ( block_has_support( $block_type, array( '__experimentalBorder' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) { + if ( ( block_has_support( $block_type, 'border' ) || block_has_support( $block_type, '__experimentalBorder' ) ) && + ! array_key_exists( 'style', $block_type->attributes ) ) { $block_type->attributes['style'] = array( 'type' => 'object', ); @@ -52,7 +53,8 @@ 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, '__experimentalBorder', 'radius' ) + ( ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'radius' ) || + ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'radius' ) ) ) { $border_radius = $block_attributes['style']['border']['radius']; @@ -67,7 +69,8 @@ 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, '__experimentalBorder', 'style' ) + ( ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) || + ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' ) ) ) { $border_block_styles['style'] = $block_attributes['style']['border']['style']; } @@ -76,7 +79,8 @@ 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, '__experimentalBorder', 'width' ) + ( ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) || + ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' ) ) ) { $border_width = $block_attributes['style']['border']['width']; @@ -91,7 +95,8 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border color. if ( $has_border_color_support && - ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) + ( ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) || + ! wp_should_skip_block_supports_serialization( $block_type, 'border', '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; @@ -103,9 +108,23 @@ 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, '__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, + 'width' => isset( $border['width'] ) && + ! ( wp_should_skip_block_supports_serialization( $block_type, '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, '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, 'border', 'style' ) || + wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ) + ? $border['style'] + : null, ); $border_block_styles[ $side ] = $border_side_values; } @@ -143,7 +162,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { function gutenberg_has_border_feature_support( $block_type, $feature, $default_value = false ) { // 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['__experimentalBorder'] ?? $default_value; + $block_type_supports_border = $block_type->supports['border'] ?? $block_type->supports['__experimentalBorder'] ?? $default_value; if ( true === $block_type_supports_border ) { return true; } @@ -151,7 +170,8 @@ function gutenberg_has_border_feature_support( $block_type, $feature, $default_v // Check if the specific feature has been opted into individually // via nested flag under `__experimentalBorder`. - return block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default_value ); + return block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default_value ) + || block_has_support( $block_type, array( 'border', $feature ), $default_value ); } // Register the block support. diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 4ab4c69a41f311..4500444685befa 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -31,7 +31,7 @@ import { import { store as blockEditorStore } from '../store'; import { __ } from '@wordpress/i18n'; -export const BORDER_SUPPORT_KEY = '__experimentalBorder'; +export const BORDER_SUPPORT_KEY = 'border'; export const SHADOW_SUPPORT_KEY = 'shadow'; const getColorByProperty = ( colors, property, value ) => { diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 75f2bdf2dc219e..0bed77eed360e7 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/packages/block-editor/src/hooks/supports.js @@ -6,7 +6,7 @@ import { Platform } from '@wordpress/element'; const ALIGN_SUPPORT_KEY = 'align'; const ALIGN_WIDE_SUPPORT_KEY = 'alignWide'; -const BORDER_SUPPORT_KEY = '__experimentalBorder'; +const BORDER_SUPPORT_KEY = 'border'; const COLOR_SUPPORT_KEY = 'color'; const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName'; const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily'; diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 620dfcbb8599c0..d1c784e9a2de77 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -58,12 +58,12 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { }, borderColor: { value: [ 'border', 'color' ], - support: [ '__experimentalBorder', 'color' ], + support: [ 'border', 'color' ], useEngine: true, }, borderRadius: { value: [ 'border', 'radius' ], - support: [ '__experimentalBorder', 'radius' ], + support: [ 'border', 'radius' ], properties: { borderTopLeftRadius: 'topLeft', borderTopRightRadius: 'topRight', @@ -74,72 +74,72 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { }, borderStyle: { value: [ 'border', 'style' ], - support: [ '__experimentalBorder', 'style' ], + support: [ 'border', 'style' ], useEngine: true, }, borderWidth: { value: [ 'border', 'width' ], - support: [ '__experimentalBorder', 'width' ], + support: [ 'border', 'width' ], useEngine: true, }, borderTopColor: { value: [ 'border', 'top', 'color' ], - support: [ '__experimentalBorder', 'color' ], + support: [ 'border', 'color' ], useEngine: true, }, borderTopStyle: { value: [ 'border', 'top', 'style' ], - support: [ '__experimentalBorder', 'style' ], + support: [ 'border', 'style' ], useEngine: true, }, borderTopWidth: { value: [ 'border', 'top', 'width' ], - support: [ '__experimentalBorder', 'width' ], + support: [ 'border', 'width' ], useEngine: true, }, borderRightColor: { value: [ 'border', 'right', 'color' ], - support: [ '__experimentalBorder', 'color' ], + support: [ 'border', 'color' ], useEngine: true, }, borderRightStyle: { value: [ 'border', 'right', 'style' ], - support: [ '__experimentalBorder', 'style' ], + support: [ 'border', 'style' ], useEngine: true, }, borderRightWidth: { value: [ 'border', 'right', 'width' ], - support: [ '__experimentalBorder', 'width' ], + support: [ 'border', 'width' ], useEngine: true, }, borderBottomColor: { value: [ 'border', 'bottom', 'color' ], - support: [ '__experimentalBorder', 'color' ], + support: [ 'border', 'color' ], useEngine: true, }, borderBottomStyle: { value: [ 'border', 'bottom', 'style' ], - support: [ '__experimentalBorder', 'style' ], + support: [ 'border', 'style' ], useEngine: true, }, borderBottomWidth: { value: [ 'border', 'bottom', 'width' ], - support: [ '__experimentalBorder', 'width' ], + support: [ 'border', 'width' ], useEngine: true, }, borderLeftColor: { value: [ 'border', 'left', 'color' ], - support: [ '__experimentalBorder', 'color' ], + support: [ 'border', 'color' ], useEngine: true, }, borderLeftStyle: { value: [ 'border', 'left', 'style' ], - support: [ '__experimentalBorder', 'style' ], + support: [ 'border', 'style' ], useEngine: true, }, borderLeftWidth: { value: [ 'border', 'left', 'width' ], - support: [ '__experimentalBorder', 'width' ], + support: [ 'border', 'width' ], useEngine: true, }, color: { diff --git a/packages/blocks/src/store/process-block-type.js b/packages/blocks/src/store/process-block-type.js index bc7b1a0e10e774..91a013ccebf3e2 100644 --- a/packages/blocks/src/store/process-block-type.js +++ b/packages/blocks/src/store/process-block-type.js @@ -61,7 +61,22 @@ function mergeBlockVariations( return result; } +function stabilizeSupports( rawSupports ) { + if ( ! rawSupports ) { + return rawSupports; + } + const supports = { ...rawSupports }; + + if ( + supports?.__experimentalBorder && + typeof supports.__experimentalBorder === 'object' + ) { + supports.border = supports.__experimentalBorder; + } + + return supports; +} /** * Takes the unprocessed block type settings, merges them with block type metadata * and applies all the existing filters for the registered block type. @@ -101,6 +116,7 @@ export const processBlockType = : [] ), }; + blockType.supports = stabilizeSupports( blockType.supports ); const settings = applyFilters( 'blocks.registerBlockType', @@ -108,6 +124,7 @@ export const processBlockType = name, null ); + blockType.supports = stabilizeSupports( blockType.supports ); if ( settings.description && @@ -119,29 +136,30 @@ export const processBlockType = } if ( settings.deprecated ) { - settings.deprecated = settings.deprecated.map( ( deprecation ) => - Object.fromEntries( - Object.entries( - // Only keep valid deprecation keys. - applyFilters( - 'blocks.registerBlockType', - // Merge deprecation keys with pre-filter settings - // so that filters that depend on specific keys being - // present don't fail. - { - // Omit deprecation keys here so that deprecations - // can opt out of specific keys like "supports". - ...omit( blockType, DEPRECATED_ENTRY_KEYS ), - ...deprecation, - }, - blockType.name, - deprecation - ) - ).filter( ( [ key ] ) => + settings.deprecated = settings.deprecated.map( ( deprecation ) => { + deprecation.supports = stabilizeSupports( + deprecation.supports + ); + + const filteredDeprecation = applyFilters( + 'blocks.registerBlockType', + { + ...omit( blockType, DEPRECATED_ENTRY_KEYS ), + ...deprecation, + }, + blockType.name, + deprecation + ); + filteredDeprecation.supports = stabilizeSupports( + filteredDeprecation.supports + ); + + return Object.fromEntries( + Object.entries( filteredDeprecation ).filter( ( [ key ] ) => DEPRECATED_ENTRY_KEYS.includes( key ) ) - ) - ); + ); + } ); } if ( ! isPlainObject( settings ) ) {