Page parent selector with ComboboxControl. #25267

adamsilverstein · 2020-09-11T23:08:29Z

Description

Use the combox selector to provide a searchable page selector.

Supersedes #16666.

Based on work in #23237.

How has this been tested?

Screenshots

Note: screenshot does not include loading indicator which I added a bit later. the logic for loading state needs more work. I found that if I passed false to downshift in initialSelectedItem then later supplied the correct value, the correct value was not shown. I will work on this issue soon.

Types of changes

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-09-11T23:16:46Z

Size Change: +181 B (0%)

Total Size: 1.19 MB

Filename	Size	Change
`build/annotations/index.js`	3.52 kB	-1 B
`build/autop/index.js`	2.72 kB	+1 B
`build/blob/index.js`	667 B	-1 B
`build/block-directory/index.js`	8.57 kB	+13 B (0%)
`build/block-editor/index.js`	130 kB	+18 B (0%)
`build/block-library/index.js`	145 kB	-56 B (0%)
`build/block-library/style-rtl.css`	7.7 kB	+31 B (0%)
`build/block-library/style.css`	7.7 kB	+31 B (0%)
`build/blocks/index.js`	47.6 kB	+1 B
`build/components/index.js`	169 kB	-226 B (0%)
`build/compose/index.js`	9.63 kB	+206 B (2%)
`build/core-data/index.js`	12.1 kB	+28 B (0%)
`build/data/index.js`	8.63 kB	+32 B (0%)
`build/date/index.js`	31.9 kB	+3 B (0%)
`build/edit-navigation/index.js`	10.6 kB	+2 B (0%)
`build/edit-post/index.js`	306 kB	-31 B (0%)
`build/edit-site/index.js`	21.3 kB	+18 B (0%)
`build/edit-site/style-rtl.css`	3.85 kB	+44 B (1%)
`build/edit-site/style.css`	3.85 kB	+40 B (1%)
`build/edit-widgets/index.js`	21.3 kB	+57 B (0%)
`build/edit-widgets/style-rtl.css`	2.97 kB	-58 B (1%)
`build/edit-widgets/style.css`	2.97 kB	-59 B (1%)
`build/editor/index.js`	45.5 kB	+88 B (0%)
`build/editor/style.css`	3.84 kB	+1 B
`build/format-library/index.js`	7.49 kB	+1 B
`build/html-entities/index.js`	622 B	+1 B
`build/i18n/index.js`	3.54 kB	-1 B
`build/keyboard-shortcuts/index.js`	2.39 kB	-1 B
`build/list-reusable-blocks/index.js`	3.02 kB	-1 B
`build/media-utils/index.js`	5.12 kB	-1 B
`build/notices/index.js`	1.69 kB	-1 B
`build/nux/index.js`	3.27 kB	+1 B
`build/redux-routine/index.js`	2.85 kB	+1 B
`build/server-side-render/index.js`	2.6 kB	+1 B
`build/shortcode/index.js`	1.69 kB	-2 B (0%)
`build/viewport/index.js`	1.75 kB	+2 B (0%)
`build/warning/index.js`	1.13 kB	-1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/api-fetch/index.js`	3.35 kB	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`	10.9 kB	0 B
`build/block-editor/style.css`	10.9 kB	0 B
`build/block-library/editor-rtl.css`	8.65 kB	0 B
`build/block-library/editor.css`	8.65 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/components/style-rtl.css`	15.5 kB	0 B
`build/components/style.css`	15.5 kB	0 B
`build/data-controls/index.js`	685 B	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/style-rtl.css`	868 B	0 B
`build/edit-navigation/style.css`	871 B	0 B
`build/edit-post/style-rtl.css`	6.29 kB	0 B
`build/edit-post/style.css`	6.28 kB	0 B
`build/editor/editor-styles-rtl.css`	480 B	0 B
`build/editor/editor-styles.css`	482 B	0 B
`build/editor/style-rtl.css`	3.85 kB	0 B
`build/element/index.js`	4.45 kB	0 B
`build/escape-html/index.js`	734 B	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/is-shallow-equal/index.js`	710 B	0 B
`build/keycodes/index.js`	1.85 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/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`	790 B	0 B
`build/rich-text/index.js`	13 kB	0 B
`build/token-list/index.js`	1.24 kB	0 B
`build/url/index.js`	4.06 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

adamsilverstein · 2020-10-02T16:14:09Z

@youknowriad - created follow up for loading indicator - #25798

