Site Editor not working for TwentyTwentyTwo Child theme

[mervinpraison]

It shows a blank screen when loading the Site Editor

/wp-admin/site-editor.php?postId=twentytwentytwochild%2F%2Findex&postType=wp_template

core-data.js?ver=b4684a7c90f2d858ab7fa74414ad5a54:2721 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'stylesheet')
    at Object.reducer_currentTheme [as currentTheme] (core-data.js:2721:34)
    at eval (eval at <anonymous> (data.js:117:10), <anonymous>:3:107)
    at Object.combinedReducer [as root] (data.js:128:15)
    at eval (eval at <anonymous> (data.js:117:10), <anonymous>:3:67)
    at combinedReducer (data.js:128:15)
    at dispatch (data.js:980:22)
    at data.js:1706:12
    at redux-routine.js:247:16
    at data.js:1636:10
    at Object.dispatch (data.js:1694:10)

[mervinpraison]

Error Message Twenty Twenty Two Child Theme

[costdev]

Hi @mervinpraison, welcome to Trac!

Some tests I've ran:

---

Test: I created a child theme with this style.css file:

/**
 * Theme Name: Twenty Twenty-Two Child
 * Template:   twentytwentytwo
 */

Results: The Editor loads as expected.

---

Test: I copied the Twenty Twenty-Two theme.json file and added a custom duotone.
Results: The Editor loads as expected and the custom duotone is available.

---

Test: I added an empty templates/index.html file.
Results: The Editor loads as expected.

---

Test: I added the following to templates/index.html:

<!-- wp:paragraph -->
<p>Howdy, admin!</p>
<!-- /wp:paragraph -->

Results: The Editor loads the Index template with a Paragraph block that reads "Howdy, admin!".

---

Navigate to Appearance > Themes - Is there a notice shown at the top that reads:

Error: Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.

If not, can you provide more information about how you set up the child theme and some of the modifications that you made?

[mervinpraison]

I am using a "twentytwentytwo-swiss" child theme from ​https://github.com/WordPress/theme-experiments/tree/add/tt2-child-themes

Also using roots bedrock.

All plugins are deactivated, tried various browsers (Chrome, Safari, Firefox) and also on Incognito mode.

Still the same issue.

[mervinpraison]

I did Navigate to Appearance > Themes - and there is no notice as such.

Thanks for testing it and for the prompt reply.

[costdev]

Thanks for the information @mervinpraison!

Test Report

Env

• WordPress 5.9
• ​Roots Bedrock
• Chrome 97.0.4692.99
• WSL2
• Theme: ​Twenty Twenty-Two (Swiss) and a custom child theme with the "Template: twentytwentytwo" header.
• Block Editor
• Plugins: With and without Gutenberg 12.4.1.

Steps to test

1. Set up Roots Bedrock following the installation guide.
2. Follow the normal WordPress install.
3. Clone Twenty Twenty-Two (Swiss) into bedrock/web/app/themes/.
4. Navigate to Appearance > Themes and activate Twenty Twenty-Two (Swiss).
5. Navigate to Appearance > Editor.

The Editor should fail to load.
Open DevTools. You should see the error in the screenshot attached to this ticket.

6. Create a new theme folder in bedrock/web/app/themes/ and add a style.css file with the following:

/*
 * Theme Name: TT2 - Child Theme
 * Template:   twentytwentytwo
 */

7. Activate the theme.
8. Visit the Site Editor.

The same issue should occur.

Results

• The Site Editor loads for Twenty Twenty-Two.
• The Site Editor does not load when using a child theme for Twenty Twenty-Two. Issue reproduced.

---

Milestoning for 5.9.1 to raise awareness of this issue and aid investigation.

[costdev]

Further testing:

I created a custom block theme and a custom child block theme.
Results: Site Editor loads as expected. ✅

I switched the Template: header for Twenty Twenty-Two (Swiss) over to the custom block theme.
Results: Site Editor loads as expected. ✅

I installed TT1 Blocks and switched the Template: header for Twenty Twenty-Two (Swiss) over to tt1-blocks.
Results: Site Editor loads as expected. ✅

Confirmed: The issue only seems to occur with Twenty Twenty-Two child themes.

[costdev]

Further insight:

