Columns Block > allow border radius on columns

[bradhogan]

For some reason the parent columns block allows border-radius but not the individual column blocks.

This would be a useful design feature. For instance, if you have three columns and each column display price options, one might want to add a border radius to make the price options appear more soft. Separate issue but would also be nice to add a Box Shadow option to columns, groups, pullquotes and I'm sure I'm missing other blocks but would be a great design option.

Thanks!

[mikemcalister]

I would love to see some movement on this. One of the most powerful features of the columns block is creating consistently sized content boxes. That often includes applying a background (and border radius) on individual columns.

[bradhogan]

Any updates on this one?

[aaronrobertshaw]

Thanks for creating this issue @bradley2083 👍

Border-radius was, for the moment, omitted from the border support for individual column blocks due to some concerns raised around the need to clip the column content. This introduces some UX issues in the editor, in particular, clipping the content would also clip the block inserter button within the Column block.

You can find some history and context in the original PR adding border support (color, style, and width) to the Column block. There is also a draft PR where I explored adopting radius support along with a "clip content" option that could be toggled on and off.

Supporting border-radius is definitely something we want, the catch is finding the right balance between the feature and usability.

There is also an ongoing effort to increase block support adoption across all blocks. The Column block and its borders will be a part of that. You can follow the overall progress towards block support adoption or more specifically the border supports in the following tracking issues:

• Tracking: Addressing Design Tooling Consistency #43241
• Tracking: Border Design Tools Consistency #43247

I hope that helps!

[gabrieltogan]

man i have the same problem... any updates? or creative tipps ?

[mikemcalister]

@gabrieltogan As a temporary workaround, you can create a block style for the single column and apply the border radius style to it.

[aaronrobertshaw]

any updates?

Thanks for touching base on this one. It is still on the radar; however, higher-priority work for WP 6.2 has unfortunately taken precedence. Given there are some potential workarounds, I'd expect this to remain a lower priority for a little while longer.

[gabrieltogan]

I have found a workaround! install ''Gutenberg Blocks Library & Toolkit – Editor Plus'' plugin and when editing your page you will find the ''border radius'' setting and you can edit individual columns :)

[maurodf0]

Hi, i'm currently developing a block theme and searching for a way to add border radius to a column, is this still no possible?

[aaronrobertshaw]

Hi @maurodf0, I'm unaware of any further advancements in this feature. Unfortunately, I've had to focus on other priorities in recent months.

As it stands, there is no specific border radius support for individual columns. You might still have some options though depending on your needs.

If you want border radius on all columns you could generate styles that apply the radius via theme.json for the core/column block type. Your theme would need to handle applying the appropriate clipping styles e.g. overflow: hidden. Keep in mind the issues this might bring in the editor where the block inserter inside the column may become hidden or clipped itself.

You can see the inserter being clipped in the PR description for the draft PR exploring adding border radius support to columns.

I hope that helps or at least sparks some ideas on how you might get your desired result 🤞

[maurodf0]

Hi @maurodf0, I'm unaware of any further advancements in this feature. Unfortunately, I've had to focus on other priorities in recent months.

As it stands, there is no specific border radius support for individual columns. You might still have some options though depending on your needs.

If you want border radius on all columns you could generate styles that apply the radius via theme.json for the core/column block type. Your theme would need to handle applying the appropriate clipping styles e.g. overflow: hidden. Keep in mind the issues this might bring in the editor where the block inserter inside the column may become hidden or clipped itself.

You can see the inserter being clipped in the PR description for the draft PR exploring adding border radius support to columns.

I hope that helps or at least sparks some ideas on how you might get your desired result 🤞

Absolutly no problem. Rather thanks to all the work you and all the contributors put in Wordpress.
Thanks for the suggest, i try with this.

[porg]

My design need

• Column blocks within Columns block styled as tiles of dynamic but equal height (they can do this)
• Where the column block has rounded edges. Missed the border radius attribute on the Column block:

WordPress.Columns.block.missing.Border.Radius.attribute.mp4

UX concerns for block inserter getting invisible

@aaronrobertshaw

clipping the content would also clip the block inserter button within the Column block.

Also challenging in this regard: #32644

• In other words: The Block Editor widgets need to be "robust within their context".

• Did those UI elements meanwhile get that additional "robustness" (reliable visibility)?

• Then you could try to tackle this again.

[aaronrobertshaw]

Did those UI elements meanwhile get that additional "robustness" (reliable visibility)?

Thanks for the question @porg, I'm not aware of any changes that solve or avoid the issue with the block inserter.

Unfortunately, I do not have the bandwidth to continue exploring the adoption of border-radius support for the Column block, however, I'd be more than happy to help in reviewing any PRs proposing new solutions.

[bgardner]

Just pinged @richtabor on this very issue because I am working on a project that needs border-radius support on the Column block. I would love to see this being considered.

[mikemcalister]

Resurfacing this again. The current workaround to get border radius on individual columns is to add a group inside the column. This can work, but it then requires you to apply other workarounds to get the same behavior/styling of the column.

For example, by default, columns stretch to equal height. If you put a group inside there with a background, the background hugs the group and does not stretch the height of the column. You can set a min-height of 100% on the group, but that can behave oddly on mobile.

With border radius on individual columns, we can simply style the column itself without an inside group element, keeping the markup cleaner.

[bgardner]

Given that the Column block already supports Border and Shadow settings, enabling Border Radius makes sense. The lack of it feels more like an oversight than a reasoned approach.

[aaronrobertshaw]

Thanks for the feedback @mikemcalister and @bgardner 👍

The lack of it feels more like an oversight than a reasoned approach.

Hopefully, the prior discussion on both this issue and the original exploration into this, show this is not the case.

Adopting border-radius support in part requires clipping content via overflow: hidden. This has a detrimental effect in the editor as it can hide the block inserter for the column.

If you aren't concerned by this side effect for your use case, e.g. very small border radii only, another option could be to add a blocks.registerBlockType filter to your theme or a plugin, extending the Column block type to opt into the border-radius support.

For border-radius support to be adopted by default in the core Column block, I think we still an approach that maintains the UX around inserting further blocks to a column with a radius applied. A compromise option might to be add a setting to the Column block allowing clipping content to be toggled on and off. Some design thought would be required as to how to communicate that this control can "unhide" the block inserter.

[bgardner]

@aaronrobertshaw Forgive my comment (which was intended to be more tongue-in-cheek than anything) as I did not go back and see the original exploration. Obviously this makes a lot of sense, and in my case(s), I am more than happy to continue using the Group block inside and apply any border radius to that.

[aaronrobertshaw]

Not a problem 👍

FWIW, support for border radii on column blocks would be great to see. We just need to find an accessible and user-friendly way to achieve it. Unfortunately, I didn't find one, so I'm hoping fresh ideas surface soon 🤞

[richtabor]

Adopting border-radius support in part requires clipping content via overflow: hidden.

Curious, if we add border radius to columns, like it is today on Group block, then both would work the same way right—with no clipping? The group block does not hide overflow today.

[deryckoe]

I think it would be convenient to apply clipping to all child elements of the column in case it has border-radius. I don't think someone would apply border-radius and expect to see content outside that radius.

[richtabor]

It's not done for the group block though. And if we do apply clipping, the inserter can be clipped.

Seems the best course of action would be to treat this exactly like the Group block. Then if we want both to clip as well, we figure out a method that works in either scenarios (as they're the same).

This way, we get border radius on individual columns, that works well for most scenarios.

[aaronrobertshaw]

I can dust off #40925 or better still create a fresh PR for adding radius support to columns along the lines of the Group block.