umbraco · Zeegaan · Nov 8, 2022 · Nov 7, 2022
diff --git a/src/Umbraco.Core/EmbeddedResources/BlockGrid/area.cshtml b/src/Umbraco.Core/EmbeddedResources/BlockGrid/area.cshtml
@@ -0,0 +1,10 @@
+@using Umbraco.Extensions
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridArea>
+
+<div class="umb-block-grid__area"
+     data-area-col-span="@Model.ColumnSpan"
+     data-area-row-span="@Model.RowSpan"
+     data-area-alias="@Model.Alias"
+     style="--umb-block-grid--grid-columns: @Model.ColumnSpan;--umb-block-grid--area-column-span: @Model.ColumnSpan; --umb-block-grid--area-row-span: @Model.RowSpan;">
+    @await Html.GetBlockGridItemsHtmlAsync(Model)
+</div>
diff --git a/src/Umbraco.Core/EmbeddedResources/BlockGrid/areas.cshtml b/src/Umbraco.Core/EmbeddedResources/BlockGrid/areas.cshtml
@@ -8,12 +8,6 @@
      style="--umb-block-grid--area-grid-columns: @(Model.AreaGridColumns?.ToString() ?? Model.GridColumns?.ToString() ?? "12");">
     @foreach (var area in Model.Areas)
     {
-        <div class="umb-block-grid__area"
-         data-area-col-span="@area.ColumnSpan"
-         data-area-row-span="@area.RowSpan"
-         data-area-alias="@area.Alias"
-         style="--umb-block-grid--grid-columns: @area.ColumnSpan;--umb-block-grid--area-column-span: @area.ColumnSpan; --umb-block-grid--area-row-span: @area.RowSpan;">
-            @await Html.GetBlockGridItemsHtmlAsync(area)
-        </div>
+        @await Html.GetBlockGridItemAreaHtmlAsync(area)
     }
 </div>
diff --git a/src/Umbraco.Infrastructure/Migrations/Upgrade/UmbracoPlan.cs b/src/Umbraco.Infrastructure/Migrations/Upgrade/UmbracoPlan.cs
@@ -5,7 +5,6 @@
 using Umbraco.Cms.Infrastructure.Migrations.Upgrade.Common;
 using Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_10_0_0;
 using Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_10_2_0;
-using Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_10_3_0;
 using Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_8_0_0;
 using Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_8_0_1;
 using Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_8_1_0;
@@ -296,6 +295,9 @@ protected void DefinePlan()
         To<AddHasAccessToAllLanguagesColumn>("{79D8217B-5920-4C0E-8E9A-3CF8FA021882}");
 
         // To 10.3.0
-        To<AddBlockGridPartialViews>("{56833770-3B7E-4FD5-A3B6-3416A26A7A3F}");
+        To<V_10_3_0.AddBlockGridPartialViews>("{56833770-3B7E-4FD5-A3B6-3416A26A7A3F}");
+
+        // To 10.4.0
+        To<V_10_4_0.AddBlockGridPartialViews>("{3F5D492A-A3DB-43F9-A73E-9FEE3B180E6C}");
     }
 }
diff --git a/src/Umbraco.Infrastructure/Migrations/Upgrade/V_10_4_0/AddBlockGridPartialViews.cs b/src/Umbraco.Infrastructure/Migrations/Upgrade/V_10_4_0/AddBlockGridPartialViews.cs
@@ -0,0 +1,29 @@
+using Umbraco.Cms.Infrastructure.Templates.PartialViews;
+
+namespace Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_10_4_0;
+
+public class AddBlockGridPartialViews : MigrationBase
+{
+    private readonly IPartialViewPopulator _partialViewPopulator;
+    private const string FolderPath = "/Views/Partials/blockgrid";
+    private static readonly string[] _filesToAdd =
+    {
+        "area.cshtml",
+    };
+
+    public AddBlockGridPartialViews(IMigrationContext context, IPartialViewPopulator partialViewPopulator) : base(context)
+        => _partialViewPopulator = partialViewPopulator;
+
+    protected override void Migrate()
+    {
+        var embeddedBasePath = _partialViewPopulator.CoreEmbeddedPath + ".BlockGrid";
+
+        foreach (var fileName in _filesToAdd)
+        {
+            _partialViewPopulator.CopyPartialViewIfNotExists(
+                _partialViewPopulator.GetCoreAssembly(),
+                $"{embeddedBasePath}.{fileName}",
+                $"{FolderPath}/{fileName}");
+        }
+    }
+}
diff --git a/src/Umbraco.Web.Common/Extensions/BlockGridTemplateExtensions.cs b/src/Umbraco.Web.Common/Extensions/BlockGridTemplateExtensions.cs
@@ -14,6 +14,7 @@ public static class BlockGridTemplateExtensions
     public const string DefaultTemplate = "default";
     public const string DefaultItemsTemplate = "items";
     public const string DefaultItemAreasTemplate = "areas";
