Snippet: To create a full circle button (style)

[bph]

Discussed in #325

^{Originally posted by paaljoachim October 22, 2024}
I have been struggling to create a full circle button with the Buttons block in this issue:
WordPress/gutenberg#66081
Justin has been helping out giving feedback. Notice where I mix things up as I looked at the dev blog and partly found some of the needed information.

It would be nice to add it as a code snippet. Showing how to create a code snippet style using the needed code to do so.
Thank you.

In general it would be great to add more code snippets into the Dev blog. Show how to setup a JSON file and code snippets where possible.

[bph]

See also the Slack Discussion: in #core-dev-blog channel

[paaljoachim]

I added some comments to the Slack thread here:
https://wordpress.slack.com/archives/C03RL47B3S8/p1732581578144739

At the moment I have not been able to add the padding the correct way.
WordPress/gutenberg#66081 (comment)

[paaljoachim]

I am having a difficult time figuring out how to use padding in the correct way.
https://app.slack.com/client/T024MFP4J/C03RL47B3S8

I made this initial Google doc: https://docs.google.com/document/d/1bEh5B2BtzAr5hnFmUwnCvBxucSC6D9gC2msBiyIuShk/edit?usp=sharing

Getting the padding in place I believe than that the code snippet should be in order. I just want to land this should be simple tutorial. Thanks.

[justintadlock]

You shouldn't need padding to show off the example with TT4. This works:

register_block_style(
	[ 'core/button' ],
	[
		'name'       => 'button-circle',
		'label'      => __( 'Circle', 'themeslug' ),
		'style_data' => [
			'border' => [
				'radius' => '9999em'
			],
			'css' => 'aspect-ratio: 1; display: flex; align-items: center;'
		]
	]
);

But if you wanted to add/control padding:

register_block_style(
	[ 'core/button' ],
	[
		'name'       => 'button-circle',
		'label'      => __( 'Circle', 'themeslug' ),
		'style_data' => [
			'border' => [
				'radius' => '9999em'
			],
			'spacing' => [
				'padding' => [
					'top'    => '2rem',
					'bottom' => '2rem',
					'left'   => '2rem',
					'right'  => '2rem',
				]
			],
			'css' => 'aspect-ratio: 1; display: flex; align-items: center;'
		]
	]
);

For the Dev Blog post, though, we should promote doing this via JSON rather than PHP as the most standard way of adding block styles. Here's the example with JSON + padding:

{
	"$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"
		},
		"spacing": {
			"padding": {
				"top": "2rem",
				"bottom": "2rem",
				"left": "2rem",
				"right": "2rem"
			}
		},
		"css": "aspect-ratio: 1; display: flex; align-items: center;"
	}
}