Roots Bedrock stores the bundled themes in: bedrock/web/wp/wp-content/themes/.
Custom themes are stored in bedrock/web/app/themes.

Test:

1. Copy bedrock/web/wp/wp-content/themes/twentytwentytwo to bedrock/web/app/themes/twentytwentytwo.
2. Navigate to Appearance > Themes and activate Twenty Twenty-Two (Swiss).

Results: Site Editor loads as expected. ✅

As child themes for other bundled themes worked as expected - Unconfirmed

I'm not sure if a fix may be needed in Core/Gutenberg rather than in Roots Bedrock. Adding 2nd-opinion and ask that others join the investigation.

[costdev]

It seems this has been ​reported before as an issue with classic themes in Roots Bedrock.

At the time, the developers said the only issue for classic child themes is the stylesheet not loading, then giving a PHP snippet to enqueue the parent theme's stylesheet - A PHP snippet being something we want to avoid for block themes in the future.

After reviewing my tests, while the Site Editor loads, the styling of the parent theme isn't loaded.

Part of me thinks that if Appearance > Themes shows a theme, then regardless of which directory it's in, features like the Site Editor should work for its child themes. While Roots Bedrock is the environment this issue was noticed in, it seems that the issue could have appeared anywhere that themes are split between multiple folders.

I'll keep 2nd-opinion and remove needs-testing until we can discuss this further and determine the best course of action.

[mervinpraison]

Thanks for testing. Much appreciated.

​https://github.com/roots/bedrock/issues/74 only gives a solution for the front end but not for the WordPress site editor.

I did try adding that code and still, the site editor is not working. Seems like the error is coming from the Javascript file. It's not returning action.currentTheme.stylesheet.

function reducer_currentTheme() {
  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
  let action = arguments.length > 1 ? arguments[1] : undefined;

  switch (action.type) {
    case 'RECEIVE_CURRENT_THEME':
      return action.currentTheme.stylesheet;
  }

  return state;
}

Thanks

[costdev]

Seems like the error is coming from the Javascript file. It's not returning action.currentTheme.stylesheet.

That's right, action.currentTheme is undefined because the parent theme is not in the same themes folder as the child theme. Moving twentytwentytwo into bedrock/web/app/themes will let the Site Editor load, but IMO that shouldn't be necessary.

[peterwilsoncc]

I think this ought to be fixed.

The root cause of the issue is due to a bug in the site editor in configurations with multiple theme directories.

WordPress supports this to account for the Bedrock situation: sites running with WP in a sub-directory and needing access to the default themes. My experience is that it's surprisingly common once composer becomes involved.

[paaljoachim]

Hopefully this is the correct trac ticket to mention the following.

I just want to add in this Gutenberg Github issue I made. Related to publishing in a multisite environment.
​https://github.com/WordPress/gutenberg/issues/38825

The publishing error has happened recently so I am wondering if it is associated with WP 5.9.
I will downgrade to WP 5.8.3 or WP 5.8.2 --> I was still not able to publish.
Installing and activating the Classic Editor. I was able to publish a post or page.

[hellofromTonya]

With 5.9.1 happening in the next hour(ish) and with no fix yet, moving this to 5.9.2.

[audrasjb]

Moving to milestone 5.9.3 since we're about to release 5.9.2.

[audrasjb]

I also reported this on Gutenberg repository, just in case it can be fixed directly upstream.
​https://github.com/WordPress/gutenberg/issues/39556

[audrasjb]

This issue still needs a patch and WordPress 5.9.3 RC1 is scheduled tomorrow.
Moving for 5.9.4 consideration.

[peterwilsoncc]

I've moved this to the themes component as the issue will occur for any site in which the child theme and parent theme are in different folders. The symptom is apparent with the bundled theme but the cause is elsewhere.

I've also reduced the severity to normal as having two or more theme directories is an uncommon set up. For sites with a single theme directory the child themes work as expected.

[audrasjb]

Moving this ticket to next major release since it wasn't addressed during this cycle. Anyone is welcome to move it back to 6.0.x minor releases cycle if a patch is ready to ship.

[desrosj]

Unfortunately, this one did not receive the attention it needs during the 6.1 cycle. I'm going to move this to Future Release to avoid any more repeated punting.