Style book: display registered categories #65507
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
This was referenced Sep 20, 2024
|
Size Change: +59 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
ramonjd
added
Global Styles
ramonjd
force-pushed
the
try/style-book-refactor-categories-and-blocks
branch
from
dfa250a
to
c9d092d
Compare
ramonjd
force-pushed
the
try/style-book-accommodate-registered-categories
branch
from
7b9a2c7
to
7dfeaa0
Compare
ramonjd
force-pushed
the
try/style-book-refactor-categories-and-blocks
branch
from
e07ce98
to
cced471
Compare
ramonjd
force-pushed
the
try/style-book-accommodate-registered-categories
branch
from
7dfeaa0
to
9619b78
Compare
ramonjd
force-pushed
the
try/style-book-refactor-categories-and-blocks
branch
from
cced471
to
4a64a9b
Compare
ramonjd
force-pushed
the
try/style-book-accommodate-registered-categories
branch
from
9619b78
to
37bca9a
Compare
|
Flaky tests detected in b8dff39. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10988405073
|
ramonjd
force-pushed
the
try/style-book-refactor-categories-and-blocks
branch
3 times, most recently
from
a0b066c
to
3cd9a76
Compare
ramonjd
force-pushed
the
try/style-book-refactor-categories-and-blocks
branch
from
3cd9a76
to
032182e
Compare
There was a problem hiding this comment.
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. 🍺 |
ramonjd
force-pushed
the
try/style-book-accommodate-registered-categories
branch
from
b8dff39
to
90adaa1
Compare
ramonjd
added a commit
that referenced
this pull request
Sep 30, 2024
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. |
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.
Part of:
What?
Adds capability to display any other registered block categories (e.g., from a theme).
TODO
ncategories, 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