Navigation block: Menu open button doesn't open the overlay with WP 5.8.3. and Gutenberg 12.3.2

[carolinan]

Description

With WordPress 5.8.3 and Gutenberg 12.3.2, the navigation menu button does not work (For either classic or block themes) It does work with 5.9 RC 2 but I expect it to work on both when Gutenberg is active.

Step-by-step reproduction instructions

1. Add a navigation block with different types of content.
2. Try the two settings: Overlay menu always and mobile.
3. Confirm that the menu button works in the editor
4. View the front. Confirm that nothing happens when you try to use the button.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.8.3 Gutenberg 12.3.2 or trunk

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

[carolinan]

Themes which use the old navigation block markup with the inner links still have a working button 🤷‍♀️

[kafleg]

Thank you this issue. There are blocks theme submitted in the WordPress repository and I am reviewing them. Mobile menu is not clickable and I am not able to set them live because of this.

[vcanales]

Hello! I've been unable to reproduce this issue on Firefox, Safari, and Chrome, using trunk, v12.3.2, v12.3.1, and the tags from the current release cycle. Are there other specific instructions I should follow? Perhaps a particular theme that seems to have this issue? I tried all official themes down to "twenty seventeen."

[jasmussen]

Testing this in Chrome and on nightly WP 5.9-RC2-52579, with latest trunk build of Gutenberg I can't reproduce this. Are you able to provide a screenshot or video showing the issue? Which theme are you using? I was using trunk TT2.

[carolinan]

Gutenberg requires minimum WordPress 5.7. So I expect the navigation block to work with 5.8.3. It does not need to be retested with 5.9.

PC, Windows 10 Fresh WP install with Local

Expand site health info

` ### wp-core ### version: 5.8.3 site_language: en_US user_language: en_US timezone: +00:00 permalink: /%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-paths-sizes ### wordpress_path: D:\Carolina\Documents\local sites\basicwordpresstest\app\public wordpress_size: 43.72 MB (45839568 bytes) uploads_path: D:\Carolina\Documents\local sites\basicwordpresstest\app\public/wp-content/uploads uploads_size: 0.00 B (0 bytes) themes_path: D:\Carolina\Documents\local sites\basicwordpresstest\app\public/wp-content/themes themes_size: 6.47 MB (6780262 bytes) plugins_path: D:\Carolina\Documents\local sites\basicwordpresstest\app\public/wp-content/plugins plugins_size: 16.41 MB (17205815 bytes) database_size: 2.13 MB (2228224 bytes) total_size: 68.72 MB (72053869 bytes) ### wp-active-theme ### name: Twenty Twenty-One (twentytwentyone) version: 1.4 author: the WordPress team author_website: https://wordpress.org/ parent_theme: none theme_features: core-block-patterns, widgets-block-editor, automatic-feed-links, title-tag, post-formats, post-thumbnails, menus, html5, custom-logo, customize-selective-refresh-widgets, wp-block-styles, align-wide, editor-styles, editor-style, editor-font-sizes, custom-background, editor-color-palette, editor-gradient-presets, responsive-embeds, custom-line-height, experimental-link-color, custom-spacing, custom-units, widgets theme_path: D:\Carolina\Documents\local sites\basicwordpresstest\app\public/wp-content/themes/twentytwentyone auto_update: Disabled ### wp-themes-inactive (2) ### Twenty Nineteen: version: 2.1, author: the WordPress team, Auto-updates disabled Twenty Twenty: version: 1.8, author: the WordPress team, Auto-updates disabled ### wp-plugins-inactive (1) ### Gutenberg: version: 12.3.2, author: Gutenberg Team, Auto-updates 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 ### wp-constants ### WP_HOME: undefined WP_SITEURL: undefined WP_CONTENT_DIR: D:\Carolina\Documents\local sites\basicwordpresstest\app\public/wp-content WP_PLUGIN_DIR: D:\Carolina\Documents\local sites\basicwordpresstest\app\public/wp-content/plugins WP_MEMORY_LIMIT: 40M WP_MAX_MEMORY_LIMIT: 256M WP_DEBUG: false WP_DEBUG_DISPLAY: true WP_DEBUG_LOG: false SCRIPT_DEBUG: false WP_CACHE: false CONCATENATE_SCRIPTS: undefined COMPRESS_SCRIPTS: undefined COMPRESS_CSS: undefined WP_LOCAL_DEV: undefined DB_CHARSET: utf8 DB_COLLATE: undefined ### wp-filesystem ### wordpress: writable wp-content: writable uploads: writable plugins: writable themes: writable `

Steps: After installing a fresh copy of WordPress 5.8.3:

1. Login
2. Download and activate Gutenberg
3. Create a new post
4. Set a post title, save
5. Add a navigation block.
6. Select "start empty"
7. Add the post "hello world"
8. Add the page "Sample Page"
9. Save the post and the Navigation Menu.
10. View the post on the front.
11. Reduce the browser window width until the navigation block button shows.
12. Try to use the navigation block button.

[carolinan]

Twenty Twenty-One:

https://user-images.githubusercontent.com/7422055/149863162-89b8c242-ab70-4826-a1b5-29e8d4690620.mp4

[talldan]

I also haven't been able to reproduce while running 5.8 and latest Gutenberg trunk. I tried a few different browsers on Mac OS.

[jasmussen]

I tried reproducing your steps on a Windows 10 PC (with the exception of using TwentyTwentyOne) on my production website running WP 5.8.3 and Gutenberg 12.3.2. I tested in Chrome and Edge I wasn't able to reproduce:

I also tried both latest nightly of WordPress on my Macbook with running Local. Tested with both TT1 and TT1 blocks. I also tried downgrading to 5.8.2, and I couldn't reproduce:

It's clear from your video that there's an issue somewhere, but it's really hard to track down.

[carolinan]

I will retest with Gutenberg trunk as soon as I can.

[chthonic-ds]

I can replicate this with WP 5.8.3, Gutenberg 12.3.2, and TT1 blocks following steps in https://github.com/WordPress/gutenberg/issues/37997#issue-1104380092.

Site editor works

Front doesn't work

[carolinan]

Still able to reproduce with current Gutenberg trunk.

This time I looked through the source and the script blocks/navigation/view.min.js is not present on the front in 5.8.3

[carolinan]

The view script is also not present for the file block.

[gziolo]

I have just tested with WordPress 5.8.3 and the latest trunk and the frontend script for the Navigation block works correctly when I enable the overlay menu for desktop or mobile:

[vcanales]

I have just tested with WordPress 5.8.3 and the latest trunk and the frontend script for the Navigation block works correctly when I enable the overlay menu for desktop or mobile:

I have found that the issue is not present in trunk as well, but it is present in the version of Gutenberg published to the Plugin Directory, with WordPress 5.8.3. Still looking into what might have happened there, as the script isn't even loaded in the first place, there is no 404 error that would make me believe that the file is not present; visual inspection of the build directory confirms this.

Any help figuring out why the asset is not being loaded would be appreciated.

[gziolo]

Any help figuring out why the asset is not being loaded would be appreciated.

Is it included in the zip file uploaded to the GitHub release page?

[carolinan]

This is still a problem, but with Gutenberg increasing the minimum required WP version, I don't see a way for this to be fixed for users on older WordPress versions.