+    public const string DefaultItemAreaTemplate = "area";
 
     #region Async
 
@@ -60,6 +61,20 @@ public static async Task<IHtmlContent> GetBlockGridItemsHtmlAsync(this IHtmlHelp
     public static async Task<IHtmlContent> GetBlockGridItemAreasHtmlAsync(this IHtmlHelper html, BlockGridItem item, string template = DefaultItemAreasTemplate)
         => await html.PartialAsync(DefaultFolderTemplate(template), item);
 
+    public static async Task<IHtmlContent> GetBlockGridItemAreaHtmlAsync(this IHtmlHelper html, BlockGridArea area, string template = DefaultItemAreaTemplate)
+        => await html.PartialAsync(DefaultFolderTemplate(template), area);
+
+    public static async Task<IHtmlContent> GetBlockGridItemAreaHtmlAsync(this IHtmlHelper html, BlockGridItem item, string areaAlias, string template = DefaultItemAreaTemplate)
+    {
+        BlockGridArea? area = item.Areas.FirstOrDefault(a => a.Alias == areaAlias);
+        if (area == null)
+        {
+            return new HtmlString(string.Empty);
+        }
+
+        return await GetBlockGridItemAreaHtmlAsync(html, area, template);
+    }
+
     #endregion
 
     #region Sync
@@ -95,6 +110,17 @@ public static IHtmlContent GetBlockGridItemsHtml(this IHtmlHelper html, IEnumera
     public static IHtmlContent GetBlockGridItemAreasHtml(this IHtmlHelper html, BlockGridItem item, string template = DefaultItemAreasTemplate)
         => html.Partial(DefaultFolderTemplate(template), item);
 
+    public static IHtmlContent GetBlockGridItemAreaHtml(this IHtmlHelper html, BlockGridArea area, string template = DefaultItemAreaTemplate)
+        => html.Partial(DefaultFolderTemplate(template), area);
+
+    public static IHtmlContent GetBlockGridItemAreaHtml(this IHtmlHelper html, BlockGridItem item, string areaAlias, string template = DefaultItemAreaTemplate)
+    {
+        BlockGridArea? area = item.Areas.FirstOrDefault(a => a.Alias == areaAlias);
+        return area != null
+            ? GetBlockGridItemAreaHtml(html, area, template)
+            : new HtmlString(string.Empty);
+    }
+
     #endregion
 
     private static string DefaultFolderTemplate(string template) => $"{DefaultFolder}{template}";

diff --git a/src/Umbraco.Web.UI/Views/Partials/blockgrid/area.cshtml b/src/Umbraco.Web.UI/Views/Partials/blockgrid/area.cshtml
@@ -0,0 +1,10 @@
+@using Umbraco.Extensions
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridArea>
+
+<div class="umb-block-grid__area"
+     data-area-col-span="@Model.ColumnSpan"
+     data-area-row-span="@Model.RowSpan"
+     data-area-alias="@Model.Alias"
+     style="--umb-block-grid--grid-columns: @Model.ColumnSpan;--umb-block-grid--area-column-span: @Model.ColumnSpan; --umb-block-grid--area-row-span: @Model.RowSpan;">
+    @await Html.GetBlockGridItemsHtmlAsync(Model)
+</div>
diff --git a/src/Umbraco.Web.UI/Views/Partials/blockgrid/areas.cshtml b/src/Umbraco.Web.UI/Views/Partials/blockgrid/areas.cshtml
@@ -8,12 +8,6 @@
      style="--umb-block-grid--area-grid-columns: @(Model.AreaGridColumns?.ToString() ?? Model.GridColumns?.ToString() ?? "12");">
     @foreach (var area in Model.Areas)
     {
-        <div class="umb-block-grid__area"
-         data-area-col-span="@area.ColumnSpan"
-         data-area-row-span="@area.RowSpan"
-         data-area-alias="@area.Alias"
-         style="--umb-block-grid--grid-columns: @area.ColumnSpan;--umb-block-grid--area-column-span: @area.ColumnSpan; --umb-block-grid--area-row-span: @area.RowSpan;">
-            @await Html.GetBlockGridItemsHtmlAsync(area)
-        </div>
+        @await Html.GetBlockGridItemAreaHtmlAsync(area)
     }
 </div>