From dc2358f4f069e22aa4097bbd13b3131ef7367df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 16 Nov 2022 11:52:40 +0100
Subject: [PATCH] Block Grid Editor: Removal of the forced placement feature
 (#13400)

* removal of the forceLeft/forceRight code

* removal of forced placement in css

* bring back removed code
---
 .../EmbeddedResources/BlockGrid/items.cshtml  |   4 -
 .../EmbeddedResources/Lang/da.xml             |   6 -
 .../EmbeddedResources/Lang/en.xml             |   6 -
 .../EmbeddedResources/Lang/en_us.xml          |   6 -
 .../Models/Blocks/BlockGridItem.cs            |  12 --
 .../Models/Blocks/BlockGridLayoutItem.cs      |   6 -
 .../BlockGridPropertyValueConverter.cs        |   2 -
 .../blockgrid/blockgridui.less                | 151 +-----------------
 .../blockgrid/razorhtml.temp.html             |   2 -
 .../blockgrid/umb-block-grid-entries.html     |   2 -
 .../blockgrid/umb-block-grid-entry.html       |  32 ----
 .../umbblockgridentries.component.js          | 148 ++++-------------
 .../blockgrid/umbblockgridentry.component.js  |  14 --
 .../umbraco-blockgridlayout-flexbox.css       |  12 --
 .../blockgrid/umbraco-blockgridlayout.css     |   6 -
 .../Views/Partials/blockgrid/items.cshtml     |   5 +-
 16 files changed, 31 insertions(+), 383 deletions(-)

diff --git a/src/Umbraco.Core/EmbeddedResources/BlockGrid/items.cshtml b/src/Umbraco.Core/EmbeddedResources/BlockGrid/items.cshtml
index 165044553a..f00e2481ac 100644
--- a/src/Umbraco.Core/EmbeddedResources/BlockGrid/items.cshtml
+++ b/src/Umbraco.Core/EmbeddedResources/BlockGrid/items.cshtml
@@ -7,8 +7,6 @@
 <div class="umb-block-grid__layout-container">
     @foreach (var item in Model)
     {
-        bool attrForceLeft = item.ForceLeft;
-        bool attrForceRight = item.ForceRight;
         <div
             class="umb-block-grid__layout-item"
             data-content-element-type-alias="@item.Content.ContentType.Alias"
@@ -16,8 +14,6 @@
             data-element-udi="@item.ContentUdi"
             data-col-span="@item.ColumnSpan"
             data-row-span="@item.RowSpan"
-            @(attrForceLeft ? "data-force-left" : null)
-            @(attrForceRight ? "data-force-right" : null)
             style=" --umb-block-grid--item-column-span: @item.ColumnSpan; --umb-block-grid--item-row-span: @item.RowSpan; ">
             @{
                 var partialViewName = "blockgrid/Components/" + item.Content.ContentType.Alias;
diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/da.xml b/src/Umbraco.Core/EmbeddedResources/Lang/da.xml
index 049b617f93..1c23c53e38 100644
--- a/src/Umbraco.Core/EmbeddedResources/Lang/da.xml
+++ b/src/Umbraco.Core/EmbeddedResources/Lang/da.xml
@@ -2244,12 +2244,6 @@ Mange hilsner fra Umbraco robotten
       <![CDATA[Det indsatte indhold bestod af ikke tilladt del-indhold, disse dele er blevet afvist. Vil du beholde det resterene alligevel?]]></key>
     <key alias="areaAliasHelp">
       <![CDATA[Dette alias skrives ud via GetBlockGridHTML(), brug aliaset til at fange det element der repræsentere dette område. F.eks.. .umb-block-grid__area[data-area-alias="MitOmraadeAlias"] { ... }]]></key>
-    <key alias="forceLeftLabel">Påtving placering i venstre side</key>
-    <key alias="forceRightLabel">Påtving placering i højre side</key>
-    <key alias="unforceLeftLabel">Fjern påtvungen placering i venstre side</key>
-    <key alias="unforceRightLabel">Fjern påtvungen placering i højre side</key>
-    <key alias="forceLeftButton">Skift påtvungen placering i venstre side</key>
-    <key alias="forceRightButton">Skift påtvungen placering i højre side</key>
     <key alias="scaleHandlerButtonTitle">Træk for at skalere</key>
     <key alias="areaCreateLabelTitle">Tilføj indhold label</key>
     <key alias="areaCreateLabelHelp">Overskriv labellen for tilføj indholds knappen i dette område.</key>
diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
index 99428a8837..3cd7f0d40a 100644
--- a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
+++ b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
@@ -2794,12 +2794,6 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
       <![CDATA[The inserted content contained disallowed content, which has not been created. Would you like to keep the rest of this content anyway?]]></key>
     <key alias="areaAliasHelp">
       <![CDATA[The alias will be printed by GetBlockGridHTML(), use the alias to target the Element representing this area. Ex. .umb-block-grid__area[data-area-alias="MyAreaAlias"] { ... }]]></key>
-    <key alias="forceLeftLabel">Force placement at left side</key>
-    <key alias="forceRightLabel">Force placement at right side</key>
-    <key alias="unforceLeftLabel">Remove forced placement at left side</key>
-    <key alias="unforceRightLabel">Remove forced placement at right side</key>
-    <key alias="forceLeftButton">Toggle forced placement at left side</key>
-    <key alias="forceRightButton">Toggle forced placement at right side</key>
     <key alias="scaleHandlerButtonTitle">Drag to scale</key>
     <key alias="areaCreateLabelTitle">Create Button Label</key>
     <key alias="areaCreateLabelHelp">Overwrite the label on the create button of this Area.</key>
diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
index 483219eeb8..a20075769a 100644
--- a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
+++ b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
@@ -2897,12 +2897,6 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
       <![CDATA[The inserted content contained disallowed content, which has not been created. Would you like to keep the rest of this content anyway?]]></key>
     <key alias="areaAliasHelp">
       <![CDATA[The alias will be printed by GetBlockGridHTML(), use the alias to target the Element representing this area. Ex. .umb-block-grid__area[data-area-alias="MyAreaAlias"] { ... }]]></key>
-    <key alias="forceLeftLabel">Force placement at left side</key>
-    <key alias="forceRightLabel">Force placement at right side</key>
-    <key alias="unforceLeftLabel">Remove forced placement at left side</key>
-    <key alias="unforceRightLabel">Remove forced placement at right side</key>
-    <key alias="forceLeftButton">Toggle forced placement at left side</key>
-    <key alias="forceRightButton">Toggle forced placement at right side</key>
     <key alias="scaleHandlerButtonTitle">Drag to scale</key>
     <key alias="areaCreateLabelTitle">Create Button Label</key>
     <key alias="areaCreateLabelHelp">Overwrite the label on the create button of this Area.</key>
diff --git a/src/Umbraco.Core/Models/Blocks/BlockGridItem.cs b/src/Umbraco.Core/Models/Blocks/BlockGridItem.cs
index 097882c5ab..eb554ef90d 100644
--- a/src/Umbraco.Core/Models/Blocks/BlockGridItem.cs
+++ b/src/Umbraco.Core/Models/Blocks/BlockGridItem.cs
@@ -81,18 +81,6 @@ namespace Umbraco.Cms.Core.Models.Blocks
         [DataMember(Name = "columnSpan")]
         public int ColumnSpan { get; set; }
 
-        /// <summary>
-        /// Forcing the item to be located in the left side.
-        /// </summary>
-        [DataMember(Name = "forceLeft")]
-        public bool ForceLeft { get; set; }
-
-        /// <summary>
-        /// Forcing the item to be located in the right side.
-        /// </summary>
-        [DataMember(Name = "forceRight")]
-        public bool ForceRight { get; set; }
-
         /// <summary>
         /// The grid areas within this item
         /// </summary>
diff --git a/src/Umbraco.Infrastructure/Models/Blocks/BlockGridLayoutItem.cs b/src/Umbraco.Infrastructure/Models/Blocks/BlockGridLayoutItem.cs
index 9014e2789a..30494b03f7 100644
--- a/src/Umbraco.Infrastructure/Models/Blocks/BlockGridLayoutItem.cs
+++ b/src/Umbraco.Infrastructure/Models/Blocks/BlockGridLayoutItem.cs
@@ -25,12 +25,6 @@ public class BlockGridLayoutItem : IBlockLayoutItem
     [JsonProperty("rowSpan", NullValueHandling = NullValueHandling.Ignore)]
     public int? RowSpan { get; set; }
 
-    [JsonProperty("forceLeft")]
-    public bool ForceLeft { get; set; }
-
-    [JsonProperty("forceRight")]
-    public bool ForceRight { get; set; }
-
     [JsonProperty("areas", NullValueHandling = NullValueHandling.Ignore)]
     public BlockGridLayoutAreaItem[] Areas { get; set; } = Array.Empty<BlockGridLayoutAreaItem>();
 }
diff --git a/src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockGridPropertyValueConverter.cs b/src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockGridPropertyValueConverter.cs
index 6cd2d4bd38..ae330870fa 100644
--- a/src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockGridPropertyValueConverter.cs
+++ b/src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockGridPropertyValueConverter.cs
@@ -49,8 +49,6 @@ namespace Umbraco.Cms.Core.PropertyEditors.ValueConverters
 
                     blockItem.RowSpan = layoutItem.RowSpan!.Value;
                     blockItem.ColumnSpan = layoutItem.ColumnSpan!.Value;
-                    blockItem.ForceLeft = layoutItem.ForceLeft;
-                    blockItem.ForceRight = layoutItem.ForceRight;
                     blockItem.AreaGridColumns = blockConfig.AreaGridColumns;
                     blockItem.GridColumns = configuration.GridColumns;
                     blockItem.Areas = layoutItem.Areas.Select(area =>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less
index 38ff8086c6..b6205d73ac 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less
@@ -28,9 +28,7 @@
 
         > ng-form > .umb-block-grid__block--inline-create-button, 
         > ng-form > .umb-block-grid__block--validation-border,
-        > ng-form > .umb-block-grid__block--actions,
-        > ng-form > .umb-block-grid__force-left,
-        > ng-form > .umb-block-grid__force-right {
+        > ng-form > .umb-block-grid__block--actions {
             z-index: 3;
         }
     }
@@ -80,11 +78,6 @@ ng-form.ng-invalid-val-server-match-content > .umb-block-grid__block:not(.--acti
         opacity: 0;
         transition: opacity 120ms;
     }
-    > .umb-block-grid__force-left,
-    > .umb-block-grid__force-right {
-        opacity: 0;
-        transition: opacity 120ms;
-    }
     > .umb-block-grid__block--context {
         opacity: 0;
         transition: opacity 120ms;
@@ -149,10 +142,6 @@ ng-form.ng-invalid-val-server-match-content > .umb-block-grid__block:not(.--acti
         > .umb-block-grid__scale-label {
             opacity: 1;
         }
-        > .umb-block-grid__force-left,
-        > .umb-block-grid__force-right {
-            opacity: 1;
-        }
     }
     
     /** make sure to hide child block ui: */
@@ -169,10 +158,6 @@ ng-form.ng-invalid-val-server-match-content > .umb-block-grid__block:not(.--acti
         > .umb-block-grid__block--actions {
             display: none;
         }
-        > .umb-block-grid__force-left, 
-        > .umb-block-grid__force-right {
-            display: none;
-        }
     }
     &.--block-ui-visible {
 
@@ -221,10 +206,6 @@ ng-form.ng-invalid-val-server-match-content > .umb-block-grid__block:not(.--acti
         > .umb-block-grid__scale-handler {
             opacity: var(--umb-block-grid--block-ui-opacity);
         }
-        > .umb-block-grid__force-left, 
-        > .umb-block-grid__force-right {
-            opacity: var(--umb-block-grid--block-ui-opacity);
-        }
     }
 }
 
@@ -372,106 +353,6 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
     }
 }
 
-.umb-block-grid__force-left,
-.umb-block-grid__force-right {
-    position: absolute;
-    z-index: 2;
-    top: 50%;
-    height: 30px;
-    width: 15px;
-    margin-top:-15px;
-    background-color: transparent;
-    color: @blueDark;
-    border: 1px solid rgba(255, 255, 255, .2);
-    font-size: 12px;
-    padding: 0;
-    cursor: pointer;
-    box-sizing: border-box;
-    border-radius: 8px;
-    display: var(--umb-block-grid--block-ui-display, flex);
-    justify-content: center;
-    align-items: center;
-    pointer-events: all;
-
-    opacity: 0;
-    transition: background-color 120ms, border-color 120ms, color 120ms, opacity 120ms;
-
-    .icon {
-        position: relative;
-        display: inline-block;
-        pointer-events: none;
-        opacity: 0;
-        transition: transform 120ms ease-in-out, opacity 120ms;
-        ::before {
-            content: '';
-            position: absolute;
-            background-color:currentColor;
-            width:2px;
-            height: 8px;
-            top: 2px;
-            transition: transform 120ms ease-in-out;
-        }
-    }
-
-    &:hover {
-        opacity: 1;
-        color: @blueDark;
-        background-color: @white;
-    }
-    &:hover,
-    &.--active {
-        .icon {
-            opacity: 1;
-            transform: translateX(0);
-            ::before {
-                transform: translateX(0);
-            }
-        }
-    }
-
-    &.--active {
-        background-color: @blueDark;
-        color: white;
-        &:hover {
-            color: white;
-        }
-    }
-}
-
-.umb-block-grid__force-left {
-    left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    .icon {
-        transform: translateX(3px);
-        ::before {
-            left: 2px;
-            transform: translateX(-3px);
-        }
-    }
-    &:hover,
-    &.--active {
-        border-left-color: @blueDark;
-    }
-}
-.umb-block-grid__force-right {
-    right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    .icon {
-        margin-right: 1px;
-        transform: translateX(-3px);
-        ::before {
-            right: 2px;
-            transform: translateX(3px);
-        }
-    }
-    &:hover,
-    &.--active {
-        border-right-color: @blueDark;
-    }
-}
-
 
 .umb-block-grid__scale-handler {
     cursor: nwse-resize;
@@ -745,36 +626,6 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
         100% { background-color: rgba(@blueMidLight, 0.22); }
     }
 }
-.umb-block-grid__layout-item-placeholder .indicateForceLeft, 
-.umb-block-grid__layout-item-placeholder .indicateForceRight {
-    position:absolute;
-
-    z-index: 2;
-    height: 100%;
-    width: 15px;
-
-    background-color: @blueDark;
-
-    background-position: center center;
-    background-repeat: no-repeat;
-    display: block !important;
-
-    animation: umb-block-grid__indicateForce__pulse 400ms ease-in-out alternate infinite;
-}
-
-.umb-block-grid__layout-item-placeholder .indicateForceLeft {
-    left:0;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='10'><polygon points='0,0 2,0 2,5 6,1 6,9 2,5 2,10 0,10' style='fill:white;'/></svg>");
-}
-.umb-block-grid__layout-item-placeholder .indicateForceRight {
-    right:0;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='10'><polygon points='8,0 6,0 6,5 2,1 2,9 6,5 6,10 8,10' style='fill:white;'/></svg>");
-}
-
-@keyframes umb-block-grid__indicateForce__pulse {
-    0%   { background-color: rgba(@blueDark, 1); }
-    100% { background-color: rgba(@blueDark, 0.5); }
-}
 
 
 .umb-block-grid__area {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/razorhtml.temp.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/razorhtml.temp.html
index 9c7a95a101..5c64d795d1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/razorhtml.temp.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/razorhtml.temp.html
@@ -14,8 +14,6 @@
             data-element-udi="{{layoutEntry.contentUdi}}"
             data-col-span="{{layoutEntry.columnSpan}}"
             data-row-span="{{layoutEntry.rowSpan}}"
-            ng-attr-data-force-left="{{layoutEntry.forceLeft || undefined}}"
-            ng-attr-data-force-right="{{layoutEntry.forceRight || undefined}}"
             style="
             --umb-block-grid--item-column-span: {{layoutEntry.columnSpan}};
             --umb-block-grid--item-row-span: {{layoutEntry.rowSpan}};
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entries.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entries.html
index 301208c6f2..4aed670ffd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entries.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entries.html
@@ -14,8 +14,6 @@
             data-element-udi="{{layoutEntry.contentUdi}}"
             data-col-span="{{layoutEntry.columnSpan}}"
             data-row-span="{{layoutEntry.rowSpan}}"
-            ng-attr-data-force-left="{{layoutEntry.forceLeft || undefined}}"
-            ng-attr-data-force-right="{{layoutEntry.forceRight || undefined}}"
             style="
             --umb-block-grid--item-column-span: {{layoutEntry.columnSpan}};
             --umb-block-grid--item-row-span: {{layoutEntry.rowSpan}};
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entry.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entry.html
index e3f439a891..0caebd35c2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entry.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entry.html
@@ -132,38 +132,6 @@
             </button>
         </div>
 
-        <button 
-            ng-if="vm.blockEditorApi.readonly !== true && (vm.layoutColumnsInt !== vm.layoutEntry.columnSpan || (vm.layoutColumnsInt === vm.layoutEntry.columnSpan && vm.layoutEntry.forceLeft))"
-            type="button" 
-            aria-labelledby="forceLeftLabel"
-            title="@blockEditor_forceLeftButton"
-            localize="title"
-            class="umb-block-grid__force-left"
-            ng-class="{ '--active': vm.layoutEntry.forceLeft }"
-            ng-click="vm.toggleForceLeft()">
-            <span class="sr-only">
-                <localize ng-if="!vm.layoutEntry.forceLeft" id="forceLeftLabel" key="blockEditor_forceLeftLabel">Force placement at left side</localize>
-                <localize ng-if="vm.layoutEntry.forceLeft" id="forceLeftLabel" key="blockEditor_unforceLeftLabel">Remove forced placement at left side</localize>
-            </span>
-            <umb-icon icon="icon-navigation-left" class="icon"></umb-icon>
-        </button>
-
-        <button 
-            ng-if="vm.blockEditorApi.readonly !== true && (vm.layoutColumnsInt !== vm.layoutEntry.columnSpan || (vm.layoutColumnsInt === vm.layoutEntry.columnSpan && vm.layoutEntry.forceRight))"
-            type="button" 
-            aria-labelledby="forceRightLabel"
-            title="@blockEditor_forceRightButton"
-            localize="title"
-            class="umb-block-grid__force-right"
-            ng-class="{ '--active': vm.layoutEntry.forceRight }"
-            ng-click="vm.toggleForceRight()">
-            <span class="sr-only">
-                <localize ng-if="!vm.layoutEntry.forceRight" id="forceRightLabel" key="blockEditor_forceRightLabel">Force placement at right side</localize>
-                <localize ng-if="vm.layoutEntry.forceRight" id="forceRightLabel" key="blockEditor_unforceRightLabel">Remove forced placement at right side</localize>
-            </span>
-            <umb-icon icon="icon-navigation-right" class="icon"></umb-icon>
-        </button>
-
         <button 
             ng-if="::!vm.blockEditorApi.readonly && vm.canScale" 
             type="button"
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentries.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentries.component.js
index 3f597292e8..2954ee52d2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentries.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentries.component.js
@@ -203,9 +203,6 @@
             var dragY = 0;
             var dragOffsetX = 0;
 
-            var ghostElIndicateForceLeft = null;
-            var ghostElIndicateForceRight = null;
-
             var approvedContainerEl = null;
 
             // Setup DOM method for communication between sortables:
@@ -262,12 +259,6 @@
                     } else {
                         syncEntry.columnSpan = contextColumns;
                     }
-
-                    if(syncEntry.columnSpan === contextColumns) {
-                        // If we are full width, then reset forceLeft/right.
-                        syncEntry.forceLeft = false;
-                        syncEntry.forceRight = false;
-                    }
                     
                 }
                 else {
@@ -399,55 +390,40 @@
                     }
 
                     let verticalDirection = false;
