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.

This is what I am talking about.

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:

With this approach you can style every core block.

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"
				}
			}
        }
    }

}
And here’s how it looks on the frontend.

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

Source:

Leave a comment

Your email address will not be published. Required fields are marked *