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

Add search in Query block #25222

Merged
merged 3 commits into from
Sep 11, 2020
Merged

Add search in Query block #25222

merged 3 commits into from
Sep 11, 2020

Conversation

ntsekouras
Copy link
Contributor

Description

This PR will add search support in Query block and is part of #24934 and FSE milestone 5.

There still needs to be a decision about the final design of Query block which is in this issue: #25198.

For now I've added the search control in the toolbar.

This PR also fixes a React warning about passing null to a select component for authors list.

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.

@ntsekouras ntsekouras added [Feature] Full Site Editing [Type] Feature New feature to highlight in changelogs. [Block] Query Loop Affects the Query Loop Block labels Sep 10, 2020
@ntsekouras ntsekouras self-assigned this Sep 10, 2020
@github-actions
Copy link

github-actions bot commented Sep 10, 2020

Size Change: +68 B (0%)

Total Size: 1.2 MB

Filename Size Change
build/block-library/index.js 139 kB +68 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.41 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 8.54 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/index.js 128 kB 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.68 kB 0 B
build/block-library/editor.css 8.68 kB 0 B
build/block-library/style-rtl.css 7.59 kB 0 B
build/block-library/style.css 7.58 kB 0 B
build/block-library/theme-rtl.css 754 B 0 B
build/block-library/theme.css 754 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 47.6 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.54 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.48 kB 0 B
build/edit-navigation/index.js 11.7 kB 0 B
build/edit-navigation/style-rtl.css 1.16 kB 0 B
build/edit-navigation/style.css 1.16 kB 0 B
build/edit-post/index.js 305 kB 0 B
build/edit-post/style-rtl.css 6.26 kB 0 B
build/edit-post/style.css 6.25 kB 0 B
build/edit-site/index.js 19.3 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 12.2 kB 0 B
build/edit-widgets/style-rtl.css 2.55 kB 0 B
build/edit-widgets/style.css 2.55 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.6 kB 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 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.71 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.57 kB 0 B
build/is-shallow-equal/index.js 710 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.12 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.32 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.77 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

@ntsekouras ntsekouras marked this pull request as draft September 10, 2020 14:18
@ntsekouras ntsekouras marked this pull request as ready for review September 10, 2020 15:25
@mapk
Copy link
Contributor

mapk commented Sep 11, 2020

Taking a look at this, I'm uncertain what benefit adding a search field provides for the block. @ntsekouras, I imagine that if a Query block is used on a search template (search.php) then the block would be passed the search parameter from the template and the block would only show those results.

I tested this and it works, but I'm not sure why I'd want to use this. When typing in a keyword, the list filters to show only posts with that keyword. I saw that it changed because the list changed. But what happens if the list doesn't change? How does the user know entering the keyword in the search field worked?

It seems to me like this use case should really be limited to categories, tags, taxonomies, etc. and not used in relation to a search field.

Here's my experience

search

@ntsekouras
Copy link
Contributor Author

Hey @mapk.

I imagine that if a Query block is used on a search template (search.php) then the block would be passed the search parameter from the template and the block would only show those results.

I'm not really sure yet how all these will come together eventually, but for now the the implementation still seems relevant. The search option was suggested as priority here: #24934 (comment).

How does the user know entering the keyword in the search field worked?

This is another matter to discuss that applies to every change in the Query block. It's not specific to search.

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

This works very well, but only to provide a way to use search programmatically via attributes to filter the query results. Design wise it is very bare-bones. It also makes little sens why search is in the block controls area and author is in the inspector controls area, both being filters.

@ntsekouras
Copy link
Contributor Author

Thanks for reviewing @draganescu!

Design wise it is very bare-bones. It also makes little sens why search is in the block controls area and author is in the inspector controls area, both being filters.

Yes, I know, but there is a lot of discussions/iterations happening lately (related issue by @mapk ) about the design and I believe soon we will have some decisions to change the UI as well.

@ntsekouras ntsekouras merged commit 7a31f9c into master Sep 11, 2020
@ntsekouras ntsekouras deleted the add/search-in-query-block branch September 11, 2020 14:50
@github-actions github-actions bot added this to the Gutenberg 9.0 milestone Sep 11, 2020
@mapk
Copy link
Contributor

mapk commented Sep 11, 2020

I'm still unclear on how search should work here. I just can't imagine this scenario.

I understand the flow for an end user to land on the archive.php page and be able to search the list. That would include a Search block on the page that communicated with the Query block though. Or a Search block that can be added inside the Query block. But for the block to contain a search field in its UI doesn't make sense to me.

@draganescu are you saying this ability should be purely programmatic? Should we remove any user facing UI for this?

@ntsekouras
Copy link
Contributor Author

I'm still unclear on how search should work here. I just can't imagine this scenario.

I think its base use case would be in any random page (homepage, any simple page etc..) that a user would like to have a list of posts with some keywords. The search query searches title, content etc.. and while it could be achieved with tags or something similar, it still remains a way for a user to have list of items which share something in common, the search term.

The front end outpout would not be a search text input. It remains a list of items (posts).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Query Loop Affects the Query Loop Block [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants