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

Allow for a user-triggered search in Block Directory #23894

Closed
bph opened this issue Jul 12, 2020 · 11 comments · Fixed by #25521
Closed

Allow for a user-triggered search in Block Directory #23894

bph opened this issue Jul 12, 2020 · 11 comments · Fixed by #25521
Labels
[Feature] Block Directory Related to the Block Directory, a repository of block plugins [Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Dev Ready for, and needs developer efforts

Comments

@bph
Copy link
Contributor

bph commented Jul 12, 2020

When I was looking for a 'card' block, there wasn't one available on my site and it triggered automatically the Block Directory search. Once the Card block was installed and used on my site, it was always showing up for the 'card' search. But I found this card now a bit limiting and I would want to see what else is in the block directory and find another one, that I previously saw in the list offered.

For now, a user would need to experiment with the keywords to actually trigger another Block Directory search and that would be quite cumbersome. Sooner or later the automatic triggers won't cover all use cases.

I did explored some possible placements for the "Search in Block Directory" link/button

001 Link next to the search box

SearchinBlockDirectory-001

It would be a good place for discovery. It just feels a bit crowded.

002 bottom of the search results

SearchinBlockDirectory-002

That's possible. Still has some issues. Mainly it's too disconnected from the search.

Also, a link would indicate it'll take a user away and out of the block editor to a different site, and a user might be hesitant to use it for that reason.

003 a button on bottom

SearchinBlockDirectory-003

This placement feels do able and reminded me on the "Browse all" button new to the canvas inserter

004 button area on bottom

SearchinBlockDirectory-004

It feels like it was always there, haha... if you like the idea of a user-triggered Block Directory search.

###5 a black button on the bottom
SearchinBlockDirectory-005
That last one is just a variation on the background color to be consistent with the "Browse all" button on the other inserter.

###6 Blue button underneath search box
SearchinBlockDirectory-006
I had second thoughts about the placement on the bottom of the search result, as people might not find it. They might not scroll all the way through the list of results. It looks a bit heavy underneath the search box, but people won't miss it there.... haha.

Those are just a few possibilities. I like number 006 if we can make it work, and number 005 if we have to go on the bottom. But honestly none of them feel right yet. Maybe I just need to give it time? What do you think?

@mtias mtias added [Feature] Block Directory Related to the Block Directory, a repository of block plugins [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Jul 13, 2020
@mapk mapk added the Needs Design Feedback Needs general design feedback. label Jul 14, 2020
@mapk
Copy link
Contributor

mapk commented Jul 14, 2020

Right on! Thanks for working through this flow, @bph. I do like the black button most because it aligns with the "Browse" button currently used. I put together a prototype to help convey this flow.

Prototype
searchagain

Mockup
Screen Shot 2020-07-14 at 4 36 26 PM

Feedback

Should the "Search Block Directory" button show the block directory blocks below what was already installed and searched for (as I have it in the prototype)? Or should it replace the entire inserter below the tabs as it does when the first search is performed?

@StevenDufresne
Copy link
Contributor

Thanks for this!

There were some relevant conversions about this same problem here:
#22149

@bph
Copy link
Contributor Author

bph commented Jul 15, 2020

Thanks @mapk That's a great prototype:-) You captured it nicely. I favor. that the block directory results are displayed underneath already installed blocks that are available for this particular keyword search. Then the user can compare the various preview, if available, and decide if a new block is really better than what they have.

@bph
Copy link
Contributor Author

bph commented Jul 15, 2020

Interesting discussion #22149

  • installed but inactive plugins
  • blocks that have been disabled via the Block Manager.

Both scenarios would play out somewhat in the inserter around search results.
They should have a flag and an action button (activate/enable)

For block Directory to work / show up in the editor, we need to assume that the person using the search does have plugin install privileges.

@StevenDufresne
Copy link
Contributor

I favor. that the block directory results are displayed underneath already installed blocks that are available for this particular keyword search. Then the user can compare the various preview, if available, and decide if a new block is really better than what they have.

I agree. :)

For block Directory to work / show up in the editor, we need to assume that the person using the search does have plugin install privileges.

Just noting: we check for privileges before we show any Block Directory results but that currently only happens when we don't find any blocks and the search is about to begin.

@shaunandrews
Copy link
Contributor

image

I'm not sure this big button pattern works in the context of the sidebar inserter. Perhaps just a simple text-like link, or secondary button would work better.

@mapk
Copy link
Contributor

mapk commented Jul 21, 2020

You're right Shaun. A more subtle link would be better. Here's a go.

Screen Shot 2020-07-21 at 3 20 38 PM

Another thing to explore is what happens if a pattern or reusable block is listed in the results, but no blocks? Is there an automatic block directory search triggered still? If so do we show both the block directory results and the patterns or reusable blocks? Basically something like @shaunandrews mocked up here.

@maddisondesigns
Copy link

The ability to be able to search the Block Directory, even if results are returned, would be extremely useful. If I search for 'images' for example, the Block Inserter will simply show me the core image related blocks. What do I do if if I the core blocks aren't suited to my task and I want to explore other options?

I like the solutions proposed by @bph above, but would like to add another suggestion, based on #4. Have the button after the search results, but above the tip, in the block inserter.

Search-Block-Directory

@bph bph added Needs Dev Ready for, and needs developer efforts and removed Needs Design Feedback Needs general design feedback. labels Jan 7, 2021
@bph
Copy link
Contributor Author

bph commented Jan 7, 2021

I love @maddisondesigns button idea for this. It really feels that not having the button, doesn't contribute well to discovery of more new blocks that are in the WordPress directory. What do you think? Do you have enough to get this into your development queue? @ryelle @tellyworth @StevenDufresne

@ryelle
Copy link
Contributor

ryelle commented Jan 7, 2021

I agree, having a button here would do a lot for discovery. I started a PR a bit ago which does include a button to load more blocks from the block directory (the design there comes from #22149):

I want to revisit that in the next few days, I'll make sure to drop a comment here when it's ready for testing 🙂

@bph
Copy link
Contributor Author

bph commented Jan 7, 2021

Oh, that's wonderful. Thank you @ryelle - Looking forward to testing this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block Directory Related to the Block Directory, a repository of block plugins [Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Dev Ready for, and needs developer efforts
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants