Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
# Blocks

It is possible to insert Blocks into the markup of the Rich Text Editor. Block can be created directly inside the Rich Text editor when

* You have defined the Block Type as part of the Rich Text Editor Data Type, and
* Enabled the Blocks Toolbar Option.

## Configure Blocks

The Block List property editor is configured in the same way as any standard property editor, via the _Data Types_ admin interface.

To set up your Block List Editor property, create a new _Data Type_ and select **Block List** from the list of available property editors.

Then you will see the configuration options for a Block List as shown below.

![Rich Text Editor - Data Type Block Fields](images/rte-data-type-block-fields.jpg)

Here you will define the Block Types to be available for use in the property. Read more on how to set up Block Types below.

## Setup Block Types

Block Types are **Element Types** that need to be created before you can start configuring them as Block Types. This can be done either directly from the property editor setup process, or you can set them up beforehand. If they are set beforehand then they need to be added to the Rich Text Editor afterward.

Once you add an Element Type as a Block Type on your Rich Text Editor Data Type you will have options to configure it further.

![Rich Text Editor - Data Type Block Configuration](images/rte-data-type-block-type-editor.jpeg)

Each Block has a set of properties that are optional to configure. They are described below.

### Editor Appearance

By configuring the properties in the group you can customize the experience for your editors when they work with blocks in the Content section.

* **Label** - Define a label for the appearance of the Block in the editor. The label can use [Umbraco Flavored Markdown](../../../../../reference/umbraco-flavored-markdown.md) template string syntax to display values of properties.
* **Display Inline** - When turned on the Block Element will be able to stay in line with text or other elements. If not the Block will stay on its own line.
* **Overlay size** - Set the size for the Content editor overlay for editing this block.

### Data Models

It is possible to use two separate Element Types for your Block Types. It's required to have one for Content and optional to add one for Settings.

* **Content model** - This presents the Element Type used as a model for the content section of this Block. This cannot be changed, but you can open the Element Type to perform edits or view the properties available. Useful when writing your Label.
* **Settings model** - Add a Settings section to your Block based on a given Element Type. When picked you can open the Element Type or choose to remove the settings section again.

### Catalogue appearance

These properties refer to how the Block is presented in the Block catalog when editors choose which Blocks to use for their content.

* **Background color** - Define a background color to be displayed beneath the icon or thumbnail. Eg. `#424242`.
* **Icon Color** - Change the color of the Element Type icon. Eg. `#242424`.
* **Thumbnail** - Pick an image or Scalable Vector Graphics (SVG) file to replace the icon of this Block in the catalog.

The thumbnails for the catalog are presented in the format of 16:10, and we recommend a resolution of 400px width and 250px height.

### Advanced

These properties are relevant when you work with custom views.

* **Hide content editor** - If you made a custom view that enables you to edit the content part of a block and you are using default editing mode (not inline) you might want to hide the content editor from the block editor overlay.

## Rendering Blocks

To render Blocks in the frontend, you must create Partial Views for each Block.

The Partial Views must be:

* Named by the alias of the Element Type that is being used as the Content Model for the Block.
* Placed in the folder `Views/Partials/RichText/Components/`.

For example, if the Element Type alias of the Content Model is `myBlockType`, a Partial View must be created at `Views/Partials/RichText/Components/MyBlockType.cshtml`.

The Partial View will receive the model of `Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem`. This gives you the option to access properties of the Content and Settings Models of your Block, as illustrated in the following sample:

```csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem>

@* Output the 'heading' field from the Content Model using the `backgroundColor` field from the Settings Model as background color *@
<h1 style="background-color:@Model.Settings.Value("backgroundColor")">@Model.Content.Value("heading")</h1>
```

If you use ModelsBuilder, you can specify the Content Model (and optionally the Settings Model) in the Partial View model. This allows for type-safe access to the Block data.

The following example shows a Partial View of a Block with `MyBlockType` as the Content Model and `MyBlockSettingsType` as the Settings Model:

```csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem<MyBlockType, MyBlockSettingsType>>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;

@* Output the Heading of field with alias 'heading' from the 'MyBlockType' Content Model *@
<h1 style="background-color:@Model.Settings.BackgroundColor">@Model.Content.Heading</h1>
```

