WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.35k stars 4.13k forks source link

Block Theme Previews: Resolve "Quirks Mode" issue #51017

Open annezazu opened 1 year ago

annezazu commented 1 year ago

This was passed along as part of the FSE Outreach Program's Rapid Revamp call for testing:

I discovered that GB Block Theme Preview only worked on Localwp installation, but not on hosting services. I tried it on a couple of hosted sites. The error message appeared in the browser’s console log: Page layout may be unexpected due to Quirks Mode. One or more documents in this page is in Quirks Mode, which will render the affected document(s) with quirks incompatible with the current HTML and CSS specifications. Quirks Mode exists mostly due to historical reasons. If this is not intentional, you can add or modify the DOCTYPE to be to render the page in No Quirks Mode.

Here's a screenshot of the theme preview with the quirks mode error:

22preview-block-theme-hosting

It seems to be related to "an incomplete or outdated DOCTYPE or no DOCTYPE at all".. I'm not quite sure why this might be happening and if it might be related to a hosting environment.

@franzaurus can you perhaps provide more information about your browser setup along with hosting environment? Wanted to open an issue in any case to be safe, even though I can see <!DOCTYPE html> when using the InstaWP site while previewing.

franzaurus commented 1 year ago

Hi, @annezazu. Thank you for opening an issue for this. I found that the problem happened regardless of the browser I used. I've tried Chrome, Firefox and Edge, and they're all cannot displayed TT3 theme (or other block themes) live preview. I pasted down below my hosting environment, which I gathered from the WP Admin Site Health.

I then followed up on your InstaWP site, and you're right the live preview worked well there. Could it be the PHP version is causing the problem, as mine used 7.4.x and InstaWP used version 8? I'll try to change my hosting PHP version and update it back here.

Let me know if you need more information.

Hosting 1

Server architecture Linux 4.18.0-305.19.1.lve.el7h.x86_64 x86_64 Web server LiteSpeed PHP version 7.4.33 (Supports 64bit values) PHP SAPI litespeed PHP max input variables 5000 PHP time limit 0 PHP memory limit 4096M Max input time 240 Upload max filesize 1024M PHP post max size 1024M cURL version 7.84.0 OpenSSL/1.1.1p Is SUHOSIN installed? No Is the Imagick library available? Yes Are pretty permalinks supported? Yes .htaccess rules Custom rules have been added to your .htaccess file.

Hosting 2

Server architecture Linux 4.18.0-372.16.1.lve.el8.x86_64 x86_64 Web server LiteSpeed PHP version 7.4.33 (Supports 64bit values) PHP SAPI litespeed PHP max input variables 10000 PHP time limit 60 PHP memory limit 512M Max input time 600 Upload max filesize 512M PHP post max size 512M cURL version 7.87.0 OpenSSL/1.1.1p Is SUHOSIN installed? No Is the Imagick library available? Yes Are pretty permalinks supported? Yes .htaccess rules Your .htaccess file contains only core WordPress features.

Hosting 3

Server architecture Linux 3.10.0-962.3.2.lve1.5.38.el7.x86_64 x86_64 Web server Apache PHP version 8.1.18 (Supports 64bit values) PHP SAPI litespeed PHP max input variables 1000 PHP time limit 120 PHP memory limit 256M Max input time 60 Upload max filesize 64M PHP post max size 64M cURL version 8.0.1 OpenSSL/1.1.1t Is SUHOSIN installed? No Is the Imagick library available? No Are pretty permalinks supported? Yes .htaccess rules Custom rules have been added to your .htaccess file.

franzaurus commented 1 year ago

Unfortunately, updating the PHP version to 8.x doesn't resolved the problem either.

Details on the browser used: Firefox 113.0.2, Chrome 113.0.5672.127, Edge 113.0.1774.57.

franzaurus commented 1 year ago

I did another test with a different hosting service; this time the live preview is worked. I noticed that the only difference that may be effectual between the working and the not working Live Preview is the hosting's type of PHP SAPI.

Working Block Theme Live Preview

InstaWP

Server architecture Linux 5.4.0-122-generic x86_64 Web server Apache/2.4.55 (Ubuntu) mod_fcgid/2.3.9 OpenSSL/1.1.1f PHP version 8.1.16 (Supports 64bit values) PHP SAPI fpm-fcgi

LocalWP

Server architecture Windows NT 10.0 AMD64 Web server nginx/1.16.0 PHP version 7.4.3 (Supports 64bit values) PHP SAPI cgi-fcgi

Hosting 4

Server architecture Linux 4.18.0-425.3.1.lve.2.el8.x86_64 x86_64 Web server Apache PHP version 7.4.8 (Supports 64bit values) PHP SAPI apache2handler

annezazu commented 1 year ago

Thank you so much for all of this extra info! Very, very helpful. It's not clear to me just yet what the problem is so going to tag in @scruffian for thoughts when he has a chance.