Block style variations

With each new version of WordPress, the Gutenberg editor becomes more powerful. In this short article, I’ll explain how to create new block style variations, giving your users or clients more options to easily customize their site’s interface.

If you look at the Button block, you’ll notice it comes with two style variations: “Fill” and “Outline.” This allows users to choose the appropriate button style for different purposes. However, two options might not be enough for some needs. So, how can you add a new style variation?

Starting with WordPress 6.6, it’s quite simple. All you need to do is create a new JSON definition and place it in the theme/styles/block folder. Here’s how it’s done:

Within the JSON file, you’ll use the standard schema, just as you would in the theme.json file. Below is an example of a code snippet for an “Inside Out” variation.

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "title": "Inside out",
    "slug": "button-inside-out",
    "blockTypes": ["core/button"],
    "styles": {
        "elements": {
            "button": {
				":hover": {
					"color": {
                        "background": "var(--wp--preset--color--deep-blue)",
                        "text": "var(--wp--preset--color--base)"
					}
				},
				"border": {
					"color": "var(--wp--preset--color--deep-blue)",
					"radius": "50px",
					"width": "2px",
					"style": "solid"
				},
				"color": {
					"background": "var(--wp--preset--color--base-2)",
					"text": "var(--wp--preset--color--deep-blue)"
				},
				"spacing": {
					"padding": {
						"bottom": "0px",
						"left": "25px",
						"right": "25px",
						"top": "0px"
					}
				},				
				"typography": {
					"fontSize": "12px",
					"fontStyle": "normal",
					"fontWeight": "500",
					"letterSpacing": "1px",
					"textTransform": "uppercase",
					"lineHeight": "44px"
				}
			}
        }
    }

}

---

Did you find this article helpful? Let me know, and I’ll be happy to share more tips.

Source: