Button block: can not easily make a full round button

[paaljoachim]

Description

First of all I expect to be able to change the Border Radius values in the buttons Block to make a full circle.

An example of writing 50% in the Border Radius control.
Button width at 25%
No padding or margin.

Changing to 50% button settings width.
Changing padding top and bottom to value 6 (full padding).
It now changes to a very big circle on the backend.

The frontend changes the round circle button depending on screen size. It is responsive. If one makes the window small it shows a full circle.
Here is an example of 1400 ish pixel width.

I just wanted a small fully round circle button. Not a huge green kinda round button depending on size of the browser window.

I am calling this a bug, but perhaps one can instead say that an enhancement is needed....

Step-by-step reproduction instructions

1. Add a Button block.
2. Add a button.
3. Add 50% to border radius.
4. Explore and see what I wrote above.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.6.2
Gutenberg plugin: 19.4
Theme: Twenty Twenty Four.
Browser: Brave

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

[paaljoachim]

I end up making a circle in Affinity Photo and added the circle as an image here: https://ateistene.no/bli-medlem/

[justintadlock]

Just changing this to an enhancement since it is a custom design implementation. Generally, to create a full circle for any element, you need to be able to set the exact same width and height. That's not something Button block supports, so it would be an enhancement to add extra design tools.

It could also be implemented as a custom block style.

[justintadlock]

Here's a quick "Circle" button block style that you can drop into your theme's /styles folder (name it something like button-circle.json):

{
	"$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json",
	"version": 3,
	"title": "Circle",
	"slug": "button-circle",
	"blockTypes": [ "core/button" ],
	"styles": {
		"border": {
			"radius": "9999em !important"
		},
		"css": "aspect-ratio: 1; display: flex; align-items: center;"
	}
}

[paaljoachim]

Thank you very very much Justin! This is super useful!

If I wanted to use the default theme Twenty Twenty Four (or later on 2025) and have the Code Snippets Pro plugin installed. What would the code look like if I only added it to a code snippets PHP function?

https://developer.wordpress.org/news/2024/06/21/styling-sections-nested-elements-and-more-with-block-style-variations-in-wordpress-6-6/#registering-via-php

I added this code:

register_block_style(
	[ 'core/button' ],
	[
		'name'       => 'Circle',
		'label'      => __( 'button-circle', 'themeslug' ),
		'style_data' => [
			'border' => [
				'radius' => 'var:preset|border|9999em'
			]
		]
	]
);

The em value is not showing up so the button is square. How would I also add a border of 1px with a black color?
We get through this and I can create a tutorial out of this. And/Or that we add it as another example to the developer blog.

That is what is nice with code snippets one need to only add it to one plugin.

[justintadlock]

@paaljoachim - It looks like you're mixing up the "pipe" syntax for presets with plain CSS for the radius value. You can use 9999em directly.

You can write the border part like so (added the 1px border too):

'border' => [
	'color'  => '#000000',
	'style'  => 'solid',
	'width'  => '1px',
	'radius' => '9999em'
]

[mtias]

Maybe buttons should support aspect ratio UI at some point.

[paaljoachim]

Hey Justin @justintadlock

This is where it is at right now.

In the Code Snippet plugin I have this code:

register_block_style(
	[ 'core/button' ],
	[
		'name'       => 'Circle',
		'label'      => __( 'button-circle', 'themeslug' ),
		'style_data' => [
			'border' => [
				'color'  => '#000000',
				'style'  => 'solid',
				'width'  => '1px',
				'radius' => '9999em'
						]
						]
	]
);

---

Going to a post and adding in the Buttons block and the Button circle style.
Backend:

Frontend:

I expected to see a more round circle though. Removing most of the text inside the circle I see that is becomes rounder.
I am still not getting a full circle without needing to adjust the padding manually through the UI controls.

Is there a kind of index of the various controls for the theme.json and the variation used in a code snippet?
For instance in the correct way adding in padding so that I would get a more circle shape.

[paaljoachim]

@justintadlock
What is the correct method to add padding to the button block?
That I can add to the code.

I added the following to the code above:

'spacing' => [
			   'padding' => [
					  'top'  => '10px',
				          'right'  => '10px',
				   	  'bottom'  => '10px',
				          'left'  => '10px'
						]
			]

But that did not work. The style also disappeared as an option. So that means something is not right.

[paaljoachim]

Current code:

register_block_style(
	[ 'core/button' ],
	[
		'name'       => 'Circle',
		'label'      => __( 'button-circle', 'themeslug' ),
		'style_data' => [
			'border' => [
				'color'  => '#000000',
				'style'  => 'solid',
				'width'  => '1px',
				'radius' => '9999em'
				]
			'spacing' => [
			   'padding' => [
				    'top'  => '100px',
				    'right'  => '100px',
				    'bottom'  => '100px',
				    'left'  => '100px'
					]
						]
						]
	]
);