I noticed when we merged the author changes, we now use the ComboboxControl in all cases. We might want to consider using the standard HTML select element when the total number of items is relatively small, eg maybe up to 10, 20 or even 50 items. In these cases it is probably a better user experience (and likely better for accessibility) to show a traditional select. For authors in particular, many sites may only have a few users, so a searchable component is overly complex for their needs.

Shall I open a follow up issue to change this for the authors select, and we can discuss the ideal number to use there?

afercia · 2020-10-05T14:22:18Z

For authors in particular, many sites may only have a few users, so a searchable component is overly complex for their needs.

I'd be totally in favor of this. No need for a (relatively) complex search UI when a site has only, say, 5 users.

Less likely to happen for pages but yes, there may be sites with no more than 10 pages (or 20, or whatever the agreed limit is).

…tor-b

youknowriad · 2020-10-12T14:24:15Z

For authors in particular, many sites may only have a few users, so a searchable component is overly complex for their needs.

This would require fetching the number of available pages before rendering which I'm not sure how to do now. It doesn't seem like we have a dedicated data action for that. I'd leave it separate for now.

I made some updates here, I'd love some testing before shipping.

ntsekouras

Code wise and when tested this feels and looks good 👍 - I have left a couple small comments though. I haven't approved, only for wanting to know about my second comment postTypeSlug related.

packages/editor/src/components/page-attributes/parent.js

youknowriad · 2020-10-13T11:32:21Z

In aa701ad I discovered an issue unrelated with this PR but made visible where sometimes getEntityRecords don't return the required values. More details here https://wordpress.slack.com/archives/C02RQC26G/p1602586210264400

I'm choosing to deoptimize the _fields filtering a little bit, I don't see any other solution on the frontend side.

packages/editor/src/components/page-attributes/parent.js

adamsilverstein · 2020-10-13T20:51:04Z

@rianrietveld retying to test the latest version against WordPress trunk, I do not see the pages loading/searching when I type, or the initial page added to the list when my parent is outside the original selection.

I am testing with several hundred pages, several levels deep, ie:

wp post generate --post_type=page --max_depth=4 --count=500

Is it working for you?

adamsilverstein · 2020-10-13T21:18:22Z

I'd be totally in favor of this. No need for a (relatively) complex search UI when a site has only, say, 5 users.

@afercia - see #26077

youknowriad · 2020-10-14T08:02:21Z

@adamsilverstein It worked great for me. The command above did create scheduled pages though (not published) so I had to force the date.

ntsekouras

LGTM 👍 - CI has a failing test (timing problem) that was in other PRs as well. It's not related and can be handled in a separate PR.

adamsilverstein · 2020-10-19T02:50:37Z

@adamsilverstein It worked great for me. The command above did create scheduled pages though (not published) so I had to force the date.

I'll give it another test.

SJNBham · 2020-10-21T18:28:03Z

