Roots Discourse

How to use theme.json with Sage9?

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')
);
1 Like

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.

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 …

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