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.

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

Make the inserter behave as a popover #24429

Merged
merged 5 commits into from
Aug 10, 2020
Merged

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
withFocusReturn( ( { children } ) => children )
);

export default function PopoverWrapper( { onClose, children } ) {
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.7 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
7 participants