Create ready block

Following this instruction's steps, you can create a new banner with the video on the background. You can recreate this block using the code snippets provided in the guide, or modify the steps to tailor it to your specific needs.

Expected result

Your Headline

Your subtitle

In order to create a new banner, for example, Banner With Video, we need a back office preview (a Lit custom view registered in an “umbraco-package.json” file), an element type, and a front-end view.

Step 1. Back office preview

Open the project folder
Open the “App_Plugins” folder
Create a folder for custom blocks, for example, name “CustomBlockView”. If you already have this folder, open it.
Create a file named “banner-with-video.custom-view.js”
Copy the following code and paste it into the file

import { html, nothing, LitElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { getGlobalStylesheetHrefs } from '/App_Plugins/UmbracoBlockGrid/BlockViews/shared/global-styles.js';
import { renderGlobalStylesheetLinks } from '/App_Plugins/UmbracoBlockGrid/BlockViews/shared/global-stylesheet-links.js';
import { resolveSingleMedia } from '/App_Plugins/UmbracoBlockGrid/BlockViews/shared/media-resolver.js';
import { getLicenseGateState, renderLicenseBanner } from '/App_Plugins/UmbracoBlockGrid/BlockViews/shared/license-gate.js';

export class BannerWithVideoCustomView extends UmbElementMixin(LitElement) {
    static properties = {
        content: { attribute: false },
    };

    #stylesheetHrefs = [];
    #videoUrl;
    #licenseState = { showBanner: false, message: '' };

    // Render into the light DOM so the block uses the site's real Bootstrap and theme classes.
    createRenderRoot() {
        return this;
    }

    willUpdate(changedProperties) {
        if (changedProperties.has('content')) {
            this.#loadData();
        }
    }

    async #loadData() {
        const [licenseState, video, stylesheetHrefs] = await Promise.all([
            getLicenseGateState(this),
            resolveSingleMedia(this, this.content?.video),
            getGlobalStylesheetHrefs(this),
        ]);
        this.#licenseState = licenseState;
        this.#videoUrl = video?.url;
        this.#stylesheetHrefs = stylesheetHrefs;
        this.requestUpdate();
    }

    render() {
        const variantValue = this.content?.themeVariant;
        const variant = (Array.isArray(variantValue) ? variantValue[0] : variantValue) || 'base';

        return html`
            ${renderGlobalStylesheetLinks(this.#stylesheetHrefs)}
            <div class="be-preview section-hero be-v-${variant} be-v-reset ${this.content?.customCssClasses ?? ''}" data-bs-theme="light">
                ${renderLicenseBanner(this.#licenseState)}
                <div class="py-4 d-flex flex-column align-items-center justify-content-center text-center position-relative" style="min-height: 100vh;">
                    <div class="container position-relative z-3">
                        <div class="row justify-content-center">
                            <div class="col-md-10 col-lg-7">
                                <h1 class="h1 text-white">${this.content?.headline ?? ''}</h1>
                                <umb-block-grid-areas-container></umb-block-grid-areas-container>
                            </div>
                        </div>
                    </div>
                    <div class="bg-black position-absolute top-0 start-0 w-100 h-100 z-2 opacity-75"></div>
                    ${this.#videoUrl
                        ? html`<video class="position-absolute top-0 start-0 object-fit-cover w-100 h-100 z-1" src=${this.#videoUrl} muted autoplay loop playsinline></video>`
                        : nothing}
                </div>
            </div>
        `;
    }
}

customElements.define('custom-banner-with-video-view', BannerWithVideoCustomView);
export default BannerWithVideoCustomView;

6. Create a file named “umbraco-package.json” in the “CustomBlockView” folder. If you already have this file, add the new extension to its “extensions” list instead.
7. Add the following JSON to the file:

{
  "name": "Custom Block Views",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "blockEditorCustomView",
      "alias": "Custom.BlockGrid.BannerWithVideo",
      "name": "Banner With Video Block View",
      "element": "/App_Plugins/CustomBlockView/banner-with-video.custom-view.js",
      "forContentTypeAlias": "bannerWithVideoBlock",
      "forBlockEditor": "block-grid"
    }
  ]
}

💡 There is no build step: Umbraco 17 loads these files directly. “forContentTypeAlias” must match the element type alias you create in Step 2. To learn more, see the Umbraco documentation on custom views for blocks.

Step 2. How to create a ready block in Umbraco

Run your project locally where the ByteEditor 17.X package is installed.
Open the “Settings” section.
Expand “Document Types” → “Blocks”.
Hover over the “Ready Layout Blocks” folder, click '...' and choose “Create”.
Select “Element Type”.
Name it “Banner With Video”.
Click the icon next to the name and pick an icon for the block.
Next to the name, change the alias from “bannerWithVideo” to “bannerWithVideoBlock”.
Click “Add group” and name the group “Content”.
Add a property “Headline” with the “Textstring” property editor and turn on “Mandatory”.

Add a property “Video” with the “Video - Image - Media Picker” property editor.

Click “Compositions”, and under “Blocks/Compositions” select “Section Settings” and “Section Custom CSS for elements”.
Click “Submit”, then “Save”.

Step 3. How to create a front end view of the Ready Block

In “Settings”, expand “Partial Views” → “blockgrid”.
Hover over the “Components” folder, click '...' and choose “Create” → “Empty partial view”.
Name it “bannerWithVideoBlock.cshtml”.
Copy the following code and paste it into the file

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<BannerWithVideoBlock>>
@{
    var video = Model.Content.Video;
    var themeVariantClass = $"be-v-{Model.Content.ThemeVariant.IfNullOrWhiteSpace("base")} be-v-reset";
}
<div class="section-hero @Model.Content.CustomCssClasses @themeVariantClass">
    <div class="py-4 d-flex flex-column align-items-center justify-content-center text-center position-relative" style="min-height: 100vh;">
        <div class="container position-relative z-3">
            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-7">
                    <h1 class="h1 text-white">@Model.Content.Headline</h1>
                    @if (Model.Areas.Any(a => a.Any()))
                    {
                        @await Html.GetBlockGridItemAreasHtmlAsync(Model)
                    }
                </div>
            </div>
        </div>
        <div class="bg-black position-absolute top-0 start-0 w-100 h-100 z-2 opacity-75"></div>
        @if (video is not null)
        {
            <video class="position-absolute top-0 start-0 object-fit-cover w-100 h-100 z-1" src="@video.Url()" muted autoplay loop playsinline></video>
        }
    </div>
</div>

5. Click “Save”
6. Restart the project so ModelsBuilder generates the “BannerWithVideoBlock” model

Step 4. How to add Ready Block to the Block Grid

Open “Settings” → “Data Types” → “Home - Main Grid - Block Grid”.
Click “Add block” and choose “Banner With Video”.
Put it in the “Ready Layout Blocks” group.
Turn on “Allow at root” and turn off “Allow in areas”.

Open “Areas” and set “Grid Columns for Areas” to 6.
Add an area with the alias “hero”, 6 columns wide (the full width).
Click “Submit”, then “Save”.

💡 Unlike Umbraco 13, there is no “Custom view” field on the block: the preview is picked up automatically from “umbraco-package.json” by the element type alias.

Congratulations!

You have created your first Ready Block. Now you can add it to your page.

ByteEditor Website Builder