-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Style book: display registered categories #65507
Style book: display registered categories #65507
Conversation
Size Change: +59 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
dfa250a
to
c9d092d
Compare
7b9a2c7
to
7dfeaa0
Compare
e07ce98
to
cced471
Compare
7dfeaa0
to
9619b78
Compare
cced471
to
4a64a9b
Compare
9619b78
to
37bca9a
Compare
Flaky tests detected in b8dff39. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10988405073
|
a0b066c
to
3cd9a76
Compare
3cd9a76
to
032182e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for getting the ball rolling on this one @ramonjd 👍
Come up with a way to display n categories, e.g., a scrollable tab header, or drop down for the overflowing items
This is the key isn't it.
So far this PR is working well for what it promises. I can register custom categories (along with blocks for them) and they display as expected in the Style Book.
Screen.Recording.2024-09-30.at.2.51.56.pm.mp4
I'm not sure what the best UX is here for wrangling the possibility of too many tabs.
I probably would expect the overflowing items to be collapsed into a dropdown but does that introduce a11y issues? Do we have any precedents for this UX in Gutenberg already?
In case it helps chart a path forward I've added the Needs Design Feedback
label to this PR but I don' think this necessarily has to hold up work on the Style Book. The need for a rebase aside, I don' think the real changes in this PR are that drastic, so could this be merged into #65430 and the edge case of too many tabs be a separate follow-up?
Thank you for testing @aaronrobertshaw!
I couldn't find anything. I have some some experimentation and the most success I've had locally is with horizontal scroll buttons - so all the tabs are still in the DOM and "tabbable". For mouse/desktop users there's are left and right arrow buttons. I'm thinking it could be a variation of the Tabs component, but might be time/resource hungry. I'll have a look around the web for some ideas. The stylebook in its current form doesn't accommodate
Thanks. Agree. But it would be good to get more opinions on a solution.
For sure. Either or. So long as this is merged soon after to avoid regressions. I'll rebase this as a first step. 🍺 |
b8dff39
to
90adaa1
Compare
integrate registered categories changes from #65507
I've moved all JS changes from this PR to #65430 The styles changes are unrelated to current functionality in trunk, though it might be required for neater presentation of longer category labels. |
Part of:
What?
Adds capability to display any other registered block categories (e.g., from a theme).
TODO
n
categories, e.g., a scrollable tab header, or drop down for the overflowing itemsWhy?
How?
Testing Instructions
Register some categories:
Fire up the site editor.
Register new blocks by running the following in the console:
Visit the style book.
Testing Instructions for Keyboard
Screenshots or screencast