Fix regression with textbox spacing + a focus issue #9186

jasmussen · 2018-08-21T07:20:09Z

This PR fixes two things.

It fixes a small regression where we removed the 1px margin on input fields inherited by WordPress. But we did this with too much specificity so it regressed other input fields as well. To test this works now publish a post and verify that the URL copy input field looks right.

After:

It removes a focus style we used to have a while back. Back then if you were in isEditing mode, where all UI fade out, arrow-keying to a placeholder or image block would not show the block UI. This focus style then at least showed it as highlighted black. Since those are now shown as "selected" effectively exiting isEditing mode, this old focus fix is no longer needed. Not only that but this focus style has increasingly as part of other changes become a focus style you accidentally invoke on the text appender.

Before:

I do still miss the days when you could use the slash command to insert an image placeholder, then press tab tab to go to the "open media library" dialog. Right now you have to tab through all the side UI and block UI to get there. But this is something to think about separately.

This PR fixes two things. 1. It fixes a small regression where we removed the 1px margin on input fields inherited by WordPress. But we did this with too much specificity so it regressed other input fields as well. To test this works now publish a post and verify that the URL copy input field looks right. 2. It removes a focus style we used to have a while back. Back then if you were in `isEditing` mode, where all UI fade out, arrow-keying to a placeholder or image block would not show the block UI. This focus style then at least showed it as highlighted black. Since those are now shown as "selected" effectively exiting isEditing mode, this old focus fix is no longer needed. Not only that but this focus style has increasingly as part of other changes become a focus style you accidentally invoke on the text appender. I do still miss the days when you could use the slash command to insert an image placeholder, then press tab tab to go to the "open media library" dialog. Right now you have to tab through all the side UI and block UI to get there. But this is something to think about separately.

tofumatt

Code seems fine and it works for me, just curious if this has accessibility ramifications?

tofumatt · 2018-08-21T08:21:32Z

packages/editor/src/components/post-publish-panel/style.scss

@@ -87,7 +87,7 @@
 	}

 	.components-button {
-		text-align: center;
+		justify-content: center;


Odd, justify-content says it doesn't work in IE 11 at all and is buggy in Edge with Flexbox. https://caniuse.com/#search=justify-content

But it looks good to me in IE11:

Text align did nothing, for whatever reason.

tofumatt · 2018-08-21T08:22:11Z

edit-post/components/visual-editor/style.scss

@@ -115,19 +115,6 @@
 	}
 }

-// This is a focus style shown for blocks that need an indicator even when in an isEditing state
-// like for example an image block that receives arrowkey focus.
-.edit-post-visual-editor .editor-block-list__block:not(.is-selected) {


Is this okay to remove for a11y? Why did they need that state?

It's a bit hard to explain, there are GIFs in the archives here. But here's a GIF of the behavior today:

Back in the day, the "isEditing" mode that fades out UI as you're typing remained faded out even when you navigated into a non text block. This would then get a black outline as I just commented out.

Coolio, that makes sense. Good to 🚢 in my mind!

Why are we losing the "isEditing" mode when we move to a non-textual block at the moment?

I can't recall the details but I believe it was an accessibility thing about the toolbar. I think maybe @aduth worked on it but not sure.

Context: #5552

Notably, as otherwise:

" it would be impossible to use the image toolbar by keyboard alone "

The function comment for ObserveTyping's stopTypingOnNonTextField could probably be improved to make clearer its purpose.

I would also note that it could be revisited in the future, perhpas with some of the focus mode toolbar improvements. But I would also admit this to be low priority.

afercia · 2018-08-21T13:29:08Z

I'm mobile and 🏖 can't fully test the focus thing but I trust @jasmussen 🙂
Worth noting (last time I've checked) the URL input field was missing a label. It needs a label associated with for/id attributes, not sure if it should be addressed in this PR.

aduth

Reviewing only the black focus border changes: In extended back-and-forth with @jasmussen , it seems this is a lingering fragment which is now better represented by the .is-selected styling which is applied to a block which becomes focused. The black border appears currently only because of some incidental behavior† for the empty default block not applying the .is-selected class. These styles should be fine to remove altogether.

†

gutenberg/packages/editor/src/components/block-list/block.js

Line 392 in 8755ebf

    
           const shouldAppearSelected = ! showSideInserter && isSelected && ! isTypingWithinBlock;

gutenberg/packages/editor/src/components/block-list/block.js

Line 411 in 8755ebf

'is-selected': shouldAppearSelected,

jasmussen · 2018-08-22T06:58:42Z

Worth noting (last time I've checked) the URL input field was missing a label. It needs a label associated with for/id attributes, not sure if it should be addressed in this PR.

I think that's separate, and worth ticketing if it isn't already. This PR only touches a margin regression, of which the "copy URL" field happened to be affected.

jasmussen · 2018-08-22T07:10:50Z

@aduth forgive me as I'm having a hard time parsing your comment. Did you mean to suggest I had to remove additional code? Or was your comment in approval that this PR is good to ship?

aduth · 2018-08-22T12:35:36Z

My comment had no objections. Consider it approval for the one half of the pull request I targeted 😉

jasmussen added the [Type] Enhancement A suggestion for improvement. label Aug 21, 2018

jasmussen added this to the 3.7 milestone Aug 21, 2018

jasmussen self-assigned this Aug 21, 2018

jasmussen requested review from aduth and a team August 21, 2018 07:20

Center text on copy buttons.

2c5d6af

tofumatt approved these changes Aug 21, 2018

View reviewed changes

aduth reviewed Aug 21, 2018

View reviewed changes

jasmussen merged commit ae3597f into master Aug 22, 2018

jasmussen deleted the fix/input-spacing-and-focus branch August 22, 2018 14:15

designsimply mentioned this pull request Aug 29, 2018

What is this black rectangle? #9434

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix regression with textbox spacing + a focus issue #9186

Fix regression with textbox spacing + a focus issue #9186

jasmussen commented Aug 21, 2018 •

edited

tofumatt left a comment

tofumatt Aug 21, 2018

jasmussen Aug 21, 2018

tofumatt Aug 21, 2018

jasmussen Aug 21, 2018

tofumatt Aug 21, 2018

youknowriad Aug 29, 2018

jasmussen Aug 29, 2018

aduth Aug 29, 2018

aduth Aug 29, 2018

jasmussen Aug 30, 2018

afercia commented Aug 21, 2018

aduth left a comment •

edited

jasmussen commented Aug 22, 2018

jasmussen commented Aug 22, 2018

aduth commented Aug 22, 2018

Fix regression with textbox spacing + a focus issue #9186

Fix regression with textbox spacing + a focus issue #9186

Conversation

jasmussen commented Aug 21, 2018 • edited

tofumatt left a 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

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

afercia commented Aug 21, 2018

aduth left a comment • edited

Choose a reason for hiding this comment

jasmussen commented Aug 22, 2018

jasmussen commented Aug 22, 2018

aduth commented Aug 22, 2018

jasmussen commented Aug 21, 2018 •

edited

aduth left a comment •

edited