Shadow: tools panel label is set to Shadow instead of Border & Shadow

[madhusudhand]

Description

When defaultPresets is set to true in classic themes via functions.php

Issue: Label is set to Shadow even though there exists radius control.
Expectation: When Border and shadow controls both present label should be set to Border & Shadow

Step-by-step reproduction instructions

1. Enable a classic theme

Enable defaultPresets by adding following code to functions.php

add_filter( 'wp_theme_json_data_default', 'themeslug_theme_json_data_default' );

function themeslug_theme_json_data_default( $theme_json ) {
       $data = [
               'version'  => 2,
               'settings' => [
                      'shadow' => [
                              'defaultPresets' => true,
                      ]
               ]
      ];
      return $theme_json->update_with( $data );
}

3. Edit a post and add a button block
4. Navigate to Border tools panel
5. Observe that panel label is set to 'Shadow' instead of 'Border & Shadow'

Screenshots, screen recording, code snippet

No response

Environment info

• Wordpress 6.5
• Gutenberg latest

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

Going to add this to the 6.5.1 section for consideration since this impacts a feature coming to 6.5 but is minor in the grand scheme of things.

[t-hamano]

My guess is that it's because we're directly overriding the hook's props here.

gutenberg/packages/block-editor/src/hooks/border.js

Lines 237 to 242 in 91ea8fa

	hasBorderControl =
	controls?.hasBorderColor ||
	controls?.hasBorderStyle ||
	controls?.hasBorderWidth ||
	controls?.hasBorderRadius;
	hasShadowControl = controls?.hasShadow;

I would like to submit a PR soon.

Update: It seems that the above is not the cause. I'll continue researching, but I'd be happy if anyone can find a solution to this problem.

[madhusudhand]

@t-hamano

As I understand the function useBorderPanelLabel uses const settings = useBlockSettings( blockName ); to get block settings and then returns the right label.

But, the settings object is being returned differently from different instances.

for comparison

gutenberg/packages/block-editor/src/components/global-styles/border-panel.js

Line 230 in 0f689f9

const label = useBorderPanelLabel( {

from global styles returns settings.border.radius: true,
where as

gutenberg/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js

Line 15 in 0f689f9

const borderPanelLabel = useBorderPanelLabel( { blockName } );

from block inspector-controls returns settings.border.radius: false.

I don't understand the reason behind this.

[t-hamano]

But, the settings object is being returned differently from different instances.

Yes, I'm also wondering why this happens 🤔

[madhusudhand]

@annezazu since we reverted a change in #60204, shadows in classic themes aren't enabled/supported yet and it's no longer a bug in 6.5
This will be address in WordPress 6.6 along with support for classic themes.

[creativecoder]

shadows in classic themes aren't enabled/supported yet and it's no longer a bug in 6.5

Given this, I'm going to remove this issue from the 6.5.x board, since we no longer plan to address it in a minor release.

[madhusudhand]

This is issue when the support is enabled in classic themes in #60373

[ellatrix]

This is not a regression, must be punted to 6.7