Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show a dismissible notice when browser is in quirks mode #15206

Closed
jasmussen opened this issue Apr 26, 2019 · 6 comments
Closed

Show a dismissible notice when browser is in quirks mode #15206

jasmussen opened this issue Apr 26, 2019 · 6 comments
Labels
Needs Dev Ready for, and needs developer efforts [Type] Copy Issues or PRs that need copy editing assistance [Type] Enhancement A suggestion for improvement.

Comments

@jasmussen
Copy link
Contributor

When a WordPress plugin outputs HTML or scripts in a way so that the <!doctype html> is not the first thing the browser encounters when rendering the editor, it causes the block editor to render in “quirks mode”. Because we use flex for layout, and flex is something quirks mode doesn’t handle well, it means the user will see layout errors, and they will rightly assume it's a bug in the block editor.

Steps to reproduce:

1: Have a metabox on the page. Can be custom fields (More Menu > Options > Custom Fields)
2: Put the following in functions.php: add_action('init', iAmError)

The above code example will cause a PHP error to be rendered before the doctype definition, invoking quirksmode and it will show layout issues. As of #12575 we have a warning present in the JS console, however this has proven to be insufficient in explaning why the error occurs, as we still see reports trickling into #11378.

In light of that, we should consider creating a user-visible, dismissible notice, for when we detect quirks mode.

It could say this: Note: an error, likely from a plugin, is causing the editor to render in compatibility mode. This may cause layout errors with metaboxes. Read more.

The Read More link could take you to a documentation page in the Gutenberg handbook that explains what's going on in more in depth, and suggest steps to try and reproduce. Those steps usually mean disabling plugins one by one to figure out which one is causing the issue.

@sarahmonster
Copy link
Member

This sounds like a similar issue to #10212 and could probably be handled in tandem to ensure these notices are as user-friendly as possible whilst providing helpful prompts to developers.

@jasmussen
Copy link
Contributor Author

This sounds like a similar issue to #10212 and could probably be handled in tandem to ensure these notices are as user-friendly as possible whilst providing helpful prompts to developers.

Absolutely. Though an important aspect t this one, which is probably fixable entirely through proper phrasing, is that it needs to be clear that the block editor is not at fault here, it's a plugin or less likely, a theme function, that's breaking things. Moreso, there's no way to know for us which plugin or function breaks the block editor, all we can know is that it's broken.

@karmatosed
Copy link
Member

Should these be merged as issues?

@mapk mapk added Needs Copy Review Needs review of user-facing copy (language, phrasing) [Type] Copy Issues or PRs that need copy editing assistance and removed Needs Design Needs design efforts. labels Dec 27, 2019
@mapk
Copy link
Contributor

mapk commented Dec 27, 2019

If we utilize existing notification methods (ie. standard top notifications or snackbars) then I don't think this requires any design work. We just need to nail down the messaging.

Any thoughts on the copy, @michelleweber?

@benhuberman
Copy link

Hi @mapk / @jasmussen -- as Michelle is AFK this week, I looked at the copy myself, and think it could use some tweaks to make it user-friendlier / less technical jargon-y. For example:

A plugin or theme on your site might cause layout issues when using metaboxes in the block editor. For more details and troubleshooting options, [link]visit this page[/link].

Does this work for you / accurately represent the issue at hand?

@mapk mapk added Needs Dev Ready for, and needs developer efforts and removed Needs Copy Review Needs review of user-facing copy (language, phrasing) labels Dec 31, 2019
@jasmussen
Copy link
Contributor Author

Since this issue was created, the particular quirks mode issue hasn't set the world on fire. And given the fact that we have a console warning, I'm going to close this one as "not needed after all":

Screenshot 2021-08-04 at 15 36 17

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Dev Ready for, and needs developer efforts [Type] Copy Issues or PRs that need copy editing assistance [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

6 participants