Block Editor: Add a Message if JavaScript is disabled

[mkaz]

The editor shows a blank page if JavaScript is disabled.

It looks like PR 11642 from Gutenberg plugin didn't make it back to core.
​https://github.com/WordPress/gutenberg/pull/11642

[mkaz]

I'm added a patch which includes the code from the Gutenberg PR 11642
which displays a message and a link to the Classic Editor plugin if JavaScript is disabled.

The patch also includes the translation fix for the URL from Gutenberg PR 12013
Props to @dency and @swissspidy for that contribution.

​https://github.com/WordPress/gutenberg/pull/12013

[pento]

Thanks for the patch, @mkaz!

45453.2.diff​ makes some adjustments:

• Use the hide-if-js class instead of <noscript>.
• Simplify the inline CSS by hiding the #editor div.
• Expand the message to recommend installing JavaScript.
• Apply a filter to the message, so the Classic Editor plugin can filter it appropriately.

I'm not wild about the inline CSS, but I'm also not aware of any existing class we could use the similar effect. Other screens that require JS (eg, the theme installer) display the <h1>, so don't have this squished margin problem.

@azaozz: Will this filter do the job for the Classic Editor plugin to use?

[azaozz]

Will this filter do the job for the Classic Editor plugin to use?

Sure. Can replace the text and add a link to the user settings to set Classic as default.

Was wondering if we should also include the screen title there (will add a screenshot). Makes it a bit more friendlier.

While looking at that noticed some inconsistencies with the global $title in edit-form-blocks.php. It resets the $title to Edit Post at the top, then never uses it. Then uses $post_type_object->labels->edit_item in the hidden a11y H1. Fixed that in 45453.3.diff to properly display either "Edit Post" or "Add New Post" but may be worth a new ticket.

In 45453.3.diff:

• Add the screen title when displaying the error message about no js.
• Fix the global $title and use it on the edit-form-blocks.php.

[desrosj]

Patch is currently failing to apply to trunk. I think it may have been written before 5.0 was merged.

[mkaz]

"Rebase" - Updated diff against latest trunk

[desrosj]

45453.5.diff​ updates Block Editor to be a proper noun for consistency. Also, I changed the notice classes to use the alternation styling, which is designed for use against white backgrounds. It provides better contrast and makes the notices stand out more.

[ocean90]

"Block Editor" should be "block editor", without capitalizing the first letters. See also ​https://make.wordpress.org/core/handbook/best-practices/spelling/.

[desrosj]

Thanks @ocean90. I didn’t know about that page in the handbook. I had originally seen this in #45634. We’ll just have to clarify there that ‘block editor’ should be lowercase.

[desrosj]

45453.6.diff​ fixes the casing on "block editor". Also, attaching a screenshot of the alternate version in my patch.

[ocean90]

/** Translators: should be /* translators: otherwise 45453.6.diff​ looks good.

[desrosj]

45453.7.diff​ fixes the translator comment mentioned above, and also changes printf to sprintf. The trailing 182 in alternate-notice-style.png​ was the result of the string being output with printf and the result (character count of the formatted string) being echoed below that.

[audrasjb]

@desrosj I'm happy to confirm 45453.7.diff applies well and fixes the string length output issue, thanks!

[desrosj]

In 44437:

Block Editor: Display notice to the user when JavaScript is disabled.

Currently, when viewing the block editor with JavaScript disabled, the user sees a blank admin page with the admin menu sidebar. This adds an admin notice informing the user that JavaScript is required for the new block editor.

Props mkaz, pento, azaozz, ocean90, desrosj.
Fixes #45453.

[desrosj]

Reopening for backporting to 5.0.

[desrosj]

In 44440:

Block Editor: Display notice to the user when JavaScript is disabled.

Currently, when viewing the block editor with JavaScript disabled, the user sees a blank admin page with the admin menu sidebar. This adds an admin notice informing the user that JavaScript is required for the new block editor.

Props mkaz, pento, azaozz, ocean90, desrosj.

Merges [44437] to the 5.0 branch.
Fixes #45453.

[SergeyBiryukov]

In 44665:

I18N: Update translator comment for the notice displayed when viewing the block editor with JavaScript disabled.

A URL in the comment creates an impression that the link is not translatable.

See #45453, #45856.