Add message if JavaScript is disabled #11642

mkaz · 2018-11-08T19:28:45Z

Description

Adds a noscript and message if Javascript is disabled.

This also required adding a :not(.no-js) to the fullscreen body class
which hides/shows the rest of the wp-admin chrome.

How has this been tested?

Disable Javascript using console settings

Prior to change confirm the page is blank.
After change you should see the message

Types of changes

See #2719

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

Adds a noscript and message if Javascript is disabled. This also required adding a :not(.no-js) to the fullscreen body class which hides/shows the rest of the wp-admin chrome.

ocean90 · 2018-11-08T20:48:49Z

gutenberg.php

+		<noscript>
+			<div class="error" style='margin-top:32px'><p>
+			<?php
+			echo __( 'The block editor requires Javascript to be enabled.', 'gutenberg' );


echo __() => _e()

The echo __() function is used in numerous spots in gutenberg.php, I just mirrored it to stay consistent within the same file.

Thumbs down is not really a productive response.
I've switched each of the occurrences to the shorter function.

ocean90 · 2018-11-08T20:49:43Z

gutenberg.php

@@ -29,6 +29,13 @@ function the_gutenberg_project() {
 	global $post_type_object;
 	?>
 	<div class="block-editor gutenberg">
+		<noscript>
+			<div class="error" style='margin-top:32px'><p>


The admin bar has different heights depending on the viewport.

The margin was simply to give some spacing from the bottom of the admin bar, so the error message isn't squished up against the top.

swissspidy · 2018-11-11T13:43:29Z

packages/edit-post/src/components/fullscreen-mode/style.scss

@@ -1,4 +1,4 @@
-body.is-fullscreen-mode {


See also #11677

youknowriad

LGTM 👍

michelleweber · 2018-11-12T14:41:29Z

I always like to give a specific next step in an error message when possible. In this case, that would be something like "The Block Editor requires Javascript. Go to your browser's settings and enable Javascript before using it. Learn more."

Ideally the "learn more" is a link to instructions re: how to enable JS, but if we don't have that, just delete it.

chrisvanpatten

Small typo!

gutenberg.php

mkaz · 2018-11-12T16:12:18Z

@michelleweber I've updated with your change, but after revisiting the bug, I think the suggestion here by @afercia might be better, adding a to link to the Classic Editor plugin

The user probably either has JavaScript disabled on purpose, or it not supported by their device, so the plugin instructions might be more helpful.

michelleweber · 2018-11-12T16:32:20Z

Works for me. As long as we give the user some kind of next step, we're good -- I leave it to you to decide what the actual best next step is!

swissspidy · 2018-11-12T17:10:03Z

I know this is now getting a bit more complex, but can we add some more conditions whether the Classic Editor plugin is already installed and whether it's active? Perhaps also whether the user has the capability to install it.

At least a direct link to the classic editor if the plugin is already active would be nice.

Add position absolute and higher z-index to make link clickable. The block-editor pane was positioned above the inserted link. h/t @georgehotelling

packages/edit-post/src/components/fullscreen-mode/style.scss

mkaz · 2018-11-12T17:37:17Z

@swissspidy I know, so much effort on a rare edge case, but might as well do it properly.

I did consider that about if the plugin is installed, however the user should not get to this page since it is a Gutenberg page and if the plugin is installed they will go straight to the Classic Editor.

I also just had to push up some CSS z-index positioning stuff to make it clickable, no such thing as a quick fix.

afercia · 2018-11-12T17:42:40Z

@mkaz thanks for working on this!

Seems it's not possible to actually click on the link because the #editor container overlays the notice 🙂

@jasmussen is printing out by default is-fullscreen-mode via PHP really necessary? I guess there are JS ways to set it before everything is rendered.

@afercia

h/t to @afercia

mkaz · 2018-11-12T17:48:25Z

@afercia can you make sure you are updated to the latest PR, I just pushed up a fix to address the issue of it being clickable. Also, just updated with your CSS suggestion.

swissspidy · 2018-11-12T18:05:12Z

What if the plugin is installed but not active?

afercia · 2018-11-12T18:14:15Z

The link is clickable now, thanks!

GaryJones · 2018-11-13T00:12:20Z

gutenberg.php

@@ -28,6 +28,16 @@
 function the_gutenberg_project() {
 	global $post_type_object;
 	?>
+	<noscript>
+		<div class="error" style='position:absolute;top:32px;z-index:40'><p>


Why use single quotes for the style attribute?

GaryJones · 2018-11-13T00:14:03Z

gutenberg.php

+		<div class="error" style='position:absolute;top:32px;z-index:40'><p>
+		<?php
+			printf(
+				__( 'The Block Editor requires JavaScript, please try the <a href="%s">Classic Editor plugin</a>.', 'gutenberg' ),


This will read better as two sentences.
"The Block Editor requires JavaScript. Please try the Classic Editor plugin."

gziolo · 2018-11-13T10:35:00Z

The Block Editor requires JavaScript. Please try the Classic Editor plugin.

I think that this message is valid in the context of WordPress core. I'm not convinced that it is the way to go when Gutenberg plugin is activated. @mcsf @youknowriad @mtias do you agree?

mcsf · 2018-11-13T12:22:57Z

The Block Editor requires JavaScript. Please try the Classic Editor plugin.

I think that this message is valid in the context of WordPress core. I'm not convinced that it is the way to go when Gutenberg plugin is activated.

Yeah. Might be behind a conditional:

if ( is_plugin_active( 'gutenberg/gutenberg.php' ) ) {
  // The Block Editor requires JavaScript. Please enable JavaScript or use the Classic Editor.
} else {
  // The Block Editor requires JavaScript. Please try the Classic Editor plugin.
}

In the first version, "Classic Editor" links to the current URL with an extra classic-editor query argument. In the second version, "Classic Editor plugin" links to the actual plugin.

I don't feel strongly about keeping the "enable JavaScript" fragment, but it seems fair to ask for this if a user went to the trouble of installing the Gutenberg plugin.

Two different messages if trying to access block editor via the plugin or via core.

mkaz · 2018-11-13T15:07:54Z

@mcsf @gziolo - I've updated based on your suggestions.

gziolo · 2018-11-13T16:19:11Z

Thanks @mkaz for updating 👍

gutenberg.php

mkaz · 2018-11-13T18:26:35Z

@chrisvanpatten can I get your ✅ on the resolved typo? Thanks!

chrisvanpatten · 2018-11-13T20:16:23Z

@mkaz Oh sorry, I thought my review would have been auto-dismissed after you incorporated my suggestion. Get that fixed up, GitHub!

Approving in a sec :)

mkaz · 2018-11-13T21:59:27Z

Thanks @chrisvanpatten I marked as resolved too, I do think it's a Github bug.

mkaz added 2 commits November 8, 2018 11:24

Add message if Javascript is disabled

9e0fe91

Adds a noscript and message if Javascript is disabled. This also required adding a :not(.no-js) to the fullscreen body class which hides/shows the rest of the wp-admin chrome.

PHP linting

484242b

ocean90 reviewed Nov 8, 2018

View reviewed changes

12 bytes saved

4074ceb

mkaz force-pushed the fix/2719/no-javascript branch from 97b86bc to 4074ceb Compare November 9, 2018 03:18

mkaz mentioned this pull request Nov 9, 2018

If no JavaScript is available Gutenberg is returning a blank white page #2719

Closed

swissspidy reviewed Nov 11, 2018

View reviewed changes

packages/edit-post/src/components/fullscreen-mode/style.scss

@@ -1,4 +1,4 @@

body.is-fullscreen-mode {

Copy link

Member

swissspidy Nov 11, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See also #11677

youknowriad approved these changes Nov 12, 2018

View reviewed changes

youknowriad added Needs Design Feedback Needs general design feedback. Needs Copy Review Needs review of user-facing copy (language, phrasing) labels Nov 12, 2018

youknowriad added this to the 4.4 milestone Nov 12, 2018

chrisvanpatten suggested changes Nov 12, 2018

View reviewed changes

gutenberg.php Outdated Show resolved Hide resolved

Fix camel-case, update with Copy Review

456465a

Switch message to include link to Classic Editor plugin

4efeb84

Fix link not be clickable

74ce4d1

Add position absolute and higher z-index to make link clickable. The block-editor pane was positioned above the inserted link. h/t @georgehotelling

afercia reviewed Nov 12, 2018

View reviewed changes

packages/edit-post/src/components/fullscreen-mode/style.scss Outdated Show resolved Hide resolved

Use existence of .js class instead of :not(.no-js)

0a24750

h/t to @afercia

karmatosed self-requested a review November 12, 2018 21:50

GaryJones reviewed Nov 13, 2018

View reviewed changes

swissspidy changed the title ~~Add message if Javascript is disabled~~ Add message if JavaScript is disabled Nov 13, 2018

Add conditional for plugin vs core

a3f40d0

Two different messages if trying to access block editor via the plugin or via core.

mcsf reviewed Nov 13, 2018

View reviewed changes

gutenberg.php Outdated Show resolved Hide resolved

Use add_query_arg()

9b325e5

chrisvanpatten approved these changes Nov 13, 2018

View reviewed changes

mkaz merged commit ee51293 into master Nov 13, 2018

mkaz deleted the fix/2719/no-javascript branch November 13, 2018 21:59

mkaz mentioned this pull request Nov 13, 2018

Fix code style issues introduced in #11642 #11829

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add message if JavaScript is disabled #11642

Add message if JavaScript is disabled #11642

mkaz commented Nov 8, 2018 •

edited

Loading

ocean90 Nov 8, 2018

mkaz Nov 8, 2018

mkaz Nov 9, 2018

ocean90 Nov 8, 2018

mkaz Nov 8, 2018

swissspidy Nov 11, 2018

youknowriad left a comment

michelleweber commented Nov 12, 2018

chrisvanpatten left a comment

mkaz commented Nov 12, 2018

michelleweber commented Nov 12, 2018

swissspidy commented Nov 12, 2018

mkaz commented Nov 12, 2018 •

edited

Loading

afercia commented Nov 12, 2018

mkaz commented Nov 12, 2018

swissspidy commented Nov 12, 2018

afercia commented Nov 12, 2018

GaryJones Nov 13, 2018

GaryJones Nov 13, 2018

gziolo commented Nov 13, 2018

mcsf commented Nov 13, 2018

mkaz commented Nov 13, 2018

gziolo commented Nov 13, 2018

mkaz commented Nov 13, 2018

chrisvanpatten commented Nov 13, 2018 •

edited

Loading

mkaz commented Nov 13, 2018

Add message if JavaScript is disabled #11642

Add message if JavaScript is disabled #11642

Conversation

mkaz commented Nov 8, 2018 • edited Loading

Description

How has this been tested?

Types of changes

Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

michelleweber commented Nov 12, 2018

chrisvanpatten left a comment

Choose a reason for hiding this comment

mkaz commented Nov 12, 2018

michelleweber commented Nov 12, 2018

swissspidy commented Nov 12, 2018

mkaz commented Nov 12, 2018 • edited Loading

afercia commented Nov 12, 2018

mkaz commented Nov 12, 2018

swissspidy commented Nov 12, 2018

afercia commented Nov 12, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Nov 13, 2018

mcsf commented Nov 13, 2018

mkaz commented Nov 13, 2018

gziolo commented Nov 13, 2018

mkaz commented Nov 13, 2018

chrisvanpatten commented Nov 13, 2018 • edited Loading

mkaz commented Nov 13, 2018

mkaz commented Nov 8, 2018 •

edited

Loading

mkaz commented Nov 12, 2018 •

edited

Loading

chrisvanpatten commented Nov 13, 2018 •

edited

Loading