List block: Add numbering type selection #51186
Conversation
glendaviesnz
added
[Type] Enhancement
|
@WordPress/gutenberg-design I have added the numbering options to the Inspector Panel as there were already some numbered list settings there, but another option would be to add a dropdown to the toolbar - what do you think? |
|
Size Change: +2.51 kB (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
@glendaviesnz Mostly wanted an early review on this for accessibility, like the fact this uses SelectControl, found one typo. So far, this should be pretty easy for UI.
|
(Peeking into this PR, and love that this is here!) I'm wondering, if it would make sense to having something a touch more visual like the Text Transform button group in the Heading block for this? Although I recognize that to do that, we'd need new icons designed. |
|
Thanks for the ping. I'm realizing we already have a start value input field shipping in trunk, this one: 
I don't know this is the best place for such a control, as it gives an undue prominence to a feature that isn't that commonly used. And because it's a setting, it causes the inspector to be come split in settings and styles. Commonly my instinct would be for styles to be the more interesting in this case, yet due to the prominence of this control they become relegated to the second tab. This is not intrinsically bad, but I think we can do better, and to Aurooba on this one, be a bit more intuitive as well. The dropdowns with visual radios that Google Docs uses is one option: 
Another option which might be simpler for now is to emulate the drop-cap options that the Apple Pages app does: 
For us, that might translate reasonably well to the ItemGroup button/flyout combo that is leveraged for the Duotone control: 
I suspect a similar pattern will be used to enhance the Drop-cap control for Paragraphs in the future, and it could be worth starting work for the list block here:
I'm happy to provide a mockup as I get a chance, but let me know what you think. |
|
Thank you Glen for beginning to explore these list styles features! There are various good suggestions above. |
|
Oh I'm so glad you said that @paaljoachim ! To be honest my initial instinct was also that this belongs in the toolbar, but typically I get push back in any suggested moves to the toolbar so I ignored my initial instinct to suggest that. 😅 |
@jasmussen are you thinking that would be under the |
|
The most important controls for a given block are usually in the toolbar and the sidebar settings. |
|
Sorry for the delay. Because of the feedback around the block toolbar, I put some thought into how this might work across both paragraph and list, according to the flyout, wanted to make sure I captured all the pros and cons. I'll start with the mockups. List type: 
Paragraph drop cap: 
You'll note some shared DNA between the two in terms of the control and the flyout as well as the preset selector. So why didn't I go with the dropdown from the block toolbar? To break it down, there are some benefits to the inspector flyout:
Let me know your thoughts! This PR might not be the best place for it, so depending on your thoughts I might open separate issues, especially since this wasn't about the drop cap at all, that just came as a consequence of needing to explain the overlap in interface. 🙏 |
|
I really like it @jasmussen Joen! One reason why I mentioned the toolbar is because of the current List block options. Unordered: Ordered: My thinking was that we could instead of having the two icons ordered and unordered in the toolbar that we could have a drop down showing ordered, unordered etc etc. But the flyout you mention Joen has a lot more going for it. Gives a lot more flexibility in relation to styling and design. Which is very helpful. I am not sure how the current two icons in the toolbar would relate to the flyout though. It would be nice to create a mvp of the flyout version. Having an initial first version in place which can gradually be improved. |
|
@jasmussen Thanks for the designs. I think we should keep the scope of this PR to list options, so if you want to add some new issues for the drop caps that would be great. Also, just to clarify, this PR is also limited in scope to the numbering types, not the unordered list bullets, but your designs will work just as well for the numbering types I think and bullet types could be added later, although I think at the moment it was decided that bullet styling may be left to plugins to enhance. |
|
Sounds good. I opened these two issues for list block and drop cap:
I included a new mockup for number selection. Glen if you can take a look at that and see if the feature can eventually grow into that concept (notably replacing the entire list panel with a flyout that exists for the List block in the Styles/Typography panel), then I think this PR as-is can land. If the move from Settings tab to Styles tab is a larger issue, we might want to rethink the approach. Let me know! |
|
Thanks @jasmussen those designs look great. It doesn't seem like there will be any issues with moving the numbering/bullet types to the styles tab as a second step so I think it would be good to merge this change as is as you suggest in order to get it in by the 6.3 deadline, and then look to implement your designs post 6.3. It would be great to just go straight for your designs, but realistically I don't think we would get it all done and tested by next Wednesday with some of the other 6.3 work that also needs to be finished. |
|
Flaky tests detected in 171975d. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5285432991
|
Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
glendaviesnz
force-pushed
the
add/numbering-options-to-list-block
branch
from
8ac56e3
to
fc458c6
Compare
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com> Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
|
Do we have any kind of rough ETA on this feature making it to release? We have so many clients who would love to add more legal documentation to their sites but are blocked without support for these additional list types! |
|
Hi @ed-richards I just checked WordPress 6.4 and it looks like the feature is in Core already: 
|
|
@ramonjd Oh fantastic! I spun up a fresh install to check yesterday and it wasn't there so I've probably missed something on my end. Thanks for the clarification 👍🏼 |
|
For anyone dropping by this issue.
It can though be somewhat overlooked as it is not directly selectable through the toolbar. It is only seen in the sidebar. |
What?
Adds the ability to choose the number type to the List block, eg.
1, A, a, i, I.Why?
Fixes: #17738
How?
Used the existing
typeattribute, that didn't seem to be used for anything currently.Testing Instructions
Screenshots or screencast
list-numbers.mp4