Empty Website-Editor (JavaScript error) without explicit template selection

[strarsis]

Description

When opening the Website-Editor (Full Site Editing (FSE)-supporting theme),
the editor area is greyed out and no blocks can be placed there, when no page template is explicitly selected.

After explicitly selecting a template from the sidebar (Selecting the logo at the top right opens the sidebar) fixes the issue.
But this shouldn't happen at all - also the page is a front page, so some default template settings should apply.

JavaScript console shows an error:

index.min.js?ver=7701ff6dfaef152c8192984e2b593eee:formatted:1184 Uncaught (in promise) TypeError: Cannot destructure property 'id' of '(intermediate value)' as it is null.
    at He (index.min.js?ver=7701ff6dfaef152c8192984e2b593eee:formatted:1184)
    at He.next (<anonymous>)
    at je (index.min.js?ver=7701ff6dfaef152c8192984e2b593eee:formatted:1208)
    at je.next (<anonymous>)
    at index.min.js?ver=79381db76ebb53a195b3b8fa77d1a91b:1

Step-by-step reproduction instructions

1. Activate a Full Site Editing (FSE)-supporting theme.
2. Ensure that latest WordPress (5.8.1) and Gutenberg plugin (11.6.0) are installed and enabled.
3. Open the Website-Editor, notice that the editor area is greyed out and a JavaScript error occurs.

Screenshots, screen recording, code snippet

Code that caused the exception:

const {id: n, slug: a} = yield T.controls.resolveSelect(s.store, "__experimentalGetTemplateForLink", e.path);

Environment info

• WordPress 5.8.1
• Gutenberg plugin 11.6.0

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

[glendaviesnz]

I wasn't able to replicate this on gutenberg 11.7.0-rc.1 and TT1 blocks theme. It loads the index template by default:

Which FSE theme are you using?

[strarsis]

The site switched from a non-FSE/blocks theme to a FSE/blocks-supporting one, also with different templates.
It seems that the template selected for that page didn't exist in the newly activated theme, hence no valid template was selected for that page. It would be nice if the greyed out editor area could contain a hint for the user, that a valid template has to be selected from the sidebar first (that is on the left side and has to be opened by selecting the logo at the upper left corner). Otherwise the user doesn't know about the issue.

Also the JavaScript error should be fixed, as the code currently expects a valid set template parameter and cannot find it.

[carolinan]

Hi
Can you help me understand the steps to reproduce this?

You mention front page- do you mean that the first theme is non-FSE theme with a front-page.php file?
And the second theme does not have a front-page.html template?

I would expect it to fallback to index.html. 🤔

[tex0gen]

I too had this issue with

WordPress 5.8.1
Gutenberg plugin 11.7.1

It appears if I add /block-templates/index.html and nothing more, this issue crops up. If I add page.html to /block-templates the issue resolves.

On further investigation, it appears to not be selecting the index.html template at all. If I change the "front page" to an actual page, it selects page.html but setting the front page to empty I once again have the same error as above.

Hope this bit of info might help.

[carolinan]

And when you say "change the front page" you mean the Settings > Reading... Your homepage displays.... A static page?

[tex0gen]

@carolinan yes, exactly that.

[jakerambo]

Same for me. According to https://developer.wordpress.org/block-editor/how-to-guides/themes/create-block-theme/.

"There are two files that are required to activate any theme: index.php and style.css.
For the plugin to recognize that a block theme is active, the theme must also include an index.html template
inside a folder called templates."

Adding this doesn't seem to work on existing themes. I haven't tried this on just a bare bones theme with only the above as a start but adding the above to an existing theme results in the error causing the editor not to load. For I added a page.html but that didn't work either. I then added a front-page.html and that resolved the issue.

As @strarsis menitioned earlier the JS error should be fixed so that it doesn't just fail. If template doesn't exist the template editor should fall back to a template that does exist or show a message if no templates exist.

[carolinan]

I have created a one page theme that only has the index.html template, but I am not able to reproduce this. It displays the same template no matter what the reading setting is on.