-                    if (ghostEl.dataset.forceLeft) {
-                        placeAfter = true;
-                    } else if (ghostEl.dataset.forceRight) {
-                        placeAfter = true;
-                    } else {
+                    
+                    // TODO: move calculations out so they can be persisted a bit longer?
+                    //const approvedContainerRect = approvedContainerEl.getBoundingClientRect();
+                    const approvedContainerComputedStyles = getComputedStyle(approvedContainerEl);
+                    const gridColumnNumber = parseInt(approvedContainerComputedStyles.getPropertyValue("--umb-block-grid--grid-columns"), 10);
 
-                        // if the related element is forceLeft and we are in the left side, we will set vertical direction, to correct placeAfter.
-                        if (foundRelatedEl.dataset.forceLeft && placeAfter === false) {
-                            verticalDirection = true;
-                        } else 
-                        // if the related element is forceRight and we are in the right side, we will set vertical direction, to correct placeAfter.
-                        if (foundRelatedEl.dataset.forceRight && placeAfter === true) {
-                            verticalDirection = true;
-                        } else {
+                    const relatedColumns = parseInt(foundRelatedEl.dataset.colSpan, 10);
+                    const ghostColumns = parseInt(ghostEl.dataset.colSpan, 10);
 
-                            // TODO: move calculations out so they can be persisted a bit longer?
-                            //const approvedContainerRect = approvedContainerEl.getBoundingClientRect();
-                            const approvedContainerComputedStyles = getComputedStyle(approvedContainerEl);
-                            const gridColumnNumber = parseInt(approvedContainerComputedStyles.getPropertyValue("--umb-block-grid--grid-columns"), 10);
+                    // Get grid template:
+                    const approvedContainerGridColumns = approvedContainerComputedStyles.gridTemplateColumns.trim().split("px").map(x => Number(x)).filter(n => n > 0);
 
-                            const relatedColumns = parseInt(foundRelatedEl.dataset.colSpan, 10);
-                            const ghostColumns = parseInt(ghostEl.dataset.colSpan, 10);
-
-                            // Get grid template:
-                            const approvedContainerGridColumns = approvedContainerComputedStyles.gridTemplateColumns.trim().split("px").map(x => Number(x)).filter(n => n > 0);
-
-                            // ensure all columns are there.
-                            // This will also ensure handling non-css-grid mode,
-                            // use container width divided by amount of columns( or the item width divided by its amount of columnSpan)
-                            let amountOfColumnsInWeightMap = approvedContainerGridColumns.length;
-                            const amountOfUnknownColumns = gridColumnNumber-amountOfColumnsInWeightMap;
-                            if(amountOfUnknownColumns > 0) {
-                                let accumulatedValue = getAccumulatedValueOfIndex(amountOfColumnsInWeightMap, approvedContainerGridColumns) || 0;
-                                const layoutWidth = approvedContainerRect.width;
-                                const missingColumnWidth = (layoutWidth-accumulatedValue)/amountOfUnknownColumns;
-                                while(amountOfColumnsInWeightMap++ < gridColumnNumber) {
-                                    approvedContainerGridColumns.push(missingColumnWidth);
-                                }
-                            }
-
-
-                            const relatedStartX = foundRelatedElRect.left - approvedContainerRect.left;
-                            const relatedStartCol = Math.round(getInterpolatedIndexOfPositionInWeightMap(relatedStartX, approvedContainerGridColumns));
-
-                            if(relatedStartCol + relatedColumns + ghostColumns > gridColumnNumber) {
-                                verticalDirection = true;
-                            }
+                    // ensure all columns are there.
+                    // This will also ensure handling non-css-grid mode,
+                    // use container width divided by amount of columns( or the item width divided by its amount of columnSpan)
+                    let amountOfColumnsInWeightMap = approvedContainerGridColumns.length;
+                    const amountOfUnknownColumns = gridColumnNumber-amountOfColumnsInWeightMap;
+                    if(amountOfUnknownColumns > 0) {
+                        let accumulatedValue = getAccumulatedValueOfIndex(amountOfColumnsInWeightMap, approvedContainerGridColumns) || 0;
+                        const layoutWidth = approvedContainerRect.width;
+                        const missingColumnWidth = (layoutWidth-accumulatedValue)/amountOfUnknownColumns;
+                        while(amountOfColumnsInWeightMap++ < gridColumnNumber) {
+                            approvedContainerGridColumns.push(missingColumnWidth);
                         }
                     }
+
+
+                    const relatedStartX = foundRelatedElRect.left - approvedContainerRect.left;
+                    const relatedStartCol = Math.round(getInterpolatedIndexOfPositionInWeightMap(relatedStartX, approvedContainerGridColumns));
+
+                    if(relatedStartCol + relatedColumns + ghostColumns > gridColumnNumber) {
+                        verticalDirection = true;
+                    }
+                    
                     if (verticalDirection) {
                         placeAfter = (dragY > foundRelatedElRect.top + (foundRelatedElRect.height*.5));
                     }
@@ -502,56 +478,6 @@
                             rqaId = requestAnimationFrame(_moveGhostElement);
                         }
                     }
