Merge branch 'main' into v15/add-maximumpayload-bytes-settings

Author: nikolajlauridsen

10/umbraco-cms/tutorials/multilanguage-setup.md

@@ -1,14 +1,12 @@
 ---
-meta.Title: Multilanguage setup in Umbraco
-product: CMS
 description: A guide to multilanguage setup in Umbraco
 ---
 
 # Creating a Multilingual Site
 
-You can use **language variants** to setup a multilingual site. **Language Variants** allow you to have variants of the same content all under the same project. So, if you open a page and a language variant is enabled, you will see the option to switch the language from the drop-down list. Additionally, you can view or input the translated content.
+You can use **language variants** to set up a multilingual site. **Language Variants** allow you to have variants of the same content all under the same project. So, if you open a page and a language variant is enabled, you will see the option to switch the language from the drop-down list. Additionally, you can view or input the translated content.
 
-This tutorial explains how to set-up a basic multilingual website.
+This tutorial explains how to set up a basic multilingual website.
 
 ## Adding a New language
 
@@ -226,3 +224,108 @@ For viewing purposes, I've added a stylesheet to my website. The final result sh
 **German Version:**
 
 <figure><img src="images/final-result-da.png" alt=""><figcaption></figcaption></figure>
+
+## Using Multiple languages across APIs
+
+When requesting content over an API, the culture will fall back to the default, unless explicitly set. 
+
+To do this, you can use the IVariationContextAccessor. 
+
+```csharp
+public class ExampleController : SurfaceController
+{
+    private readonly ILocalizationService _localizationService;
+    private readonly IVariationContextAccessor _variationContextAccessor;
+
+    public ExampleController(IUmbracoContextAccessor umbracoContextAccessor, IUmbracoDatabaseFactory databaseFactory, ServiceContext services, AppCaches appCaches, IProfilingLogger profilingLogger, IPublishedUrlProvider publishedUrlProvider, ILocalizationService localizationService, IVariationContextAccessor variationContextAccessor) : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, publishedUrlProvider)
+    {
+        _localizationService = localizationService;
+        _variationContextAccessor = variationContextAccessor;
+    }
+
+    public IActionResult Index(string culture = null)
+    {
+        IEnumerable<ILanguage> UmbracoLanguages = _localizationService.GetAllLanguages(); //a helpful method to get all configured languages
+        var requestedCulture = UmbracoLanguages.FirstOrDefault(l => l.IsoCode == culture);
+
+        if (requestedCulture != null)
+        {
+            _variationContextAccessor.VariationContext = new VariationContext(requestedCulture.IsoCode);
+        }
+
+        //this will now be in the requested culture
+        var content = UmbracoContext.Content.GetAtRoot();
+
+        //Content requested in this View Component will now be in the requested culture
+        return ViewComponent();
+    }
+}
+```
+
+### Creating a Language Switching Navigation 
+
+To navigate between languages, we need to do two key things:
+
+ 1. Get all the languages that the site can provide
+ 2. Identify the language used on the current page 
+
+Once you have these, you need to loop through the languages and provide links to each home node. 
+
+### Getting all the languages for a site 
+
+There are two ways to achieve this. One is to use `localizationService.GetAllLanguages();` to call the database, which is expensive and ideally includes caching.
+
+The alternative is to get the Home node and find all cultures associated with it. This has a few benefits including speed and providing us with a link to show the user. It is the process you will use when following this guide. 
+
+### Identify the language for the current page 
+
+This is achieved in `cs.html` files using `umbracoHelper.AssignedContentItem.GetCultureFromDomains();`.
+
+#### Steps
+
+Now that you have what you need, take the following steps to create a working example. 
+
+ 1. Create a new view called `Navigation.cshtml`
+ 2. Paste in the following code:
+
+```cshtml
+@using Umbraco.Cms.Web.Common
+@inject IUmbracoHelperAccessor _umbracoHelperAccessor;
+
+@{
+    _umbracoHelperAccessor.TryGetUmbracoHelper(out var umbracoHelper);
+
+    var homePage = umbracoHelper.ContentAtRoot().FirstOrDefault(c => c.ContentType.Alias == "{{homeNodeContentAlias}}");
+    var cultures = homePage?.Cultures;
+}
+
+@if (cultures.Count > 1)
+{
+    <ul aria-label="Language switcher">
+        @foreach (var cult in cultures)
+        {
+            //get the settings for this culture
+            System.Globalization.CultureInfo culture = new System.Globalization.CultureInfo(cult.Key);
+            //if the current page has a language variant, otherwise link to the homepage language variant
+            string langUrl = umbracoHelper.AssignedContentItem.Url(cult.Key, UrlMode.Relative) ?? homePage.Url(cult.Key, UrlMode.Relative);
+
+            <li>
+                @if (cult.Key.ToLower() == umbracoHelper.AssignedContentItem.GetCultureFromDomains().ToLower())
+                {
+                    <span aria-current="true" >@culture.NativeName</span>
+                }
+                else
+                {
+                    <a href="@langUrl" hreflang="@cult.Key" lang="@cult.Key" >@culture.NativeName</a>
+                }
+            </li>
+        }
+    </ul>
+}
+```
+
+ 3. Replace `{{homeNodeContentAlias}}` with the Document Type alias of your Home node. 
+
+This will render links to either the language variant of the current page or the home node for the language variant.
+
+Additionally, `System.Globalization.CultureInfo` is used to obtain the native name of the language being rendered. This is useful if a user does not speak the default language. 

