Skip to content

Conversation

@youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Aug 6, 2020

closes #22858

I've been thinking about the behavior of the inserter and here's my findings so far. If we want to make the collapsible panel accessible properly It means:

That said this solution gives away the possibility to insert multiple blocks and patterns in a row. So we have two options we can explore later:

  • Add a modifier key, when you hold it and insert a block, it keeps the inserter open and doesn’t move the focus to the content area which means the inserter stays open. (This allows the multi-insertion to work both with keyboard and mouse while right now it only works for mouse users)
  • Don't focus the content when inserting patterns as it's not clear what block in the pattern should be focused.
  • By default don’t focus on the content when you insert a block, unless you hit “Escape” to exit the insert.

@github-actions
Copy link

github-actions bot commented Aug 6, 2020

Size Change: +243 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/block-editor/index.js 125 kB +7 B (0%)
build/edit-post/index.js 304 kB +273 B (0%)
build/edit-post/style-rtl.css 5.62 kB +22 B (0%)
build/edit-post/style.css 5.61 kB +21 B (0%)
build/editor/index.js 45.2 kB -80 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.97 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/style-rtl.css 10.6 kB 0 B
build/block-editor/style.css 10.6 kB 0 B
build/block-library/editor-rtl.css 7.59 kB 0 B
build/block-library/editor.css 7.59 kB 0 B
build/block-library/index.js 132 kB 0 B
build/block-library/style-rtl.css 7.76 kB 0 B
build/block-library/style.css 7.77 kB 0 B
build/block-library/theme-rtl.css 729 B 0 B
build/block-library/theme.css 730 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.9 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 9.38 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@youknowriad youknowriad force-pushed the try/popover-like-inserter branch from 8b19ebc to 8e492a7 Compare August 7, 2020 09:11
@youknowriad youknowriad self-assigned this Aug 7, 2020
@youknowriad youknowriad added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Aug 7, 2020
@youknowriad youknowriad requested a review from jasmussen August 7, 2020 09:19
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was extracted as is from Popover, ideally, it should be a reusable hook/component (or multiple).

@youknowriad youknowriad requested a review from mcsf August 7, 2020 09:20
@youknowriad youknowriad marked this pull request as ready for review August 7, 2020 09:20
@youknowriad youknowriad force-pushed the try/popover-like-inserter branch from 8e492a7 to faf22d8 Compare August 7, 2020 09:46
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

This is what I see:

popoverinserter

This fixes important issues, and while it would be good to go back and revisit some of the specific behaviors, it seems good to get this in.

@youknowriad youknowriad requested a review from gziolo as a code owner August 7, 2020 11:44
@youknowriad youknowriad force-pushed the try/popover-like-inserter branch from a5d2b4b to fe92b1e Compare August 7, 2020 12:36
@youknowriad youknowriad added the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Aug 7, 2020
@enriquesanchez
Copy link
Contributor

I think this is a great improvement, thanks Riad! Focus is constrained and predictable. Hitting esc takes me back to where I was 👍

Here's a gif of my test:

inserter

You'll notice that the editor's content scrolls along with my position in the inserter as I tab. I'm not sure this should happen. What I find curious is that I don't see that happening on Joen's test. Maybe something funny happening on my local install?

I also think screen-reader navigation would be much friendlier if we announced each group the user lands on while tabbing. Right now I only hear "Image text, Buttons text, Shortcode text", so it's hard to understand that you're on the first item of a group. I'll create a different issue as this is out of scope for this one but still wanted to note it.

@jasmussen
Copy link
Contributor

A small thing regressed, perhaps in a rebase, from the time I approved this. Two instances of height: 100% are missing:

Screenshot 2020-08-10 at 08 49 13

When you add those back in the inspector, things work as they should. Without them, we have the double scrollbar issue again.

@youknowriad youknowriad merged commit 018f4ae into master Aug 10, 2020
@youknowriad youknowriad deleted the try/popover-like-inserter branch August 10, 2020 07:53
@github-actions github-actions bot added this to the Gutenberg 8.8 milestone Aug 10, 2020
@StevenDufresne
Copy link
Contributor

@youknowriad When you click inside a block, the main inserter closes. If you have a block with a template lock and a select list of allowed blocks, how do you add those children blocks?

@youknowriad
Copy link
Contributor Author

If you have a block with a template lock and a select list of allowed blocks, how do you add those children blocks?

Not sure I understand what you mean here? It just works like previous versions. You click the appender of that container block and add the children blocks?

@StevenDufresne
Copy link
Contributor

If you have a block with a template lock and a select list of allowed blocks, how do you add those children blocks?

Not sure I understand what you mean here? It just works like previous versions. You click the appender of that container block and add the children blocks?

Given this block: https://gist.github.com/ryelle/cacdba5c888153d97eae38db775dec7f (maybe there's an issue with this block?)

The appender does not show up. The appender visible in the screenshot is not the containers appender.

@StevenDufresne
Copy link
Contributor

StevenDufresne commented Aug 19, 2020

Actually, that's a bad example, it has a template lock.

User error. Disregard. :)

@apeatling
Copy link
Contributor

apeatling commented Sep 9, 2020

This change is quite a big regression for building pages using block patterns. I would not expect the inserter to close when I select a pattern, and I expect users would want to add multiple patterns in one go. Also, I lose my scroll position, so when reopening I have to find where I was again.

I realize there will be followups to address this, I wanted to note the flow issue, especially with scroll position.

@shaunandrews
Copy link
Contributor

shaunandrews commented Jan 13, 2021

This PR has made it incredibly difficult to add multiple blocks or patterns to a document in the post editor. It also makes it difficult to add multiple blocks or widgets to a sidebar with the widget editor. [See #26223]

By default don’t focus on the content when you insert a block, unless you hit “Escape” to exit the insert.

I think its time we do this.

I could see the same behavior for the other sidebars as well; Opening a sidebar would trap focus. Actions within the sidebar (like adding a block) can move focus away, and you could still move focus back into the sidebar — but you'd be able to use esc to close the sidebar and remove focus.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jan 18, 2021

Hey Shaun @shaunandrews

How do you suggest we move this onward?

@shaunandrews
Copy link
Contributor

There's a PR that revisits this behavior over here: #28191

@paaljoachim
Copy link
Contributor

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Regression: the new Block Inserter doesn't constrain tabbing

8 participants