Support searching for patterns #21944

youknowriad · 2020-04-28T11:49:37Z

closes #17122

Related #20951 #21080

this patterns allows searching for patterns (like blocks). Implicitly, it also adds "keywords" support for patterns.

I also updated the "no results" state to match #20951 (comment)

packages/block-editor/src/components/inserter/search-items.js

github-actions · 2020-04-28T11:55:12Z

Size Change: +298 B (0%)

Total Size: 825 kB

Filename	Size	Change
`build/block-editor/index.js`	107 kB	+252 B (0%)
`build/block-editor/style-rtl.css`	10.2 kB	+23 B (0%)
`build/block-editor/style.css`	10.2 kB	+23 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.02 kB	0 B
`build/annotations/index.js`	3.62 kB	0 B
`build/api-fetch/index.js`	4.08 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`	6.6 kB	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	761 B	0 B
`build/block-library/editor-rtl.css`	7.08 kB	0 B
`build/block-library/editor.css`	7.08 kB	0 B
`build/block-library/index.js`	115 kB	0 B
`build/block-library/style-rtl.css`	7.22 kB	0 B
`build/block-library/style.css`	7.23 kB	0 B
`build/block-library/theme-rtl.css`	683 B	0 B
`build/block-library/theme.css`	685 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.1 kB	0 B
`build/components/index.js`	179 kB	0 B
`build/components/style-rtl.css`	16.9 kB	0 B
`build/components/style.css`	16.9 kB	0 B
`build/compose/index.js`	6.66 kB	0 B
`build/core-data/index.js`	11.4 kB	0 B
`build/data-controls/index.js`	1.29 kB	0 B
`build/data/index.js`	8.44 kB	0 B
`build/date/index.js`	5.47 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.1 kB	0 B
`build/edit-navigation/index.js`	4.05 kB	0 B
`build/edit-navigation/style-rtl.css`	485 B	0 B
`build/edit-navigation/style.css`	485 B	0 B
`build/edit-post/index.js`	28.1 kB	0 B
`build/edit-post/style-rtl.css`	12.2 kB	0 B
`build/edit-post/style.css`	12.2 kB	0 B
`build/edit-site/index.js`	11.4 kB	0 B
`build/edit-site/style-rtl.css`	5.18 kB	0 B
`build/edit-site/style.css`	5.18 kB	0 B
`build/edit-widgets/index.js`	7.77 kB	0 B
`build/edit-widgets/style-rtl.css`	4.67 kB	0 B
`build/edit-widgets/style.css`	4.66 kB	0 B
`build/editor/editor-styles-rtl.css`	428 B	0 B
`build/editor/editor-styles.css`	431 B	0 B
`build/editor/index.js`	44.3 kB	0 B
`build/editor/style-rtl.css`	5.07 kB	0 B
`build/editor/style.css`	5.08 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.63 kB	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	2.13 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	3.56 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.51 kB	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/index.js`	3.13 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	5.29 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`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/plugins/index.js`	2.56 kB	0 B
`build/primitives/index.js`	1.5 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`	14.8 kB	0 B
`build/server-side-render/index.js`	2.67 kB	0 B
`build/shortcode/index.js`	1.69 kB	0 B
`build/token-list/index.js`	1.28 kB	0 B
`build/url/index.js`	4.02 kB	0 B
`build/viewport/index.js`	1.84 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.18 kB	0 B

_{compressed-size-action}

enriquesanchez · 2020-04-28T21:31:54Z

This is working really well, Riad!
I have a couple of comments:

1. Labels

I know that this is following the proposal from #21080, but because patterns don't have a label, I don't know what to search for in the first place. I'd love to hear what you think @mapk and @mtias. I think labels are important for many reasons, search being one of them.

2. Global search

Because the search box is above the 'Blocks' and 'Patterns' tabs, I expected searching to be global among those two categories. See #21080 (comment) for an example. Is this something we can try?

gziolo

@youknowriad – the revised search logic for blocks and patterns is just great 👏

packages/block-editor/src/components/inserter/search-items.js

jasmussen · 2020-04-29T08:43:40Z

This is looking good, nice work, good small iterative improvements as we learn what is necessary and what isn't.

I'm seeing a horizontal scrollbar:

If I apply overflow: hidden; to .block-editor-inserter__panel-content, it's gone, but the hover outline is still cropped weirdly:

Digging a little deeper, if I remove width: 100% here, everything is beautiful — before:

.block-editor-block-preview__container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

after:

.block-editor-block-preview__container {
    position: relative;
    overflow: hidden;
}

And you get this:

youknowriad · 2020-04-29T10:38:52Z

@jasmussen this suggest change looks good but noting that I don't have the issue myself. It also seems the suggestions breaks the block previews for the style variations.

mtias · 2020-04-29T11:55:32Z

I think labels are important for many reasons, search being one of them.

Yes, at least they should show up when you search. We still need to work through the categories for patterns.

youknowriad · 2020-04-30T11:53:17Z

I restored the labels for patterns and I explored global search on this branch https://github.com/WordPress/gutenberg/tree/try/global-search

the global search is a bigger change than I originally thought for the inserter code. Let me know how it feels and if you think we should merge it here or move forward with the separate search as v1.

mtias · 2020-04-30T12:03:46Z

Let's do separate search to get it merged while we still refine the design.

jasmussen · 2020-04-30T12:14:47Z

Hi Riad, was trying to compile try/global-search, but got this:

Did you forget to commit a file? I did do npm install first.

youknowriad · 2020-04-30T12:33:22Z

@jasmussen sorry a small mistake of mine, I force pushed (fixed)

youknowriad · 2020-04-30T13:37:14Z

Ok, so for me this is ready to land as a V1

aduth

Not sure that it was introduced here, but the keyboard behavior for inserting a pattern appears broken:

Navigate to Posts > Add New
Toggle top-level inserter
Press Tab to transition from search input to tabs
Press ArrowRight to change to Patterns tab
Press Tab to shift focus to the first pattern
Press Enter to insert

Observe:

No pattern inserted

packages/block-editor/src/components/inserter/no-results.js

packages/block-editor/src/components/inserter/block-patterns.js

packages/block-editor/src/components/inserter/use-async-list.js

packages/block-editor/src/components/inserter/search-items.js

youknowriad · 2020-05-04T09:25:47Z

Keyboard insertion is fixed, it was broken in master too.

Co-authored-by: Andrew Duthie <andrew@andrewduthie.com>

youknowriad · 2020-05-04T11:17:13Z

package-lock.json

-			"integrity": "sha512-ejdnDQcR75gwknmMw/tx02AuRs8jCtqFoFqDZMjiNxsu85sRIJVXDKHuLYvUUPRBUtV2FpSZa9bL1BUa3BdR2g==",
+			"version": "0.5.3",
+			"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+			"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",


Included to make travis tests pass (I had to reinstall deps to have the diff)

bradhogan · 2020-10-13T22:29:52Z

Curious has this been done? I just created a few custom block patterns using register_block_pattern and added keywords to the patterns, but if I'm in the Gutenberg editor and type a forward slash on a new line, I only see blocks (no patterns). Seems like this should also search for patterns (which I believe is what the OP was getting at). Anyways, thanks for you hard work! Cheers.

youknowriad · 2020-10-14T07:46:52Z

@bradley2083 The search has only been implemented on the main inserter (not the slash inserter). having it on the slash inserter is a great idea though, would you mind opening an issue for it?

bradhogan · 2020-10-14T16:48:48Z

@youknowriad Done.

youknowriad · 2020-10-15T08:47:54Z

Thank you

youknowriad added Needs Design Feedback Needs general design feedback. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Apr 28, 2020

youknowriad requested a review from ellatrix as a code owner April 28, 2020 11:49

youknowriad self-assigned this Apr 28, 2020

youknowriad requested review from pablohoneyhoney, mtias, enriquesanchez, jasmussen and gziolo April 28, 2020 11:49

youknowriad commented Apr 28, 2020

View reviewed changes

packages/block-editor/src/components/inserter/search-items.js Show resolved Hide resolved

youknowriad force-pushed the add/patterns-search branch from e09675f to bdb84f5 Compare April 28, 2020 14:24

gziolo reviewed Apr 29, 2020

View reviewed changes

youknowriad force-pushed the add/patterns-search branch from dc257d4 to 30b556e Compare April 30, 2020 11:51

youknowriad requested review from ajitbohra, nerrad, ntwb and talldan as code owners April 30, 2020 12:24

aduth approved these changes May 1, 2020

View reviewed changes

youknowriad added 2 commits May 4, 2020 10:19

Support searching for patterns

c451082

Use pattern names as keys

255ad3c

youknowriad added 5 commits May 4, 2020 10:19

Improve the async rendering

8a0e775

clean the search items code per review

994675f

Restore patterns titles

b0f76c5

Fix e2e test

c164f19

Code change per review

15b61e0

youknowriad force-pushed the add/patterns-search branch from bb640a1 to 15b61e0 Compare May 4, 2020 09:20

Fix inserting patterns using keyboard

93e9d59

use the same string for block and patterns for search results

7babfa3

youknowriad force-pushed the add/patterns-search branch from a43c8fd to 5d5e60e Compare May 4, 2020 09:50

no search results term

07a246a

Co-authored-by: Andrew Duthie <andrew@andrewduthie.com>

youknowriad force-pushed the add/patterns-search branch from 5d5e60e to 07a246a Compare May 4, 2020 10:39

fix test

9b237e0

youknowriad commented May 4, 2020

View reviewed changes

youknowriad merged commit 6fa79b0 into master May 4, 2020

youknowriad deleted the add/patterns-search branch May 4, 2020 11:39

github-actions bot added this to the Gutenberg 8.1 milestone May 4, 2020

ianstewart mentioned this pull request May 11, 2020

FSE Plugin: Add support in Pattern Templates for Pattern Search Automattic/wp-calypso#42074

Closed

Mamaduka mentioned this pull request Sep 26, 2022

Add graphical empty state into block inserter #17326

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support searching for patterns #21944

Support searching for patterns #21944

youknowriad commented Apr 28, 2020 •

edited

Loading

github-actions bot commented Apr 28, 2020 •

edited

Loading

enriquesanchez commented Apr 28, 2020

gziolo left a comment

jasmussen commented Apr 29, 2020

youknowriad commented Apr 29, 2020

mtias commented Apr 29, 2020

youknowriad commented Apr 30, 2020

mtias commented Apr 30, 2020

jasmussen commented Apr 30, 2020

youknowriad commented Apr 30, 2020 •

edited

Loading

youknowriad commented Apr 30, 2020

aduth left a comment

youknowriad commented May 4, 2020

youknowriad May 4, 2020

bradhogan commented Oct 13, 2020

youknowriad commented Oct 14, 2020

bradhogan commented Oct 14, 2020

youknowriad commented Oct 15, 2020

Support searching for patterns #21944

Support searching for patterns #21944

Conversation

youknowriad commented Apr 28, 2020 • edited Loading

github-actions bot commented Apr 28, 2020 • edited Loading

enriquesanchez commented Apr 28, 2020

1. Labels

2. Global search

gziolo left a comment

Choose a reason for hiding this comment

jasmussen commented Apr 29, 2020

youknowriad commented Apr 29, 2020

mtias commented Apr 29, 2020

youknowriad commented Apr 30, 2020

mtias commented Apr 30, 2020

jasmussen commented Apr 30, 2020

youknowriad commented Apr 30, 2020 • edited Loading

youknowriad commented Apr 30, 2020

aduth left a comment

Choose a reason for hiding this comment

youknowriad commented May 4, 2020

youknowriad May 4, 2020

Choose a reason for hiding this comment

bradhogan commented Oct 13, 2020

youknowriad commented Oct 14, 2020

bradhogan commented Oct 14, 2020

youknowriad commented Oct 15, 2020

youknowriad commented Apr 28, 2020 •

edited

Loading

github-actions bot commented Apr 28, 2020 •

edited

Loading

youknowriad commented Apr 30, 2020 •

edited

Loading