Fix: Allow style variations to override blockGap

[BrajamohanDas-afk]

What?

Fixes style variations being unable to override the blockGap property for blocks.

Closes #72318

Why?

Currently, block style variations can successfully override visual properties like background colors, but fail to override layout spacing properties like blockGap. This is because the layout engine calculates spacing values before style variation data is considered.

This creates an inconsistent developer experience where some style variation properties work while others are silently ignored.

How?

Added a check in lib/block-supports/layout.php to retrieve blockGap from active style variations before falling back to block-level or global values.

The fix implements the correct priority order:

1. Style variation blockGap
2. Block-level blockGap
3. Global theme.json blockGap

Testing Instructions

1. Create a theme with theme.json containing:

{
  "styles": {
    "spacing": { "blockGap": "50px" }
  }
}

2.Create a style variation file in styles/no-gap.json:

{
  "version": 3,
  "slug": "no-gap",
  "blockTypes": ["core/group"],
  "styles": {
    "spacing": { "blockGap": "0" },
    "color": { "background": "#ff0000" }
  }
}

3.Create a new post/page with two Group blocks
4.Add paragraphs inside each Group
5.Apply the "No Gap" style variation to the second Group
6.View the page on the frontend

Before this fix: Second group has red background but still 50px spacing.

After: First group has 5px spacing, second group has blue background with 50px spacing.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @Ndimande-dev, @hrishikesh2810, @EldarAgalarov.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: Ndimande-dev, hrishikesh2810, EldarAgalarov.

Co-authored-by: BrajamohanDas-afk <brajdas0022@git.wordpress.org>
Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org>
Co-authored-by: SirLouen <sirlouen@git.wordpress.org>
Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>
Co-authored-by: rutviksavsani <rutviksavsani@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: dimitrop <dimitro@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: harshbhonsle <harshbhonsle08@git.wordpress.org>
Co-authored-by: AtharvaSagane <atharvasagane@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @BrajamohanDas-afk! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[tellthemachines]

Thanks for the PR!

I'm not convinced this is the correct approach though. Block style variations should be output by gutenberg_render_block_style_variation_support_styles and not as part of individual block supports. In practical terms this means that instead of the block gap style being attached to the block's layout classname, e.g. .wp-container-core-group-is-layout-6c531013, it should instead be attached to the variation classname, e.g. is-style-no-gap.

The main reason this doesn't work out of the box is that gap isn't part of PROPERTIES_METADATA that is iterated through when computing the styles for variations, and it isn't output by get_layout_styles either because the node has a different shape to what's expected here.

I put together a draft alternative solution in #74529. I'm not 100% sure that's the best approach either 😅 but hopefully it's a start in the right direction (fixing this in the style variation logic itself, instead of the layout logic)

[BrajamohanDas-afk]

@tellthemachines Okay, I’ll go through your approach and then modify the PR.

[BrajamohanDas-afk]

@tellthemachines

Implementation the new approch: following the direction in #74529

1. PHP: Enable blockGap Setting for Variations

Add to the $config array:

$config = array(
    'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
    'settings' => array(
        'spacing' => array(
            'blockGap' => true, 
        ),
    ),
    'styles'   => array(
        'elements' => $elements_data,
        'blocks'   => $blocks_data,
    ),
);

2. PHP: Process Gap as Protected Property

2a) Update PROTECTED_PROPERTIES

const PROTECTED_PROPERTIES = array(
    'gap' => array( 'spacing', 'blockGap' ),
);

---

2b) Add a parameter to compute_style_properties()

Find the method signature:

protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {

Change to:

protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null, $include_protected_properties = false ) {

---

2c) Merge protected properties into $properties when requested

Add this block after $properties is initialized (i.e., after the code that sets $properties to static::PROPERTIES_METADATA or equivalent):

if ( $include_protected_properties ) {
    foreach ( static::PROTECTED_PROPERTIES as $key => $value_path ) {
        if ( ! isset( $properties[ $key ] ) ) {
            $properties[ $key ] = $value_path;
        }
    }
}

---

2d) Pass true when generating style-variation declarations

Find the call that computes declarations for style variations, and change it to pass true as the last argument:

$style_variation_declarations[ $selector ] = static::compute_style_properties(
    $style_variation_node,
    $settings,
    null,
    $this->theme_json,
    null,
    null,
    true
);

---

3. JavaScript: Register Gap Property for Editor

Add to __EXPERIMENTAL_STYLE_PROPERTY:

gap: {
    value: [ 'spacing', 'blockGap' ],
    support: [ 'spacing', 'blockGap' ],
},

[BrajamohanDas-afk]

If this is ok then, i will go with the pr.

[ciampo]

Let's make sure that all CHANGELOG entries are kept in the "Unreleased" section, at the top of the file

[t-hamano]

It looks like there are a lot of unnecessary commits, probably due to a failed rebase or merge 😄 It might be better to close this PR and move forward with #74529.

Thanks for your efforts, @BrajamohanDas-afk! If you don't mind, I'd be happy if you could test #74529.