Replace complex blocks settings with a unified container UI

[djay]

Problem

Containers will be easier to work with than subschemas for many blocks like accordian, slider, table etc.
Since then an integrator can just reuse container syntax in hydra and get a decent UI for most complex blocks

• slider (contains slide (but could also be a teaser with a different presentation)
• accordion block (contains accordion header which contain any blocks)
• tab block (containers tab which contains any blocks)
• form-block (could contain fields and could be extended to include any blocks)
• gridblock (contains any block, or could be set to be restricted to text or image)
• columns block (contains columns which contain any blocks (or just single text in some cases?)
• table (contains rows which contain cells which contain single text or any blocks)

PLIP has been proposed for Volto - plone/volto#6569
If it's not accepted for Volto then it would need to be done in hydra only, or as an addon.

The result would be a sidebar UI that works just as well as the current subschema based UI.
It's also important for hydra becuse many of these blocks currently rely on custom inplace buttons to work properly. This will ensure that all actions can be done in the sidebar for these blocks

[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 (plone/volto#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.

[djay]

I've made mockups for how sliders would work.

One complication is that for a slider you need to slide the selected slide into view on sidebar selection.
Todo this we will use the data-block-selection (see readme) or a callback

[djay]

@JeffersonBledsoe I think first step is to make this a PLIP

[djay]

Added PLIP - plone/volto#6569