[Resolved] (De)activate Gutenberg Block Controls (theme.json)

[Yannick]

Hello,

I would like to activate or deactivate some additional core block controls. For example I would like to remove the border-radius control from the core button block or add some border-controls to the core group block. I could use GenerateBlocks for that, but I dont want to give all these options to users.

I can use a child theme and add a theme.json file, which generally works, but introduces some bugs e.g. the editor width is unset (same problem) and the inner_container is removed from the group block (that is intended behaviour). I can work around these bugs. Perphaps there are more bugs I have not encountered yet.

So my question is, if there is a better solution to (de)activate Gutenberg block controls? Is using a theme.json file supported by GeneratePress? Would be great but for obvious reasons I can understand that you dont support if offically. Do you know any other problems connected to a theme.json file?

Thank you very much in advance.

Kind regards
Yannick

[Leo]

Hi there,

I would recommend checking with WordPress’ support team for this first.

If they can provide a solution that works in a Twenty series default theme, the same solution should work in GeneratePress.

Hope this helps 🙂

[Yannick]

Hi Leo,

thank you very much for your response. I will check with the WordPress support team.

One more question: Do you know any other way to change the controls of a core block besides the theme.json?

Kind regards
Yannick

[Leo]

I’m not aware of a solution.

This might be a good forum for questions like these:
https://wordpress.stackexchange.com/

[Yannick]

Hi Leo,

I did some research and asked around. There is not other way besides using a theme.json. Took me some time but I got GeneratePress working with a theme.json quite nicely.

Is there any chance that you are going to support/use theme.json in GeneratePress? Some other classic themes are doing that and the theme.json gets more and more important.

[Tom]

Hi there,

It’s absolutely something we will be playing with. If we can add (stable) features in a backward-compatible way, we will definitely do so.

Do you mind sharing your theme.json file so I can take a look?

Thanks!

[Yannick]

Hi Tom,

thank you very much for your response!

Thats my theme.json at the moment:

{
    "$schema": "http://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": { 
        "layout": {
            "contentSize": "900px",
            "wideSize": "1000px"
        },
        "typography": {
            "lineHeight": true
        },
        "border": {
            "color": true,
            "width": true,
            "style": true
        },
        "color": {
            "custom": false,
            "customGradient": false,
            "customDuotone": true,
            "defaultPalette": false,
            "defaultDuotone": false,
            "defaultGradients": false
        },
        "blocks": {
            "core/button": {
                "border": {
                    "radius": false,
                    "margin": true
                },
                "spacing": {
					"margin": true
				}
            },
            "core/group": {
				"spacing": {
					"padding": true,
                    "units": [ "px", "em", "rem", "%" ]
				}
			},
            "core/table": {
                "border": {
                    "style": true
                }
            },
            "core/cover": {
				"spacing": {
					"padding": true
                }
			},
            "core/columns": {
				"spacing": {
					"padding": true,
                    "margin": true
                }
			},
            "core/column": {
				"spacing": {
					"padding": true
                }
			}
        }
    }
}

Its a great way to add/remove block controls, colors, duotones etc. But I encountered three problems:
1. No more inner_group css class, whis is not a big deal and intended behaviour (https://github.com/WordPress/gutenberg/issues/30443)
2. Problems with the alignment of image blocks in the editor (https://wpdevelopment.courses/articles/hybrid-theme-learnings/)
3. The theme.json overwrites the editor width set by GeneratePress, even if I dont set the layout parameter in the theme.json.

Only the third problem is related to GeneratePress. If I add a theme.json, Gutenberg adds some very specific inline CSS, that sets the editor width. (Luckily it is not changing the frontend in any way.) That CSS overwrites the default GeneratePress editor width and also the dynamic width for GP Elements. I wasnt able to disable this behaviour, so I added two additional stylesheets with hardcoded width and !important to restore the default behaviour. THat works fine but seems like a very hacky solution 😀

[Tom]

Thanks for this! Really appreciate it.

It seems most of these issues happen even if you add an empty theme.json file, which is a shame. The first issue you mention where would be a pretty big issue for existing users who are using the Group block.

The other two seem to be fixable, although I need to look into the wide/full alignment more, as my gut says this change would break existing blocks using those old alignwide and alignfull classes.

I made a quick comment on theme.json here as well: https://github.com/tomusborne/generatepress/issues/389#issuecomment-1151683660

Thanks again!

[Yannick]

Hello Tom,

thank you very much for looking into theme.json. I really appreciate it. I have given up on using a theme.json as well, because I dont think it is stable enough.

But I still see the need for using a theme.json in the long run, to activate new Block Editor features or deactivate the ones I dont need on a site. The add_theme_support hooks dont match the theme.json features and I expect this gap to grow in the future. In my testing add_theme_support( 'custom-spacing' ); only adds padding and no margin controls. I am also not able to activate border controls or duotones filters with add_theme_support.

[Tom]

Yea, as of right now it’s simply not worth the guaranteed breakages we would face.

I would also highly recommend not even using those controls as the CSS it outputs is all inline. You’re far better off using a plugin like GenerateBlocks to achieve the same results in a more dynamic way (without breaking things).

We’ll keep a close eye on the theme.json file as things progress – hopefully they continue to improve the backward-compatibility aspect of it.

[Author]

Posts