Block Grid Editor sorting directive

src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js

@@ -289,11 +289,6 @@ function dependencies() {
                 "./node_modules/@umbraco-ui/uui-css/dist/uui-text.css"
             ],
             "base": "./node_modules/@umbraco-ui"
-        },
-        {
-            "name": "sortablejs",
-            "src":  ["./node_modules/sortablejs/Sortable.min.js"],
-            "base": "./node_modules/sortablejs"
         }
     ];
 

src/Umbraco.Web.UI.Client/package.json

@@ -49,7 +49,6 @@
     "moment": "2.29.4",
     "ng-file-upload": "12.2.13",
     "nouislider": "15.6.1",
-    "sortablejs": "1.15.0",
     "spectrum-colorpicker2": "2.0.9",
     "tinymce": "4.9.11",
     "typeahead.js": "0.11.1",

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridentryeditors/gridinlineblock/gridinlineblock.editor.html

@@ -71,7 +71,11 @@
         min-height: 48px;
         height: auto;
     }
-
+
+    .blockelement-gridinlineblock-editor > slot {
+        --umb-block-grid--inline-editor--pointer-events--condition: var(--umb-block-grid--dragging-mode) none;
+        pointer-events: var(--umb-block-grid--inline-editor--pointer-events--condition, auto);
+    }
 
 </style>
 
@@ -100,6 +104,6 @@
 
     <slot name="{{vm.propertySlotName}}"></slot>
 
-    <umb-block-grid-render-area-slots></umb-block-grid-render-area-slots>
+    <umb-block-grid-render-area-slots ng-if="block.layout.areas.length > 0"></umb-block-grid-render-area-slots>
 
 </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less

@@ -188,7 +188,8 @@ ng-form.ng-invalid-val-server-match-content > .umb-block-grid__block:not(.--acti
     &.--active {
 
         /** Avoid displaying hover when dragging-mode */
-        --umb-block-grid--block-ui-opacity: calc(1 - var(--umb-block-grid--dragging-mode, 0));
+        --umb-block-grid--block-ui-opacity--condition: var(--umb-block-grid--dragging-mode) 0;
+        --umb-block-grid--block-ui-opacity: var(--umb-block-grid--block-ui-opacity--code, 1);
 
         > .umb-block-grid__block--context {
             opacity: var(--umb-block-grid--block-ui-opacity);
@@ -412,15 +413,17 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
     z-index: 1; /** overwritten for the first one of an area. */
 
     /** Avoid showing inline-create in dragging-mode */
-    opacity: calc(1 - var(--umb-block-grid--dragging-mode, 0));
+
+    --umb-block-grid__block--inline-create-button-display--condition: var(--umb-block-grid--dragging-mode) none;
+    display: var(--umb-block-grid__block--inline-create-button-display--condition);
 }
 .umb-block-grid__block--inline-create-button.--above {
     left: 0;
     width: 100%;
 
     top: calc(var(--umb-block-grid--row-gap, 0px) * -0.5);
 }
-.umb-block-grid__layout-item:first-of-type .umb-block-grid__block--inline-create-button.--above {
+.umb-block-grid__layout-item:first-of-type > .umb-block-grid__block--inline-create-button.--above {
     /* Do not use row-gap if the first one. */
     top: 0;
 }
@@ -454,6 +457,10 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
     /* Move inline create button slightly up, to avoid collision with others*/
     margin-bottom: -7px;
     margin-top: -13px;
+
+    /** Avoid showing last-inline-create in dragging-mode */
+    --umb-block-grid__block--last-inline-create-button-display--condition: var(--umb-block-grid--dragging-mode) none;
+    display: var(--umb-block-grid__block--last-inline-create-button-display--condition);
 }
 
 
@@ -553,6 +560,7 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
 
 .umb-block-grid__area-actions {
     grid-column: span var(--umb-block-grid--area-column-span);
+    flex-grow: 1;
     opacity: calc(var(--umb-block-grid--hint-area-ui, 0) * .5 + var(--umb-block-grid--show-area-ui, 0));
     transition: opacity 120ms;
 
@@ -590,34 +598,40 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
     }
 }
 
+
 .umb-block-grid__layout-item-placeholder {
     background: transparent;
     border-radius: 3px;
 
+    box-sizing: border-box;
     border: solid 1px;
     border-color: rgba(@blueDark, .5);
     border-radius: 3px;
 
     height: 100%;
 }
 
+
 .umb-block-grid__layout-item-placeholder > * {
     display: none;
 }
+
 .umb-block-grid__layout-item-placeholder::before {
     content: '';
     position:absolute;
     z-index:1;
     inset: 0;
     border-radius: 3px;
     background-color: white;
+    pointer-events:none;
 }
 .umb-block-grid__layout-item-placeholder::after {
     content: '';
     position:absolute;
     z-index:1;
     inset: 0;
     border-radius: 3px;
+    pointer-events:none;
 
     transition: background-color 240ms ease-in;
     animation: umb-block-grid__placeholder__pulse 400ms ease-in-out alternate infinite;
@@ -627,10 +641,14 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
     }
 }
 
