Document Outline: Add check for the main element #68661
Draft
+63
−14
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
carolinan
added
[Feature] Document Outline
|
Thoughts: So for example if the document contained Then the outline would reflect this and not show: |
|
Size Change: +272 B (+0.01%) Total Size: 1.84 MB
ℹ️ View Unchanged
|
Mamaduka
reviewed
Jan 14, 2025
There was a problem hiding this comment.
I like this approach.
I think this is an improvement but now that the main is showing, I would expect the outline to display the main element and headings in relation to each other.
This makes sense. The new outline will consist of headings and main element(s). I think this means that there will be a single computeDocumentOutline method that can handle both elements.
The main element warnings still only make sense for the template post type.
Comment on lines
+166
to
+169
| const classNames = | ||
| 'document-outline' + | ||
| ( headings.length < 1 ? ' has-no-headings' : '' ) + | ||
| ( mainElements.length === 0 ? ' has-no-main' : '' ); |
There was a problem hiding this comment.
You can use clsx library for this. Makes it easier to manage multiple classes.
|
Flaky tests detected in 2083cb2. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12802173548
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR updates the DocumentOutline component to include a check for the
maintagName attribute.The check loops through all blocks, in comparison to the heading level check that only loops through the heading blocks.
For clarity the texts are:
"Your template should have exactly one main element. Adjust the HTML element in the Advanced panel of the block."
And:
"The main element is missing. Select the block that contains your most important content and add the main HTML element in the Advanced panel."
To do:
Alternative to #68656
Closes #35354
Why?
Having a single
element.<main>element in a template is important for accessibility, but also for the Zoom Out feature.The skip link feature is only enabled on templates that has a
See the issue for more details.
Testing Instructions
Activate a block theme
Go to Appearance > Editor and open any template.
Open the List View
Open the Document Outline tab.
Locate or add a block that has the
<main>HTML element: This is usually a group, but any block with thetagNameattribute could be using it.To add the main HTML element using the interface option, select a container block, open the Block Settings Sidebar, and open the Advanced panel. Select the main in the HTML element option.
Confirm that the main element is showing in the Document Outline.
Confirm that selecting the item in the Outline selects the block.
Duplicate the block that has the
<main>element and confirm if both main elements are listed in the Outline.Delete all blocks with a
element and confirm if there is a text at the top of the Outline that explains that the template should have one main.Screenshots or screencast
All the following screenshot are from the Site Editor:
Neither main or headings:
A heading, but no main:
Multiple main elements:
