Try improving block variation placeholders #58685
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: -111 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
|
Can we do this? 
The fact that the description in the Group block is left aligned is actually a regression, it was initially designed to be centered. Any effort to reduce the footprint of the container blocks, so they work in more constrained contexts, is valuable. But I think we can take this one a step further. What do you think? |
I think Rich's design is more consistent with other placeholders, like template parts. Or do you want to differentiate Group & Column on purpose from the others? 
I know it's still a try, but I kinda like the percentage numbers of the columns. Makes it clearer that those are predefined values, not like a row block. |
|
My argument would be to also update the template part and query loop blocks. |
|
This is an interesting conversation and an important improvement to the overall site editing UX. In addition to improving consistency, can we use this opportunity to expand the variety of block states in the core editor? While working on the Product Collection block, I encountered many situations that required additional input states that did not exist yet. From a purely visual POV, it'd be fantastic to align on:
Moving on to the states, here are the designs I used for the Product Collection block. I abstracted them to let us focus on the fundamental building blocks, layout, and composition. I also included error states because they're becoming increasingly more important thanks to powerful new features like Connections. GridIn the Product Collection block, we use this state to let people easily pick the collection type or change it if the selected one is not available in the currently edited template. In core, it could be used for the Group and Column blocks as well as many others. I imagine that the author could decide whether to show the button labels. The grid item is the same component we use in the block inserter. 
ChoiceThis pattern could be used to ask the user to choose between two options. In Query Loop, it'd let users select a pattern or start blank. Ideally, authors will be able to assign different interfaces to each button, like modals, dropdowns, media pickers, redirects, etc. In the Product Collection block, we'd let merchants choose a specific collection type or start with a custom one. 
SearchThis option could be used for managing missing context. For instance, if someone links a block to a custom field that was deleted or when the block referred to a Woo product that was unpublished. We'd display a search bar and let users quickly link the block to another asset without going through the whole connection flow again. 
In the error state, we'll likely need to highlight the missing context in the List View, too. We'd show a small notification dot and replace the affected block's icon with the
|
|
Nice work Jarek. I especially think that there's some potential to explore the unread dot in the list view, though what constitutes a block in an error state can probably be looked at separately too. That said, it still feels like quite a lot of text, what happens when placeholders are as small as this?
To be fair, that isn't handled too well with the group pattern yet either:
I'd even go so far as to say that it is rare that the block you are suggesting will be inserted in such a narrow context. However we cannot prevent that from happening, so it is nevertheless a case that needs to be considered. I personally believe the answer lies somewhere along the lines of this visual, which also answers some of your questions; reduce as much as possible. As few actions as possible, label-less if at all possible. This is the unique challenge at hand, balancing the shortcuts with the scalability. The shortcuts are valid, but once icons, descriptions, secondary actions get added to it, to me it diverges too far from the learnings we've made so far, namely that this placeholder state simply does not scale to support a lot of content. Do you have a version of the mockups that include real shortcuts rather than the example "block actions"? |
|
Closing as we pushed #59275 forward instead. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WIP.
Before
After