search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

Details Block: allow the option to choose from a set of icons #51019

Open annezazu opened 1 year ago

annezazu commented 1 year ago

This was raised as part of the FSE Outreach Program's Rapid Revamp call for testing:

A small suggestion for the details block: could we have a set of icons to choose from, like “+” and “v”? And an option to place the icon after the text?

This could perhaps reuse what we have in place for the navigation block:

Screen Shot 2023-05-26 at 11 20 08 AM
hanneslsm commented 1 year ago

This could perhaps reuse what we have in place for the navigation block:

I think it makes sense to think about something that could be used in multiple areas, such as the cosmic list types: https://github.com/WordPress/gutenberg/issues/45830

justintadlock commented 1 year ago

I'm OK with some marker options, but I'd rather see them happen through the block styles API than as a specific block attribute with a custom control. This is because it creates poor UX when theme authors add block styles that change the marker but the core UI shows a different marker.

richtabor commented 1 year ago

It's a typographic figure, and not easily manipulated (can get complicated and is non-standard).

I don't see this happening in core.

davewhitley commented 6 months ago

I find the lack of customization options to be very limiting in my experience building sites with the site editor. Would it be more pragmatic to create a whole new accordion block instead of expanding the details block? What are the hurdles for creating a new accordion block that would allow more customization options?

Adding some better options (other than the default ones) for background color and borders would be a big improvement (example).

Screenshot 2024-05-01 at 3 00 21 PM

It looks like Safari will not be able to style ::marker any time soon, unfortunately. What is stopping us from removing the marker and implementing custom ones via background? (example)

or use ::after

richtabor commented 6 months ago

What is stopping us from removing the marker and implementing custom ones via background? (example)

The SVGs would have to be linked via CSS, which isn't ideal.

jarekmorawski commented 6 months ago

FWIW, I put together a mockup a while back for what more advanced settings in the details block could look like. I think this work could be unlocked if we build an Icon block that supports icon fonts or sanitized SVGs (or both).

image