Allow removal of ListEdit in the RichText component

[CameronVerto]

I have recently built my own block which has a custom implementation of ul elements using the RichText component. However, RichText automatically adds block controls for ul/ol and indentation and does not appear to provide any options or filters to prevent this, which means I am stuck with unusable buttons in my block when editing the list. The only alternative here I have been able to find is hiding with CSS/JS, which is of course messy and unreliable.

It appears a simple check is employed here to enable the controls when multiline is set to li. Could an option be added, for example enableListEdit (or perhaps a more generic name to also account for any similar instances in future) which would also be checked here? It feels redundant to be reinventing the wheel when RichText otherwise offers the entire editing experience needed for editing a list.

[ellatrix]

What block are you building? Could you provide some more context?

[CameronVerto]

It's essentially a list which renders ticks/checks rather than bullets. For the most part it replicates the core list implementation but restricts to specifically the one list type (ul) as of course ordered numbering is not relevant here, and adds some options specific to our client/theme.

My issue is geared towards the specific behaviour of RichText - i.e. forcing extra controls on any ul/ol tag which may not always be wanted or needed - rather than something that comes down to my block in particular. This kind of rigidity is uncharacteristic of WP and seems to contradict the purpose of the format system.

As an example outside of my own block, someone could make a "Table of Contents" block - they would likely want to use the standard list editing functionality for this, and indentation may be relevant, but they are unlikely to want the button for changing to an unordered list. How would they remove it? As it stands currently - they can't. Certainly not cleanly/reliably, unless I am missing something. So they would need to replicate RichText for the sake of removing one small piece of functionality.

I've attached my block code for reference.

edit.txt
index.txt

[ellatrix]

@CameronVerto So far, RichText with multiline=li wasn't really meant to be used outside of core. I'd rather make a wrapper component around RichText that gives you an editable list. This could have some more options. Generally I like your idea of adding an option to omit the list type controls.

Action items: create a RichTextList component with toolbar options which uses RichText under the hood, so we have the freedom later to refactor editable lists.

Regarding checked lists, it would be cool if it were built in to the list block so you could switch between numbered, bulleted, and checked.

[CameronVerto]

@ellatrix What you have described sounds great - I would agree that the addition of the toolbar controls is more the job of a higher level component rather than something that gets forced in by something as foundational as RichText.

As a potential alternative approach, what are your thoughts on the prospect of extending the format system to lists? Since RichText paragraphs already make use of this, it would be more consistent. This would also allow developers to add checked lists - and any other kind of list - without cluttering the core implementation.

[ellatrix]

Yes, I wish we could move the list controls to the format library, but unfortunately, they also need to control the wrapper element name, which means changing state that is not managed by RichText. This makes it hard to move it outside RichText. In my opinion, the better approach would be to create a wrapper component RichTextList and move most or all of it there.

[ellatrix]

Closing this, the list block has been refactored to use inner blocks: #42711.