Add main H1 heading in the site-editor page

[afercia]

See related issue on the Gutenberg repository: ​https://github.com/WordPress/gutenberg/issues/42373

In the Site Editor page, the main H1 heading is a JavaScript component. It renders after the Navigation sidebar and after the toolbar in the header. See first attached screenshot.

On the PHP side, site-editor.php doesn't output any heading.

This isn't ideal, as the main H1 heading should be the first thing in the main content. See ​https://github.com/WordPress/gutenberg/issues/42373#issuecomment-1185565284

This is also inconsistent with the way the main H1 heading is output in the Post editor, where edit-form-blocks.php does output the main H1 heading.

Additionally, when JS is off:

• the Post editor does show the H1 heading and a notice, see second screenshot
• the Site editor doesn't show any content (besides the WP admin menu), see third screenshot

I'd like to propose to improve consistency and make the Site editor page output the main H1 and the no-js notice. This way consistency and user experience would be improved. More importantly, the main H1 would be placed in a more appropriate place.

Other headings in the Site Editor will be improved in ​https://github.com/WordPress/gutenberg/issues/42373

[afercia]

Site editor h1

[afercia]

Post editor no JS

[afercia]

Site editor no JS

[afercia]

56228.diff​

• adds a visually hidden H1 heading at the beginning of the main content
• when JavaScript is off, the page will display a heading and a no-js notice
• adds a filter for the no-js notice message

This is basically the same pattern already used for the Post Editor page.

This change should be coordinated with the changes for Gutenberg:

• There are some minor CSS changes that needs to be done on the Gutenberg side.
• The current H1 will be changed to H2.

See ​https://github.com/WordPress/gutenberg/issues/42373

[fencermonir]

Test report of https://core.trac.wordpress.org/attachment/ticket/56228/56228.diff

Env

WordPress 6.1.1
PHP 7.4
Chrome 108.0.5359.124 (Official Build) (arm64)
macOS 13.1 (Ventura)
Theme: Twenty Twenty-Three
Gutenberg enabled
Plugin: no plugin
In wp-config.php: define( 'WP_DEBUG_LOG', true ); define( 'WP_DEBUG_DISPLAY', true );

Steps to Test

1. Navigate to Appearance > Editor
2. Open inspector in chrome browser and enable the Disable JavsScript option from preferences -> Debugger -> Disable JavsScript
3. reload the editor page and it does not show either any title or notice.
4. then update the files mentioned in the patch and follow the above 1-3 steps
5. then it shows the title and a notice.

Expected Results (✅)

Show the title and notice on the editor page

Actual Results

The patch shows the title and notice on the editor page

Screenshot:

1. before the patch is applied: ​https://d.pr/i/gayK1d
2. after the patch is applied: ​https://d.pr/i/2MD7eJ

[zebaafiashama]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/ticket/56228

Environment

• OS: Windows 22621.1105
• Web Server: nginx/1.16.0
• PHP: 8.1.9
• WordPress: 6.1.1
• Browser: Chrome 109.0.5414.74
• Theme: Twenty Twenty-Two
• Active plugins: N/A

Actual Results

• Before adding the code if JavaScript is disabled then on site editor no notice or heading were showing.

-After adding the code problem solved and showing the heading and notice

Before adding code

After Adding code

[joedolson]

Refreshes patch

[afercia]

The patch needs some refresh. Some CSS changed on the Gutenberg side after the introduction of the Site editor 'Browse mode'.

Also, it appears that Gutenberg overrides some core styles to change some general layout. It does that by targeting directly some elements, even when JS is off. Not sure that's ideal. for example:

html.wp-toolbar {
	background: $white;
	padding-top: 0;
}

At the very least, this rule should be applied only when JS is on. Same for other CSS rules in Gutenberg. Unfortunately, right now there's no CSS class set on the html element to target whether JS is on or off.

[alexstine]

Actually, I do not believe this should be implemented in PHP due to the fact JS is not yet initialized and Gutenberg built-in region navigation does not work until the application receives focus. I think it is okay to add the no JS heading via PHP but the actual heading 1 should be added in React so the proper region navigation hooks get initialized in React. This is currently a problem in the post editor that could use a follow-up TRAC ticket/issue to rethink our approach..

Thanks.

[afercia]

Please see my last comment on the related Gutenberg issue at ​https://github.com/WordPress/gutenberg/issues/42373#issuecomment-1418936670

[rudlinkon]

Could any tester test please with the refreshed patch?

[hellofromTonya]

With 6.2 Beta 4 (the last planned beta for 6.2) happening in a few minutes, moving this ticket to 6.3.

However, if this fix is essential, please move it back into the milestone before RC1 to give time to schedule another Beta release.

[alexstine]

I am still of the opinion that any UI elements should be handled within Gutenberg React and the no JS stuff can be handled in the core PHP side of things. This would greatly help with the overall accessibility of the editor since the heading 1 would load with React allowing us to control the UX.

Hoping to move this one forward for 6.3.

Thanks.