14/umbraco-cms/customizing/extending-overview/extension-types/section-view.md

@@ -12,17 +12,116 @@ This page is a work in progress and may undergo further revisions, updates, or a
 
 <figure><img src="../../../.gitbook/assets/section-views.svg" alt=""><figcaption><p>Section View</p></figcaption></figure>
 
-**Manifest**
+## Creating a custom Section View
+
+In this section, you can learn how to register and create a custom Section View for the Umbraco backoffice.
+
+### Manifest
+
+The manifest file can be created using either JSON or Typescript. Both methods are shown below.
+
+{% tabs %}
+
+{% tab title="Json" %} 
+
+We can create the manifest using json in the `umbraco-package.json`.
 
 ```json
 {
 	"type": "sectionView",
 	"alias": "My.SectionView",
 	"name": "My Section View",
+	"element": "./my-section.element.js",
 	"meta": {
-		"sections": ["My.Section"],
 		"label": "My View",
-		"pathname": "/my-view"
-	}
+		"icon": "icon-add",
+		"pathname": "my-view"
+	},
+	"conditions": [
+		{
+			"alias": "Umb.Condition.SectionAlias",
+			"match": "My.Section",
+		}
+	]
 }
 ```
+
+{% endtab %}
+
+{% tab title="Typescript" %} 
+
+
+The manifest can also be written in TypeScript.
+
+For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests.
+
+```typescript
+import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry";
+
+const sectionViews: Array<ManifestSectionView> = [
+    {
+        type: "sectionView",
+        alias: "My.SectionView",
+        name: "My Section View",
+        element: () => import('./my-section.element.ts'),
+        meta: {
+            label: "My View",
+            icon: "icon-add",
+			pathname: "my-view",
+        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.SectionAlias',
+				match: 'My.Section',
+            }
+        ]
+    }
+]
+```
+
+ {% endtab %}
+
+{% endtabs %}
+
+
+### Lit Element
+
+Creating the Section View Element using a Lit Element.
+
+
+**my-section.element.ts:**
+```typescript
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+
+@customElement('my-sectionview-element')
+export class MySectionViewElement extends UmbLitElement {
+
+    render() {
+        return html`
+            <uui-box headline="Sectionview Title goes here">
+                Sectionview content goes here
+            </uui-box>
+        `
+    }
+
+    static override styles = [
+        css`
+			:host {
+				display: block;
+                padding: 20px;
+			}
+		`,
+    ];
+
+}
+
+export default MySectionViewElement;
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'my-sectionview-element': MySectionViewElement;
+    }
+}
+
+```

14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md

@@ -13,11 +13,9 @@ Umbraco CMS currently ships with two Block Editors: the Block List and the Block
 ## [Block Grid](block-grid-editor.md)
 
 ## Customizing Block Editors
-
-### [Build custom views for blocks](build-custom-view-for-blocks.md)
+### [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.