Are you able to share the test theme and any more details about your environment including WordPress version and confirm if there are any other plugins installed?

[jakerambo]

@carolinan After further testing here is the exact issue. If you have a front-page.php in your theme then go to /wp-admin/site-editor.php it tries to load the front-page.html template even if that template doesn't exist in your theme's templates folder. It doesn't matter what your reading settings are.

If I remove my front-page.php because I also have a home.php file it then tries to load the home.html template which results in the same issue. If I remove those php files then it loads the index.html as expected. So there is a correlation between the php template files and html template files.

[jakerambo]

If you delete the template after you add it then you see an message that says "You attempted to edit an item that doesn't exist. Perhaps it was deleted?" the difference being that it has query parameters. Where as just going to the site editor from the admin menu does not.

[carolinan]

Block themes are meant to prioritize HTML templates and then use the PHP template if it can't find the HTML template, but the PHP template can never be edited in the site editor.

[jakerambo]

Of course the site editor would not edit the PHP template. That is not what I am saying. I was very clear.

Add a front-page.php template to your example theme. Do not add a front-page.html to your templates folder. Go to the site editor from the admin menu and the editor will be broken with the Uncaught (in promise) TypeError: Cannot destructure property 'id' of '(intermediate value)' as it is null. error.

[joemaller]

@jakerambo that's exactly it.

My experiments with enabling FSE on existing themes were failing with the Cannot destructure property... error. All of these themes contain a front-page.php file. I'm accessing Appearance -> Editor here: /wp-admin/site-editor.php

• The error does not occur if the theme contains both front-page.php and front-page.html.
• The error does not occur if front-page.php is removed from the theme. (may look for page.html instead?)

The error does occur regardless of the Homepage setting in Settings -> Reading: If the php file exists, the Block Theme stuff appears to look for a front-page.html file and throws if that file is not found. With the Homepage setting reverted to "Your latest posts", the Editor still throws an error.

The same thing seems to happen with page.php, if that php template file exists I get the destructure property error unless page.html is added.

[carolinan]

Is there any more information that you can provide about the environment, or a copy of the test themes?
Please understand that I am asking this, not to invalidate what you are experiencing but so that we can narrow down the causes.

I have added templates/index.html to the following themes, and then opened the site editor from Appearance -> Editor
and I can't reproduce it. The site editor loads the index.html file and there are no JavaScript errors in the console.

Fresh install, WordPress 5.9.0. with and without Gutenberg trunk. PC, Windows 10, Chrome. Local.
Themes:
Twenty Seventeen, which has front-page.php and page.php
Twenty Nineteen, which does not have front-page.php but page.php
Twenty Twenty, which does not have front-page.php or page.php but singular.php.

Click to view Site health info

