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.

• [x] 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.js):

{
    "$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.