-
-                    
-                    if(vm.movingLayoutEntry.columnSpan !== vm.layoutColumnsInt) {
-                        
-                        const oldForceLeft = vm.movingLayoutEntry.forceLeft;
-                        const oldForceRight = vm.movingLayoutEntry.forceRight;
-
-                        var newValue = (dragX < targetRect.left);
-                        if(newValue !== oldForceLeft) {
-                            vm.movingLayoutEntry.forceLeft = newValue;
-                            if(oldForceRight) {
-                                vm.movingLayoutEntry.forceRight = false;
-                                if(ghostElIndicateForceRight) {
-                                    ghostEl.removeChild(ghostElIndicateForceRight);
-                                    ghostElIndicateForceRight = null;
-                                }
-                            }
-                            vm.blockEditorApi.internal.setDirty();
-                            vm.movingLayoutEntry.$block.__scope.$evalAsync();// needed for the block to be updated
-                            $scope.$evalAsync();
-
-                            // Append element for indication, as angularJS lost connection:
-                            if(newValue === true) {
-                                ghostElIndicateForceLeft = document.createElement("div");
-                                ghostElIndicateForceLeft.className = "indicateForceLeft";
-                                ghostEl.appendChild(ghostElIndicateForceLeft);
-                            } else if(ghostElIndicateForceLeft) {
-                                ghostEl.removeChild(ghostElIndicateForceLeft);
-                                ghostElIndicateForceLeft = null;
-                            }
-                        }
-
-                        newValue = (dragX > targetRect.right) && (vm.movingLayoutEntry.forceLeft !== true);
-                        if(newValue !== oldForceRight) {
-                            vm.movingLayoutEntry.forceRight = newValue;
-                            vm.blockEditorApi.internal.setDirty();
-                            vm.movingLayoutEntry.$block.__scope.$evalAsync();// needed for the block to be updated
-                            $scope.$evalAsync();
-
-                            // Append element for indication, as angularJS lost connection:
-                            if(newValue === true) {
-                                ghostElIndicateForceRight = document.createElement("div");
-                                ghostElIndicateForceRight.className = "indicateForceRight";
-                                ghostEl.appendChild(ghostElIndicateForceRight);
-                            } else if(ghostElIndicateForceRight) {
-                                ghostEl.removeChild(ghostElIndicateForceRight);
-                                ghostElIndicateForceRight = null;
-                            }
-                        }
-                    }
                 }
             }
 