## Build a Custom Backoffice View

Building Custom Views for Block representations in Backoffice is the same for all Block Editors. [Read about building a Custom View for Blocks here](../../../../../tutorials/creating-custom-views-for-blocklist.md).
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Select the width of the link picker overlay. The overlay size comes in three siz

## Available Blocks

Blocks can be added as elements in the Rich Text Editor. Configuration and rendering of Blocks are described in the [Blocks in Rich Text Editor](broken-reference) article.
Blocks can be added as elements in the Rich Text Editor. Configuration and rendering of Blocks are described in the [Blocks in Rich Text Editor](./blocks.md) article.

## Image Upload Folder

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion 16/umbraco-cms/reference/templating/macros.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

Macros and Partial View Macros have been removed with the release of Umbraco 14.

We recommend using using [Partial Views](../../fundamentals/design/partial-views.md) or [Blocks in the Rich Text Editor](broken-reference) as a replacement.
We recommend using [Partial Views](../../fundamentals/design/partial-views.md) or [Blocks in the Rich Text Editor](../../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md) as a replacement.

Learn more about the decision for remove Macros in the official announcement: [Breaking change: Macros will be removed in Umbraco 14](https://github.com/umbraco/Announcements/issues/14).
{% endhint %}
Original file line number Diff line number Diff line change
Expand Up @@ -133,12 +133,19 @@
}
```

While the `forContentTypeAlias` and `forBlockEditor` parameters are optional, they also accept arrays. They can therefore be used to declare a custom view for multiple blocks. The code snippet below shows an example of such an array:
While the `forContentTypeAlias` and `forBlockEditor` parameters are optional, they also accept arrays. They can therefore be used to declare a custom view for multiple blocks and block editors. The code snippet below shows an example of such an array:

```typescript
forContentTypeAlias: ['product', 'anotherContentTypeAlias'],
forBlockEditor: ['block-list', 'block-grid', 'block-rte'],
```

Depending on the values, the custom view is applied to the following data types:

- **block-list** - The [Block List editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md)

Check warning on line 145 in 16/umbraco-cms/tutorials/creating-custom-views-for-blocklist.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐢 [UmbracoDocs.ListStart] List items should start with a capital letter, unless they begin with an inline code or a URL. Raw Output: {"message": "[UmbracoDocs.ListStart] List items should start with a capital letter, unless they begin with an inline code or a URL.", "location": {"path": "16/umbraco-cms/tutorials/creating-custom-views-for-blocklist.md", "range": {"start": {"line": 145, "column": 1}}}, "severity": "WARNING"}
- **block-grid** - The [Block Grid editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md)

Check warning on line 146 in 16/umbraco-cms/tutorials/creating-custom-views-for-blocklist.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐢 [UmbracoDocs.ListStart] List items should start with a capital letter, unless they begin with an inline code or a URL. Raw Output: {"message": "[UmbracoDocs.ListStart] List items should start with a capital letter, unless they begin with an inline code or a URL.", "location": {"path": "16/umbraco-cms/tutorials/creating-custom-views-for-blocklist.md", "range": {"start": {"line": 146, "column": 1}}}, "severity": "WARNING"}
- **block-rte** - Blocks used inline in the [Rich Text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md)

Check warning on line 147 in 16/umbraco-cms/tutorials/creating-custom-views-for-blocklist.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐢 [UmbracoDocs.ListStart] List items should start with a capital letter, unless they begin with an inline code or a URL. Raw Output: {"message": "[UmbracoDocs.ListStart] List items should start with a capital letter, unless they begin with an inline code or a URL.", "location": {"path": "16/umbraco-cms/tutorials/creating-custom-views-for-blocklist.md", "range": {"start": {"line": 147, "column": 1}}}, "severity": "WARNING"}

Read about [extension-manifest](../customizing/extending-overview/extension-registry/extension-manifest.md) to learn how to register an Extension Manifest.

Once registered, the Block will be represented by the given Web Component.
Expand Down
Loading