Add sync rendering extensions for block grid and async ones for block list by kjac · Pull Request #13168 · umbraco/Umbraco-CMS

kjac · 2022-10-11T11:56:48Z

Prerequisites

I have added steps to test this contribution in the description below

Description

As the title says: This PR aligns the rendering extensions for block grid and block list by:

Adding synchronous options for block grid
Adding asynchronous options for block list

Testing this PR

Create content with block grid and block list.
Render both synchronous and asynchronous using the appropriate extension methods (see example templates below).
Verify that the synchronous and asynchronous rendering outputs are identical.

Docs for block grid default rendering: https://our.umbraco.com/documentation/Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Block-Editor/Block-Grid-Editor/#1-default-rendering

Docs for block list default rendering: https://our.umbraco.com/documentation/Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Block-Editor/Block-List-Editor/#1-default-rendering

Note: For block list backwards compatibility concerns, the docs are not slated for an update to include async block list rendering.

Sample page template

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Core.Models.Blocks
@{
    Layout = null;
    var blockListModel = Model.Value<BlockListModel>("list");
    var blockGridModel = Model.Value<BlockGridModel>("grid");
}

<html>
<body>

<h2>Block list rendering</h2>
@await Html.GetBlockListHtmlAsync(blockListModel)
<hr/>
@Html.GetBlockListHtml(blockListModel)

<h2>Block grid rendering</h2>
@await Html.GetBlockGridHtmlAsync(blockGridModel)
<hr/>
@Html.GetBlockGridHtml(blockGridModel)

</body>
</html>

Sample template for block list element rendering

@using Umbraco.Cms.Core.Models.Blocks
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockListItem>

<div>
    <ul>
        <li><strong>@Model.Content.ContentType.Alias</strong></li>
        @foreach (var property in Model.Content.Properties)
        {
            <li>@property.Alias = @property.GetValue()</li>
        }
        @if (Model.Settings != null)
        {
            foreach (var property in Model.Settings.Properties)
            {
                <li>@property.Alias = @property.GetValue()</li>
            }
        }
    </ul>
</div>

Sample template for block grid element rendering

@using Umbraco.Cms.Core.Models.Blocks
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockGridItem>

<div>
    <ul>
        <li><strong>@Model.Content.ContentType.Alias</strong></li>
        <li><em>@Model.RowSpan rows, @Model.ColumnSpan columns</em></li>
        @foreach (var property in Model.Content.Properties)
        {
            <li>@property.Alias = @property.GetValue()</li>
        }
        @if (Model.Settings != null)
        {
            foreach (var property in Model.Settings.Properties)
            {
                <li>@property.Alias = @property.GetValue()</li>
            }
        }
    </ul>

    @await Html.GetBlockGridItemAreasHtmlAsync(Model)
</div>

… list

Zeegaan · 2022-10-12T08:06:48Z

LGTM 👍