We only see our Homepage as an option in the Parent page combo field now and no search results are returned as of Gutenberg 9.2.0. We have about 1,500 pages on our site. We see the full list of our pages using Gutenberg 9.1.1 (although it takes about 10 seconds for the Parent Page dropdown field to appear when creating a new page. Using Edge (Chromium) and WordPress 5.5.1.

adamsilverstein · 2020-10-21T20:22:45Z

@youknowriad I can confirm this does not work for me either in wp core trunk - I see the same results as my previous test:

My initial parent page does not load (unless it is in the initial group).
No searches are performed, I can only select pages from the initial set.

Note that the user selector still works as expected. I'll try to dig in to see what is happening.

youknowriad · 2020-10-22T08:56:45Z

Thanks for testing and for your help on this @adamsilverstein
Let's try to fix this during the beta period. Keep on the loop and I'll try to chime in later.

adamsilverstein · 2020-10-22T17:22:52Z

@youknowriad - followed up with fixes in #26397

noahtallen and others added 25 commits July 14, 2020 20:48

Editor still loads if page or template type is not set

a325579

Create homepage state reducer

a379413

Remove initial state from PHP

62b37d7

Move home page resolution to client

4af2c1c

Consolidate entityId logic

95124bf

Consolidate activePage?.path

9fe3fea

Rework setupstate

e855102

Load home data over API

f9b2d52

Rename camelcase

6265ec3

Remove templateId from setPage

631e815

Naive cache results of findTemplate

0d30cca

Rename cache variable

3a1da28

Add text domain to setting translation

7e6e1e3

Fix existing JS unit tests

f3d2b40

Fix e2e test

821ced6

merge from origin/master

24ef5c6

update after merge from origin/master

8a80e6a

Merge branch 'master' of github.com:WordPress/gutenberg

e3d043c

Merge branch 'master' of github.com:WordPress/gutenberg

ea2921f

Merge branch 'master' of github.com:WordPress/gutenberg

40022d9

Merge branch 'master' of github.com:WordPress/gutenberg

5f52dd9

Merge branch 'master' of github.com:WordPress/gutenberg

f991486

Merge branch 'master' of github.com:WordPress/gutenberg

f7c4c34

Merge branch 'master' of github.com:WordPress/gutenberg

e0b000d

Page selector combobox, first pass.

375bdc9

adamsilverstein changed the title ~~Editor still loads if page or template type is not set~~ Page parent selector with downshift Combobox. Sep 11, 2020

adamsilverstein mentioned this pull request Sep 11, 2020

Add post author selector enhanced with ComboboxControl #23237

Merged

6 tasks

Additional work on page selector.

353c1d3

adamsilverstein mentioned this pull request Sep 14, 2020

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

Closed

5 tasks

youknowriad added 2 commits October 12, 2020 12:06

Merge remote-tracking branch 'origin/master' into add/9441-page-selec…

d1b62c7

…tor-b

Fix end2end test

5193869

adamsilverstein requested review from nerrad, ntwb and talldan as code owners October 12, 2020 14:22

ntsekouras reviewed Oct 13, 2020

View reviewed changes

packages/editor/src/components/page-attributes/parent.js Outdated Show resolved Hide resolved

packages/editor/src/components/page-attributes/parent.js Outdated Show resolved Hide resolved

youknowriad added 2 commits October 13, 2020 12:25

deoptimize fields filtering in the data module

aa701ad

Avoid useless double useSelect

1398f6f

ntsekouras reviewed Oct 13, 2020

View reviewed changes

packages/editor/src/components/page-attributes/parent.js Outdated Show resolved Hide resolved

youknowriad added 2 commits October 13, 2020 12:37

Remove duplications

ac897bd

Fix unit test

edd314b

adamsilverstein mentioned this pull request Oct 13, 2020

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

Closed

ntsekouras approved these changes Oct 15, 2020

View reviewed changes

youknowriad merged commit 346be7c into master Oct 16, 2020

youknowriad deleted the add/9441-page-selector-b branch October 16, 2020 07:24

github-actions bot added this to the Gutenberg 9.2 milestone Oct 16, 2020

adamsilverstein mentioned this pull request Oct 22, 2020

Fix parent post selector: ensure initial value available, search performed, all results shown. #26397

Merged

6 tasks

mirka mentioned this pull request Aug 4, 2022

No visual feedback when Parent Page dropdown is loading. #16026

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Page parent selector with ComboboxControl. #25267

Page parent selector with ComboboxControl. #25267

adamsilverstein commented Sep 11, 2020 •

edited

Loading

github-actions bot commented Sep 11, 2020 •

edited

Loading

adamsilverstein commented Oct 2, 2020

afercia commented Oct 5, 2020

youknowriad commented Oct 12, 2020

ntsekouras left a comment •

edited

Loading

youknowriad commented Oct 13, 2020

adamsilverstein commented Oct 13, 2020

adamsilverstein commented Oct 13, 2020

youknowriad commented Oct 14, 2020

ntsekouras left a comment

adamsilverstein commented Oct 19, 2020

SJNBham commented Oct 21, 2020

adamsilverstein commented Oct 21, 2020

youknowriad commented Oct 22, 2020

adamsilverstein commented Oct 22, 2020

Page parent selector with ComboboxControl. #25267

Page parent selector with ComboboxControl. #25267

Conversation

adamsilverstein commented Sep 11, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

github-actions bot commented Sep 11, 2020 • edited Loading

adamsilverstein commented Oct 2, 2020

afercia commented Oct 5, 2020

youknowriad commented Oct 12, 2020

ntsekouras left a comment • edited Loading

Choose a reason for hiding this comment

youknowriad commented Oct 13, 2020

adamsilverstein commented Oct 13, 2020

adamsilverstein commented Oct 13, 2020

youknowriad commented Oct 14, 2020

ntsekouras left a comment

Choose a reason for hiding this comment

adamsilverstein commented Oct 19, 2020

SJNBham commented Oct 21, 2020

adamsilverstein commented Oct 21, 2020

youknowriad commented Oct 22, 2020

adamsilverstein commented Oct 22, 2020

adamsilverstein commented Sep 11, 2020 •

edited

Loading

github-actions bot commented Sep 11, 2020 •

edited

Loading

ntsekouras left a comment •

edited

Loading