Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document Outline: Add check for the main element #68661

Draft
wants to merge 4 commits into
base: trunk
Choose a base branch
from
+201 −93
Draft

Document Outline: Add check for the main element #68661

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
68a3636
Document Outline: Add check for the main element
carolinan Jan 14, 2025
2083cb2
Merge branch 'trunk' into add/document-outline-main
carolinan Jan 16, 2025
123d66d
Display nested blocks in the outline
carolinan Jan 16, 2025
15767c7
Do not use the 'has-no-main' class name in the post editor
carolinan Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 61 additions & 13 deletions packages/editor/src/components/document-outline/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,15 @@ function EmptyOutlineIllustration() {
);
}

const incorrectMainTag = [
<br key="incorrect-break-main" />,
<em key="incorrect-message-main">
{ __(
'Your template should have exactly one main element. Adjust the HTML element in the Advanced panel of the block.'
) }
</em>,
];

/**
* Returns an array of heading blocks enhanced with the following properties:
* level - An integer with the heading level.
Expand All @@ -95,6 +104,17 @@ const computeOutlineHeadings = ( blocks = [] ) => {
} );
};

const computeOutlineMainElements = ( blocks = [] ) => {
return blocks.flatMap( ( block = {} ) => {
if ( block.attributes.tagName === 'main' ) {
return {
...block,
};
}
return computeOutlineMainElements( block.innerBlocks );
} );
};

const isEmptyHeading = ( heading ) =>
! heading.attributes.content ||
heading.attributes.content.trim().length === 0;
Expand Down Expand Up @@ -129,18 +149,7 @@ export default function DocumentOutline( {
const prevHeadingLevelRef = useRef( 1 );

const headings = computeOutlineHeadings( blocks );
if ( headings.length < 1 ) {
return (
<div className="editor-document-outline has-no-headings">
<EmptyOutlineIllustration />
<p>
{ __(
'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
) }
</p>
</div>
);
}
const mainElements = computeOutlineMainElements( blocks );

// Not great but it's the simplest way to locate the title right now.
const titleNode = document.querySelector( '.editor-post-title__input' );
Expand All @@ -154,9 +163,48 @@ export default function DocumentOutline( {
);
const hasMultipleH1 = countByLevel[ 1 ] > 1;

const classNames =
'document-outline' +
( headings.length < 1 ? ' has-no-headings' : '' ) +
( mainElements.length === 0 ? ' has-no-main' : '' );
Copy link
Member

Choose a reason for hiding this comment

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

You can use clsx library for this. Makes it easier to manage multiple classes.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated, thank you.


return (
<div className="document-outline">
<div className={ classNames }>
{ headings.length < 1 && (
<>
<EmptyOutlineIllustration />
<p>
{ __(
'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
) }
</p>
</>
) }
{ mainElements.length === 0 && (
<p>
{ __(
'The main element is missing. Select the block that contains your most important content and add the main HTML element in the Advanced panel.'
) }
</p>
) }
<ul>
{ mainElements.map( ( item ) => {
return (
<DocumentOutlineItem
key={ item.clientId }
level={ __( 'Main' ) }
isValid
isDisabled={ hasOutlineItemsDisabled }
href={ `#block-${ item.clientId }` }
onSelect={ () => {
selectBlock( item.clientId );
onSelect?.();
} }
>
{ mainElements.length !== 1 && incorrectMainTag }
</DocumentOutlineItem>
);
} ) }
{ hasTitle && (
<DocumentOutlineItem
level={ __( 'Title' ) }
Expand Down
3 changes: 2 additions & 1 deletion packages/editor/src/components/document-outline/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@
padding: 1px 0;
}

.editor-document-outline.has-no-headings {
.document-outline.has-no-headings,
.document-outline.has-no-main {
& > svg {
margin-top: $grid-unit-30 + $grid-unit-05;
}
Expand Down
Loading