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

[Editor]: Handle title display and selection in outline #48124

Closed
wants to merge 1 commit into from
Closed

[Editor]: Handle title display and selection in outline #48124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 9 additions & 2 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 @@ -76,7 +76,11 @@ export const DocumentOutline = ( {
let prevHeadingLevel = 1;

// Not great but it's the simplest way to locate the title right now.
const titleNode = document.querySelector( '.editor-post-title__input' );
const titleNode =
document.querySelector( '.editor-post-title__input' ) ||
window.frames[ 'editor-canvas' ]?.document.querySelector(
Copy link
Member

Choose a reason for hiding this comment

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

I really don't like this. :) Could we call onSelect for the PostTitle, which is in this package? I guess we'd have to move the local state to the package store first.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

What do you mean by state? And which part exactly you don't like? I mean querying for nodes is bad, but I don't think I deviated here from the existing document.querySelector( '.editor-post-title__input' ). 😄

Copy link
Contributor

Choose a reason for hiding this comment

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

My understanding is that state is the isSelected that the PostTitle component has. This would mean that the code would be something like the following? 🤔

const { selectPostTitle } = useDispatch( editorStore );

const isPostTypeSelected = useSelect(
	( select ) => {
		return select( editorStore ).isPostTitleSelected();
	},
	[]
);

If so, I think the problem with #48189 may be resolved.

'.editor-post-title__input'
);
const hasTitle = isTitleSupported && title && titleNode;
const countByLevel = headings.reduce(
( acc, heading ) => ( {
Expand All @@ -94,7 +98,10 @@ export const DocumentOutline = ( {
<DocumentOutlineItem
level={ __( 'Title' ) }
isValid
onSelect={ onSelect }
onSelect={ () => {
titleNode.focus();
onSelect?.();
} }
href={ `#${ titleNode.id }` }
isDisabled={ hasOutlineItemsDisabled }
>
Expand Down
4 changes: 3 additions & 1 deletion packages/editor/src/components/post-title/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
toHTMLString,
insert,
} from '@wordpress/rich-text';
import { useMergeRefs } from '@wordpress/compose';
import { useMergeRefs, useInstanceId } from '@wordpress/compose';
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';

/**
Expand All @@ -40,6 +40,7 @@ import { store as editorStore } from '../../store';
const REGEXP_NEWLINES = /[\r\n]+/g;

function PostTitle( _, forwardedRef ) {
const postTitleId = useInstanceId( PostTitle, 'post-title' );
const ref = useRef();
const [ isSelected, setIsSelected ] = useState( false );
const { editPost } = useDispatch( editorStore );
Expand Down Expand Up @@ -226,6 +227,7 @@ function PostTitle( _, forwardedRef ) {
return (
<PostTypeSupportCheck supportKeys="title">
<h1
id={ postTitleId }
ref={ useMergeRefs( [ richTextRef, ref ] ) }
contentEditable
className={ className }
Expand Down