Skip to content

Commit

Permalink
Block Supports: Allow skipping serialization of individual features (#…
Browse files Browse the repository at this point in the history 
…36293)

Co-authored-by: ramonjd <ramonjd@gmail.com>
Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
  • Loading branch information
@aaronrobertshaw @ramonjd @andrewserong
3 people committed Mar 29, 2022
1 parent 58ed1a8 commit 6de1698
Show file tree
Hide file tree
Showing 25 changed files with 784 additions and 141 deletions.
32 changes: 11 additions & 21 deletions lib/block-supports/border.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function gutenberg_register_border_support( $block_type ) {
* @return array Border CSS classes and inline styles.
*/
function gutenberg_apply_border_support( $block_type, $block_attributes ) {
if ( gutenberg_skip_border_serialization( $block_type ) ) {
if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'border' ) ) {
return array();
}

Expand All @@ -54,7 +54,8 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
// Border radius.
if (
gutenberg_has_border_feature_support( $block_type, 'radius' ) &&
isset( $block_attributes['style']['border']['radius'] )
isset( $block_attributes['style']['border']['radius'] ) &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'radius' )
) {
$border_radius = $block_attributes['style']['border']['radius'];

Expand All @@ -78,7 +79,8 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
// Border style.
if (
gutenberg_has_border_feature_support( $block_type, 'style' ) &&
isset( $block_attributes['style']['border']['style'] )
isset( $block_attributes['style']['border']['style'] ) &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' )
) {
$border_style = $block_attributes['style']['border']['style'];
$styles[] = sprintf( 'border-style: %s;', $border_style );
Expand All @@ -87,7 +89,8 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
// Border width.
if (
gutenberg_has_border_feature_support( $block_type, 'width' ) &&
isset( $block_attributes['style']['border']['width'] )
isset( $block_attributes['style']['border']['width'] ) &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
) {
$border_width = $block_attributes['style']['border']['width'];

Expand All @@ -100,7 +103,10 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
}

// Border color.
if ( gutenberg_has_border_feature_support( $block_type, 'color' ) ) {
if (
gutenberg_has_border_feature_support( $block_type, 'color' ) &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
) {
$has_named_border_color = array_key_exists( 'borderColor', $block_attributes );
$has_custom_border_color = isset( $block_attributes['style']['border']['color'] );

Expand Down Expand Up @@ -130,22 +136,6 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
return $attributes;
}

/**
* Checks whether serialization of the current block's border properties should
* occur.
*
* @param WP_Block_type $block_type Block type.
*
* @return boolean
*/
function gutenberg_skip_border_serialization( $block_type ) {
$border_support = _wp_array_get( $block_type->supports, array( '__experimentalBorder' ), false );

return is_array( $border_support ) &&
array_key_exists( '__experimentalSkipSerialization', $border_support ) &&
$border_support['__experimentalSkipSerialization'];
}

/**
* Checks whether the current block type supports the border feature requested.
*
Expand Down
9 changes: 4 additions & 5 deletions lib/block-supports/colors.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {

if (
is_array( $color_support ) &&
array_key_exists( '__experimentalSkipSerialization', $color_support ) &&
$color_support['__experimentalSkipSerialization']
gutenberg_should_skip_block_supports_serialization( $block_type, 'color' )
) {
return array();
}
Expand All @@ -82,7 +81,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {

// Text colors.
// Check support for text colors.
if ( $has_text_colors_support ) {
if ( $has_text_colors_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'text' ) ) {
$has_named_text_color = array_key_exists( 'textColor', $block_attributes );
$has_custom_text_color = isset( $block_attributes['style']['color']['text'] );

Expand All @@ -99,7 +98,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
}

// Background colors.
if ( $has_background_colors_support ) {
if ( $has_background_colors_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'background' ) ) {
$has_named_background_color = array_key_exists( 'backgroundColor', $block_attributes );
$has_custom_background_color = isset( $block_attributes['style']['color']['background'] );

Expand All @@ -116,7 +115,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
}

// Gradients.
if ( $has_gradients_support ) {
if ( $has_gradients_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'gradients' ) ) {
$has_named_gradient = array_key_exists( 'gradient', $block_attributes );
$has_custom_gradient = isset( $block_attributes['style']['color']['gradient'] );

Expand Down
17 changes: 1 addition & 16 deletions lib/block-supports/dimensions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function gutenberg_register_dimensions_support( $block_type ) {
* @return array Block dimensions CSS classes and inline styles.
*/
function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
if ( gutenberg_skip_dimensions_serialization( $block_type ) ) {
if ( gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalDimensions' ) ) {
return array();
}

Expand All @@ -57,21 +57,6 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) {
return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) );
}

/**
* Checks whether serialization of the current block's dimensions properties
* should occur.
*
* @param WP_Block_type $block_type Block type.
*
* @return boolean Whether to serialize spacing support styles & classes.
*/
function gutenberg_skip_dimensions_serialization( $block_type ) {
$dimensions_support = _wp_array_get( $block_type->supports, array( '__experimentalDimensions' ), false );
return is_array( $dimensions_support ) &&
array_key_exists( '__experimentalSkipSerialization', $dimensions_support ) &&
$dimensions_support['__experimentalSkipSerialization'];
}

// Register the block support.
WP_Block_Supports::get_instance()->register(
'dimensions',
Expand Down
7 changes: 7 additions & 0 deletions lib/block-supports/elements.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ function gutenberg_render_elements_support( $block_content, $block ) {
return $block_content;
}

$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$skip_link_color_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'link' );

if ( $skip_link_color_serialization ) {
return $block_content;
}

$link_color = null;
if ( ! empty( $block['attrs'] ) ) {
$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
Expand Down
22 changes: 13 additions & 9 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,15 @@ function gutenberg_register_layout_support( $block_type ) {
/**
* Generates the CSS corresponding to the provided layout.
*
* @param string $selector CSS selector.
* @param array $layout Layout object. The one that is passed has already checked the existence of default block layout.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
* @param string $gap_value The block gap value to apply.
* @param string $selector CSS selector.
* @param array $layout Layout object. The one that is passed has already checked the existence of default block layout.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
* @param string $gap_value The block gap value to apply.
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
*
* @return string CSS style.
* @return string CSS style.
*/
function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null ) {
function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';

$style = '';
Expand Down Expand Up @@ -69,7 +70,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )';
$style .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
$style .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }";
}
Expand Down Expand Up @@ -99,7 +100,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
$gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
}
$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
$style .= "gap: $gap_style;";
} else {
$style .= 'gap: 0.5em;';
Expand Down Expand Up @@ -172,7 +173,10 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
}

