Edit site is not working

kafleg commented 2 years ago

Description

While checking Twenty Twenty Two theme with the latest version of Gutenberg(org version) and while clicking on edit site, it isn't working. The blank page appears.

There is error in browser console, 
index.min.js?ver=8de1f6e7225b2fd27bb5d786ddbd16b8:15 

       Uncaught (in promise) TypeError: Cannot destructure property 'id' of '(intermediate value)' as it is null.
    at Ze (index.min.js?ver=8de1f6e7225b2fd27bb5d786ddbd16b8:15)
    at Ze.next (<anonymous>)
    at tt (index.min.js?ver=8de1f6e7225b2fd27bb5d786ddbd16b8:15)
    at tt.next (<anonymous>)
    at index.min.js?ver=79381db76ebb53a195b3b8fa77d1a91b:1

wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=8de1f6e7225b2fd27bb5d786ddbd16b8

Screenshot of the issue,

Step-by-step reproduction instructions

Install the latest WP
Install the latest Gutenberg from org
Install Twenty Twenty-Two theme from GitHub or install another FSE theme
Visit front page and click on Edit Site menu at the top

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

kafleg commented 2 years ago

P.S.: WordPress version used: 5.8.2 Gutenberg version: 11.9.1 Browser: Edge

None of the other plugins were installed.

kafleg commented 2 years ago

Also, When checking from the Admin panel, it is not working from here too.

Andrew-Starr commented 2 years ago

It was broken in 11.9.0 (exactly same issue as in your attached screenshots) and then fixed in 11.9.1 https://github.com/WordPress/gutenberg/pull/36516

Now in 11.9.1 I am unable to recreate the issue and the editor is working correctly when I test it.

andrewstaffell commented 2 years ago

I am experiencing the same problem with 11.9.1 and 5.8.2

Andrew-Starr commented 2 years ago

Attached video of the Editor working correctly with WP 5.8.2 & Gutenberg 11.9.1

I realised after recording that I was using Firefox but it still works correctly in Edge and Chrome.

https://user-images.githubusercontent.com/94701043/143059025-3ba56f91-a5ee-4114-aed3-2b6409ffd301.mp4

ellenbauer commented 2 years ago

I'm following here, since I have an Aino theme user who is reporting the same issue. I tested it in Chrome and I see the issue, too.

michaelbonert commented 2 years ago

Same problem here: Just a blank site when starting the editor. It stopped running after updating Gutenberg 11.8 to 11.9. Still not running with 12.0

WP: 5.8.2 Gutenberg: 12.0.1 Browser: Safari, Firefox and Chrome

kafleg commented 2 years ago

Hello All, Would you please check once by changing the permalinks?

I had no idea how the Custom Structure permalink was selected in default. I changed it to the Post name and its working fine. Would you please see which permalink is selected under Settings > Permalink?

michaelbonert commented 2 years ago

I checked the permalinks: Post name was selected.

I changed it to Numeric -> Editor doesn't work Changed it back to Post name -> Editor doesn't work

michaelbonert commented 2 years ago