* Fix broken selectable state for list view items (#13148) * Add sync rendering extensions for block grid and async ones for block list (#13168) * Re-add IsPackable to Umbraco.Tests.Integration * Fix for potential race condition in packages search (#13153) * search on input allowing to wait for copy/paste etc * invoke resourcePromise() with correct parameters * return the xhrStatus allowing the caller to check if the request was aborted * fix: send in canceler.promise to allow the timeout to work * catch any errors and ignore aborts if they happen * move the logic to handle cancellations outside Angulars $scope.$apply * remove file accidentally committed * Fix for potential race condition in packages search (#13153) * search on input allowing to wait for copy/paste etc * invoke resourcePromise() with correct parameters * return the xhrStatus allowing the caller to check if the request was aborted * fix: send in canceler.promise to allow the timeout to work * catch any errors and ignore aborts if they happen * move the logic to handle cancellations outside Angulars $scope.$apply * remove file accidentally committed (cherry picked from commit 4a412bb) * V10: Fix request accessor memory leak (#13152) * Dispose OnChange event registration when disposing the notification handler * Ensure that the ApplicationUrl is only initialized once Since notifications handlers are transient,_hasAppUrl and _isInit defaults to false on every request causing it to always be called. * Make notification handler and EnsureApplicationUrl internal * Add missing ForceLeft and ForceRight (#13190) * V10: Fix request accessor memory leak (#13152) * Dispose OnChange event registration when disposing the notification handler * Ensure that the ApplicationUrl is only initialized once Since notifications handlers are transient,_hasAppUrl and _isInit defaults to false on every request causing it to always be called. * Make notification handler and EnsureApplicationUrl internal * Add missing ForceLeft and ForceRight (#13190) * Pass the node property to umb-property & umb-property-editor (#13151) Co-authored-by: Zeegaan <nge@umbraco.dk> * V10: 13099 fix validation error (#13170) * Add validation error message to Viewpicker * Add help-inline class to make validation-text red Co-authored-by: Zeegaan <nge@umbraco.dk> * move clear:both; to the flexbox example (#13194) * remove pointer-events from Image, to make drag n' drop work on firefox. (#13193) * area permission min-max inputs width increase (#13195) * Fix tags with CSV storage type (#13188) * Fixing null check as default(NRT) is null => default(configuration?.Delimiter) is also null and we were counting on it being the same as default(char) * Adding tests to check cases with multiple tags (or tag made of comma separated values) * Fix tags with CSV storage type (#13188) * Fixing null check as default(NRT) is null => default(configuration?.Delimiter) is also null and we were counting on it being the same as default(char) * Adding tests to check cases with multiple tags (or tag made of comma separated values) * Add documentation for default block grid partial views in the rendering extension methods (#13184) * Add data-element to umb property so we can find it (#13199) Co-authored-by: Zeegaan <nge@umbraco.dk> * Add data-element to umb property so we can find it (#13199) Co-authored-by: Zeegaan <nge@umbraco.dk> * V10/bugfix/create simple package test (#13162) * Fixed assert to hopefully find the package each time so it isnt flaky anymore * Updated so it retries 5 times instead of 2 * Dont submit html-report * Dont have output defined in npm run * Copy over playwright trace.zip files before publishing * Updated assert so it looks after the package in the table * updated so we get the first fail as the trace file * Bumped version for testhelpers * Updated so the test checks if the package actually exists. Added a wait that checks if the created packages button is visible * Updated package lock * Fixed so it now calls the correct testhelper Co-authored-by: Zeegaan <nge@umbraco.dk> * Merge BjarneF fix into 10.3 (#13220) Co-authored-by: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com> * make Area fit within block row (#13221) * 10.3.0-RC: Change grid area input to number + change generic label (#13203) Co-authored-by: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com> * move below center, to make room (#13222) * highlight areas in dragging-mode for modern browsers (#13224) * Collect new .xml language files from different sources (#13212) * Collecting new language files from different sources * Apply suggestions from review * Adding TODO for merging the language files locations to one when packages are not concerned * Collect new .xml language files from different sources (#13212) * Collecting new language files from different sources * Apply suggestions from review * Adding TODO for merging the language files locations to one when packages are not concerned * Resync editors if content model changed (#13230) * Disable BlockGridEditor (#13229) * Disable BlockGridEditor * Fix typeloader test * Update src/Umbraco.Core/Models/Blocks/BlockGridItem.cs Co-authored-by: Kenn Jacobsen <kja@umbraco.dk> * Apply suggestions from code review Co-authored-by: Kenn Jacobsen <kja@umbraco.dk> Co-authored-by: Kenn Jacobsen <kja@umbraco.dk> * V10.4: Re-enable block grid editor (#13231) * Revert "Disable BlockGridEditor (#13229)" This reverts commit 4e9aa8d. * Re-do xml comments fix * Fix nullable reference error * Fix acceptance test package.json and package-lock.json * Re-add wait-on Co-authored-by: Kenn Jacobsen <kja@umbraco.dk> Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Co-authored-by: Zeegaan <nge@umbraco.dk> Co-authored-by: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com> Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com> Co-authored-by: Elitsa Marinovska <21998037+elit0451@users.noreply.github.com> Co-authored-by: Andreas Zerbst <73799582+andr317c@users.noreply.github.com> Co-authored-by: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com> Co-authored-by: Matt Darby <matt@darby.digital>

Add sync rendering extensions for block grid and async ones for block…

e40cb0c

… list

kjac requested a review from Zeegaan October 11, 2022 11:59

Zeegaan merged commit b8c73e7 into release/10.3 Oct 12, 2022

Zeegaan deleted the v10/feature/block-grid-and-list-rendering-alignment-take-two branch October 12, 2022 08:06

Zeegaan added release/10.3.0 type/bug and removed type/bug labels Oct 12, 2022

nikolajlauridsen added release/11.0.0 release/10.4.0 labels Oct 18, 2022

kjac mentioned this pull request Nov 7, 2022

Move block grid single area rendering to its own dedicated view #13359

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add sync rendering extensions for block grid and async ones for block list#13168

Add sync rendering extensions for block grid and async ones for block list#13168
Zeegaan merged 1 commit intorelease/10.3from
v10/feature/block-grid-and-list-rendering-alignment-take-two

kjac commented Oct 11, 2022

Uh oh!

Zeegaan commented Oct 12, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

kjac commented Oct 11, 2022

Prerequisites

Description

Testing this PR

Sample page template

Sample template for block list element rendering

Sample template for block grid element rendering

Uh oh!

Zeegaan commented Oct 12, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants