Block Directory: Update search results list UI #25521
Conversation
ryelle
added
the
[Feature] Block Directory
|
Size Change: -490 B (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
Is this something that we could change if we had a preview system built for the block directory (that perhaps uses generated images)?
Nice.
Good point. I think the added space is okay for now. Alternatively, we could position it absolutely over the content on top of a white gradient like this:
What do you think?
I think we should implement error states using the top notice pattern as @melchoyce proposed here. They look like this:
The biggest benefit is the error will be visible even if the user closes the inserter or if the inserter changes state. Notes
BugsThere are two that I noticed. The first is hard to spot, but sometimes there's a flash of content in the sidebar when the spinner is active during a search. I also see a 0 results bug:
I would expect to see something like "No blocks found matching asdfasdfasdf" |
ryelle
force-pushed
the
update/block-directory-ui
branch
2 times, most recently
from
e5d7371 to
1379828
Compare
ryelle
requested review from
ajitbohra,
gziolo,
nerrad,
ntwb and
talldan
as code owners
|
This is updated and ready for a proper review & design feedback — I've updated the description with the current status and screenshots. |
packages/block-directory/src/components/downloadable-block-icon/index.js
Show resolved
Hide resolved
|
Awesome work on this @ryelle! It's looking really good. The code looks good. I really like the new UX. A couple of notes:I wonder if the “by” line should be on a new line. It works well first short plugin titles and 1 author. Having multiple names in the author string makes the plugin title hard to see. Item Loader: I know this implementation follows the designs but the right side icon is a bit unexpected seeing that there's no button there anymore. Just adding another option for discussion.
|
ryelle
force-pushed
the
update/block-directory-ui
branch
from
c675476 to
c57a260
Compare
|
It looks like a significant improvement for Block Directory in terms of discoverability 💯 Thank you for working on it. |
|
I find the interstitial "Show X blocks" button a little strange. On one hand, I like that it clearly divides blocks you have from block you don't have yet. But, I also think its probably a little too easy to ignore. We could default to showing any available blocks from the directory without the need to click a button:
That said, its probably "OK" for now, but may be worth revisiting in a new PR. --
When you do click the button, you see this message. First, when there is only one result the phrase "These blocks" is a little strange. Second, it doesn't really explain what happens if you select a block. I think it could be more clear, maybe something like:
--
When I select an available block, currently a spinner is overlaid to indicate "something is happening." We could dim the image, place the spinner over-top, hide the rating and description, and replace the byline with an "Installing..." message:
Once installed, the message changes to "Installed!", the new block appears in the list of installed blocks above, and the block is added to the document. I think a Snackbar notice could be helpful here as well to help explain what just happened:
Its worth noting that with the current behavior of the inserter sidebar, after adding a block to the document, the inserter sidebar is closed and focus is moved to the newly added block. This behavior may change (See #28191), and would likely affect the experience of installing and adding a block — for example, if the sidebar remains open, then it might make sense to remove the "Installed!" notice and block from he list of available blocks. -- If there is an error, we can display it in the block listing directly:
-- Here's a few GIFs of installing a block, to help put all of the above together:
|
ryelle
force-pushed
the
update/block-directory-ui
branch
from
5bde787 to
b4ce14c
Compare
|
@shaunandrews I've made the changes from your designs, you can see in the screen recording here- the first block installed has an error, which shows up as a dismissible notice and in the block card, then the second block installs successfully and shows the snackbar. I also removed the "show X blocks" step, the installable blocks list always shows up in searches now (that's not in the video). Block.Dir.Install.mp4 |
|
Very cool. Thanks for the update. Here's a comparison of what I seen in your video alongside the Figma design:
Here's a few things that stood out to me:
|
ryelle
force-pushed
the
update/block-directory-ui
branch
2 times, most recently
from
d106ba7 to
57a247c
Compare
|
Thanks for all the feedback, I didn't pick up on some of those changes from the screenshots 🙂 I think I've got all of it, except for the two things that we can't really do since the whole item is a button (more details below). I've added a message when no local blocks are found, updated the "Available to install" style (I saw it like this in your first screenshot, didn't notice it was different in the others), fixed the spacing and tweaked the title & author. The rating stars have been moved & condensed a bit, and disappear while installing. Search Installing Error No locally installed blocks
I had to just remove it - the whole item is a button, so we can't have interactive elements like a tooltip inside. I think the number of ratings is still important, but I don't have a great idea on how to show them.
In the case of a fatal error, yeah reloading is the only way to fix it. If it's a recoverable error, we can offer a retry. We did show a reload or retry button - that accidentally got dropped in the redesign. Unfortunately though, same issue as above - we can't have a button in a button.
It's there, it shows up at the end of the video - "Block [whatever] installed and added." It's a little delayed in the video since my local site/Chrome is slow, but it does show up right after the sidebar is closed.
|
|
@shaunandrews What are your thoughts on the issues above (that we can't have interactive elements inside the block-plugin card)? |
Perhaps we put a tooltip on the button? Something like "Install {{blockName}} - 5 stars with 392 review".
Could we just have the whole button be the retry button? Maybe update the message to something like "Press to try again" or something? |
ryelle
force-pushed
the
update/block-directory-ui
branch
from
57a247c to
9056f22
Compare
|
The whole-button tooltip works well: If there are no reviews I've just left off the review text: The button already works as a retry button, so that works out. The tooltip updates in this case, too: |
ryelle
force-pushed
the
update/block-directory-ui
branch
from
9056f22 to
5a8addd
Compare
Description
See #22149 (comment) — Start implementing the new UI for block directory searches, showing block directory results even when installed blocks are found. This deviates a little from the original mockup due to issues with the BlockPreview component (requires blocks to be installed).
Fixes #22149, fixes #23894
How has this been tested?
Search for blocks in the inserter, both installed and from the directory.
Make sure everything works as expected.
Screenshots
Searching for a term that matches local blocks, block patterns, and installable blocks shows the local blocks and patterns as expected, and puts the installable blocks behind a button:
Once clicked, the blocks show up in a list, and each is clickable to install & insert:
Installing state:
No local blocks but there is a block directory result, skips the button and displays the installable block(s):
No local blocks or block directory blocks, uses the empty state:
Error installing a block greys out the block, and shows a banner notice. The block stays greyed out on subsequent searches, but installing other blocks should still work. I would love a designer's help to make it more obvious what happened, with a more accessible design than lowering the contrast.