Buttons: Add border, color, and padding block supports

[aaronrobertshaw]

Part of: #43241

What?

Adopts background color, padding, and border block supports for the Buttons block.

Why?

• Offers greater design flexibility
• Improves consistency in design tooling with other blocks

How?

• Adopts new block supports

Testing Instructions

1. In the site editor add a Buttons block to a page
2. Within Styles > Blocks > Buttons, configure new background, padding, and border values
3. Save and confirm the Buttons block is styled appropriately in the editor and frontend
4. Back in the editor select the Buttons block and switch to the block inspector
5. Configure new styles for background, padding, and border on the block instance
6. Save and confirm these display correctly in the editor and frontend

Screenshots or screencast

Screen.Recording.2024-07-15.at.12.20.58.PM.mp4

[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.

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

Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: carolinan <[email protected]>

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

[carolinan]

With color support enabled, the option to add color for the button element is enabled on the parent buttons block, is that correct?

[aaronrobertshaw]

Thanks for testing @carolinan 👍

With color support enabled, the option to add color for the button element is enabled on the parent buttons block, is that correct?

This PR only proposes to add background color support to the wrapping Buttons block rather than text color for all internal buttons. With the way individual buttons are structured, I'd like to address text color for inner Button blocks separately.

[carolinan]

I meant this button color support: "color (background, button, gradients, text),"
With this option, you can set both the background and text color of the inner button.

[aaronrobertshaw]

Sorry @carolinan, I'm not following 😅

I meant this button color support: "color (background, button, gradients, text),"
With this option, you can set both the background and text color of the inner button.

Is the confusion that the docs strike out the text support to show it has been opted out of?

You'll see that the text color support for the parent Buttons block is disabled here.

[carolinan]

No, I am finding it confusing that the parent now has any settings for the inner button.
(One of the reasons why it is confusing is the problem where the controls on the inner button do not show the inherited colors)

I only mentioned the text because I interpreted this as it should not be possible to set the text color on the inner button from the parent:

This PR only proposes to add background color support to the wrapping Buttons block rather than text color for all internal buttons. With the way individual buttons are structured, I'd like to address text color for inner Button blocks separately.

Because with this change it is possible to set the text color of the inner button from the parent.

[aaronrobertshaw]

Thanks for the clarification, I think I'm on the same page now 👍

What's highlighted in the screenshot is actually the button element styles not inner button block controls. I'll see what I can do to reduce the potential for confusion here.

[carolinan]

Thanks for the clarification, I think I'm on the same page now 👍

What's highlighted in the screenshot is actually the button element styles not inner button block controls. I'll see what I can do to reduce the potential for confusion here.

Yes 😄

With color support enabled, the option to add color for the button element is enabled on the parent buttons block, is that correct?

[aaronrobertshaw]

Apologies for my earlier confusion @carolinan.

It was staring me in my face and I kept reading the config as background not button 🙈

Now my tunnel vision has dissipated, let's leave the element styling out for now. While it does give users the option to bulk style all buttons it can be confusing. Discussing or implementing that as a separate follow-up sounds like the best path forward for now.

I've removed the button element support in 4879255