Add configuration for whether new elements are added to the start of the list instead of the end

[kinglozzer]

Overview

There are differing preferences on whether a new block should be added to the top of the list, or the bottom. For large lists of blocks on a page adding to the top might best sense, while for pages that don't use many blocks (we see an average of 4 blocks per page) it might make more sense adding a new block to the bottom - following the flow of adding new content to a page.

Acceptance criteria (WIP)

• When adding a new block with the main action, the user has the option of choosing where it is added (via a UI 'toggle')
  • Early design suggestion: Add configuration for whether new elements are added to the start of the list instead of the end #566 (comment)
• The new UI toggle would not be present when a user adds a block using the inline feature (between blocks)
• There is configuration for a Developer to set the default state of the toggle

Old description:

In general content editing it could be argued that’s okay, because we don’t know where a new block is destined to be positioned. I think adding to the end is a better default, as when creating content for new pages you either have to drag+drop blocks around each time you add a new one or create content in reverse order

[kinglozzer]

Oh actually this is a bug, because BaseElement::onBeforeWrite() has code that’s supposed to handle this 😅

[ScopeyNZ]

This is actually by design. /cc @clarkepaul @newleeland . We add elements with a sort specifically set to "1" - that's why onBeforeWrite never kicks in.

There's a way to add elements to specific parts of the area by hovering over the border between elements in the editor.

For now I'll close the issue but we can still continue the debate 🙂

FYI the LOC for this:

https://github.com/dnadesign/silverstripe-elemental/blob/c318eb9604f139f4ec93d822cfde9bbe6c0e4eda/client/src/components/ElementEditor/AddNewButton.js#L50

[kinglozzer]

Yeah I hadn’t spotted that little border-hover-add button! Adding them to the end of the list seems more logical to me (I guess that was why the onBeforeWrite() logic was added in the first place) but if that’s changed intentionally then that’s okay

[clarkepaul]

Yeah it wasn't an easy decision, you might not see them being added to the end of the page, specially if blocks are expanded (would need more visual feedback for adding to bottom). We are thinking to have a checkbox allowing people to choose if its added to the top of bottom but no designs for that yet.
We anticipate that the side "Add" action becomes more of the default for desktop uses over time, we've kept the old "Add" because of touch devices and because it's the standard.

[ScopeyNZ]

Maybe we could change up the UX so that this action is more intuitive? At the moment I've come across a few developers that weren't aware of this action.

[clarkepaul]

Yep we could look to see if we can make it more visible. We should be promoting new features like this within the UI "NEW - add blocks directly between other blocks... look here... ".
First off would be to make the hover state more obvious, I'll add a design task to action something there.

[purplespider]

Found this while looking for a way to add to the bottom myself as it's a very frustrating experience trying to add multiple blocks to a new page using the obvious Add button.

Wasn't aware of the hover action either.

How about just adding a prominent "Add" button to the bottom too? Either a 2nd green "Add" button, or, even better, make the last hover "+" button larger, more prominent and always visible?

Craft CMS's excellent Matrix Field has their Add buttons at the bottom only:

[michalkleiner]

I'd be for defaulting to the bottom, or at least have it configurable somehow, or two sets of buttons where above adds to the top and below adds to the bottom — Can be "Add first" and "Add last" or so.
Agree with it being PITA when one needs to move several elements.
Also, neither was I aware of the hover option.

[kinglozzer]

I hacked together a workaround for a project I was working on that needed new elements to be added to the bottom of the list: https://gist.github.com/kinglozzer/a2c27f2a0c3563d8a72f8dfb982fc7fa

[robbieaverill]

Let's make this configurable

[brynwhyman]

Noting that we've recently finished #704 which improves the experience of adding blocks inline - something that can be quickly used to add a block to the bottom, should the default be to add the block to the top.

See: https://www.youtube.com/watch?v=qIgJk0JAfrU

[clarkepaul]

Would be good to make user configurable eventually, something like:

[robbieaverill]

Radical! So this would be user-configurable rather than dev-configurable (or both, in that a dev could configure the default position)?

[clarkepaul]

If we went as far as implementing the UI switch then I don't think there is much need for the dev config? Keep in mind that switch wouldn't be there for the action which inserts blocks in-between others. Design is just a suggestion to gauge what others think.

[robbieaverill]

Just thinking that if you always wanted to add to the bottom you might want that to be the default setting in the add block dialog.

We'd also need to ensure that that toggle wouldn't show when adding a block in between existing blocks.

[kinglozzer]

Design is just a suggestion to gauge what others think.

I think it looks 🔥

[Leapfrognz]

Just had a client requesting this feature so +1

[brynwhyman]

Hi all, I've updated the description to reflect the conversation in this issue and added some basic ACs. Please feel free to suggest other points here

[clarkepaul]

After a discussion with the product team I got some feedback that the toggle might not be as intuitive as I had thought, so here is another idea to put forward for consideration.

Essentially an icon (replacing the toggle) with something similar these indicating its placed top or bottom. Showing text when hovered to explain iconography (Add to top, Add to bottom).

If adding between blocks was more intuitive/obvious this issue probably wouldn't exist. There are other alternatives to doing this issue for example, a walkthrough of new UI features highlighting "New" things with tips on how to use functionality. This is probably a more usable feature throughout the UI but also a bigger piece of work.

[brynwhyman]

Ran this issue passed the CMS Squad, summarising some of the feedback.

• There needs to be more thought on the use of the CMS UI toggle switch and the label 'Top'. That component usually represents an enable/disable setting, where this action is more about selecting a preference between two options.
• This may only be worth implementing in the CMS UI if a user's preference could be stored against their profile, or be otherwise semi-permanent on an individual basis
• There's a bit of feedback on this issue to set the default to add to the bottom of the list. That probably works for a good majority of sites that only have a handful of blocks on a page, but if a page has so many blocks that you can't see the bottom of the list, adding to the bottom without indicating this could cause a lot of confusion
• A more drastic UI option could be to remove the main 'add block' button and put more emphasis into the inline options, perhaps even more so to the top and the bottom borders

[michalkleiner]

How about duplicating/splitting the Add block button to
Add block and Add block
or using something like https://github.com/symbiote/silverstripe-gridfieldextensions/blob/3/docs/en/index.md#multi-class-adding to support two (or more) options.
It doesn't need to be all handled within the dropdown mini-modal itself.

Alternatively, if the UI controls for adding the block on top and at the bottom were always visible (not just on hover), that would work IMHO too, as suggested in

A more drastic UI option could be to remove the main 'add block' button and put more emphasis into the inline options, perhaps even more so to the top and the bottom borders

[purplespider]

Regarding the icons, I'd find the presence of an arrow a bit confusing and would expect this would either be moving something (to the top/bottom) or something to do with sorting. How about something more like these:

Admittedly these would work better if they could use a lighter gray for the existing blocks to emphasize the position of the "added" block.

[michalkleiner]

Yeah, of course, I just used Paul's images to illustrate the concept.

[Leapfrognz]

Has this feature gotten anywhere yet? I have had another request for it this week.