@@ -589,13 +515,6 @@
                     
                     const oldIndex = evt.oldIndex;
                     vm.movingLayoutEntry = contextVM.getLayoutEntryByIndex(oldIndex);
-                    if(vm.movingLayoutEntry.forceLeft ||  vm.movingLayoutEntry.forceRight) {
-                        // if one of these where true before, then we made a change here:
-                        vm.blockEditorApi.internal.setDirty();
-                    }
-                    vm.movingLayoutEntry.forceLeft = false;
-                    vm.movingLayoutEntry.forceRight = false;
-                    vm.movingLayoutEntry.$block.__scope.$evalAsync();// needed for the block to be updated
 
                     ghostEl = evt.item;
                     vm.containedPropertyEditorProxies = Array.from(ghostEl.querySelectorAll('slot[data-is-property-editor-proxy]')).map(x => x.getAttribute('name'));
@@ -641,15 +560,6 @@
                     window.removeEventListener('dragover', _onDragMove);
                     vm.blockEditorApi.internal.exitDraggingMode();
 
-                    if(ghostElIndicateForceLeft) {
-                        ghostEl.removeChild(ghostElIndicateForceLeft);
-                        ghostElIndicateForceLeft = null;
-                    }
-                    if(ghostElIndicateForceRight) {
-                        ghostEl.removeChild(ghostElIndicateForceRight);
-                        ghostElIndicateForceRight = null;
-                    }
-
                     // ensure not-allowed indication is removed.
                     if(_lastIndicationContainerVM) {
                         _lastIndicationContainerVM.hideNotAllowed();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
index d5b3ce5474..abc1ec5016 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
@@ -190,20 +190,6 @@
         vm.mouseLeaveArea = function() {
             vm.isHoveringArea = false;
         }
-        vm.toggleForceLeft = function() {
-            vm.layoutEntry.forceLeft = !vm.layoutEntry.forceLeft;
-            if(vm.layoutEntry.forceLeft) {
-                vm.layoutEntry.forceRight = false;
-            }
-            vm.blockEditorApi.internal.setDirty();
-        }
-        vm.toggleForceRight = function() {
-            vm.layoutEntry.forceRight = !vm.layoutEntry.forceRight;
-            if(vm.layoutEntry.forceRight) {
-                vm.layoutEntry.forceLeft = false;
-            }
-            vm.blockEditorApi.internal.setDirty();
-        }
 
         // Block sizing functionality:
         let layoutContainer = null;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css
index 962126b969..a095fb438c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css
@@ -10,18 +10,6 @@
     --umb-block-grid__layout-item-calc: calc(var(--umb-block-grid--item-column-span) / var(--umb-block-grid--grid-columns));
     width: calc(var(--umb-block-grid__layout-item-calc) * 100%);
 }
