Separator Border Block Support

[karthick-murugan]

What?

Add border block support to the Separator block.

Part of #43247

Why?

Separator block is missing border support.

How?

Adds the border block support in block.json

Testing Instructions

• Go to Global Styles setting ( under appearance > editor > styles > edit styles > blocks )
• Make sure that Separator block's border is configurable via Global Styles
• Verify that Global Styles are applied correctly in the editor and frontend
• Edit template/page, Add Separator block and Apply the border styles
• Verify that block styles take precedence over global styles
• Verify that block borders display correctly in both the editor and frontend

Testing Instructions for Keyboard

None

Screenshots or screencast

In Backend:

In Frontend:

[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: karthick-murugan <karthickmurugan@git.wordpress.org>
Co-authored-by: carolinan <poena@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, @karthick-murugan! 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.

[karthick-murugan]

@carolinan - Can you have a look at this PR?

[carolinan]

Edited: sorry @karthick-murugan I responded to the wrong notification.

[carolinan]

I wanted to review this but either there is a conflict with the PR or on my local installs. As soon as I fetch, install and build this PR; all block style options are missing. Even if I remove the change that was made to block.json.
Can you try to update the PR to include the latest changes from trunk?

What is the goal of this change? What designs are achievable with this setting? Does it also need an option for padding?
The dots variation has this CSS: border: none !important; How is the border setting intended to work for this variation?

I am asking because maybe a thickness or size option as a block setting would make more sense?
And this is a question, I am not asking you to add this setting until there is a discussion.

[karthick-murugan]

@carolinan

I wanted to review this but either there is a conflict with the PR or on my local installs. As soon as I fetch, install and build this PR; all block style options are missing. Even if I remove the change that was made to block.json. Can you try to update the PR to include the latest changes from trunk?

Yes I have updated my PR to include all the latest changes from trunk and checked the block border functionality and it is working fine. Please have a look at the attached screenshot

What is the goal of this change?

The primary goal of this change is to enable border customization for the Separator block. This provides users with greater flexibility in styling the Separator block, aligning it with other blocks that support border settings.

What designs are achievable with this setting?

With the addition of border support, Custom border widths, Border colors, Global styles integration are all possible.

Does it also need an option for padding? The dots variation has this CSS: border: none !important; How is the border setting intended to work for this variation?

Currently, padding is not directly associated with the border feature in the Separator block.

I am asking because maybe a thickness or size option as a block setting would make more sense? And this is a question, I am not asking you to add this setting until there is a discussion.

A thickness option for the Separator block could complement the border feature, However, the existing border-width setting already provides similar functionality. For this reason, a dedicated thickness/size setting may not be necessary unless it serves a distinct purpose.

[carolinan]

• I am still finding it very strange to set a border on something that is only styled with a border by default.
• The option is not working on the dots variation
• The option is not working on custom designs like in Twenty Twenty
• The option seems break the background color option on the front. The editor and front does not look the same. Gradients are not showing consistently, it seems to depend on the humber of separator blocks in the page, or which block is selected. What I means is that if I click on block, the gradient is suddenly not showing.

I am finding it unclear how this is intended to work with the dots and background, the background color option and the border color option are changing the same thing?