Enable single block mode (#13216)

* Enable single block mode

* Fixes tests, and adds test for single block mode output type

* Update src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockListPropertyValueConverter.cs

Co-authored-by: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com>

* Update src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockListPropertyValueConverter.cs

Co-authored-by: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com>

* Fix breaking change

Co-authored-by: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com>

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.controller.js

@@ -38,12 +38,18 @@ angular.module("umbraco")
                     "disabled": vm.model.clipboardItems.length === 0
                 }];
 
-                if (vm.model.openClipboard === true) {
+                if (vm.model.singleBlockMode === true && vm.model.openClipboard === true) {
+                    vm.navigation.splice(0,1);
+                    vm.activeTab = vm.navigation[0];
+                }
+                else if (vm.model.openClipboard === true) {
                     vm.activeTab = vm.navigation[1];
                 } else {
                     vm.activeTab = vm.navigation[0];
                 }
 
+
+
                 vm.activeTab.active = true;
             }
         );
@@ -55,10 +61,16 @@ angular.module("umbraco")
         };
 
         vm.clickClearClipboard = function () {
-            vm.onNavigationChanged(vm.navigation[0]);
-            vm.navigation[1].disabled = true;// disabled ws determined when creating the navigation, so we need to update it here.
             vm.model.clipboardItems = [];// This dialog is not connected via the clipboardService events, so we need to update manually.
             vm.model.clickClearClipboard();
+            if (vm.model.singleBlockMode !== true && vm.model.openClipboard !== true)
+            {
+                vm.onNavigationChanged(vm.navigation[0]);
+                vm.navigation[1].disabled = true;// disabled ws determined when creating the navigation, so we need to update it here.
+            }
+            else {
+                vm.close();
+            }
         };
 
         vm.model = $scope.model;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html

@@ -13,6 +13,7 @@
                         ng-click="vm.requestShowCreate($index, $event)"
                         ng-controller="Umbraco.PropertyEditors.BlockListPropertyEditor.CreateButtonController as inlineCreateButtonCtrl"
                         ng-mousemove="inlineCreateButtonCtrl.onMouseMove($event)"
+                        ng-if="!vm.singleBlockMode"
                         ng-show="!vm.readonly">
                     <div class="__plus" ng-style="{'left':inlineCreateButtonCtrl.plusPosX}">
                         <umb-icon icon="icon-add" class="icon"></umb-icon>
@@ -28,7 +29,7 @@
             </div>
         </div>
 
-        <div class="umb-block-list__actions" ng-if="vm.loading !== true">
+        <div class="umb-block-list__actions" ng-if="vm.loading !== true && !vm.singleBlockMode">
             <button
                     id="{{vm.model.alias}}"
                     type="button"

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html

@@ -30,7 +30,7 @@
                     <localize key="general_copy">Copy</localize>
                 </span>
             </button>
-            <button ng-if="!vm.blockEditorApi.readonly" type="button" class="btn-reset umb-outline action --delete" localize="title" title="actions_delete"
+            <button ng-if="!vm.blockEditorApi.readonly && (!vm.blockEditorApi.singleBlockMode || vm.index > 0)" type="button" class="btn-reset umb-outline action --delete" localize="title" title="actions_delete"
                     ng-click="vm.blockEditorApi.requestDeleteBlock(vm.layout.$block);">
                 <umb-icon icon="icon-trash" class="icon"></umb-icon>
                 <span class="sr-only">

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js

@@ -36,6 +36,7 @@
         // Property actions:
         let copyAllBlocksAction = null;
         let deleteAllBlocksAction = null;
+        let pasteSingleBlockAction = null;
 
         var inlineEditing = false;
         var liveEditing = true;
@@ -43,6 +44,7 @@
         var vm = this;
 
         vm.readonly = false;
+        vm.singleBlockMode = false;
 
         $attrs.$observe('readonly', (value) => {
             vm.readonly = value !== undefined;
@@ -105,6 +107,12 @@
 
             inlineEditing = vm.model.config.useInlineEditingAsDefault;
             liveEditing = vm.model.config.useLiveEditing;
+            vm.singleBlockMode =
+                vm.model.config.validationLimit.min == 1 &&
+                vm.model.config.validationLimit.max == 1 &&
+                vm.model.config.blocks.length == 1 &&
+                vm.model.config.useSingleBlockMode;
+            vm.blockEditorApi.singleBlockMode = vm.singleBlockMode;
 
             vm.validationLimit = vm.model.config.validationLimit;
 
@@ -144,13 +152,25 @@
                 useLegacyIcon: false
             };
 
-            var propertyActions = [
-                copyAllBlocksAction,
-                deleteAllBlocksAction
-            ];
+            pasteSingleBlockAction = {
+                labelKey: "content_createFromClipboard",
+                labelTokens: [],
+                icon: "icon-paste-in",
+                method: requestShowClipboard,
+                isDisabled: false,
+                useLegacyIcon: false
+            };
+
+            var propertyActions = [copyAllBlocksAction, deleteAllBlocksAction];
+
+            var propertyActionsForSingleBlockMode = [pasteSingleBlockAction];
 
             if (vm.umbProperty) {
+                if (vm.singleBlockMode) {
+                vm.umbProperty.setPropertyActions(propertyActionsForSingleBlockMode);
+                } else {
                 vm.umbProperty.setPropertyActions(propertyActions);
+                }
             }
 
             // Create Model Object, to manage our data for this Block Editor.
@@ -218,6 +238,20 @@
 
             updateClipboard(true);
 
+            if (vm.singleBlockMode && vm.layout.length == 0) {
+                var wasAdded = false;
+                var blockType = vm.availableBlockTypes[0];
+
+                wasAdded = addNewBlock(1, blockType.blockConfigModel.contentElementTypeKey);
+
+                if (wasAdded && inlineEditing === true) {
+                    var blockObject = vm.layout[0]?.$block;
+                    if (blockObject) {
+                        blockObject.activate();
+                    }
+                }
+            }
+
             vm.loading = false;
 
             $scope.$evalAsync();
@@ -528,6 +562,7 @@
                 availableItems: vm.availableBlockTypes,
                 title: vm.labels.grid_addElement,
                 openClipboard: openClipboard,
+                singleBlockMode: vm.singleBlockMode,
                 orderBy: "$index",
                 view: "views/common/infiniteeditors/blockpicker/blockpicker.html",
                 size: (amountOfAvailableTypes > 8 ? "medium" : "small"),
@@ -644,6 +679,8 @@
             if(firstTime !== true && vm.clipboardItems.length > oldAmount) {
                 jumpClipboard();
             }
+
+            pasteSingleBlockAction.isDisabled = vm.clipboardItems.length === 0;
         }
 
         var jumpClipboardTimeout;
@@ -706,6 +743,13 @@
                 return false;
             }
 
+            if (vm.singleBlockMode) {
+                if (vm.layout.length > 0) {
+                deleteBlock(vm.layout[0].$block);
+                index = 1;
+                }
+            }
+
             var layoutEntry;
             if (pasteType === clipboardService.TYPES.ELEMENT_TYPE) {
                 layoutEntry = modelObject.createFromElementType(pasteEntry);
@@ -787,7 +831,8 @@
             requestDeleteBlock: requestDeleteBlock,
             deleteBlock: deleteBlock,
             openSettingsForBlock: openSettingsForBlock,
-            readonly: vm.readonly
+            readonly: vm.readonly,
+            singleBlockMode: vm.singleBlockMode
         };
 
         vm.sortableOptions = {