-
 .umb-block-grid__area {
     position: relative;
-    --umb-block-grid--show-area-ui: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    --umb-block-grid__area--show-area-ui--condition: var(--umb-block-grid--dragging-mode) 1;
+    --umb-block-grid--show-area-ui: var(--umb-block-grid__area--show-area-ui--condition, 0);
 }
 .umb-block-grid__area:focus,
 .umb-block-grid__area:focus-within,
@@ -654,10 +672,9 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
     /* Moved slightly in to align with the inline-create button, which is moved slightly in to avoid collision with other create buttons. */
     top:2px;
     bottom: 2px;
-    /** Avoid displaying highlight when in dragging-mode */
-    opacity: calc(1 - var(--umb-block-grid--dragging-mode, 0));
     border-color: @blueDark;
     box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .7);
+
 }
 .umb-block-grid__area:has( .umb-block-grid__layout-item-placeholder )::after {
     opacity: 1;
@@ -674,6 +691,9 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
         100% { border-color: rgba(@blueDark, 0.66); }
     }
 }
+.umb-block-grid__area > ng-form {
+    display: contents;
+}
 
 .umb-block-grid__scalebox-backdrop {
     position: absolute;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.html

@@ -2,33 +2,39 @@
 
     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
 
-    <div ng-show="vm.loading !== true" class="umb-block-grid-area-editor__grid-wrapper" style="--umb-block-grid--block-grid-columns: {{vm.block.areaGridColumns || vm.rootLayoutColumns}}">
+    <div ng-if="vm.loading !== true" 
+        class="umb-block-grid-area-editor__grid-wrapper"
+        style="--umb-block-grid--block-grid-columns: {{vm.block.areaGridColumns || vm.rootLayoutColumns}}"
+        umb-block-grid-sorter="::vm.sorterOptions">
 
         <umb-block-grid-configuration-area-entry ng-repeat="area in vm.model track by area.key"
             class="umb-block-grid-area-editor__area"
             ng-class="{'--isOpen':vm.openArea === area}"
-            area="area"
+            data-area-key="{{area.key}}"
+            data-col-span="{{area.columnSpan}}"
+            data-row-span="{{area.rowSpan}}"
             style="
             --umb-block-grid--grid-column: {{area.columnSpan}};
             --umb-block-grid--area-column-span: {{area.columnSpan}};
             --umb-block-grid--area-row-span: {{area.rowSpan}};
             "
+            area="area"
             ng-click="vm.editArea(area)"
             on-edit="vm.editArea(area)"
             on-delete="vm.requestDeleteArea(area)"
         >
         </umb-block-grid-configuration-area-entry>
 
-        <button
-            type="button"
-            ng-disabled="vm.disabled"
-            class="btn-reset umb-block-grid-area-editor__create-button umb-outline"
-            ng-click="vm.onNewAreaClick()">
-        <localize key="general_add">Add</localize>
-        </button>
-
     </div>
 
+    <button
+        type="button"
+        ng-disabled="vm.disabled"
+        class="btn-reset umb-block-grid-area-editor__create-button umb-outline"
+        ng-click="vm.onNewAreaClick()">
+        <localize key="general_add">Add</localize>
+    </button>
+
 </div>
 
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.less

@@ -217,6 +217,9 @@ Grid part:
     display: flex;
     align-items: center;
     justify-content: center;
+
+    height:50px;
+    width:100%;
 
     color: @ui-action-discreet-type;
     font-weight: bold;