I can manage/navigate subblocks only in the sidebar (remove sidebar tabs and "layout")

[djay]

Problem

Need a way to get to the settings of blocks, esp the parent in cases where it's either hard to click on teh parent or frontend block selection is not implemented.

We need something that works well on mobile (vertical is better than horizontal) and is not confusing for the user to work out what they are looking at container-wise, and how to get to the settings they want. Jumping between block layout, and settings or various blocks can be confusing.

Existing container blocks potentially are

• slider (contains slide/teaser)
• gridblock (contains any block)
• columns block (contains columns which contain any blocks)
• form-block (could contain fields and any blocks)
• table (contains rows which contain cells which contain any blocks)
• accordianblock (contains accordians which contain any blocks)

All of these would benefit from a consistent containment UI

Proposed solution

All container blocks settings in a single sidebar using sticky scroll

The idea is an extension of the existing concept in Volto where you can manage subitems in the settings like the slider block or accordion or formblock and the mockup in quanta where both the subblock and the top level block settings combined. (see images in the context below)

This idea is extended further to include all parent containers including the page itself which is also logically a container but not indent them but once opened to are kept at the same level.

A similar idea to vscode sticky scroll is used in vscode and will allow the user to understand the containment hierarchy and how to get to their settings. Including the Page as the most top container means there is a clear way to get to them when replacing the tabs and the settings button in the toolbar can act as a simple sidebar toggle.

• the downside of sticky scroll is on a small screen like mobile you end up with less and less room to see the settings if you have a deep container heirachy. There might be a need to further compact it into a breadcrumbs to reduce space in this case.
  • deep container hierarchies should be rate anyway. Hopefully.

• Clicking a block would include the block and its parents on the sidebar and scroll up so selected (lowest) is in view
  • any parent containers with no settings (like Row in the table case), can be hidden to make the display less cluttered
• If the selected block is a container you can manage it's sub-blccks or select(open) one.
  • to make for less clutter this is hidden in parent block settings. you have to navigate back up (close/unselect) to manage a parents sub-blocks from the sidebar.
• if you want to go to the page settings then you just scroll up (or you can unselect the table) (solves discussion in https://github.com/plone/volto/pull/3912).
• each block has a block menu so you can delete, cut copy blocks etc. That lets you move blocks out of containers.

Context

The quanta design doesn't really deal with containers. The closest it comes is this table block and the mockup in quanta where both the subblock and the top level block settings combined

The proposed idea is kind of an extension of the existing concept in Volto where you can manage subitems in the settings like the slider block or accordion or formblock

[djay]

Not sure this is the right place for it but this is an idea that tries to solve a few different things.

• navigating around blocks esp parents
• adding a block without selection being enabled. and as a secondary way
• quanta removing tabs on the sidebar
• just generally how to make containers less confusing.

The idea follows on from quanta design for tables, where cell settings are part of table settings but I've generalised it.

• All the settings of the current selected block and each of it's outer containers is shown on the sidebar at the same time.
  • Top level block at the top to selected at the bottom
  • Within each block section there can be collapsable sections
• if a container is selected then the last section is blocks navigator that lets you add, remove, reorder or open a sub block. It can be collapsed like any other section.
  • or maybe removal can be moved into the subblock settings?
  • this does allow for multiple named slots within one container
• Opening a sub block replaces this section with a block panel for this opened block. So it's at the bottom.
  • this is the same level as the block title at the top of the sidebar so there is no indentation. The more levels the sidebar just gets longer.
  • selecting the subblock on the frontend does the same but will scroll the sidebar down to this section
• closing the subblock selects the parent
  • and shows the container subblock selection again
• if you scroll down, possibly the block heading could stick at the top of the screen to make it easier to jump to the parent?
• Some blocks might not have any settings other than subblocks.
  • we can possibly not show the parent when the child is selected/open because it will be empty. closing the child when open the parent anyway.
• Table is kind of a special case because we generally want to add columns instead of cells to each row.
  • There should be a way to add custom actions to a block that know about subblock selection and can act on it.
    • so the table block can then have special add row before, add row after, add column before, add column after etc buttons.
    • this can appear on both the quanta toolbar and in the table settings.
  • This subblock navigator would appear on the page settings also since the page is itself a container
  • but in this case opening the subblock doesn't leave the page settings at the top. instead opens that block as the top level.
    • it would just get too much page the page settings always at the top of the sidebar I think

Here are some mockups

TODO:

• where does remove block go?
• should there be a quanta toolbar menu replicated in the sidebar
• currently the add in the sidebar means you have to go back to the parent, add at the top and then move it. You can "add after" current block like you can with the frontend add button. Is that a problem?
• in a table, if you did add a cell to a row, this should automatically create a column instead? should this kind of customisation be baked in or can setup rules like this yourself?
• the close button for the top level block and for a subblock have different meanings. For the top it means close the sidebar and leave the selection unchanged. for the subblock it means select the parent.
  • maybe use a different symbol? like a back icon?
• if you edit the title of an accordian, does it change selection to the accordian and lose selection of the inner block?
  • ie can you change parents with selection switching to just the parent

[djay]

I did a mockup of including the page settings as the top most pinned accordion. It is a container. It also means the settings in the toolbar can be just a toggle to open or close the sidebar (https://github.com/plone/volto/pull/3912)

Settings on the toolbar would open with the sidebar scrolled to the top showing the page settings. Clicking a block would include the block and its parents on the sidebar (skipping any with no settings like Row). If the selected block is a container you can manage it's sub-blccks or select one. And if you want to go to the page settings then you just scroll up (or you can unselect the table) I've also put in a block menu so you can delete, cut copy blocks etc. That lets you move blocks out of containers.