$style = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value );
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
$should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$style = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
Expand Down
25 changes: 6 additions & 19 deletions lib/block-supports/spacing.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,10 @@ function gutenberg_register_spacing_support( $block_type ) {
* @return array Block spacing CSS classes and inline styles.
*/
function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
if ( gutenberg_skip_spacing_serialization( $block_type ) ) {
if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing' ) ) {
return array();
}

$attributes = array();
$has_padding_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'padding' ), false );
$has_margin_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'margin' ), false );
Expand All @@ -52,9 +53,11 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
}

$style_engine = WP_Style_Engine_Gutenberg::get_instance();
$skip_padding = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' );
$skip_margin = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' );
$spacing_block_styles = array();
$spacing_block_styles['padding'] = $has_padding_support ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
$spacing_block_styles['margin'] = $has_margin_support ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
$spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
$spacing_block_styles['margin'] = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
$inline_styles = $style_engine->generate(
array( 'spacing' => $spacing_block_styles ),
array(
Expand All @@ -69,22 +72,6 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
return $attributes;
}

/**
* Checks whether serialization of the current block's spacing properties should
* occur.
*
* @param WP_Block_type $block_type Block type.
*
* @return boolean Whether to serialize spacing support styles & classes.
*/
function gutenberg_skip_spacing_serialization( $block_type ) {
$spacing_support = _wp_array_get( $block_type->supports, array( 'spacing' ), false );

return is_array( $spacing_support ) &&
array_key_exists( '__experimentalSkipSerialization', $spacing_support ) &&
$spacing_support['__experimentalSkipSerialization'];
}

// Register the block support.
WP_Block_Supports::get_instance()->register(
'spacing',
Expand Down
21 changes: 11 additions & 10 deletions lib/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
return array();
}

$skip_typography_serialization = _wp_array_get( $typography_supports, array( '__experimentalSkipSerialization' ), false );
if ( $skip_typography_serialization ) {
if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'typography' ) ) {
return array();
}

