Columns Block: Allow for border options

[davipontesblog]

I don't find a way to set border styles on columns in the block editor unless custom CSS is applied. Here is an example of a custom CSS code to add borders between columns:

.wp-block-column {
    border-width: 0 1px 0 0;
    border-right-style: solid;
    border-right-color: black;
    padding-right: 35px;
}

We could allow users to select border styles as a block option in the editor. Additionally, some different border styles could be selectable, like "dotted", or "dashed" for example.

Thanks for considering this as an improvement to the Columns Block.

[karmatosed]

I am a bit torn as to if this should be added or is something for the table block to have. I would love other opinions on that though, so going to add a few labels to get wider input.

[alaczek]

YES! I strongly agree we need this!

Here are some visual examples of designs I had in mind. All of them are or could be built using columns block.

Also, similar idea was brought up in #21540)

I am a bit torn as to if this should be added or is something for the table block to have.

I think it would be handy for table block, but columns block (and others like images or group) could really benefit from this feature too. It would be a shame if we had to use tables instead of columns, just because they allow for this particular styling option (although we would make a full-circle to the beginnings of web design where everything was a table :) )

[iamtakashi]

Border control would be a welcome addition to column block as well as other blocks like group, image, cover, and even query loop block. If there are many blocks that could benefit from border control, I think it makes sense to be worked on.

[paaljoachim]

This can be very interesting! Border controls gives us additional design options.
I'll ping @ItsJonQ Jon for this issue, as he might have some thoughts to share here.
I will also add the Design Tools label.

[paaljoachim]

@aaronrobertshaw Aaron if I remember correctly, you are working on something like this.

[aaronrobertshaw]

Thanks for the mention @paaljoachim.

Lately I've been working on adding additional border block support features. This looks like a good opportunity to take that for a spin. At the moment, the border block support does not allow configuring borders for individual sides however it is likely to evolve in that direction. It will just need some design input around the UI to achieve that.

Would it be an acceptable first step if you could only configure entire borders i.e. all sides at once?

A theme could set border: none with enough specificity such that only the borders between columns would show. Maybe a block style could provide this ability as well.

When I get the bandwidth I'll create a proof of concept PR.

[paaljoachim]

Hey @aaronrobertshaw I happen to come across this issue as well.

Associated issue:
Add gutter, margin, and padding controls to the columns block
#24874

[aaronrobertshaw]

Hey @aaronrobertshaw I happen to come across this issue as well.

Thanks for rounding all of these up!

I have some pending changes to the borders block support UI that probably need to land before any PR addressing these issues can get approval. I'm hoping to make some progress on it in the coming week.

[aaronrobertshaw]

A proof of concept PR is up ( #31737 ). It might not cover every design eventuality but I think it should help for a start. Any feedback would be greatly appreciated. Thanks.

[aaronrobertshaw]

Updated border support allowing for individual side border configuration has landed which unblocks the final PR adding border support to individual columns.

• Column: Add border support to column blocks #39967

Note: There is no responsive styling for individual column borders however this can be addressed via a follow-up issue.

[bradhogan]

@aaronrobertshaw Is the plan to allow for specific border changes as well (e.g. only add "border-left" or "border-right") versus having to wrap an entire block in the border? This would be ideal to be able to create layouts like this?

[aaronrobertshaw]

Hi @bradley2083 👋

Is the plan to allow for specific border changes as well (e.g. only add "border-left" or "border-right") versus having to wrap an entire block in the border?

Support for individual borders ( e.g. border-left or border-top etc. ) was added via #37770 which merged about 5 days ago.

If there is any functionality you feel is missing or there is something that could be refined, feel free to create an issue and I'll take a look.

Screen.Recording.2022-04-19.at.10.05.23.am.mp4

[bradhogan]

@aaronrobertshaw Nice, that looks perfect! Cheers.

[davipontesblog]

Great, thanks for implementing!

[BrunoAHVincent]

That works for parent columns, but what about child columns? I don't see that setting

[aaronrobertshaw]

Hi @BrunoAHVincent 👋

Borders for individual or child columns were added via #39967 as the scope of this PR was limited only to the parent Columns block. Individual column border support didn't make it in time to land for WordPress 6.0 as it depended on new features that needed a little more time to stabilize. You can find more discussion in #37770 (comment).

The column borders you are chasing should land in 6.1 or are available if using the latest Gutenberg plugin.

Using the latest Gutenberg plugin, here's what I see.

Screen.Recording.2022-06-29.at.11.18.09.am.mp4

I hope that helps 🙂

[BrunoAHVincent]

Excellent, thanks man, can do it with css for now, but good to know coming in next release

[bradhogan]

@aaronrobertshaw Any idea what happened to the individual border options (so you could add/manage top, bottom, left, and right borders individually)? It no longer seems to be an option.

[aaronrobertshaw]

@bradley2083 Individual borders are working ok for me. They've been in Gutenberg since 13.1, I believe. Which versions of WordPress and Gutenberg are you using?

Here's what I'm currently seeing:

Screen.Recording.2022-08-26.at.9.29.07.am.mp4

[bradhogan]

@aaronrobertshaw AH. Somehow GB got deactivated on the site I'm working on. Thanks for the quick reply, all good!

[aaronrobertshaw]

Somehow GB got deactivated on the site I'm working on

Suspected it might be something along those lines. Glad it was easily resolved 👍

Thanks for the quick reply, all good!

Anytime!