-.umb-block-grid__layout-item[data-force-left] {
-    align-self: flex-start;
-}
-.umb-block-grid__layout-item[data-force-left]::before {
-    content: '';
-    flex-basis: 100%;
-    height: 0;
-}
-.umb-block-grid__layout-item[data-force-right] {
-    margin-left: auto;
-    align-self: flex-end;
-}
 
 
 .umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css
index 492b5f1e94..f6fe596b5c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css
@@ -14,12 +14,6 @@
     grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
     grid-row: span var(--umb-block-grid--item-row-span, 1);
 }
-.umb-block-grid__layout-item[data-force-left] {
-    grid-column-start: 1;
-}
-.umb-block-grid__layout-item[data-force-right] {
-    grid-column-start: calc(1 + var(--umb-block-grid--grid-columns) - var(--umb-block-grid--item-column-span));
-}
 
 
 .umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
diff --git a/src/Umbraco.Web.UI/Views/Partials/blockgrid/items.cshtml b/src/Umbraco.Web.UI/Views/Partials/blockgrid/items.cshtml
index 2831c1462e..2703fa5701 100644
--- a/src/Umbraco.Web.UI/Views/Partials/blockgrid/items.cshtml
+++ b/src/Umbraco.Web.UI/Views/Partials/blockgrid/items.cshtml
@@ -7,8 +7,7 @@
 <div class="umb-block-grid__layout-container">
     @foreach (var item in Model)
     {
-        bool attrForceLeft = item.ForceLeft;
-        bool attrForceRight = item.ForceRight;
+        
         <div
             class="umb-block-grid__layout-item"
             data-content-element-type-alias="@item.Content.ContentType.Alias"
@@ -16,8 +15,6 @@
             data-element-udi="@item.ContentUdi"
             data-col-span="@item.ColumnSpan"
             data-row-span="@item.RowSpan"
-            @(attrForceLeft ? "data-force-left" : null)
-            @(attrForceRight ? "data-force-right" : null)
             style=" --umb-block-grid--item-column-span: @item.ColumnSpan; --umb-block-grid--item-row-span: @item.RowSpan; ">
             @{
                 var partialViewName = "blockgrid/Components/" + item.Content.ContentType.Alias;