Add post author selector enhanced with ComboboxControl #23237

adamsilverstein · 2020-06-17T13:33:32Z

Description

Add accessible search with debounced api requests for the post author dropdown.

Built on the ComboBox being added in #19657 which relies on Downshift.

Supersedes #7385.

How has this been tested?

Tested with a dozen users, by adding them with wp-cli: wp user generate --role=editor --count=12

Regular dropdown shows.

Tested with 10100 users by adding them with wp-cli: wp user generate --role=editor --count=10100

Enhanced selector shows. Typing will begin searching in the selector.

Note: to clear out generated users, I used wp user delete $(wp user list --role=editor --field=ID) --reassign=2

Screenshots

Types of changes

Only load the first 100 users from the API at load.
Load the post author object by id at load.
Use a debounced search to query the API for matching users while the user types.
Question: should we start searching once the user types 2 characters?
Use progressive enhancement to add the enhanced selector when there are more than 50 users to choose from.
I haven't added any styles, I am assuming the underlying component will include these.
I added a loading results state to show a spinner while fetching authors, should this be tracked in the store vs the component?

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2020-06-19T16:51:43Z

Size Change: -179 B (0%)

Total Size: 1.17 MB

Filename	Size	Change
`build/block-directory/index.js`	8.53 kB	+1 B
`build/block-editor/index.js`	128 kB	+66 B (0%)
`build/block-library/index.js`	135 kB	+42 B (0%)
`build/blocks/index.js`	47.5 kB	+1 B
`build/components/index.js`	168 kB	-55 B (0%)
`build/components/style-rtl.css`	15.4 kB	+24 B (0%)
`build/components/style.css`	15.4 kB	+24 B (0%)
`build/core-data/index.js`	12 kB	+27 B (0%)
`build/data-controls/index.js`	1.27 kB	-1 B
`build/data/index.js`	8.43 kB	-1 B
`build/edit-post/index.js`	306 kB	+1 B
`build/edit-site/index.js`	20.5 kB	+2 B (0%)
`build/edit-widgets/index.js`	17.7 kB	-122 B (0%)
`build/edit-widgets/style-rtl.css`	2.73 kB	-96 B (3%)
`build/edit-widgets/style.css`	2.73 kB	-97 B (3%)
`build/editor/index.js`	45.4 kB	+8 B (0%)
`build/rich-text/index.js`	13.7 kB	-2 B (0%)
`build/server-side-render/index.js`	2.6 kB	-1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.52 kB	0 B
`build/api-fetch/index.js`	3.35 kB	0 B
`build/autop/index.js`	2.72 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/style-rtl.css`	943 B	0 B
`build/block-directory/style.css`	942 B	0 B
`build/block-editor/style-rtl.css`	11.1 kB	0 B
`build/block-editor/style.css`	11.1 kB	0 B
`build/block-library/editor-rtl.css`	8.57 kB	0 B
`build/block-library/editor.css`	8.58 kB	0 B
`build/block-library/style-rtl.css`	7.61 kB	0 B
`build/block-library/style.css`	7.6 kB	0 B
`build/block-library/theme-rtl.css`	741 B	0 B
`build/block-library/theme.css`	741 B	0 B
`build/block-serialization-default-parser/index.js`	1.78 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/compose/index.js`	9.42 kB	0 B
`build/date/index.js`	31.9 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	4.42 kB	0 B
`build/edit-navigation/index.js`	10.7 kB	0 B
`build/edit-navigation/style-rtl.css`	868 B	0 B
`build/edit-navigation/style.css`	871 B	0 B
`build/edit-post/style-rtl.css`	6.25 kB	0 B
`build/edit-post/style.css`	6.24 kB	0 B
`build/edit-site/style-rtl.css`	3.54 kB	0 B
`build/edit-site/style.css`	3.54 kB	0 B
`build/editor/editor-styles-rtl.css`	492 B	0 B
`build/editor/editor-styles.css`	493 B	0 B
`build/editor/style-rtl.css`	3.83 kB	0 B
`build/editor/style.css`	3.82 kB	0 B
`build/element/index.js`	4.44 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	7.49 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`	1.74 kB	0 B
`build/html-entities/index.js`	621 B	0 B
`build/i18n/index.js`	3.55 kB	0 B
`build/is-shallow-equal/index.js`	709 B	0 B
`build/keyboard-shortcuts/index.js`	2.39 kB	0 B
`build/keycodes/index.js`	1.85 kB	0 B
`build/list-reusable-blocks/index.js`	3.02 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.12 kB	0 B
`build/notices/index.js`	1.69 kB	0 B
`build/nux/index.js`	3.27 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.44 kB	0 B
`build/primitives/index.js`	1.34 kB	0 B
`build/priority-queue/index.js`	789 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.24 kB	0 B
`build/url/index.js`	4.06 kB	0 B
`build/viewport/index.js`	1.74 kB	0 B
`build/warning/index.js`	1.13 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

packages/components/src/combobox-control/index.js

packages/core-data/src/selectors.js

packages/editor/src/components/post-author/enhanced-post-author.js

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

…r.js Co-authored-by: Enrique Piqueras <epiqueras@users.noreply.github.com>

…s changed.

youknowriad · 2020-09-14T08:58:11Z

Noticed a weird glitch here (I'm testing on safari), When I click on one of the select options (and before releasing the button), the panel chevron icons on the sidebar move to the right.

…enberg into add/7385-author-combobox-2

adamsilverstein · 2020-09-14T19:21:17Z

Noticed a weird glitch here (I'm testing on safari), When I click on one of the select options (and before releasing the button), the panel chevron icons on the sidebar move to the right.

Does it also affect the font size dropdown selector where the combobox is already used?

youknowriad · 2020-09-15T08:20:37Z

No, it only affects the author control, that said the font size one is not a ComboboxControl, it's a CustomSelectControl.

adamsilverstein · 2020-09-15T13:59:25Z

No, it only affects the author control, that said the font size one is not a ComboboxControl, it's a CustomSelectControl.

Oh, I see now. I thought previously that the selector used ComboboxControl, maybe that changed?

afercia · 2020-09-15T14:36:59Z

For a first accessibility feedback, please see this comment on the related PR for the Page parent combobox: #25267 (comment)

adamsilverstein · 2020-09-17T14:51:04Z

@afercia I took a pass at starting implementing the author selector using the same component the tag autocomplete selector uses: FormTokenField in #25420

It sort of works and illustrates some of the fundamental UX differences here:

The tag selector never shows a dropdown of selections, Downshift shows a default list of items (maybe this is ok - for <= 50 users we can show a standard select element)
The tag selector is designed to contain multiple tags, the page/author selectors are designed to choose a single item. I hack that by hiding the existing tag, with mixed results.
The tag selector is designed to allow you to "clear" all of the tags and have a blank field. This should be possible for pages (no parent) but not authors.
one other limitation - values in the selector are flat, not objects, so we can't store both the author name and id. instead we combine the two and extract them using a regex when selected.

Given the fact that this component already has excellent accessibility, does it seem worth trying to extend the underlying component to better fit our use case?

afercia · 2020-09-17T15:17:46Z

@adamsilverstein thanks for further exploring this issue!

Well if you ask me, I see a value in abstracting the Gutenberg combobox (auto-completer) implementation and make it more reusable, not only for internal usage but also for usage by plugins. I think I mentioned this a few times in other issues 🙂 As per the technical side, I'm afraid I don't have the skills to be of help with coding.

The tag selector never shows a dropdown of selections, Downshift shows a default list of items (maybe this is ok - for <= 50 users we can show a standard select element)

Using a native <select> element for a small amount of users seems a very good idea. I'm not sure a search / filtering / suggestions UI would make sense for, say, 5 users even from a visual perspective 🙂

…bobox-2

youknowriad · 2020-09-28T10:10:41Z

I updated this to use the new ComboboxControl.
I had to update the component a bit cause its behavior didn't match the real use-case expectations but I believe it's good now.

youknowriad · 2020-09-28T10:11:14Z

I think we can explore isLoading prop on a separate PR to get it right.

Outdated

adamsilverstein · 2020-09-30T22:50:13Z

🎉

Thank you @youknowriad for working on this. I'll give this final version a test to see if I notice any issues. I have been working on these selectors for a long time (years?!) so it is really exciting to see this get fixed!

adamsilverstein · 2020-10-01T14:06:36Z

Confirming this works well in my test, excited to see this land!

adamsilverstein · 2021-01-03T00:14:52Z

@adamsilverstein thanks for further exploring this issue!

Well if you ask me, I see a value in abstracting the Gutenberg combobox (auto-completer) implementation and make it more reusable, not only for internal usage but also for usage by plugins. I think I mentioned this a few times in other issues 🙂 As per the technical side, I'm afraid I don't have the skills to be of help with coding.

The tag selector never shows a dropdown of selections, Downshift shows a default list of items (maybe this is ok - for <= 50 users we can show a standard select element)

Using a native <select> element for a small amount of users seems a very good idea. I'm not sure a search / filtering / suggestions UI would make sense for, say, 5 users even from a visual perspective 🙂

@afercia We addressed this in #26426 for the post author selector (and I plan to do the same for the page parent selector soon). Thanks again for all your guidance on this issue.

epiqueras and others added 5 commits May 18, 2020 13:59

Components: Implement a combobox control.

8fd66e5

Components: Update Downshift.

c0bc82f

Components: Update Downshift.

35ed682

New post author selector, initial scaffolding.

e7dcb29

New post author selector, async work.

d4c149f

adamsilverstein mentioned this pull request Jun 17, 2020

Post author dropdown: add accessible-autocomplete #7385

Closed

4 tasks

adamsilverstein changed the base branch from master to add/combobox-control-component June 17, 2020 19:59

adamsilverstein added 2 commits June 19, 2020 10:16

Complete initial implementation.

1fe7700

Cleanup.

9061e9b

adamsilverstein changed the title ~~Add/7385 author combobox 2~~ Add post author selector enhanced with Downshift Jun 19, 2020

adamsilverstein marked this pull request as ready for review June 19, 2020 17:30

adamsilverstein requested review from ajitbohra, chrisvanpatten, jorgefilipecosta, mkaz, nerrad and youknowriad as code owners June 19, 2020 17:30

Clean up user selection and search.

d679caa

adamsilverstein force-pushed the add/7385-author-combobox-2 branch from 92a876a to d679caa Compare June 19, 2020 17:34

adamsilverstein mentioned this pull request Jun 23, 2020

Parent Page Selector: use an accessible autocomplete/search component #16666

Closed

5 tasks

epiqueras requested changes Jun 23, 2020

View reviewed changes

adamsilverstein and others added 8 commits June 24, 2020 06:49

Update packages/editor/src/components/post-author/enhanced-post-autho…

c0ced2b

…r.js Co-authored-by: Enrique Piqueras <epiqueras@users.noreply.github.com>

merge

03ccfad

Clean up checks, return a single value from selector.

69e4626

Change element keys to author ids.

79a2523

Refresh the user list when the field value changes or the selection i…

a649ad6

…s changed.

Refresh the user list when the field value changes or the selection i…

99a9f2d

…s changed.

Remove ‘value’ from author objects.

ed75df8

Remove unused id from ComboboxControl.

c467b5c

Merge branch 'add/7385-author-combobox-2' of github.com:WordPress/gut…

b0aea68

…enberg into add/7385-author-combobox-2

adamsilverstein mentioned this pull request Sep 14, 2020

Page parent selector with ComboboxControl. #25267

Merged

6 tasks

afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). and removed Needs Accessibility Feedback Need input from accessibility labels Sep 15, 2020

adamsilverstein requested a review from epiqueras September 17, 2020 14:42

youknowriad changed the title ~~Add post author selector enhanced with Downshift~~ Add post author selector enhanced with ComboboxControl Sep 28, 2020

youknowriad added 2 commits September 28, 2020 10:15

Merge remote-tracking branch 'origin/master' into add/7385-author-com…

54af657

…bobox-2

Use the new combobox control

0fa42d5

youknowriad approved these changes Sep 28, 2020

View reviewed changes

youknowriad merged commit 78dde89 into master Sep 28, 2020

youknowriad deleted the add/7385-author-combobox-2 branch September 28, 2020 13:14

github-actions bot added this to the Gutenberg 9.1 milestone Sep 28, 2020

adamsilverstein mentioned this pull request Oct 2, 2020

ComboboxControl improve loading/fetching state. #25798

Open

swissspidy mentioned this pull request Oct 6, 2020

Post author dropdown: add accessible search with debounced api request #7384

Closed

adamsilverstein mentioned this pull request Oct 13, 2020

Post Author selector: use native <select> element for a small number of authors. #26077

Closed

TimothyBJacobs mentioned this pull request Oct 26, 2020

New authors dropdown breaks author selection for editors #26476

Closed

dkoo mentioned this pull request Mar 12, 2021

Author combobox component returns 403 error for non-admin users #29845

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add post author selector enhanced with ComboboxControl #23237

Add post author selector enhanced with ComboboxControl #23237

adamsilverstein commented Jun 17, 2020 •

edited

Loading

github-actions bot commented Jun 19, 2020 •

edited

Loading

youknowriad commented Sep 14, 2020

adamsilverstein commented Sep 14, 2020

youknowriad commented Sep 15, 2020

adamsilverstein commented Sep 15, 2020

afercia commented Sep 15, 2020

adamsilverstein commented Sep 17, 2020

afercia commented Sep 17, 2020

youknowriad commented Sep 28, 2020

youknowriad commented Sep 28, 2020

adamsilverstein commented Sep 30, 2020

adamsilverstein commented Oct 1, 2020

adamsilverstein commented Jan 3, 2021

Add post author selector enhanced with ComboboxControl #23237

Add post author selector enhanced with ComboboxControl #23237

Conversation

adamsilverstein commented Jun 17, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

github-actions bot commented Jun 19, 2020 • edited Loading

youknowriad commented Sep 14, 2020

adamsilverstein commented Sep 14, 2020

youknowriad commented Sep 15, 2020

adamsilverstein commented Sep 15, 2020

afercia commented Sep 15, 2020

adamsilverstein commented Sep 17, 2020

afercia commented Sep 17, 2020

youknowriad commented Sep 28, 2020

youknowriad commented Sep 28, 2020

adamsilverstein commented Sep 30, 2020

adamsilverstein commented Oct 1, 2020

adamsilverstein commented Jan 3, 2021

adamsilverstein commented Jun 17, 2020 •

edited

Loading

github-actions bot commented Jun 19, 2020 •

edited

Loading