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

src/Umbraco.Core/EmbeddedResources/BlockGrid/items.cshtml

@@ -7,17 +7,13 @@
 <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"
             data-content-element-type-key="@item.Content.ContentType.Key"
             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;

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>

src/Umbraco.Core/EmbeddedResources/Lang/en.xml

@@ -2796,12 +2796,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>

src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml

@@ -2899,12 +2899,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>

src/Umbraco.Core/Models/Blocks/BlockGridItem.cs

@@ -81,18 +81,6 @@ public BlockGridItem(Udi contentUdi, IPublishedElement content, Udi settingsUdi,
         [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>

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>();
 }

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockGridPropertyValueConverter.cs

@@ -49,8 +49,6 @@ public override bool IsConverter(IPublishedPropertyType propertyType)
 
                     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 =>

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 {

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}};

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}};

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"