feat: Focus title if title is empty #9608

tofumatt · 2018-09-04T13:49:50Z

Description

Focuses the title when empty. Fixes #3828.

How has this been tested?

Tested locally in Firefox and Chrome for Mac; IE 11 and Edge in Windows.

Added an E2E test as well.

Screenshots

tofumatt · 2018-09-04T13:55:06Z

packages/block-library/src/list/index.js

@@ -244,12 +244,12 @@ export const settings = {
 				} );
 			} );

-			// this checks for languages that do not typically have square brackets on their keyboards
+			// Check for languages that do not have square brackets on their keyboards.


These changes are largely unrelated, but I forget why I found this file when working on this patch and just wanted to tidy things up. Sorry 😉

aduth · 2018-09-04T14:19:46Z

test/e2e/specs/new-post.test.js

+	newPost,
+} from '../support/utils';
+
+describe( 'new post', () => {


For maintenance sake, what sorts of things would we expect to exist here? Would it make sense to consolidate this with what we already have in hello.test.js . I don't have a strong preference for the direction of consolidation, but there does appear to be overlap in the realm of "things we expect from the initial state of the editor".

Ah, fair enough. I'll propose renaming hello.test.js though, because that wasn't clear to me as the "new editor state" test suite.

I'll propose renaming hello.test.js though, because that wasn't clear to me as the "new editor state" test suite.

Yep, I'd agree on that one 😄

aduth · 2018-09-04T14:20:11Z

packages/editor/src/components/post-title/index.js

@@ -1,6 +1,7 @@
 /**
 * External dependencies
 */
+import React from 'react';


We don't want to import from react. There's createRef available from @wordpress/element.

Maybe worth considering ESLint rule error'ing on react import. It shouldn't be present anywhere (save for tests, I suppose).

Oops, right, sorry 'bout that.

tofumatt · 2018-09-04T14:39:45Z

Changes made, good for another look!

youknowriad · 2018-09-05T07:39:15Z

packages/editor/src/components/post-title/index.js

+		// If there is a post title and it's empty, we should focus the title so
+		// the user can start typing the title right away.
+		if ( ! this.props.title || ! this.props.title.length ) {
+			this.textareaRef.current.textarea.focus();


This will have another maybe "unwanted" side effect? If you switch to code mode and you switch back to editor without touching the title, it will be autofocused?

Ah shoot, good call. I was thinking "we don't re-mount the title after we render the editor, right?" But I guess we do, I'll handle this more robustly. 👍

aduth · 2018-09-05T21:43:48Z

This will have another maybe "unwanted" side effect? If you switch to code mode and you switch back to editor without touching the title, it will be autofocused?

Shouldn't this be the same component, and thus not unmounted when switching modes?

tofumatt · 2018-09-05T21:48:27Z

It seems the layout of the editor is changed "above" the title component so things are re-rendered.

That's probably a legit bug but it might be beyond this one. 😄

aduth · 2018-09-05T21:48:47Z

packages/editor/src/components/post-title/index.js

+		// If there is a post title and it's empty, we should focus the title so
+		// the user can start typing the title right away.
+		if ( ! this.props.title || ! this.props.title.length ) {
+			this.textareaRef.current.textarea.focus();


Can Textarea receive an autoFocus prop to simplify the implementation?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autofocus

I wonder if it supports passing through other props given it's not a stock <Textarea>, but I'll have a look.

It can and that actually worked well, but Puppeteer doesn't seem to like it. I'm just working on figuring out why and then this'll be good to go and less complicated.

tofumatt · 2018-09-06T10:26:15Z

Okay! Improvements made; this now uses autofocus and behaves a lot better. All set for another review.

aduth · 2018-09-06T15:44:35Z

packages/editor/src/components/post-title/index.js

@@ -36,6 +36,7 @@ class PostTitle extends Component {
 		this.onUnselect = this.onUnselect.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.redirectHistory = this.redirectHistory.bind( this );
+		this.textareaRef = createRef();


Unused, should remove.

Oops, good catch!

aduth · 2018-09-06T15:45:27Z

packages/editor/src/components/post-title/index.js

+									focus the title on new post so the author can start typing
+									right away, without needing to click anything.
+								*/
+								autofocus={ this.props.isPostEmpty ? 'autofocus' : undefined }


Doesn't React warn about this usage, since we're assigning the attribute, not the DOM property autoFocus (capitalized "F")? With the latter, I'd also expect this to be passed as a boolean, i.e.

autoFocus={ this.props.isPostEmpty }

I didn't see a warning, also I meant to assign the attribute… will React do some magic and assign a value to a DOM attribute if passed like that?! 😱

Related: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

Notably:

Note that you should still use the canonical React naming for known attributes:

// Yes, please <div tabIndex="-1" /> // Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`? <div tabindex="-1" />

I missed that one, cool!

Fix #3828.

tofumatt · 2018-09-07T20:45:46Z

Set for another review, sorry 'bout the delay! Thanks for the info on DOM attributes!

aduth

LGTM 👍

I'm a little wary of the unintended remounts triggering focus grabs, but if anything it would be good for those to be surfaced (as disruptive as they might be) since the unintentionally surrounding this possibility should itself be considered a bug worth addressing.

A small thing, but it was a bit jarring for me to see the additional visual effect of the focused title (the border) when loading the editor. This is, of course, expected as a result of the title being auto-focused, though in the broader sense maybe we don't want to have such a heavy first impression. Worth iterating if it's sensed to be problematic.

tofumatt · 2018-09-07T21:24:36Z

Fair enough, I could see the focus style being tweaked is the post is in the same state that enables autoFocus (eg isCleanNewPost).

Unrelated, but that's some Chrome theme you have there. ✨

designsimply · 2018-09-14T18:28:45Z

I tested and focus automatically goes to the title on new posts, but that does not happen for pre-existing published or draft posts with an empty title. Is this the intended behavior?

^{Tested with Firefox 62.0, Safari 11.1.2, and Chrome 69.0.3497.92 on macOS 10.13.6.}

tofumatt · 2018-09-14T18:44:12Z

That's the intended behaviour, yes. The idea is that any existing post that's been saved without a title was done so intentionally, so we don't focus the title in that case.

It would probably be nice if we eventually focused the last block on an existing page, but that's another issue 😄

For now nothing should be focused on an existing post.

aduth · 2018-09-14T19:33:08Z

Since I just encountered it in an unrelated fix, what should be the expected behavior for a new post with a non-empty title, either via the_title filter or some initial edits (see Demo page).

#9921

designsimply · 2018-09-24T18:12:41Z

My take: since the demo post is a new post that has not yet been saved (bit of an edge case), so I think it's fine that auto-focus works for the title in that case.

afercia · 2018-10-14T18:01:44Z

I'd like to propose to reconsider this for the demo post, if no objections? I'd tend to think the demo post should serve to familiarize with the whole UI. Skipping all the UI that's before the post title doesn't help screen reader users in discovering the features in the top bar. Actually, I'm not even sure if the demo post is meant to stay after merge, but what about checking explicitly if the post is empty? Something like autoFocus={ isCleanNewPost && ! title }. /Cc @tofumatt

tofumatt · 2018-10-14T21:41:33Z

Ah, that's a really good point @afercia. I'm not sure it's staying either but before I thought that edge case of focusing the title on the demo was fine because I wanted to err toward simple code. As it serves as an introduction to the editor, not focusing it seems good.

I mean, on the other hand, it means the intro to the editor won't focus the title like a new post would, but then a post like the demo page that had been saved wouldn't focus either. 🤷‍♂️

So yeah, I think that's a good point and we shouldn't focus it if a title is present. 👍

I've filed: #10601 to track it.

tofumatt requested a review from a team September 4, 2018 13:49

tofumatt commented Sep 4, 2018

View reviewed changes

aduth requested changes Sep 4, 2018

View reviewed changes

tofumatt requested a review from aduth September 4, 2018 14:39

youknowriad reviewed Sep 5, 2018

View reviewed changes

tofumatt self-assigned this Sep 5, 2018

tofumatt removed the request for review from aduth September 5, 2018 09:24

aduth reviewed Sep 5, 2018

View reviewed changes

tofumatt requested review from youknowriad and aduth September 6, 2018 10:25

tofumatt force-pushed the 3828/feat-focus-empty-title branch from a901273 to 9de29e3 Compare September 6, 2018 10:27

aduth requested changes Sep 6, 2018

View reviewed changes

aduth mentioned this pull request Sep 6, 2018

Editor: Restore isCleanNewPost selector #9668

Merged

tofumatt added 5 commits September 7, 2018 20:43

feat: Focus title when empty

d92a85d

Fix #3828.

chore: Tweak comments/code clarity

e20aa13

chore: PR Tweaks

0f58977

feat: Use autofocus and improve tests

ce5e741

chore: Use autoFocus prop and isCleanNewPost selector

13b6d43

tofumatt force-pushed the 3828/feat-focus-empty-title branch from 9de29e3 to 13b6d43 Compare September 7, 2018 20:28

tofumatt requested a review from aduth September 7, 2018 20:44

aduth approved these changes Sep 7, 2018

View reviewed changes

tofumatt merged commit b688d2e into master Sep 7, 2018

tofumatt deleted the 3828/feat-focus-empty-title branch September 7, 2018 21:24

tofumatt added this to the 3.9 milestone Sep 7, 2018

tofumatt mentioned this pull request Oct 14, 2018

Don't focus title of demo content (don't focus when title exists) #10601

Closed

aduth mentioned this pull request Nov 6, 2018

Editor: Factor initial edits to own state #11267

Merged

2 tasks

aduth mentioned this pull request Mar 15, 2019

Edit Post: Remove menu toggling on checkbox, radio buttons #14456

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Focus title if title is empty #9608

feat: Focus title if title is empty #9608

tofumatt commented Sep 4, 2018

tofumatt Sep 4, 2018

aduth Sep 4, 2018

tofumatt Sep 4, 2018

aduth Sep 4, 2018

aduth Sep 4, 2018

aduth Sep 4, 2018

tofumatt Sep 4, 2018

tofumatt commented Sep 4, 2018

youknowriad Sep 5, 2018

tofumatt Sep 5, 2018

aduth commented Sep 5, 2018 •

edited

Loading

tofumatt commented Sep 5, 2018

aduth Sep 5, 2018

tofumatt Sep 5, 2018

tofumatt Sep 6, 2018

tofumatt commented Sep 6, 2018

aduth Sep 6, 2018

tofumatt Sep 6, 2018

aduth Sep 6, 2018

tofumatt Sep 6, 2018

aduth Sep 6, 2018 •

edited

Loading

tofumatt Sep 7, 2018

tofumatt commented Sep 7, 2018

aduth left a comment •

edited

Loading

tofumatt commented Sep 7, 2018

designsimply commented Sep 14, 2018 •

edited

Loading

tofumatt commented Sep 14, 2018

aduth commented Sep 14, 2018

designsimply commented Sep 24, 2018

afercia commented Oct 14, 2018

tofumatt commented Oct 14, 2018

feat: Focus title if title is empty #9608

feat: Focus title if title is empty #9608

Conversation

tofumatt commented Sep 4, 2018

Description

How has this been tested?

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt commented Sep 4, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth commented Sep 5, 2018 • edited Loading

tofumatt commented Sep 5, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt commented Sep 6, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth Sep 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt commented Sep 7, 2018

aduth left a comment • edited Loading

Choose a reason for hiding this comment

tofumatt commented Sep 7, 2018

designsimply commented Sep 14, 2018 • edited Loading

tofumatt commented Sep 14, 2018

aduth commented Sep 14, 2018

designsimply commented Sep 24, 2018

afercia commented Oct 14, 2018

tofumatt commented Oct 14, 2018

aduth commented Sep 5, 2018 •

edited

Loading

aduth Sep 6, 2018 •

edited

Loading

aduth left a comment •

edited

Loading

designsimply commented Sep 14, 2018 •

edited

Loading