Improve the author experience for placing nested entries

[MoritzLost]

Description

I just gave the changes to the UI for nested entries in 4.8.0 a try and frankly, I really don't like the UI rework. There are multiple AX issues:

1. Showing just the entry type icon is not sufficient. For many blocks, there isn't a perfect icon, but we still want to use one for consistency. Only showing the titles on mouse-over (with a noticeable delay) is not enough. There is no other context where the icons are displayed without the title, so the icons were never picked to work stand-alone, but always as a visual aid in addition to the title.
2. Having colours in the otherwise grayscale CKEditor toolbar doesn't look good, the colors feel out of place. If you use multiple colors, you get a christmas tree in the toolbar, which is distracting.
3. The toolbar becomes much longer if you have a bunch of blocks, causing it to overflow. Especially in the live preview, most buttons are moved into the overflow menu. The previous dropdown UI didn't take nearly as much space. Selecting a block is important, but not more important than the paragraph format dropdown. I shouldn't have to choose to hide either of those in an overflow menu. It also looks weird to have two overflow menus next to each other, or two nested overflow menus:

4. The overflow concept only makes sense from a developer perspective, but not from a user perspective. Moving blocks out of the explicitly defined order and separating them arbitrarily based on whether they have an icon doesn't make sense. From an author perspective, why are some blocks in an overflow menu and others not?

Expected behavior

I would like to either see the above issues addressed by default, or get some options to customize the UI:

1. Some way to use either toolbar icons or a dropdown as in the previous version. Some ideas for this:
   1. Add a toggle to switch between the new icon UI and the old dropdown UI, or have both available in the CKEditor toolbar configuration to choose from.
   2. Allow me to manually assign entry types to either the toolbar or the overflow menu. If an entry type without an icon is placed in the toolbar, display the title instead of the icon.
2. Add an option to use entry types colors, or keep the buttons in greyscale.

I'm posting this as a bug, not a feature request, because for many of my projects this is a regression that will cause major AX issues. In my opinion, this UI rework shouldn't have been introduced in a minor release without providing any option to retain the old behaviour, or some options to customize the layout.

Additional info

• CKEditor version: 4.8.0
• Craft version: 5.7.4
• PHP version: 8.3

[wmdhosting]

+1

[thupsi]

I like that the new UI surfaces block actions in a more obvious way. IMO it's an improvement when there's a small number of entry types in the field, but for sure it can be further refined to address the issues mentioned above.

I second the suggestion of choosing which types are shown as buttons on the toolbar. If an entry type doesn't have an icon it should maybe have a "plus" icon next to the name.

One additional suggestion would be to not nest all the entry type buttons in a div, but keep them separate, so that they would move to the overflow one-by-one as the space becomes smaller.

[wsydney76]

Also, the translation of titles is incorrect for languages that have a grammatical gender, e.g.

in German: is Neue Zitat, should be Neues Zitat, is Neue Kontakt, should be Neuer Kontakt
in Italian: is Nouvo Citazione, should be Nuova citazione

Don't think this can be solved in a generic way without an explicit setting for each entry type, or changing the wording to something neutral like New: quote/Neu: Zitat, Add quote/Zitat hinzufügen (not sure if that would work for every language though..)

[MoritzLost]

@thupsi Very good points! The new UI works quite well for a small number of entries, but not so if you have more than 3~4 entry types available. A fallback icon is a good idea, this would enable the explicit placement of entry types as icon buttons or a dropdown menu. Avoiding the double-nested menu would be a solid improvement as well.

Don't think this can be solved in a generic way without an explicit setting for each entry type, or changing the wording to something neutral like New: quote/Neu: Zitat, Add quote/Zitat hinzufügen (not sure if that would work for every language though..)

This is a typical problem with translations being created without context. There's nothing stopping an editor from translation New {type} as {type} hinzufügen or {type} erstellen. But the translator needs to actually see the string being used in context and know what values the parameter can take. That context is often lost when editing translations in Crowdin. I often suggest improvements for sloppy translations that don't make sense in their specific context.

[mmikkel]

I'm also not a huge fan of this change.

IMO, the biggest problem is that icon-only toolbar buttons are only effective as UI if their icons are unambiguous and immediately apparent. For many entry types, such an icon doesn't exist. A field might also contain multiple different entry types using the same icon, or very similar ones.

In such cases, authors will inevitably have to rely on the tooltips to decipher/remember which entry types the different icons represent. If there are more than a couple of entry types, this is far less effective UI compared to skimming the old "New entry" disclosure menu, with its icons and names.

The simple workaround in cases where the buttons don't really work (or there are too many of them) is to remove the icons from the entry types. Which is a shame, as even ambiguous icons provide value in other contexts (e.g. in cards, or in the old "New entry" menu).

It'd be cool if it was possible to pick and choose which entry types to expose in the toolbar, and if those types should be displayed with icons, icons + text or even text only. But for the short term, a simple field setting to disable this behavior (i.e., reverting to the old "New entry" disclosure menu, including icons) would be much appreciated.

[wsydney76]

There's nothing stopping an editor from translation New {type} as {type} hinzufügen or {type} erstellen

Yes, could actually be 'New {type}' => '{type, select, Eintrag{Neuer} Benutzer{Neuer} other{Neu:}} {type}', in de/app.php.

However, I would prefer CKEditor to use its own translation here, without hijacking Craft's core translation, now any changes can affect other parts of the CP.

[brandonkelly]

CKEditor 4.9.0 is out with a new “Show toolbar buttons for entry types with icons” field setting (disabled by default). (#413)

[MoritzLost]

@brandonkelly @i-just Looks great, thanks! We'll mostly use the Dropdown, but good to have the other option available.

I see in the PR that returning the field setting for a custom dropdown label was planned, but then dropped. Why is that? I like the Plus icon visually, but it might be too subtle for some authors to notice …

[mmikkel]

I like the Plus icon visually, but it might be too subtle for some authors to notice

+1 – I really appreciate the new "Show buttons" setting, but an additional option to bring back the dropdown label would be great.