Just updatet the Gutenberg Plugin to 12.0.2. Unfortunately, the editor doesn`t run here either. Only a blank page is shown.

michaelbonert commented 2 years ago

Since Gutenberg Update 12.1.0 the editor is working again. Thanks.

andrewstaffell commented 2 years ago

It's still broken for me under 12.1.0 (Appearance > Editor results in a blank screen with the Cannot destructure property error in Console).

Workaround is to append &postType=wp_template to the URL manually. Then it loads.

In other words: Blank screen at /wp-admin/themes.php?page=gutenberg-edit-site Editor loads correctly at /wp-admin/themes.php?page=gutenberg-edit-site&postType=wp_template

lukecarbis commented 2 years ago

Reporting in that I'm experiencing the same problem.

WordPress 5.8.2
Gutenberg 12.1.0
Twenty Twenty Two 0.5

@andrewstaffell's workaround works for me to show a list of templates, but I can't edit any.

andrewstaffell commented 2 years ago

Still broken for me in 12.2.0. Error unchanged.

Uncaught (in promise) TypeError: Cannot destructure property 'id' of '(intermediate value)' as it is null.

lukecarbis commented 2 years ago

I just tried the latest in twentytwentytwo's develop branch, and it works. This is a theme issue, not a Gutenberg issue, and it will be fixed in the next release.

If someone else could confirm, I'll close the issue.

andrewstaffell commented 2 years ago

Still broken for me in 12.3.0 regardless of theme.

If it'll be fixed in the next release (of Gutenberg or WP) fine!

annezazu commented 2 years ago

I tried replicating this with the following setups and couldn't:

Test 1: WP 5.8.2 with GB 12.3 and TT2 with permalinks set to Post Name.
Test 2: WP 5.8.2 with GB 12.3 and TT2 with permalinks set to Custom Structure.
Test 3: WP 5.9 RC1 with GB 12.3 and TT2 with permalinks set to Post Name.
Test 4: WP 5.9 RC1 without GB and TT2 with permalinks set to Post Name.
Test 5: WP 5.9 RC1 with GB 12.3 and TT2 with permalinks set to Custom Structure.
Test 6: WP 5.9 RC1 without GB and TT2 with permalinks set to Custom Structure.
Test 7: WP 5.9 RC1 with GB 12.3 and TT2 with permalinks set to Numeric.
Test 8: WP 5.8.2 with GB 12.3 and TT2 with permalinks set to Numeric.

I checked both by going to Appearance > Editor (beta) and, while viewing the site, selecting "Edit Site" in the toolbar.

Of note, can't test TT2 without Gutenberg with 5.8.2 since that still requires the GB plugin to work. Can someone share their site info so I can try to track this down more?

Further, please test against 5.9 RC1 if you can :)

annezazu commented 2 years ago

Can anyone else still replicate this problem? @lukecarbis @andrewstaffell @michaelbonert @ellenbauer @kafleg I cannot replicate with 5.9 RC2 with TT2 but want to be sure to follow up :) If you can share more about your setup if you can replicate, that would be great.

michaelbonert commented 2 years ago

My editor is still running (since Gutenberg Update 12.1.0) My actual configuration: WP 5.8.3 - GB 12.3.2 - Aino Theme 2.5.0 with permalinks set to Post Name.

andrewstaffell commented 2 years ago

Surprisingly still broken for me in WP 5.9 RC2, regardless of theme.

Even if I activate TT2 I still get a blank screen and the same error in console: Uncaught (in promise) TypeError: Cannot destructure property 'id' of '(intermediate value)' as it is null.

Happens at both /wp-admin/site-editor.php and /wp-admin/themes.php?page=gutenberg-edit-site URLs.

I don't know what the id property that's being consulted there is, but if there's anything I can test/check in console let me know!

annezazu commented 2 years ago

cc @noisysocks flagging for you. I cannot replicate this but others can!

noisysocks commented 2 years ago

The error message sounds similar to the one in https://core.trac.wordpress.org/ticket/54507.

Could you check that you have a .htaccess file? It may be that this is the same issue as described in https://core.trac.wordpress.org/ticket/54507#comment:14 where misconfigured sites (no .htaccess) fail ungracefully.

andrewstaffell commented 2 years ago

.htaccess is present and has the correct WP rules in it.

I've tried messing with the permalink settings to no avail.

In case it helps to debug and/or add the required sanity checks, the line of code that's failing is in wp-content/plugins/gutenberg/build/edit-site/index.min.js and is line 1242 when I use Chrome Dev Tools to pretty print it. The specific (minified) line is:

 const {id: n, slug: l} = yield c.controls.resolveSelect(u.store, "__experimentalGetTemplateForLink", e.path);

kafleg commented 2 years ago

I am not able to replicate it now. Tested in RC2

noisysocks commented 2 years ago

I think we need to fix https://github.com/WordPress/gutenberg/issues/37236 as a first step so that we can see what the real underlying error is in all of these cases. It's not realistic that we can do this and then fix the underlying issue in time for WP 5.9 though so I'll bump this from the board and add this issue to my list of things to look at for WP 5.9.1.

stuffnting commented 2 years ago

With WP 5.9, when there is a home.html template file, the theme editor works, when there is no home.html template file I get the following error and a blank white screen:

Uncaught (in promise) TypeError: Cannot destructure property 'id' of '(intermediate value)' as it is null. at actions_setPage (edit-site.js:1019:9) at actions_setPage.next (<anonymous>) at actions_showHomepage (edit-site.js:1052:31) at actions_showHomepage.next (<anonymous>) at redux-routine.js:885:55 at nrWrapper (site-editor.php:5:30071)

The URL has:

site-editor.php

With the Gutenberg plugin, and no home.html file, the editor launches with the message:

You attempted to edit an item that doesn't exist. Perhaps it was deleted?

And, the top centre template/part selector does not work.

The URL has:

/site-editor.php?postType=wp_template&postId=fse-tester%2F%2Fhome

andrewstaffell commented 2 years ago

We still have the WSOD in 5.9, with or without Gutenberg plugin activated, BUT when the plugin is activated we now seem to get a different error message than the destructure one above.

The new one is:

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

... and that is apparently coming from themes.php. If I follow the web inspector link to that file, I see:

TypeError: Cannot read properties of undefined (reading 'requestContent')

Hope this is useful!

annezazu commented 2 years ago

Very useful! Thank you so much for following up with more details. @stuffnting can you clarify what you did & why to remove your home.html template?

stuffnting commented 2 years ago

I was writing a theme from scratch and started off with only index.html and single.html: the theme editor did not work.

When I switched the theme over to TT2, the theme editor worked.

Switching back to my theme, I looked at the error in the console, and followed the link to the code where it occurred.

It was:

function* actions_setPage(page) {
  var _page$context;

  if (!page.path && (_page$context = page.context) !== null && _page$context !== void 0 && _page$context.postId) {
    const entity = yield external_wp_data_["controls"].resolveSelect(external_wp_coreData_["store"], 'getEntityRecord', 'postType', page.context.postType || 'post', page.context.postId);
    page.path = Object(external_wp_url_["getPathAndQueryString"])(entity.link);
  }

  const {
    id: templateId,
    slug: templateSlug
  } = yield external_wp_data_["controls"].resolveSelect(external_wp_coreData_["store"], '__experimentalGetTemplateForLink', page.path);
  yield {
    type: 'SET_PAGE',
    page: !templateSlug ? page : { ...page,
      context: { ...page.context,
        templateSlug
      }
    },
    templateId
  };
  return templateId;
}

In particular, the line: id: templateId.

I guessed the theme editor could not find the initial template it was looking for. I also noted that, when using TT2, the theme editor opened with home.html.

So, I added home.html to my theme... BINGO, the theme editor now worked.

andrewstaffell commented 2 years ago

Finally working for me in Gutenberg 12.6.0 (WP 5.9). No WSOD, loads Page template with homepage ready for editing.

It might be that I didn't previously have a homepage set (recent local change preparing for our launch), rather than changes in 12.6.0 specifically, but I've just tried unsetting it and it still works, so not sure.

skorasaurus commented 2 years ago

Thanks for all of the reports; closing since all of the reporters in the issue are no longer experiencing it.

aadilayub commented 1 year ago

I'm experiencing this in a blank block theme as well, while following the Low code block theme tutorial.

My theme contains three files,

index.php
```
<?
```

style.css

/* 
Theme Name: Practice
Author: Aadil
Description: A practice theme made for learn.wordpress.org
Version: 1.0
*/

templates/index.html (blank)

This is what I see in the browser when I go to the site editor:

(there are no javascript errors in the console)

This happens with or without index.php present.

For reference, I'm using WordPress 6.1.1

aadilayub commented 1 year ago

Just to leave an update, I added a theme.json file to my theme and the site editor started working. Is this as designed?

annezazu commented 1 year ago

@jonathanbossenger mind taking a look here when it comes to the tutorial aspect?

jonathanbossenger commented 1 year ago

@annezazu I can confirm that with WordPress 6.1.1, creating an empty theme, with just a style.css, index.php, and templates/index.html file (the minimum required files for a block theme), and attempting to edit the newly created/activated theme in the Editor results in a blank screen.

With debugging enabled

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'WP_DEBUG_LOG', true );
define( 'SCRIPT_DEBUG', true );

Nothing is logged to the debug.log, and no errors are reported to the browser console:

Adding a theme.json file with an empty JSON object to the theme fixes the problem in 6.1.1 and I am able to edit the theme in the Editor.

I then rolled back to the site to WordPress 6.1 and removed the theme.json from the theme, I was able to edit the theme in the Editor. So it looks like this was regression reintroduced in WordPress 6.1.1.

ndiego commented 1 year ago

@jonathanbossenger are you able to retest with the latest version of Gutenberg active? I am no longer seeing any issues with Gutenberg, but am able to replicate without Gutenberg. This PR fixes the issue and will be included in 6.2. Let me know if everything is working properly with Gutenberg active and I will close out this issue. Thanks!

jonathanbossenger commented 1 year ago

@ndiego, whoops, I should have done that in my testing, shouldn't I? 🙈

I can confirm that everything works as expected with the latest version of the Gutenberg plugin (15.0.1) installed and active this is fixed, and therefore will be fixed once it's included in 6.2.

ndiego commented 1 year ago

Haha no worries, thanks for confirming @jonathanbossenger. I'm closing this one out. 💪

WordPress / gutenberg