Block settings: Change "Apply globally" to secondary button styling to lower prominence

[annezazu]

While testing overrides in synced patterns, I noticed that the prominence of "apply globally" really stands out even more when we have now the option to enable/disable overrides:

To create more of a balance here, I propose we change the "apply globally" option to be a secondary button styling rather than primary like so:

If anything, I see creating overrides as being more of a common action than taking an individual styling and applying it globally but, at the least, we should have equal weighting here in my opinion. cc @WordPress/gutenberg-design for thoughts!

[jasmussen]

Yep, let's get a dev on this. Do we already have a confirm "are you sure" dialog when applying this? I don't personally think one is necessary, but it's a second step we can take if this in effect is a destructive action.

[t-hamano]

Do we already have a confirm "are you sure" dialog when applying this?

There are currently no modal dialog. Should we add a dialog as suggested in #57740?

[jasmussen]

I'd love to probably follow up with a "don't show again" to such a dialog. That would be the only thing.

[amitraj2203]

To create more of a balance here, I propose we change the "apply globally" option to be a secondary button styling rather than primary like so:

I have raised a PR for changing the Apply globally button variant to secondary.

[amitraj2203]

To create more of a balance here, I propose we change the "apply globally" option to be a secondary button styling rather than primary like so:

I noticed that the Apply globally button height is less than the Enable overrides button, probably because the props __next40pxDefaultSize is not passed to it. Let me know if that needs to be added for style consistency. 🙇

[jasmussen]

That would be good, while you're there.

[t-hamano]

In my experience, secondary buttons are used in either of the following contexts:

Are side actions: Examples of the Query Loop block and the Image block

When opening a dialog: Example of the Font Library Modal button and the Patterns Modal button

When I think about it this way, I feel like the current style is fine. Or should we change the "Enable/Disable override" button to the primary button as well?

In any case, I think the height of the buttons should be the same.

[hbhalodia]

In my experience, secondary buttons are used in either of the following contexts:

Are side actions: Examples of the Query Loop block and the Image block

When opening a dialog: Example of the Font Library Modal button and the Patterns Modal button

When I think about it this way, I feel like the current style is fine. Or should we change the "Enable/Disable override" button to the primary button as well?

In any case, I think the height of the buttons should be the same.

I agree with the @t-hamano, Secondary button styles are used when we need to do some side actions rather that what is "primary". So instead of making Apply Globally as secondary, One should make the Disable Overrides as the primary button. This could be the way better.

Further as an example, If we can select any block and check the Advanced tab you can see that Apply Globally is a primary button, so instead of changing this to the Secondary, We should make the change to Disable Overrides and make it primary.

Also, If we made this change, Apply Globally button would get changed everywhere, since we are concerning only with patterns here, we should add a fix that would reflect at fewer places instead of multiple places.

Thank You ✨.

[amitraj2203]

Hi @t-hamano,

I agree with you, and I also have a suggestion regarding the button hierarchy for better clarity.

What if we make the Enable overrides button the primary button. The reasons for this are:

• This action affects multiple instances of a pattern, indicating a broader and more critical impact.
• It is likely to be a key feature that users will interact with frequently to enable global changes across instances.

On the other hand, I suggest keeping the Apply globally button as secondary. This is because:

• Although important, this action is more specific in scope compared to enabling changes across multiple instances.
• Styling consistency across Paragraph blocks, while significant, might not be as foundational as the ability to change multiple instances of a pattern.

Additionally, I see that the Apply globally button would have more impact at multiple places. Each and every block has an advanced tab and it has this button. So changing this would change all those occurrences, although currently since we are dealing with patterns, I do not think that Apply globally would be touched on because of the mentioned reason. Although I know that there would be no breaking changes, but still users may have some impact in a view if we change that.

Or should we change the "Enable/Disable override" button to the primary button as well?

I believe it would not be ideal to keep both buttons as primary. Having two primary buttons can dilute the focus and importance of each action, potentially confusing users about which action is more critical in the given context.

In any case, I think the height of the buttons should be the same.

For making both the buttons have consistent height, we can also remove the __next40pxDefaultSize from Enable overrides button to make it more consistent.

Let me know your thoughts on this approach.

[jasmussen]

My rule of thumb here is to apply these styles very judiciously according to context and prominence. In some cases, they need a fill or a border in order to distinguish themselves from the context, in others they need a box to make the grid align, and in still others it's useful to have a visual hierarchy.

That's also to say, that I don't know that we can formulate a hard guideline for when to use this or that. Honestly I wish we had called the buttons something other than primary, secondary, tertiary, because those names suggest a hierarchy where none need to exist. Insofar as: these are not like headings, where you must only ever use an h3 if there's an h2 above it.

For this particular context, full-width buttons in the inspector, primary and secondary are both shapes that work well. However I would go with the outline/secondary style here, specifically to manage prominence. In this case, the hierarchy of the button names match that of their action: these actions are not primary.

[t-hamano]

Thank you everyone for your opinions.

I want to be clear here that the "Enable/Disable overrides" and "Apply globally" buttons are not always both visible.

Each button should be visible under the following conditions:

• "Enable/Disable overrides" button: when editing a synced pattern
• "Apply globally" button: if you are in the site editor

In other words, there are three layouts: With all this in mind, should we change both buttons to the secondary style?

Blocks in the site editor	When editing a synced pattern in the post editor	When editing a synced pattern in the site editor

[amitraj2203]

Hi folks, this is the PR that is approved for this issue. But looking at the last comment, are there any changes required from my side?

[jasmussen]

In other words, there are three layouts: With all this in mind, should we change both buttons to the secondary style?

Yes, I'd think we'd want to use the secondary style for all instances of these buttons, both enable overrides and apply globally, if they aren't already. Amit if you can check both the post editor and site editors, according to Aki's instructions, that would be useful, thank you.

[amitraj2203]

Amit if you can check both the post editor and site editors, according to Aki's instructions, that would be useful, thank you.

I have verified that the PR I created is correctly applying the secondary style to both the Enable overrides and Apply globally buttons. I have checked this in all three scenarios:

Blocks in the site editor	When editing a synced pattern in the post editor	When editing a synced pattern in the site editor