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.

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

fix: Improve empty block text #11560

Merged
merged 8 commits into from Nov 8, 2018

Conversation

Projects
None yet
6 participants
@tofumatt
Member

tofumatt commented Nov 7, 2018

Fix #9076
Fix #5591

Consolidate the "Write your story" and "Add text or type" placeholders, while also adding context to the placeholder with an aria-label.

Screenshots

screenshot 2018-11-07 02 57 05

screenshot 2018-11-07 02 56 48

@tofumatt tofumatt added this to the 4.3 milestone Nov 7, 2018

@tofumatt tofumatt requested a review from WordPress/gutenberg-core Nov 7, 2018

@@ -245,7 +245,8 @@ class ParagraphBlock extends Component {
onMerge={ mergeBlocks }
onReplace={ this.onReplace }
onRemove={ () => onReplace( [] ) }
placeholder={ placeholder || __( 'Add text or type / to add content' ) }
aria-label={ __( 'Type text or use the forward slash key to insert a block' ) }
placeholder={ placeholder || __( 'Type text or press “/” to select a block' ) }

This comment has been minimized.

@chrisvanpatten

chrisvanpatten Nov 7, 2018

Contributor

It's a super minor nit pick but why can't these labels be identical, with the aria label imply replacing "/" with "forward slash key" so it's clearer how screen readers should read it?

E.g.

Type text or press the forward slash key to insert a block

and

Type text or press the "/" key to insert a block

It's not clear why the text itself would need to be different in these cases, aside from the visible placeholder showing the slash visually instead of as text.

This comment has been minimized.

@tofumatt

tofumatt Nov 7, 2018

Member

Works for me actually, good point 👍

tofumatt added some commits Nov 7, 2018

<WithSelect(WithDispatch(InserterWithShortcuts)) />
<WithSelect(IfCondition(Inserter))
position="top right"
/>

This comment has been minimized.

@youknowriad

youknowriad Nov 7, 2018

Contributor

Anything that might have triggered all these tabs? I guess jest generates spaces by default right?

This comment has been minimized.

@tofumatt

tofumatt Nov 7, 2018

Member

I just typed u after running test-unit:watch to update the snapshots, so I blame Jest. Should I have run something else?

This comment has been minimized.

@youknowriad

youknowriad Nov 7, 2018

Contributor

No, if it's generated by jest this way than maybe the old snapshot was not correct.

@@ -80,7 +80,7 @@ export class PostTextEditor extends Component {
onBlur={ this.stopEditing }
className="editor-post-text-editor"
id={ `post-content-${ instanceId }` }
placeholder={ decodedPlaceholder || __( 'Write your story' ) }
placeholder={ decodedPlaceholder || __( 'Type text or press “/” to insert a block' ) }

This comment has been minimized.

@youknowriad

youknowriad Nov 7, 2018

Contributor

You can't press "/" or insert a block. This is the text editor, you can just type HTML :)

This comment has been minimized.

@tofumatt

tofumatt Nov 7, 2018

Member

Oh, oops, right. I think it too had the “Write your story” prompt and I just got confused. I’ll update it, my bad! 😅

This comment has been minimized.

@tofumatt

tofumatt Nov 7, 2018

Member

This will actually still show because we pass the same placeholder to the code editor. We probably shouldn't do that, but it's a different issue...

This comment has been minimized.

@youknowriad

youknowriad Nov 7, 2018

Contributor

It's made visible with this PR though, I'd be in favor of dropping the bodyPlaceholder support here.

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Nov 7, 2018

This is looking good to me, but I prefer to bring people that I know care more than me about "Copy". cc @jasmussen @mtias

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 7, 2018

👍 👍 consolidation, 👍 👍 PR.

However I prefer the suggestion from the old PR, which was: Start writing or type / to choose a block.

@jasmussen jasmussen requested review from alexislloyd and karmatosed Nov 7, 2018

@tofumatt

This comment has been minimized.

Member

tofumatt commented Nov 7, 2018

However I prefer the suggestion from the old PR, which was: Start writing or type / to choose a block.

Actually, I agree. Changed!

@@ -246,7 +246,7 @@ class ParagraphBlock extends Component {
onReplace={ this.onReplace }
onRemove={ () => onReplace( [] ) }
aria-label={ __( 'Empty block; type text or press the forward slash key to insert a block' ) }

This comment has been minimized.

@chrisvanpatten

chrisvanpatten Nov 7, 2018

Contributor

should "type text" be replaced with "start writing"?

This comment has been minimized.

@tofumatt

tofumatt Nov 7, 2018

Member

For a screen reader I actually think "type text" is better than "start writing".

@@ -71,7 +71,7 @@ export class PostTextEditor extends Component {
return (
<Fragment>
<label htmlFor={ `post-content-${ instanceId }` } className="screen-reader-text">
{ decodedPlaceholder || __( 'Write your story' ) }
{ decodedPlaceholder || __( 'Type text' ) }

This comment has been minimized.

@youknowriad

youknowriad Nov 8, 2018

Contributor

Let's remove the decodedPlaceholder from this component and ship.

This comment has been minimized.

@tofumatt

tofumatt Nov 8, 2018

Member

Sounds good; if that means this is otherwise good to go mind explicitly reviewing it now? 😄

@tofumatt tofumatt requested a review from youknowriad Nov 8, 2018

@youknowriad

LGTM 👍

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Nov 8, 2018

(Looks like there's some failing tests though)

@tofumatt

This comment has been minimized.

Member

tofumatt commented Nov 8, 2018

Shoot, must have run the wrong snapshot update script. Fixed.

@tofumatt tofumatt merged commit ddf8c07 into master Nov 8, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@tofumatt tofumatt deleted the fix/5591-improve-new-block-text branch Nov 8, 2018

@mtias mtias added the [Type] Copy label Nov 8, 2018

@afercia

This comment has been minimized.

Contributor

afercia commented Nov 8, 2018

@tofumatt this way, it will announce "Empty block" even if the block is not empty... can this be reviewed please? Also, changes in this area should take into consideration #1659. Thank you.

screenshot 2018-11-08 at 19 21 10

@tofumatt

This comment has been minimized.

Member

tofumatt commented Nov 8, 2018

Argh, right, sorry. Okay, I'll file a follow-up PR for this tonight. Thanks so much for that @afercia, my bad. 😓

tofumatt added a commit that referenced this pull request Nov 9, 2018

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 9, 2018

Thanks for working on this, and apologies for missing this. But right now the text says

Start writing or press / to insert a block

The suggestion was:

Start writing or type / to choose a block

I defer to any other considerations, but I honestly prefer the initially suggested phrasing. Notaby "press /" feels weird to me, because on a european keyboard this is not a separate key — I have to press Shift + 7 to insert a /. Therefore "type" feels more natural.

Additionally, I'm not a fan of the term "insert" for blocks, even though it's accurate. I far prefer "add", or as was suggested "choose a block". The latter implies your caret is already in a block, and you can change the type of it, which is sort of accurate as anything you add replaces the appender block you were in.

youknowriad added a commit that referenced this pull request Nov 9, 2018

fix: Change aria-label depending on content of paragraph block (#11653)
* fix: Only show aria-label when content is empty

Fix issue introduced in #11560

* Improve aria labels so they reflect state of block/empty block

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

fix: Improve empty block text (WordPress#11560)
* fix: Improve empty block text

Fix WordPress#9076
Fix WordPress#5591

* Tweak labels

* Make it consistent

* Make it MORE consistent

* Fix block inserter shortcut text

* Use suggested text

* Do not use placeholder in code editor

* fix tests

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

fix: Change aria-label depending on content of paragraph block (WordP…
…ress#11653)

* fix: Only show aria-label when content is empty

Fix issue introduced in WordPress#11560

* Improve aria labels so they reflect state of block/empty block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment