#56228 closed defect (bug) (fixed)
Add main H1 heading in the site-editor page
Reported by: | afercia | Owned by: | joedolson |
---|---|---|---|
Milestone: | 6.3 | Priority: | normal |
Severity: | normal | Version: | 6.3 |
Component: | Editor | Keywords: | has-screenshots has-patch commit add-to-field-guide |
Focuses: | accessibility | Cc: |
Description
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
Attachments (12)
Change History (58)
#1
@
2 years ago
- Keywords has-patch added
- 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.
This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.
2 years ago
This ticket was mentioned in Slack in #core-editor by sabernhardt. View the logs.
2 years ago
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
2 years ago
#6
@
2 years ago
- Milestone changed from Awaiting Review to 6.2
- Owner set to joedolson
- Status changed from new to accepted
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
22 months ago
#8
@
22 months ago
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
- Navigate to Appearance > Editor
- Open inspector in chrome browser and enable the
Disable JavsScript
option frompreferences -> Debugger -> Disable JavsScript
- reload the editor page and it does not show either any title or notice.
- then update the files mentioned in the patch and follow the above 1-3 steps
- 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:
- before the patch is applied: https://d.pr/i/gayK1d
- after the patch is applied: https://d.pr/i/2MD7eJ
#9
@
22 months ago
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
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
22 months ago
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
22 months ago
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
21 months ago
#13
@
21 months ago
- Keywords needs-refresh added
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.
#14
@
21 months ago
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.
#15
@
21 months ago
Please see my last comment on the related Gutenberg issue at https://github.com/WordPress/gutenberg/issues/42373#issuecomment-1418936670
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
21 months ago
#17
@
21 months ago
Could any tester test please with the refreshed patch?
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
21 months ago
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
21 months ago
This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.
21 months ago
#21
@
21 months ago
- Milestone changed from 6.2 to 6.3
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.
#22
@
21 months ago
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.
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
20 months ago
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
17 months ago
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
17 months ago
#26
follow-up:
↓ 31
@
17 months ago
- Keywords commit added; coordinate-with-gutenberg needs-refresh removed
Heading hierarchy has been updated in https://github.com/WordPress/gutenberg/pull/51696.
This does not alter the state of the page if JS is disabled or unavailable.
I think that this should be committed as well, as it does no harm to the site editing experience and provides feedback to a user if the site editor fails to load for any reason.
@alexstine This is being implemented in PHP as an error state handler; it's not about navigating the site editor, but about providing context if the site editor does not load.
#27
@
17 months ago
- Keywords commit removed
It's already inside hide-if-js
; I need to look at this more carefully. Sigh.
#28
@
17 months ago
- Keywords needs-testing added
Updated patch only handles fallback if no-js. This way we're completely separating the behavior between no-js and the site editor, but we'll have something if the editor fails.
#29
@
17 months ago
Thank you so much, @joedolson, for refreshing the patch. Could any previous or new testers please test it with the newly submitted patch?
#30
@
17 months ago
Test instructions:
- Requires a version of the full site editor that includes https://github.com/WordPress/gutenberg/pull/51696
1) Load the full site editor. Verify that there is one H1 heading.
2) Disable JS in your browser. Load the full site editor. Verify that there is one H1 heading and a notice indicating that JS is required.
#31
in reply to:
↑ 26
@
17 months ago
Replying to joedolson:
Heading hierarchy has been updated in https://github.com/WordPress/gutenberg/pull/51696.
This does not alter the state of the page if JS is disabled or unavailable.
I think that this should be committed as well, as it does no harm to the site editing experience and provides feedback to a user if the site editor fails to load for any reason.
@alexstine This is being implemented in PHP as an error state handler; it's not about navigating the site editor, but about providing context if the site editor does not load.
@joedolson Sorry, I just checked the patch and see the no JS fallback. I think for the post editor, the main heading 1 is actually outside of React context so it prevents JS events in React from working properly. Just wanted to make sure we were not about to make the same mistake twice. PHP should provide the fallback only, not the heading under all circumstances. My guess is, we did that to have easier access to the $post->post_type.
Line 313: https://core.svn.wordpress.org/trunk/wp-admin/edit-form-blocks.php
That's not just the fallback, both the heading 1 are defined there. With JS and without JS.
#32
follow-up:
↓ 33
@
17 months ago
I think that you're saying that the change as in the latest patch is fine, but I'm not really sure. Can you clarify?
You may also be suggesting that we should change the block editor to match, but if so, that would need a separate ticket.
#33
in reply to:
↑ 32
@
17 months ago
Replying to joedolson:
I think that you're saying that the change as in the latest patch is fine, but I'm not really sure. Can you clarify?
You may also be suggesting that we should change the block editor to match, but if so, that would need a separate ticket.
@joedolson Yes, this patch is fine. I was simply trying to state why this proposed solution confused me. I should have just looked at the patch in the first place.
I will eventually log another ticket for the post editor so we can figure out a better way to handle the post editor heading 1.
Thanks.
This ticket was mentioned in PR #4692 on WordPress/wordpress-develop by @joedolson.
17 months ago
#35
Trac ticket: https://core.trac.wordpress.org/ticket/56228
@joedolson commented on PR #4692:
17 months ago
#37
Fixed in r56025
This ticket was mentioned in PR #4695 on WordPress/wordpress-develop by @ramonopoly.
17 months ago
#38
The changes in https://github.com/WordPress/wordpress-develop/commit/aef1cb9847e9e513e0f4a7a4fe93c54ddabf6168 have broken the site editor in view and editor mode.
It added an additional wrapper for the site-editor div, which breaks flexbox styling.
props @kevin940726 for finding the bug and proposing the fix
## Before
Trac ticket: https://core.trac.wordpress.org/ticket/56228
#39
@
17 months ago
https://github.com/WordPress/wordpress-develop/commit/aef1cb9847e9e513e0f4a7a4fe93c54ddabf6168 appears to have borked the site editor.
Fix over here: https://github.com/WordPress/wordpress-develop/pull/4695
@ramonopoly commented on PR #4695:
17 months ago
#40
Is this specific to having gutenberg running? I was only testing against core, and didn't see this. Either way, no problem with it.
Thanks @joedolson!
We first noticed it on Gutenberg, but then tested on Core without the plugin active. I had to clean my env and recompile everything to replicate it.
#42
@
16 months ago
- Keywords needs-patch added; has-patch commit removed
- Resolution fixed deleted
- Status changed from closed to reopened
- Version set to trunk
Thanks everybody for working on this. Maybe I'm missing something but I'm not sure we're seeing the same things. If you're testing with the Gutenberg wp-en by any chance, please remember that it runs and old version of WordPress so things may be a bit different.
Testing with:
- latest WP trunk
- latest Gutenberg plugin trunk
for me, the Site editor page with JS off still needs some work. See screenshot below.
Worth noting the change committed here should have been coordinated with the CSS changes from https://github.com/WordPress/gutenberg/pull/42495
I will take care of submitting a new PR in the Gutenberg repo that will need to be included in WP 6.3. Also core will need some small adjustments. Reopening.
#43
@
16 months ago
- Keywords has-patch added; needs-patch removed
56228.4.diff needs to be tested together with the changes from https://github.com/WordPress/gutenberg/pull/52376 in the Gutenberg plugin (those changes will need to be ported to core).
- Removes a left padding from the Site editor and Post editor page, as it's no longer needed.
- Removes the
notice-alt
class from the no-js notices as the page background color is now the default light grey. Instead, thenotice-alt
style is only meant to be used on pages with a white background.
To test:
- Disable JS support in your browser.
- Go to the Site editor page, to the Post editor page, and to the Add new theme page
/wp-admin/theme-install.php
. - Observe they look the same:
- Visible heading at the top of the page.
- An error notice below the heading.
- Check the page footer is visible.
See screenshots below.
Site editor h1