You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -467,10 +467,10 @@ In this example, we will be creating content programmatically for a "spot" Block
467
467
468
468
* A property called **featured** with the editor of **True/false**.
469
469
470
-
3.On a Document Type add a property called **blockGrid**.
471
-
4.Then add as editor **Block Grid**.
472
-
5.In the Block Grid add a new block and select the **Spot Element** element type.
473
-
6.Then on the **Settings model**select the **Spot Settings**element type.
470
+
3.Add a property called **blockGrid** in a Document Type.
471
+
4.Select **Block Grid** as the property editor.
472
+
5.Click **Add** in the **Blocks** Settings and select **Spot Element**.
473
+
6.Select **Spot Settings**in the **Settings model**field.
@@ -611,7 +611,7 @@ For each item in the raw data, we need to create:
611
611
612
612
All `contentData` and `layoutData` entries need their own unique `Udi` as well as the ID (key) of their corresponding Element Types. In this sample, we only have one Element Type for content (`spotElement`) and one for settings (`spotSettings`). In a real life scenario, there could be any number of Element Type combinations.
613
613
614
-
7.First and foremost, we need models to transform the raw data into Block Gridcompatible JSON. Create a class called **Model.cs** containing the following:
614
+
7.Create a class called **Model.cs** containing the following to transform the raw data into Block Grid-compatible JSON:
615
615
616
616
{% code title="Models.cs" lineNumbers="true" %}
617
617
```csharp
@@ -730,7 +730,7 @@ public class BlockGridLayoutItem
730
730
```
731
731
{% endcode %}
732
732
733
-
8. By injecting `IContentService` and `IContentTypeService` into an API controller, we can transform the raw data into Block Grid JSON. It can then be saved to the target content item. Create a class called **BlockGridTestController.cs** containing the following:
733
+
8. Create a class called **BlockGridTestController.cs**. By injecting `IContentService` and `IContentTypeService` into an API controller, we can transform the raw data into Block Grid JSON. It can then be saved to the target content item.
@@ -836,6 +836,6 @@ public class BlockGridTestController : Controller
836
836
837
837
For the above code `IContent? content = _contentService.GetById(Guid.Parse("efba7b97-91b6-4ddf-b2cc-eef89ff48c3b"));` change the id with your content node that is using the Block Grid.
838
838
839
-
10.In order to test this implementation, run the project and add send a `POST` request to `/umbraco/api/blockgridtest/create` after your domain name. If the result shows as **Saved** then check your content node and you will see the 2 spotElement contents.
839
+
10.To test this implementation, run the project and send a `POST` request to `/umbraco/api/blockgridtest/create` after your domain name. If the result shows as **Saved**, then check your content node, and you will see the 2 spotElement contents.
Copy file name to clipboardExpand all lines: 17/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ This article is a work in progress and may undergo further revisions, updates, o
16
16
17
17
When testing out the property editor, you can use a set of predefined Blocks. The option will only be possible when there are no other Data Types using the Block Grid property editor.
* Select the **Block Grid** as the **Property editor**.
@@ -37,7 +37,7 @@ To set up the Block Grid property editor, follow these steps:
37
37
38
38
You will see the configuration options for a Block Grid property editor as shown below:
39
39
40
-
40
+
41
41
42
42
The Data Type editor allows you to configure the following properties:
43
43
@@ -55,7 +55,7 @@ Block Types are based on [**Element Types**](../../../../data/defining-content/d
55
55
56
56
Once you have added an Element Type as a Block Type on your Block Grid Data Type you have the option to configure it.
57
57
58
-
58
+
59
59
60
60
### Groups
61
61
@@ -126,11 +126,11 @@ To scale an Area, click and drag the scale-button in the bottom-right corner of
126
126
***Grid Columns for Areas** - Overwrites the amount of columns used for the Area grid.
127
127
***Areas** - Determines whether the Block can be created inside Areas of other Blocks.
133
+
134
134
135
135
***Alias** - The alias is used to identify this Area. It is being printed by `GetBlockGridHTML()` and used as name for the Area slot in Custom Views. The alias is also available for CSS Selectors to target the HTML-Element representing an Area.
136
136
***Create Button Label** - Overwrites the Create Button Label of the Area.
@@ -157,41 +157,41 @@ Notice that any styling of a Block is scoped. This means that the default backof
157
157
158
158
When viewing a **Block Grid** property editor in the **Content** section for the first time, you will be presented with the option to **Add content**.
The Block Catalogue looks different depending on the amount of available Blocks and their catalogue appearance.
167
167
168
-
168
+
169
169
170
170
Click the Block Type you wish to create and a new Block will appear in the layout.
171
171
172
172
More Blocks can be added to the layout by clicking the Add content button. Alternatively, use the Add content button that appears on hover to add new Blocks between, besides, or above the existing Blocks.
Blocks can be rearranged using the click and drag feature. Move them up or down to place them in the desired order.
183
183
184
184
Moving a Block from one Area to another is done in the same way. If a Block is not allowed in the given position, the area will display a red color and not allow the new position.
If a Block has multiple size options it can be scaled via the UI. This appears in the bottom left corner of the Block.
191
191
192
192
The Block is resized using a click-and-drag feature. Moving the mouse will change the size to the size options closest to the mouse pointer.
193
193
194
-
<figure><imgsrc="../../../../../../../17/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/resizing-block-block-grid.gif"alt=""><figcaption><p>Scale blocks in the grid by dragging from the bottom-right corner.</p></figcaption></figure>
194
+
<figure><imgsrc="../../built-in-property-editors/block-editor/images/resizing-block-block-grid.gif"alt=""><figcaption><p>Scale blocks in the grid by dragging from the bottom-right corner.</p></figcaption></figure>
195
195
196
196
## Rendering Block Grid Content
197
197
@@ -467,10 +467,10 @@ In this example, we will be creating content programmatically for a "spot" Block
467
467
468
468
* A property called **featured** with the editor of **True/false**.
469
469
470
-
3.On a Document Type add a property called **blockGrid**.
471
-
4.Then add as editor **Block Grid**.
472
-
5.In the Block Grid add a new block and select the **Spot Element** element type.
473
-
6.Then on the **Settings model**select the **Spot Settings**element type.
470
+
3.Add a property called **blockGrid** in a Document Type.
471
+
4.Select **Block Grid** as the property editor.
472
+
5.Click **Add** in the **Blocks** Settings and select **Spot Element**.
473
+
6.Select **Spot Settings**in the **Settings model**field.
@@ -611,7 +611,7 @@ For each item in the raw data, we need to create:
611
611
612
612
All `contentData` and `layoutData` entries need their own unique `Udi` as well as the ID (key) of their corresponding Element Types. In this sample, we only have one Element Type for content (`spotElement`) and one for settings (`spotSettings`). In a real life scenario, there could be any number of Element Type combinations.
613
613
614
-
7.First and foremost, we need models to transform the raw data into Block Gridcompatible JSON. Create a class called **Model.cs** containing the following:
614
+
7.Create a class called **Model.cs** containing the following to transform the raw data into Block Grid-compatible JSON:
615
615
616
616
{% code title="Models.cs" lineNumbers="true" %}
617
617
```csharp
@@ -730,7 +730,7 @@ public class BlockGridLayoutItem
730
730
```
731
731
{% endcode %}
732
732
733
-
8. By injecting `IContentService` and `IContentTypeService` into an API controller, we can transform the raw data into Block Grid JSON. It can then be saved to the target content item. Create a class called **BlockGridTestController.cs** containing the following:
733
+
8. Create a class called **BlockGridTestController.cs**. By injecting `IContentService` and `IContentTypeService` into an API controller, we can transform the raw data into Block Grid JSON. It can then be saved to the target content item.
@@ -836,6 +836,6 @@ public class BlockGridTestController : Controller
836
836
837
837
For the above code `IContent? content = _contentService.GetById(Guid.Parse("efba7b97-91b6-4ddf-b2cc-eef89ff48c3b"));` change the id with your content node that is using the Block Grid.
838
838
839
-
10.In order to test this implementation, run the project and add send a `POST` request to `/umbraco/api/blockgridtest/create` after your domain name. If the result shows as **Saved** then check your content node and you will see the 2 spotElement contents.
839
+
10.To test this implementation, run the project and send a `POST` request to `/umbraco/api/blockgridtest/create` after your domain name. If the result shows as **Saved**, then check your content node, and you will see the 2 spotElement contents.
0 commit comments