Search code examples
wordpresswordpress-gutenberggutenberg-blocks

Is there a way to register core/button styles via theme.json


i am a little bit frustrated. Is there a way to register new button styles outside of the default "fill" and "outline" styles via theme.json? I only see the possibility of doing that with js:

 wp.blocks.registerBlockStyle('core/button', {
    name: 'primary-button',
    label: 'Primary',
    isDefault: true
  });

I find that a little bit "over the edge" to create such a simple thing. Would be nice if someone can help. Would be nice, if one can do it like the following:

"styles": {
  "blocks": {
    "core/button": {
      "blue": {
        "label": "Blauer Button",
        "className": "bg-blue-500 text-white hover:bg-blue-600"
      },
      "red": {
        "label": "Roter Button",
        "className": "bg-red-500 text-white hover:bg-red-600"
      }
    }
  }
}

Solution

  • Your understanding is correct, that is the only way at the moment to register new styles and I definitely share your frustration in that it would be much easier to register from themes.json.

    I would advise to go look through the Gutenberg Github repo though as I'm almost certain this discussion has been brought up before or feel free to post again there to get feedback directly from development team:

    https://github.com/WordPress/gutenberg