How to use theme.json with Sage9?

[kero]

Hello,

I’m trying to add theme.json for Block Editor settings to a Sage 9 theme. Added the file to ./resources/ and in the editor some parts were working (e.g. colors), however others were not (e.g. layout) and on the frontend it wasn’t working at all.

Some debugging later I realized that when resolving for the theme.json the Block Editor gets the wrong path:

$file_path actual value:

/var/www/.../themes/sage/resources

but should be

/var/www/.../themes/sage/resources/theme.json

Trying tinkering with the theme_file_path filter in functions.php but to no avail … My current workaround is having to edit Gutenberg plugin files:

Before

        private static function read_json_file( $file_path ) {
                $config = array();
                if ( $file_path ) {

Now (working)

        private static function read_json_file( $file_path ) {
                $config = array();
                if (!is_file($file_path) && is_file($file_path . DIRECTORY_SEPARATOR . 'theme.json')) {
                        $file_path .= DIRECTORY_SEPARATOR . 'theme.json';
                }
                if ( $file_path ) {

Anybody else got experience with this?

EDIT

As these things go, I think I found a workaround: In functions.php I simply removed the theme_file_path filter. So far in dev it seems to have nothing broken.

array_map(
    'add_filter',
    // ['theme_file_path', 'theme_file_uri', 'parent_theme_file_path', 'parent_theme_file_uri'],
    ['theme_file_uri', 'parent_theme_file_path', 'parent_theme_file_uri'],
    array_fill(0, 4, 'dirname')
);

[djmtype]

@kero

As these things go, I think I found a workaround: In functions.php I simply removed the theme_file_path filter. So far in dev it seems to have nothing broken.

That seems dangerous?! Have you had any issues afterwards?

I actually didn’t have to comment out theme_file_path, and it’s working. My problem was, I wasn’t sure where to place theme.json. Once you add this file to resources, it seems to remove the editor max-width.

Surprisingly, no one else has been utilizing theme.json to manage these settings? That’s disappointing. This beats writing dumb filters via php.

[kero]

That seems dangerous?! Have you had any issues afterwards?

Actually, we switched back to classic editor shortly after. So yet I don’t have any experience about this, sadly. For new projects, we’ll most likely go directly with Sage10.

it seems to remove the editor max-width.

In ./resources/ some config was working for me as well, but others wasn’t. Not sure what this was about …

[thunderdw]

it seems to remove the editor max-width.

Does your theme.json include a version number? I had the same issue with removing the editor max-width, but once I added a version to the top it respected those settings.

Theme.json that’s working for me with Sage:

{
  "version": 1,
  "settings": {
    "layout": {
      "contentSize": "700px",
      "wideSize": "1200px"
    }
  }
}