Easy to use rich HTML backoffice previews for the Umbraco Block List and Block Grid editors.
License: MIT License
I'm Rick, and I'm a full stack lead software engineer from the UK.
I'm currently working as Lead Software Engineer for Wattle where I get to build websites and software. This means I'm working across tech stacks—C# .NET, SQL and Umbraco as well as HTML, CSS/Sass, JS/ES6+ and Node.
I'm a 2× Umbraco MVP, Certified Master and part of the Umbraco Community Sustainability Team.
2.0.2
14.2.0
Hello!
Love your work!
Block List Allowed Content Types values added in appSettings don't seem to be respected
It seems to just be Block Previews for all Block List, or none
There is also some strange behaviour if you have any URL/ Document Pickers or Dropdowns inside a block, and, when you start nesting block grids / lists
I can't give you good repro steps for that and it could be a 14 issue and not the package based on how it saves the Data Types? I can raise a seperate bug if I can figure it out
Also, "umbraco" seems to be prepended to stylesheet links for Block Grids when viewing a preview.
Again, could be 14, but, have a rewrite to sort this one out. This happens whether the css file path is /path, ./path, or ~/path
Add Content Type Aliases to the allowed content types for block list in appsettings
View the result
Adding the alias for an Element/Document type into this list should show the preview, and not show previews for other block lists
We have a set up that allows us to render a Block Grid in a Block List component, which is designed (currently) to allow us to render a two-column section in the list.
The problem is that the content in the Block Grid doesn't render at all in this situation, because the actual content is being substituted out for string in the AREA_TEMPLATE constant when in fact it needs to be rendered correctly in this instance.
I've resolved this by adding another ViewData entry called "blockGridPreview" in BackOfficeGridPreviewService and checking for that in the GetPreviewBlockGridItemAreasHtmlAsync extension method and friends. This will only be set if the Grid is the primary property type.
This will still not work if we have a Grid Block nested in a Grid Block for some reason (and why would you want to anyway).
A better solution may be to somehow scope the substitution that these extension methods do to the current "nesting level" and ensure it's only done if at the root of the tree.
There's a PR coming to resolve this.
v2.0.0RC2
14.1.1
Missing block-preview.html for v2.0.0RC2
Install nuget
See block-preview.html
1.8.4
13.3.2
I'm attempting to add some code to a razor file that should only render if it's being rendered in the backoffice.
I believe the approach in the past was to reference UmbracoContext.IsFrontEndUmbracoRequest().
I tried to use this but it actually returns true when a razor partial is rendered from the backoffice.
Add this to any razor file you are trying to render in the backoffice:
@if (!UmbracoContext.IsFrontEndUmbracoRequest())
{
<p>Hello Backoffice!</p>
}
I'd expect "Hello Backoffice!" to render only in the backoffice preview. It currently doesn't render anywhere. IsFrontEndUmbracoRequest() always returns true.
Is it possible to keep the light gray border from the Blocklist editor around the blocks with the padding to ensure each block is clear?
The red line should make it clear the blocks are separate
like this:
Not sure if this is related to package or Umbraco's internal BlockEditorConverter.
Value is passed as [{value: "A"}, {value: "B"}, {value: "C"}] to PreviewMarkup call.
Same value for the GetById call in the backoffice.
Also previewed as that value, so the conversion located in MultipleTextStringPropertyValueEditor is not happening.
1.8.3
13.2.2
If you nest block list editor in block grid, it will try render block list as block grid
create document with grid,
in grid create block which takes block list,
in block list create component which uses grid
LMK if you need any more information on it
Block list view is loaded as block list
The block preview doesn't work if you publish a release version and host it on linux (lots of angular errors in the back office)
If however you publish in debug mode then all works ok. I suspect it may be something to do with smidge.
Hi,
I just upgraded from v1.1.0 to v1.1.2, but now it seems like all my blocks are not rendering correctly anymore. I am running Umbraco 11.2.0 and see the following error in my console:
I did notice that there are now two app plugins folders so I tested with both files, but they both give the same issues
Is there anything else that I have to change to get the version working?
Files are not being copied from the nupkg.
Reason being the targets file inside buildTransitive folder of the nupkg isn't being consumed due to naming mismatch.
I have created a new Tabbed Container block. It has a single area that accepts only Tab Content blocks. I created a page with a Tabbed Container block and was able to add 2 Tab Content blocks, though it wasn't easy because the Circled Plus icon would nearly always open the Settings panel AND a panel to add Blocks (same level as the Tabbed Container block).
When debugging the view while navigating to that page on the front end, I could see that the Areas property had data, two items in this instance. The Column span property also had a value, 12.
When debugging the view while previewing in the backoffice, the Areas property had zero data and the column span property was 0.
This seems like it's an issue, but the preview does show the contents of the areas from other layout blocks. This makes me think the Areas property data is loaded later than it should be. When the Tabbed Container block view is called the Areas property is empty, which means I cannot render the tabs before rendering the tab contents.
I hope this makes sense.
Hi there,
It seems that the latest release has a dependency < 11.0.0 - is it possible to to get this upgraded to support Umbraco 11 and 12?
I am trying to use the package in my solution that runs on .NET 7.0 with Umbraco v12
Installed the package successfully and set the custom view for one of my components in a block list to the "block-preview.html".
I have a cs.html file in Views/Partials/blocklist/Components with the same filename as my component's alias.
I try to just render out a p-tag.
But this results in the following error:
And my component is now just empty when trying to add it to my block list.
I am a newbie so I might be missing something. Any help would be much appreciated!
1.8.4
13.2
When viewing the block preview in Umbraco - all blocks are returning
Something went wrong rendering a preview
Object Reference not set to an instance of an object.
Front end - blocks render fine - no null exception.
When we step through - the Model itself is null on the backend preview.
Umbraco 13.2 & latest blockpreview
No response
Hi,
I am new to this project and I am really impressed. But I have a couple of questions before making the final decision to use this great project or go down the custom written view route.
Many thanks
No response
I get this error with Umbraco.Community.BlockPreview 1.8.1 and Umbraco.CMS 13.2.0 on empty RTE-properties.
It works just fine with Umbraco.Community.BlockPreview 1.8.0 and Umbraco.CMS 13.1.0
System.NullReferenceException: Object reference not set to an instance of an object.
at Umbraco.Community.BlockPreview.Services.BackOfficeListPreviewService.GetMarkupForBlock(IPublishedContent page, BlockValue blockValue, String blockEditorAlias, ControllerContext controllerContext, String culture)
at Umbraco.Community.BlockPreview.Controllers.BlockPreviewApiController.PreviewMarkup(BlockValue data, Int32 pageId, String blockEditorAlias, Boolean isGrid, String culture)
1.8.4
13.2.2
When editing block with live editing enabled it will cause flickering of editor in background.
Add few blocks to block grid
modify one (best example when rte is in) and see editor in background is flickering
Editors post loading are not flickering but updating with required changes.
With the support for Content Blocks in the RichText Editor, it would be great to be able to have this supported as well. For reference, see here:
No response
I created a new empty project to try the BlockPreview. These are my steps:
When editing the Home page in the back office the Two Column Layout displays the message "Something went wrong rendering a preview".
The blocks Headline, Image and Rich Text display without any issues. Am I missing something?
the settings tab always opens when you want to add new content inside a block
After succesfull install and build i get the following error when viewing a page in the backoffice, with a block grid item
Error rendering preview for block
System.ArgumentNullException: Value cannot be null. (Parameter 'name')
at System.Globalization.CultureInfo..ctor(String name, Boolean useUserOverride)
at Umbraco.Community.BlockPreview.Services.BackOfficePreviewService.SetCulture(String culture)
at Umbraco.Community.BlockPreview.Services.BackOfficeGridPreviewService.GetMarkupForBlock(BlockValue blockValue, ControllerContext controllerContext, String culture)
at Umbraco.Community.BlockPreview.Controllers.BlockPreviewApiController.PreviewMarkup(BlockValue data, Int32 pageId, Boolean isGrid, String culture)
I have set the custom view as described
I have set a culture as well (as a desperate attempt :))
Hi, I noticed that in v1.6.0 some styling was added (4105ea6#diff-e8d7af189a8df476ef7a1ef4ef7b0fca6ca87ab09224c07ed09e05cb3b75a7f2)
The same .alert classes are used by bootstrap (https://getbootstrap.com/docs/5.3/components/alerts/).
My previews changed from :
to
Could you perhaps update your classes to a more scoped naming?
2.0.2
14.2
My current setup:
Ubuntu 24.04
VS Code 1.92.2
.NET 8.0.108
Umbraco 14.2
When trying to run my Umbraco website with Block Preview, in the back office I get a 404 error on /app_plugins/Community.BlockPreview/assets.js. This error does not appear in Windows (I quickly tests with a VM, didn't investigated much in Windows). I assume it might be caused by the case-sensivity of the Linux file system.
Just login to the back office of an Umbraco website that uses Block Preview
Go to Content and select any content page that uses Block Preview
Open Code Inspector (F12 generally) in your browser. Check Console for error message.
Block Preview should work properly in an Linux environment
When creating a new page with a content template, it would be convenient to preview blocks without having to save the page initially.
When utilizing a content template with sample content in a block grid to create a new page, you may encounter the alert: "Cannot create a preview: the page must be saved before a preview can be created.". Its purpose is to inform you that although there is sample content within the block grid, it won't be visible on the CMS until you save the page (publishing is not necessary, just saving is sufficient). This is the designed behavior for the BlockPreview component.
It would be advantageous to enable previewing blocks without having to save the page initially.
Hi,
Firstly, thanks for the excellent package. It's been a massive help.
We have a site which has some block grids nested in a block grid. We're using this package to give editors a friendlier editing experience in the back office whereby they can see what they are changing. When running the site on Umbraco 12 both the front end and back office are rendering fine.
After upgrading the site to v13 the front end is rendering fine, but nothing is rendering in the back office. Having dug into it a little I found that the models being passed into the component views were null.
As the front end is rendering fine I suspect that it's a problem with this package, but I may be wrong on that. I'm not sure if they maybe changed the grid data format in v13.
I also tried running the test sites associated with the package. Again the v12 site was working fine, but when previewing the homepage of the v13 site all of the RTE blocks are displaying [Object object] rather than the RTE contents.
I've attached a minimal site that demos the issue. If you run the site and visit the homepage you'll see the quick links being output. If you however try and edit the homepage in the backoffice you'll see there is a blank space where the quick links should be output. I've reused the login details from the packages test sites for my test site.
I'd be grateful if you could have a look into this please.
Thanks
Richard
1.8.3
13.2.2
After updating from 1.8.2 to 1.8.3, the block list previews have stopped working.
Downgrading back to 1.8.2 fixes the issue, and the previews render as expected.
There are no errors in the browser console, or the Umbraco log, but I can see that the preview markup API response is empty:
Whereas on 1.8.2, the response looks like this:
I haven't tried reproducing this on a fresh install yet, will update when I do.
Previews should render.
I spend some time debugging our solution to notice this bit of docs is kinda incorrect: https://github.com/rickbutterfield/Umbraco.Community.BlockPreview#grid-specific-setup
If you replace all block rendering methods with preview ones, you will have no render of nested elements.
So I played around and noticed, this when I set:
is only case when i get all preview render correctly.
So based on my observation, it doesnt work if you use Preview Methods everywhere, but it works perfectly when you use the Preview method on Root view for current preview.
When outputting culture specific content (currency format, dictionary values) inside the blocks Razor views,
this does not seem to apply the variant's culture.
1.8.4
13.4.1
When adding content to a page, adding a layout produces an outlined box when moused over, but no "Add content" button within it. It is therefore impossible to create content within a layout.
When it "Sort mode" it is impossible to drag a content item into a layout.
Create a single column layout block and an RTE block as per Umbraco docs.
Add the BlockGrid containing the new blocks to a page's docType.
Ensure the Grid-specific setup instructions are carried out.
Ensure the BlockGrid CSS is attached to the site's master template.
In the Content tree, open the page with the BlockGrid and add the single column layout. Then attempt to add an RTE block, or anything else inside the single column layout.
Add an RTE block underneath the layout, put the property editor into "Sort mode" and attempt to drag the RTE block into the single column layout.
Expected result would be to see an "Add content" button inside the single column layout on mousover, and to be able to add blocks within it and rearrange as normal.
Actual result, no "Add content" button available and impossible to drag blocks into the layout in "Sort mode".
I should point out, just in case there's a typo in the code, that I'm developing on Linux Mint.
On Umbraco v12.1.2 with the latest release:
I've installed and configured some of the Blocks as detailed in the readme, and when I view a content node in the Backoffice I get an undefined error on the following line in the controller (line 22):
TypeError: Cannot read properties of undefined (reading 'model')
at Object.<anonymous> (block-preview.controller.js?d=638293026850000000:22:113)
at Object.invoke (angular.js:5208:16)
at S.instance (angular.js:11814:24)
at p (angular.js:10627:33)
at g (angular.js:9942:13)
at angular.js:9807:30
at Object.link (angular.js:29993:9)
at angular.js:1391:15
at Ca (angular.js:11376:9)
at p (angular.js:10695:11) '<div class="umb-block-list__block--view ng-scope" ng-include="model.view">'
The line throwing the error is this:
// There must be a better way to do this...
$scope.blockEditorAlias = $scope.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.vm.model.editor;
I don't think there's anything special about this block, it's not nested in anything either. The last $parent is an object, but the vm property isn't.
Hi @rickbutterfield, first I want to highlight fantastic work!
I want to let you know that I experience an issue, which should be relatively easy to fix.
When I click a Block that is placed within a Block Area, when it opens both the clicked Block and the parent Blocks.
This is caused by the click event propagating, I think the immediate fix would be to add a ng-click="$event.stopPropagation()" on your Area slots.
As well it would be nice to support the Single Area Rendering:
@await Html.GetBlockGridItemAreaHtmlAsync(Model, "myAreaAlias")
It was introduced relatively late and I'm not sure if we have it documented, sorry for that.
It is used for the inspiration block Partial View in the example website project:
https://github.com/umbraco/Umbraco.BlockGrid.Example.Website
Again thanks for the well-made package, leading the way for how this is done!
2.0.2
14.2
My current setup:
Ubuntu 24.04
VS Code 1.92.2
.NET 8.0.108
Umbraco 14.2
When trying to run my Umbraco website with Block Preview, in the back office I get a 404 error on /app_plugins/Community.BlockPreview/assets.js. This error does not appear in Windows (I quickly tests with a VM, didn't investigated much in Windows). I assume it might be caused by the case-sensivity of the Linux file system.
Just login to the back office of an Umbraco website that uses Block Preview
Go to Content and select any content page that uses Block Preview
Open Code Inspector (F12 generally) in your browser. Check Console for error message.
Block Preview should work properly in an Linux environment
1.10.0
13.4.1
After updating to v1.10.0, the block previews are no longer shown.
There are no errors in the browser's console, or the Umbraco log.
v1.9.1 works as expected:
The above screenshots are taken from a project that uses the Block List, but I have also observed the issue on a project that uses the Block Grid.
No response
As per the opinionated package starter, convert the package to be a Razor Class Library as per some of the discussions on the PR:
So to explain why RCLs are awesome, I think one of the key takeways is that when you're working locally in Visual Studio or similar, the assets from the package is added to your project virtually. Meaning that aren't physically on disk inside your project - they are instead pulled virtually from the NuGet package and made to appear as if they were inside your project. For one, this makes it easier to work in packages and version control, since you don't have to commit the assets to your repo.
Instead of hardcoding the path for views to "/Views/Partials/blockgrid/Components/{contentAlias}.cshtml" or "/Views/Partials/blocklist/Components/{contentAlias}.cshtml", use the Razor Engine to find the view.
Changing line 120 in BackOfficePreviewService.cs:
string partialPath = _razorViewEngine.FindView(controllerContext, contentAlias, false).ViewName;
** I was going to create a pull request, but I was prompted to merge into a branch first and I wasn't sure how you wanted to work with pull requests.
Hi,
i just created a pull request #17 to fix a null exception that can be thrown by the code when working with invariant content where the language is not set on the variants language property, but we need to use the culture set on the node (or that part of the content tree).
I was not sure if I should have started this by creating an issue first. Anyways,I like your module and hope this change will help more people.
David
Currently the installation instructions are for older versions of Umbraco that had a startup.cs. Modern versions now conform to the Minimal Hosting Requirements protocol and so don't use a startup.cs. Could you please add instructions as to how to get it working on modern versions? We're not all C# ninjas capable of making the switch unaided ;)
Thanks.
No response
Can we get clarification of version schema here?
As based on number 1.7 I would assume there would be no breaking change between 1.6 and 1.7 😓
1.10.3
13.4.1
When an element type (block) within a Block List contains a Multi-Node Tree Picker property editor, the preview of the first block in the block list is rendered for all other blocks. Even after removing the block containing the multi-node tree picker and re-saving the content, the block previews are still duplicated.
Just a note, in testing this, I was using a clean install of Umbraco with the official Umbraco Starter Kit added to it.
~/App_Plugins/Umbraco.Community.BlockPreview/views/block-preview.html).
Views/Partials/blocklist/Components/.@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>;
@using ContentModels = Umbraco13Demo.Web.Models.PublishedContent;
@{
var blogpostBlock = (BlogpostBlock)Model.Content;
var blogpost = blogpostBlock.Content as ContentModels.Blogpost;
}
<div class="component blogpost">
<h4>@blogpost.Name</h4>
</div>
Each block should render a preview using the HTML defined for that block's razor file. Instead, the first block's preview is duplicated for all other blocks.
Even after removing the block containing the multi-node tree picker, the previews still seem to be duplicated.
IMPORTANT NOTE: This bug does not occur in a Block Grid property editor.
I'm not sure if this is the right place, but here goes
when i add AddBlockPreview() to the Startup.cs file, before AddWebsite(), as stated in the docs, i get the following error on build.
error CS1061: 'IUmbracoBuilder' does not contain a definition for 'AddBlockPreview' and no accessible extension method 'AddBlockPreview' accepting a first argument of type 'IUmbracoBuilder' could be found (are you missing a using directive or an assembly reference?)
Im running Umbraco 10.5.1. and blockpreview 1.2.1 in VSCode on Mac
I'm using the plugin from Nathan called Nesting Contently:
https://github.com/nathanwoulfe/NestingContently
This makes the blocks get hidden with IsVisible, is there a way to hook in and see when the request is coming from the backoffice?
At the moment the block gets removed from the backoffice entirely
Hey Rick!
I've followed your readme and my blocks have completely dissapeared with a ton of angularjs errors in the console.
This is using the Block List Editor on Umbraco 10.4.0
I also cannot see block-[grid|list]-preview.html only block-preview.html
This is how I have configured the blocks:
And this is the error in the console:
Any help figuring this out would be amazing!
Because the App_Plugins directory has been removed since upgrading to version 1.7, there's no way to choose the block-preview.html template when configuring blocks.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.