Improving the List block with cosmetic list types

[annezazu]

Pulled from this prior issue around improving the overall list block #17738 (comment) this issue is specifically for cosmetic list types, like checks, stars, pins, emojis, etc. Specifically quoting @druxstr:

Cosmetic list types are about <ul>. They may be better dealt by a plugin.

Let's continue the conversation here to better focus each for consideration.

[github-actions]

Hi,
This issue has gone 180 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[ellatrix]

We decided we should migrate the list type option to CSS, so that opens the door to add more types! #53301 (comment)

[t-hamano]

With #53301, if the list type is output as inline CSS and if we provide an appropriate UI (such as a text field to enter a value in addition to the select element), you can theoretically use various things including emojis.

Various ideas have been suggested in #17738, but for core functionality, I think it's better to limit to adding simple styles as defined in MDN.

Developers wanting a more complex list type can do so with block style, for example:

register_block_style(
	'core/list',
	array(
		'name'         => 'checkmark',
		'label'        => 'Checkmark',
		'inline_style' => 'ol.is-style-checkmark { list-style-type: "\2705"; }',
	)
);
register_block_style(
	'core/list',
	array(
		'name'         => 'circle-alpha',
		'label'        => 'Circle Alpha',
		'inline_style' => '@counter-style circle-alpha { system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ; suffix: " "; } ol.is-style-circle { list-style: circle-alpha; }',
	)
);

Alternatively, you may be able to add your own list-type dropdown to the block toolbar via hooks.