Allow to sort block elements horizontal

[bjarnef]

Currently in block list custom view we can add the class blockelement__draggable-element to make it sortable. Without this class the block isn't sortable.

However this class limit the sorting on y-axis, which is okay in the standard block views.
https://github.com/umbraco/Umbraco-CMS/blob/v9/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js#L766-L779

In a custom view you may have a nested block list though, e.g. a "Image Grid" with a block list using nested "Image Box" elements.

image-grid.html

<div class="rowview umb-outline blockelement__draggable-element">
    <div style="margin:0 0 10px;border:1px dashed #ccc;">
        <div class="block-image-grid" style="margin:0 -5px;padding:10px;display:flex;">
            <div ng-repeat="property in block.content.variants[0].tabs[0].properties"
                 ng-if="property.editor == 'Umbraco.BlockList'"
                 style="flex-grow:1;padding:0 5px;">
                <umb-property property="property">
                    <umb-property-editor model="property"></umb-property-editor>
                </umb-property>
            </div>
        </div>
    </div>
</div>

image-box.html

<button type="button" 
        class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element"
        ng-controller="MyProject.Blocks.ImageBox.Controller as vm"
        ng-click="block.edit()">
    <div class="block-image-box">
        <div ng-if="vm.loading" class="umb-button__progress"></div>
        <div ng-if="!vm.loading">
            <span ng-if="!vm.image">No Image</span>
            <img ng-if="vm.image" ng-src="{{vm.image.metaData.MediaPath}}?width=480&height=360" alt="" />
            <span class="block-image-box__heading" ng-bind="block.data.heading"></span>
            <span class="block-image-box__gradient" ng-style="{ 'background': vm.background }"></span>
        </div>
    </div>
</button>

I think it would be useful to sort on x-axis as well in this case.

[Nikkelmann]

I ran into this problem today as well.
We are building a horizontal block list and this is the only thing left that needs to be sorted out.
It could be a setting on the block list, V-stack or H-stack, that would also control the position of the inline create button.

[Nikkelmann]

Having the option between a vertical and horizontal block list would enable us to create a more fluid layout, simply by using block elements and some flex/grid css.

With two nested block list editors, one stock (vertical) and the nested one as horizontal, I was able to create a fluid grid system where the user simply adds the content blocks to the row (each block acts as a column), instead of choosing a fixed grid layout.

I was able to hack the block list editor to render as a horizontal block list in the backoffice simply by tageting some elements with css, but the angular-ui-sortable js was a show stopper.