Expand All @@ -93,7 +92,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );

if ( $has_font_size_support ) {
if ( $has_font_size_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' ) ) {
$has_named_font_size = array_key_exists( 'fontSize', $block_attributes );
$has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );

Expand All @@ -104,7 +103,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
}
}

if ( $has_font_family_support ) {
if ( $has_font_family_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' ) ) {
$has_named_font_family = array_key_exists( 'fontFamily', $block_attributes );
$has_custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] );

Expand All @@ -123,42 +122,42 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
}
}

if ( $has_font_style_support ) {
if ( $has_font_style_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' ) ) {
$font_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' );
if ( $font_style ) {
$styles[] = $font_style;
}
}

if ( $has_font_weight_support ) {
if ( $has_font_weight_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' ) ) {
$font_weight = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' );
if ( $font_weight ) {
$styles[] = $font_weight;
}
}

if ( $has_line_height_support ) {
if ( $has_line_height_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' ) ) {
$has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] );
if ( $has_line_height ) {
$styles[] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] );
}
}

if ( $has_text_decoration_support ) {
if ( $has_text_decoration_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' ) ) {
$text_decoration_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' );
if ( $text_decoration_style ) {
$styles[] = $text_decoration_style;
}
}

if ( $has_text_transform_support ) {
if ( $has_text_transform_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' ) ) {
$text_transform_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' );
if ( $text_transform_style ) {
$styles[] = $text_transform_style;
}
}

if ( $has_letter_spacing_support ) {
if ( $has_letter_spacing_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' ) ) {
$letter_spacing_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'letterSpacing', 'letter-spacing' );
if ( $letter_spacing_style ) {
$styles[] = $letter_spacing_style;
Expand Down Expand Up @@ -214,3 +213,5 @@ function gutenberg_typography_get_css_variable_inline_style( $attributes, $featu
'apply' => 'gutenberg_apply_typography_support',
)
);


31 changes: 31 additions & 0 deletions lib/block-supports/utils.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<?php
/**
* Block support utility functions.
*
* @package gutenberg
*/

/**
* Checks whether serialization of the current block's supported properties
* should occur.
*
* @param WP_Block_type $block_type Block type.
* @param string $feature_set Name of block support feature set..
* @param string $feature Optional name of individual feature to check.
*
* @return boolean Whether to serialize block support styles & classes.
*/
function gutenberg_should_skip_block_supports_serialization( $block_type, $feature_set, $feature = null ) {
if ( ! is_object( $block_type ) || ! $feature_set ) {
return false;
}

$path = array( $feature_set, '__experimentalSkipSerialization' );
$skip_serialization = _wp_array_get( $block_type->supports, $path, false );

if ( is_array( $skip_serialization ) ) {
return in_array( $feature, $skip_serialization, true );
}

return $skip_serialization;
}
1 change: 1 addition & 0 deletions lib/load.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ function gutenberg_is_experiment_enabled( $name ) {
// similar to the loading behaviour in `blocks.php`.
require __DIR__ . '/style-engine/class-wp-style-engine-gutenberg.php';

require __DIR__ . '/block-supports/utils.php';
require __DIR__ . '/block-supports/elements.php';
require __DIR__ . '/block-supports/colors.php';
require __DIR__ . '/block-supports/typography.php';
Expand Down
Loading

0 comments on commit 6de1698

Please sign in to comment.