diff --git a/14/umbraco-cms/.gitbook.yaml b/14/umbraco-cms/.gitbook.yaml index f8b276ba564..c7badbfc9c0 100644 --- a/14/umbraco-cms/.gitbook.yaml +++ b/14/umbraco-cms/.gitbook.yaml @@ -126,4 +126,5 @@ redirects: customize-the-backoffice/workspaces: customizing/workspaces.md fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/build-a-custom-view-for-a-block: tutorials/creating-custom-views-for-blocklist.md extending/packages/types-of-packages: extending/packages/README.md - fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/listview: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/collection.md \ No newline at end of file + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/listview: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/collection.md + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration: reference/umbraco-flavored-markdown.md diff --git a/14/umbraco-cms/SUMMARY.md b/14/umbraco-cms/SUMMARY.md index 38599583256..bfead79fc5f 100644 --- a/14/umbraco-cms/SUMMARY.md +++ b/14/umbraco-cms/SUMMARY.md @@ -73,7 +73,6 @@ * [Block Editors](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md) * [Block Grid](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md) * [Block List](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md) - * [Configuring Block Editor Label Properties](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md) * [Dropdown](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/dropdown/README.md) * [Rich Text Editor](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md) * [Rich Text Editor Configuration](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration.md) diff --git a/14/umbraco-cms/customizing/umbraco-package.md b/14/umbraco-cms/customizing/umbraco-package.md index cbe7e312b4c..b7dbea6a60d 100644 --- a/14/umbraco-cms/customizing/umbraco-package.md +++ b/14/umbraco-cms/customizing/umbraco-package.md @@ -168,7 +168,7 @@ These are the current types of UI Extensions: | tinyMcePlugin | A TinyMCE plugin is a plugin that can be added to the TinyMCE editor. Read more about [TinyMCE Plugins](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-plugins.md). | | treeItem | A tree item that can be added to the tree. | | tree | A tree that can be added to a section. | -| ufmComponent | This type of component is a formatter that can be added to the [Umbraco Flavoured Markdown](../reference/umbraco-flavored-markdown.md), which is used in property descriptions and advanced labels. Read more about the [Label Property Configuration](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md). | +| ufmComponent | This type of component is a formatter that can be added to the [Umbraco Flavoured Markdown](../reference/umbraco-flavored-markdown.md), which is used in property descriptions and advanced labels. | | userProfileApp | A user profile app is a component that can be added to the current user view. | **Collections** diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md index 9aac2f79f99..15caefbb338 100644 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md +++ b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md @@ -13,9 +13,7 @@ Umbraco CMS currently ships with two Block Editors: the Block List and the Block ## [Block Grid](block-grid-editor.md) ## Customizing Block Editors + ### [Creating custom views for blocks](https://docs.umbraco.com/umbraco-cms/tutorials/creating-custom-views-for-blocklist) Learn how to create custom views for the blocks used in your Block Grid or Block List property editors. -### [Configure Block Editor label properties](label-property-configuration.md) - -Get an overview of available configurations for the label properties. diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index ad680e0c33d..3d161fe32df 100644 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -57,8 +57,6 @@ Once you have added an Element Type as a Block Type on your Block Grid Data Type ![Block Grid - Data Type Block Configuration](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_DataType\_Blocks.png) -[Examples and more details about configuring the Label property](label-property-configuration.md) - ### Groups Blocks can also be grouped. This is visible in the Block Catalogue and can also be used to allow a group of Blocks in an Area. diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md index 488e476b81f..133a416c917 100644 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md +++ b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md @@ -49,7 +49,7 @@ Each Block has a set of properties that are optional to configure. They are desc By configuring the properties in the group you can customize the user experience for your content editors when they work with the blocks in the Content section. -* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. [Examples and more details about labels and AngularJS templates.](label-property-configuration.md) +* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. * **Custom view** - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view. * **Custom stylesheet** - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block. * **Overlay editor size** - Set the size for the Content editor overlay for editing this block. diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md deleted file mode 100644 index d616aa5ccbe..00000000000 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md +++ /dev/null @@ -1,15 +0,0 @@ -# Configuring Block Editor Label Properties - -{% hint style="warning" %} -Previous versions of Umbraco used AngularJS expressions and filters for advanced label rendering. - -With the removal of AngularJS in Umbraco 14, this has been replaced using native web components. Advanced label rendering is done using [Umbraco Flavored Markdown](../../../../../reference/umbraco-flavored-markdown.md). -{% endhint %} - -When configuring a Block, the label property allows you to define a label for the appearance of the Block in the editor. The label can use Umbraco Flavored Markdown (UFM) syntax to display values of properties. Example: `My Block {=myPropertyAlias}` will be shown as: `My Block FooBar`. - -## Special variables - -Currently, Umbraco 14.1 only supports rendering a block's content properties. Special variables like `$index`, `$contentTypeName`, `$settings`, and so on will be expanded in upcoming releases. - -In the meantime, you can create your own custom UFM components. For more information, see the [Umbraco Flavored Markdown](../../../../../reference/umbraco-flavored-markdown.md) article. From there, you will be able to consume the `UMB_BLOCK_ENTRY_CONTEXT` to access the entire data of a block item. diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-blocks.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-blocks.md index 007816b3767..73f7e01c9de 100644 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-blocks.md +++ b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-blocks.md @@ -35,7 +35,7 @@ Each Block has a set of properties that are optional to configure. They are desc By configuring the properties in the group you can customize the user experience for your content editors when they work with the blocks in the Content section. -* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. [Examples and more details about labels and AngularJS templates.](../block-editor/label-property-configuration.md) +* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. * **Display Inline with text** - 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. * **Custom view** - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view. * **Custom stylesheet** - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block. diff --git a/14/umbraco-cms/reference/umbraco-flavored-markdown.md b/14/umbraco-cms/reference/umbraco-flavored-markdown.md index c57881dfaad..debc6a6f309 100644 --- a/14/umbraco-cms/reference/umbraco-flavored-markdown.md +++ b/14/umbraco-cms/reference/umbraco-flavored-markdown.md @@ -1,5 +1,10 @@ # Umbraco Flavored Markdown +{% hint style="info" %} +**Are you looking for Label Property Configuration?** +With the removal of AngularJS, advanced label rendering is now handled using Umbraco Flavored Markdown. +{% endhint %} + Umbraco Flavored Markdown (UFM) is the dialect of Markdown, used to support property descriptions and advanced labels within the Umbraco CMS backoffice. These can be used with Block editors (Block Grid, Block List) and Collection View columns (in Grid and Table views). {% hint style="info" %} diff --git a/15/umbraco-cms/.gitbook.yaml b/15/umbraco-cms/.gitbook.yaml index 52f39c57321..a86c8cb290c 100644 --- a/15/umbraco-cms/.gitbook.yaml +++ b/15/umbraco-cms/.gitbook.yaml @@ -109,3 +109,5 @@ redirects: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/styles.md fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-plugins: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/plugins.md fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-blocks: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration: reference/umbraco-flavored-markdown.md + \ No newline at end of file diff --git a/15/umbraco-cms/SUMMARY.md b/15/umbraco-cms/SUMMARY.md index 449e5b3b2c0..ccfebd3ea7d 100644 --- a/15/umbraco-cms/SUMMARY.md +++ b/15/umbraco-cms/SUMMARY.md @@ -76,7 +76,6 @@ * [Block Grid](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md) * [Block List](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md) * [Block Level Variance](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-level-variance.md) - * [Configuring Block Editor Label Properties](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md) * [Dropdown](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/dropdown/README.md) * [Rich Text Editor](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md) * [Configuration](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration.md) diff --git a/15/umbraco-cms/customizing/umbraco-package.md b/15/umbraco-cms/customizing/umbraco-package.md index 1121e62e35a..36a73b21764 100644 --- a/15/umbraco-cms/customizing/umbraco-package.md +++ b/15/umbraco-cms/customizing/umbraco-package.md @@ -164,7 +164,7 @@ These are the current types of UI Extensions: | tinyMcePlugin | A TinyMCE plugin is a plugin that can be added to the TinyMCE editor. Read more about [TinyMCE Plugins](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-plugins.md). | | treeItem | A tree item that can be added to the tree. | | tree | A tree that can be added to a section. | -| ufmComponent | This type of component is a formatter that can be added to the [Umbraco Flavoured Markdown](../reference/umbraco-flavored-markdown.md), which is used in property descriptions and advanced labels. Read more about the [Label Property Configuration](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md). | +| ufmComponent | This type of component is a formatter that can be added to the [Umbraco Flavoured Markdown](../reference/umbraco-flavored-markdown.md), which is used in property descriptions and advanced labels. | | userProfileApp | A user profile app is a component that can be added to the current user view. | **Collections** diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md index 10e1061c981..bf1f3ed396e 100644 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md +++ b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md @@ -17,7 +17,3 @@ Umbraco CMS currently ships with two Block Editors: the Block List and the Block ### [Creating custom views for blocks](../../../../../tutorials/creating-custom-views-for-blocklist.md) Learn how to create custom views for the blocks used in your Block Grid or Block List property editors. - -### [Configure Block Editor label properties](label-property-configuration.md) - -Get an overview of available configurations for the label properties. diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index 16b9344f21f..82a9e62609c 100644 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -57,8 +57,6 @@ Once you have added an Element Type as a Block Type on your Block Grid Data Type ![Block Grid - Data Type Block Configuration](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/block-editor/images/BlockGridEditor\_DataType\_Blocks.png) -[Examples and more details about configuring the Label property](label-property-configuration.md) - ### Groups Blocks can also be grouped. This is visible in the Block Catalogue and can also be used to allow a group of Blocks in an Area. diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md index 488e476b81f..6f64c5aa2c9 100644 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md +++ b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md @@ -49,7 +49,7 @@ Each Block has a set of properties that are optional to configure. They are desc By configuring the properties in the group you can customize the user experience for your content editors when they work with the blocks in the Content section. -* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. [Examples and more details about labels and AngularJS templates.](label-property-configuration.md) +* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. * **Custom view** - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view. * **Custom stylesheet** - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block. * **Overlay editor size** - Set the size for the Content editor overlay for editing this block. diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md deleted file mode 100644 index d616aa5ccbe..00000000000 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration.md +++ /dev/null @@ -1,15 +0,0 @@ -# Configuring Block Editor Label Properties - -{% hint style="warning" %} -Previous versions of Umbraco used AngularJS expressions and filters for advanced label rendering. - -With the removal of AngularJS in Umbraco 14, this has been replaced using native web components. Advanced label rendering is done using [Umbraco Flavored Markdown](../../../../../reference/umbraco-flavored-markdown.md). -{% endhint %} - -When configuring a Block, the label property allows you to define a label for the appearance of the Block in the editor. The label can use Umbraco Flavored Markdown (UFM) syntax to display values of properties. Example: `My Block {=myPropertyAlias}` will be shown as: `My Block FooBar`. - -## Special variables - -Currently, Umbraco 14.1 only supports rendering a block's content properties. Special variables like `$index`, `$contentTypeName`, `$settings`, and so on will be expanded in upcoming releases. - -In the meantime, you can create your own custom UFM components. For more information, see the [Umbraco Flavored Markdown](../../../../../reference/umbraco-flavored-markdown.md) article. From there, you will be able to consume the `UMB_BLOCK_ENTRY_CONTEXT` to access the entire data of a block item. diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md index 7a75b33caeb..4263b54ad75 100644 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md +++ b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md @@ -35,7 +35,7 @@ Each Block has a set of properties that are optional to configure. They are desc By configuring the properties in the group you can customize the user experience for your content editors when they work with the blocks in the Content section. -* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. [Examples and more details about labels and AngularJS templates.](../block-editor/label-property-configuration.md) +* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. * **Display Inline with text** - 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. * **Custom view** - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view. * **Custom stylesheet** - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block. diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md index 4e7599efb80..28ac0dc3565 100644 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md +++ b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md @@ -38,7 +38,7 @@ Each Block has a set of properties that are optional to configure. They are desc 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 AngularJS template string syntax to display values of properties. [Examples and more details about labels and AngularJS templates.](../block-editor/label-property-configuration.md) +* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. * **Display Inline with text** - 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. * **Custom view** - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view. * **Custom stylesheet** - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block. diff --git a/15/umbraco-cms/reference/umbraco-flavored-markdown.md b/15/umbraco-cms/reference/umbraco-flavored-markdown.md index 5f1b7105ff1..c399b01f37a 100644 --- a/15/umbraco-cms/reference/umbraco-flavored-markdown.md +++ b/15/umbraco-cms/reference/umbraco-flavored-markdown.md @@ -1,5 +1,10 @@ # Umbraco Flavored Markdown +{% hint style="info" %} +**Are you looking for Label Property Configuration?** +With the removal of AngularJS, advanced label rendering is now handled using Umbraco Flavored Markdown. +{% endhint %} + Umbraco Flavored Markdown (UFM) is the dialect of Markdown, used to support property descriptions and advanced labels within the Umbraco CMS backoffice. These can be used with Block editors (Block Grid, Block List) and Collection View columns (in Grid and Table views). {% hint style="info" %}