Fun with group block borders

There are all sorts of useful tools appearing across blocks, and just one of those is the variety of borders you can do on several blocks, group blocks and pull quotes, for example. I wanted to take a little exploration today into what you can create using those.

Adding borders to your theme.json

If you want to have the full border capability on as many blocks as you have right now, you can set the following to your theme.json. This can be set per block also.

"settings": {
	"border": {
		"customColor": true,
		"customRadius": true,
		"customStyle": true,
		"customWidth": true
	},		

You can of course choose to not set any of those if you want to limit options.

What that does is enable the following controls.

As you can see it is picking up the colors I have in my theme. Note that there is no custom color? We can change that also by simply turning that functionality on in the theme.

"color": {
	"custom": true,

By giving this type of on/off control you can set boundaries but still give powerful customization options to creators.

Setting the borders

Changing a border is a simple matter of setting the width, picking a style and then color. It will update real-time, but don’t forget to save! If you want to have a border-radius you can also change that. At any point you can click ‘clear’ to go back.

A little note about radius, the little ‘link’ icon enables you to unlink and control all sides of the radius, which can create interesting effects using group block.

Have fun

One thing these tools allow us to do is to play. There’s an opportunity to see what could be. I would encourage you to let your mind wander and really even if it feels far out there, you are getting to know the tools. I share these not as examples to use but to show what could be, the code is ‘overly enthusiastic for some’.

<!-- wp:group {"style":{"border":{"style":"dotted","width":"40px"},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}},"borderColor":"foreground"} -->
<div class="wp-block-group has-border-color has-foreground-border-color" style="border-style:dotted;border-width:40px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:group {"style":{"border":{"width":"20px","style":"dotted"},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}},"borderColor":"secondary"} -->
<div class="wp-block-group has-border-color has-secondary-border-color" style="border-style:dotted;border-width:20px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:group {"style":{"border":{"width":"10px","style":"dotted"},"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"borderColor":"background"} -->
<div class="wp-block-group has-border-color has-background-border-color" style="border-style:dotted;border-width:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:heading {"style":{"typography":{"lineHeight":"1.2"}}} -->
<h2 style="line-height:1.2">Hi I am a group</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is some text in a group</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Who knows what you will create and learn in doing, distil down to actually use in something later.

<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"100px"}},"border":{"style":"solid","radius":{"topLeft":"100px","topRight":"100px","bottomLeft":"1px","bottomRight":"100px"}}},"borderColor":"foreground","backgroundColor":"background","textColor":"foreground"} -->
<div class="wp-block-group has-border-color has-foreground-border-color has-foreground-color has-background-background-color has-text-color has-background" style="border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:1px;border-bottom-right-radius:100px;border-style:solid;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:100px"><!-- wp:heading -->
<h2>I am a heading in a group</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is some group text</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":51} -->
<div style="height:51px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->