` ### wp-core ###

version: 5.9
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: /%year%/%monthnum%/%day%/%postname%/
https_status: false
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: local
user_count: 1
dotorg_communication: true

wp-active-theme

name: Twenty Twenty (twentytwenty)
version: 1.9
author: the WordPress team
author_website: https://wordpress.org/
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, block-templates, widgets-block-editor, custom-background, custom-logo, title-tag, align-wide, customize-selective-refresh-widgets, editor-color-palette, editor-font-sizes, widgets, menus, editor-style
theme_path: D:\Carolina\Documents\local sites\59test\app\public/wp-content/themes/twentytwenty
auto_update: Disabled

wp-media

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1799
imagemagick_version: ImageMagick 7.0.7-11 Q16 x64 2017-11-23 http://www.imagemagick.org
imagick_version: 3.4.4
file_uploads: File uploads is turned off
post_max_size: 1000M
upload_max_filesize: 300M
max_effective_size: 300 MB
max_file_uploads: 20
imagick_limits:
imagick::RESOURCETYPE_AREA: 8 GB
imagick::RESOURCETYPE_DISK: 1.844674407371E+19
imagick::RESOURCETYPE_FILE: 1536
imagick::RESOURCETYPE_MAP: 8 GB
imagick::RESOURCETYPE_MEMORY: 4 GB
imagick::RESOURCETYPE_THREAD: 8
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, ART, ARW, AVI, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CLIPBOARD, CMYK, CMYKA, CR2, CRW, CUR, CUT, DCM, DCR, DCX, DDS, DFONT, DJVU, DNG, DOT, DPS, DPX, DXT1, DXT5, EMF, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FAX, FILE, FITS, FLIF, FPX, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GROUP4, GV, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCREENSHOT, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBP, WMF, WMV, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, YCbCr, YCbCrA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
ghostscript_version: not available

wp-server

server_architecture: Windows NT 10.0 AMD64
httpd_software: nginx/1.16.0
php_version: 7.4.1 64bit
php_sapi: cgi-fcgi
max_input_variables: 4000
time_limit: 1200
memory_limit: 256M
max_input_time: 600
upload_max_filesize: 300M
php_post_max_size: 1000M
curl_version: 7.67.0 OpenSSL/1.1.1d
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: false

wp-database

extension: mysqli
server_version: 8.0.16
client_version: mysqlnd 7.4.1
max_allowed_packet: 16777216
max_connections: 151

wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: D:\Carolina\Documents\local sites\59test\app\public/wp-content
WP_PLUGIN_DIR: D:\Carolina\Documents\local sites\59test\app\public/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: true
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: true
SCRIPT_DEBUG: true
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: local
DB_CHARSET: utf8
DB_COLLATE: undefined

wp-filesystem

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
`

[jakerambo]

@carolinan From a fresh 5.9 install with no plugins.

Twenty Nineteen - add templates/index.html > add front-page.php > go to editor from admin menu /wp-admin/site-editor.php. = blank white page (js error)

Twenty Twenty - add index.html to existing templates folder > add front-page.php > go to editor from admin menu /wp-admin/site-editor.php. = blank white page (js error)

Twenty Twenty One - add templates/index.html > add front-page.php > go to editor from admin menu /wp-admin/site-editor.php. = blank white page (js error)

Twenty Seventeen - interestingly, I cannot reproduce issue.

Hope this helps.

[joemaller]

@carolinan Here are my steps to recreate the issue from a clean install:

Environment is the official wordpress:5.9.0-php8.0-apache Docker image with the example docker-compose.yml file from the Readme. All files are added on the image using the exec shell.

For a clean start, be sure to remove the docker volumes between runs, or just delete them from the docker-compose file.

Steps to reproduce

1. docker compose up -> five-minute install -> login to wp-admin
2. Change theme to twentytwenty
3. docker compose exec wordpress bash to get a shell,
4. cd wp-content/themes/twentytwenty/
5. Create front-page.php touch front-page.php
6. Enable block theme Editor touch templates/index.html
7. Visit /wp-admin/site-editor.php -- FAIL

The Editor will work correctly after creating front-page.html: touch templates/front-page.html

Alternately, with page.php:

1. docker compose up -> five-minute install -> login to wp-admin
2. Change theme to twentytwenty
3. docker compose exec wordpress bash to get a shell,
4. cd wp-content/themes/twentytwenty/
5. Create page.php touch page.php
6. Enable block theme Editor touch templates/index.html
7. Visit /wp-admin/site-editor.php -- WORKS
8. Select a static Homepage in Settings -> Reading
9. Visit /wp-admin/site-editor.php -- FAIL

The Editor will work correctly after creating page.html: touch templates/page.html

JS error text is the same for both:

Uncaught (in promise) TypeError: Cannot destructure property 'id' of '(intermediate value)' as it is null.
   at K (edit-site.min.js?ver=24578b0989e0620b2bc0a97a2cb08556:2:12033)
   at K.next (<anonymous>)
   at Y (edit-site.min.js?ver=24578b0989e0620b2bc0a97a2cb08556:2:12469)
   at Y.next (<anonymous>)
   at redux-routine.min.js?ver=6c3ab278bc9641b6f62731e018a4449e:2:9334

[Mamaduka]

Hi everyone

The issue was resolved via #38817. The new template resolution method ignores the PHP templates. See this comment for more details - #38817 (comment)