Allow borders on image, group, cover blocks

[enriquesanchez]

Consider this example:

Having the ability to add borders (with custom color selection) would allow for more compelling layouts and patterns in Gutenberg.

+1 👍

Allow borders not only to image blocks. All blocks would be benefited from dotted, dashed, solid, double, groove borders (and why not: ridge, inset, outset, mix).

A divider block is great to achieve a full-width horizontal border or independent borders.
Borders on each block are great to achieve vertical dividers or borders strictly positioned together with the text in a complex grid.
Example:

[iamtakashi]

It's probably obvious, but a border-radius control with this would be a welcome addition to many blocks to create rounded cornered elements with group, cover, image, etc.

[iamtakashi]

Liberal use of borders that we see often lately, for example:

It'd be great if this gets picked up soon.

[carolinan]

So we need controls for:

• Selecting which side the border is on (1-4 sides) and:

• Border thickness

• Border style, that also illustrates what the style looks like and not only presents with a name.

• Border color

• Border radius (this control already exists but not for individual sides)

[pbking]

Now that #25791 has been merged to add radius as a block support, adding others controls just involves amending to what's been done there right? @aaronrobertshaw are there any plans for the rest of these features? I'm trying my hand at integrating that block support into a block or two to see how it works out.

[pbking]

I successfully added the __experimentalBorder.radius to the core/code block and the editor behaved as expected per #25791 . And setting border.customRadius flag in a theme would disable this as expected.

However I was unable to leverage a Theme's theme.json to produce changes in the style as other block supports appear to provide. Is this behavior I should open a ticket to track?

[annezazu]

This came up as a request for the eleventh call for testing for the FSE Outreach Program:

I also wanted to add a border, but the option does not exist for the block. Instead, I had to wrap it in a Group block to create the effect. I took it a step further by adding padding and background color, essentially creating a two-color border. The purist in me cringes at wrapping an image in a <div> element just to add a border. Users should be able to add it directly to the Image block.

Updated to include a desire for this in the All Things Media exploration too:

Implementing the border options across the range of media-related blocks is low-hanging fruit.

Passing along so folks are aware this is still being asked for :)

[EdithAllison]

👍 from me! I'm actually pretty surprised this isn't part of the editor yet. Dualtone for image block seems a really weird thing to prioritise over borders.

[aaronrobertshaw]

With #41153 landing, cover, image, and group blocks now support borders.

[paaljoachim]

Thank you Aaron!

[porg]

Thanks! In which Gutenberg plugin version will this be available?

[paaljoachim]

Hi @porg

The way I found that out was to first locate the PR mentioned by Aaron.
#41153
Then scrolling to almost the bottom where I noticed:
bot added this to the Gutenberg 15.6.
As 15.5 will be released tomorrow. 15.6 will be released to the WordPress repository about two weeks from tomorrow.

[porg]

@paaljoachim

• Thanks for explaining so clearly how the Gutenberg / Github DevOps and release cycle work.
• Also note: The Milestone can not only be found in that bot message, but in the PR's right hand side panel in the "Milestone" section (visible on Tablet+, on Mobile at the very page bottom).