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

Find a better way to present reusable blocks in the inserter #22860

Closed
ZebulanStanphill opened this issue Jun 3, 2020 · 3 comments · Fixed by #23296
Closed

Find a better way to present reusable blocks in the inserter #22860

ZebulanStanphill opened this issue Jun 3, 2020 · 3 comments · Fixed by #23296
Assignees
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. [Priority] High Used to indicate top priority items that need quick attention [Status] In Progress Tracking issues with work in progress

Comments

@ZebulanStanphill
Copy link
Member

Currently, reusable blocks are really buried in the inserter. They're located at the bottom of the "Blocks" tab, and with no way to filter or collapse categories, you have to scroll really far to even see them.

I think reusable blocks ought to be split out into their own primary category in the inserter, similar to block patterns. It's worth noting that template parts will likely get their own primary category soon.

The problem, of course, is that there's almost no room for any more tabs, especially when you take into account some languages using much longer words for certain phrases.

Because of this, I think we need to move away from tabs to something with more room for expansion. My current thinking is that a <select> dropdown would work well; it would make it easy to fit in 4 or more general categories, e.g.:

  • Blocks
  • Patterns
  • Reusable Blocks
  • Template Parts

I consider this a high priority issue, since due to the lack of collapsible block categories in the current inserter, it is way harder to find reusable blocks in master compared to current core WP.

@ZebulanStanphill ZebulanStanphill added [Priority] High Used to indicate top priority items that need quick attention [Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Design Needs design efforts. [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) labels Jun 3, 2020
@ghost
Copy link

ghost commented Jun 3, 2020

I enjoy the current organization, but I also enjoy your organization proposal.
From a Block-as-primary perspective, Patterns, Reusable Blocks and Template Parts are secondary. And currently, from this secondary group, Patterns is detached from categories to be highlighted on its own tab.

My contribution is: one might ask whether considering Patterns as a category in the Block tab would not be a better organization under the Block umbrella. Then a filtering/select dropdown/vertical tab/accordion mechanism could be improved to better handle these Block categories.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jun 3, 2020

Here are mockups to the dropdown idea.

Block-Panel-Drop-Down-Closed

Block-Panel-Drop-Down-Open

@ZebulanStanphill ZebulanStanphill added Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. and removed Needs Design Needs design efforts. labels Jun 3, 2020
@ZebulanStanphill
Copy link
Member Author

I think there should probably be a visible text label for the dropdown for better accessibility and clarity, but other than that, that's pretty much exactly what I was thinking. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. [Priority] High Used to indicate top priority items that need quick attention [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants