Issue #3027614 by markconroy, BrightBold, tatarbj, shaal, Denes.Szabo, Gábor...

Issue #3027614 by markconroy, BrightBold, tatarbj, shaal, Denes.Szabo, Gábor Hojtsy, Eli-T, tim.plunkett: Use Layout Builder in Umami for the recipe content type in full view mode

core/profiles/demo_umami/config/install/core.entity_view_display.node.recipe.full.yml

@@ -16,10 +16,183 @@ dependencies:
     - node.type.recipe
     - responsive_image.styles.3_2_image
   module:
+    - layout_builder
+    - layout_discovery
     - options
     - responsive_image
     - text
     - user
+third_party_settings:
+  layout_builder:
+    sections:
+      -
+        layout_id: layout_onecol
+        layout_settings: {  }
+        components:
+          3edf9c3e-2dfd-475e-9418-fce6b371b8b7:
+            uuid: 3edf9c3e-2dfd-475e-9418-fce6b371b8b7
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_summary'
+              formatter:
+                label: hidden
+                settings: {  }
+                third_party_settings: {  }
+                type: text_default
+            additional: {  }
+            weight: 0
+          2dd1b920-bc1b-46ea-a4d2-d800aeadf2fe:
+            uuid: 2dd1b920-bc1b-46ea-a4d2-d800aeadf2fe
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_recipe_category'
+              formatter:
+                label: inline
+                settings:
+                  link: true
+                third_party_settings: {  }
+                type: entity_reference_label
+            additional: {  }
+            weight: 2
+          56d1c2c3-ad14-4776-a96a-5ece52e3e74c:
+            uuid: 56d1c2c3-ad14-4776-a96a-5ece52e3e74c
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_image'
+              formatter:
+                label: hidden
+                settings:
+                  responsive_image_style: 3_2_image
+                  image_link: ''
+                third_party_settings: {  }
+                type: responsive_image
+            additional: {  }
+            weight: 4
+          16a466cf-ac16-4245-bafd-192a4aab0cfe:
+            uuid: 16a466cf-ac16-4245-bafd-192a4aab0cfe
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_preparation_time'
+              formatter:
+                label: inline
+                settings:
+                  thousand_separator: ''
+                  prefix_suffix: true
+                third_party_settings: {  }
+                type: number_integer
+            additional: {  }
+            weight: 5
+          470e921c-baf5-419d-8cc7-32680baec10b:
+            uuid: 470e921c-baf5-419d-8cc7-32680baec10b
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_cooking_time'
+              formatter:
+                label: inline
+                settings:
+                  thousand_separator: ''
+                  prefix_suffix: true
+                third_party_settings: {  }
+                type: number_integer
+            additional: {  }
+            weight: 6
+          5e9bb5f4-eab9-4682-ba59-fff7ad7f7619:
+            uuid: 5e9bb5f4-eab9-4682-ba59-fff7ad7f7619
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_number_of_servings'
+              formatter:
+                label: inline
+                settings:
+                  thousand_separator: ''
+                  prefix_suffix: false
+                third_party_settings: {  }
+                type: number_integer
+            additional: {  }
+            weight: 7
+          7f882d25-f4d2-4693-a6a9-a7ba374206fd:
+            uuid: 7f882d25-f4d2-4693-a6a9-a7ba374206fd
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_difficulty'
+              formatter:
+                label: inline
+                settings: {  }
+                third_party_settings: {  }
+                type: list_default
+            additional: {  }
+            weight: 8
+          65889db5-1611-4324-8d0f-1d54e74afd21:
+            uuid: 65889db5-1611-4324-8d0f-1d54e74afd21
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_ingredients'
+              formatter:
+                label: above
+                settings:
+                  link_to_entity: false
+                third_party_settings: {  }
+                type: string
+            additional: {  }
+            weight: 9
+          7b39285b-a320-4852-979d-976939608d76:
+            uuid: 7b39285b-a320-4852-979d-976939608d76
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_recipe_instruction'
+              formatter:
+                label: above
+                settings: {  }
+                third_party_settings: {  }
+                type: text_default
+            additional: {  }
+            weight: 10
+          de19ef93-0d31-41ea-8cd8-0da398c4be32:
+            uuid: de19ef93-0d31-41ea-8cd8-0da398c4be32
+            region: content
+            configuration:
+              label_display: '0'
+              context_mapping:
+                entity: layout_builder.entity
+              id: 'field_block:node:recipe:field_tags'
+              formatter:
+                label: inline
+                settings:
+                  link: true
+                third_party_settings: {  }
+                type: entity_reference_label
+            additional: {  }
+            weight: 3
+        third_party_settings: {  }
+    allow_custom: false
+    enabled: true
 id: node.recipe.full
 targetEntityType: node
 bundle: recipe

core/profiles/demo_umami/demo_umami.info.yml

@@ -14,6 +14,8 @@ install:
   - config
   - contextual
   - contact
+  - layout_builder
+  - layout_discovery
   - menu_link_content
   - datetime
   - block_content

core/profiles/demo_umami/themes/umami/templates/content/node--recipe--full.html.twig

-{#
-/**
- * @file
- * Theme override to display a node.
- *
- * Available variables:
- * - node: The node entity with limited access to object properties and methods.
- *   Only method names starting with "get", "has", or "is" and a few common
- *   methods such as "id", "label", and "bundle" are available. For example:
- *   - node.getCreatedTime() will return the node creation timestamp.
- *   - node.hasField('field_example') returns TRUE if the node bundle includes
- *     field_example. (This does not indicate the presence of a value in this
- *     field.)
- *   - node.isPublished() will return whether the node is published or not.
- *   Calling other methods, such as node.delete(), will result in an exception.
- *   See \Drupal\node\Entity\Node for a full list of public properties and
- *   methods for the node object.
- * - label: (optional) The title of the node.
- * - content: All node items. Use {{ content }} to print them all,
- *   or print a subset such as {{ content.field_example }}. Use
- *   {{ content|without('field_example') }} to temporarily suppress the printing
- *   of a given child element.
- * - author_picture: The node author user entity, rendered using the "compact"
- *   view mode.
- * - metadata: Metadata for this node.
- * - date: (optional) Themed creation date field.
- * - author_name: (optional) Themed author name field.
- * - url: Direct URL of the current node.
- * - display_submitted: Whether submission information should be displayed.
- * - attributes: HTML attributes for the containing element.
- *   The attributes.class element may contain one or more of the following
- *   classes:
- *   - node: The current template type (also known as a "theming hook").
- *   - node--type-[type]: The current node type. For example, if the node is an
- *     "Article" it would result in "node--type-article". Note that the machine
- *     name will often be in a short form of the human readable label.
- *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
- *     teaser would result in: "node--view-mode-teaser", and
- *     full: "node--view-mode-full".
- *   The following are controlled through the node publishing options.
- *   - node--promoted: Appears on nodes promoted to the front page.
- *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
- *     teaser listings.
- *   - node--unpublished: Appears on unpublished nodes visible only to site
- *     admins.
- * - title_attributes: Same as attributes, except applied to the main title
- *   tag that appears in the template.
- * - content_attributes: Same as attributes, except applied to the main
- *   content tag that appears in the template.
- * - author_attributes: Same as attributes, except applied to the author of
- *   the node tag that appears in the template.
- * - title_prefix: Additional output populated by modules, intended to be
- *   displayed in front of the main title tag that appears in the template.
- * - title_suffix: Additional output populated by modules, intended to be
- *   displayed after the main title tag that appears in the template.
- * - view_mode: View mode; for example, "teaser" or "full".
- * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
- * - page: Flag for the full page state. Will be true if view_mode is 'full'.
- * - readmore: Flag for more state. Will be true if the teaser content of the
- *   node cannot hold the main body content.
- * - logged_in: Flag for authenticated user status. Will be true when the
- *   current user is a logged-in member.
- * - is_admin: Flag for admin user status. Will be true when the current user
- *   is an administrator.
- *
- * @see template_preprocess_node()
- */
-#}
-{%
-set classes = [
-'node',
-'node--type-' ~ node.bundle|clean_class,
-node.isPromoted() ? 'node--promoted',
-node.isSticky() ? 'node--sticky',
-not node.isPublished() ? 'node--unpublished',
-view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
-]
-%}
-{% set created_date = node.getCreatedTime|format_date('umami_dates') %}
-{{ attach_library('classy/node') }}
-<article{{ attributes.addClass(classes) }}>
-
-  {{ title_prefix }}
-  {% if label %}
-    <header class="node__header">
-      <h1 class="page-title">
-        {{ label }}
-      </h1>
-    </header>
-  {% endif %}
-  {{ title_suffix }}
-
-  {% if display_submitted %}
-  <footer class="node__meta">
-    <div{{ author_attributes.addClass('node__submitted') }}>
-      {% trans %}<span class="by-author">by {{ author_name }}</span> {{ created_date }}{% endtrans %}
-      {{ metadata }}
-    </div>
-  </footer>
-  {% endif %}
-
-  <div{{ content_attributes.addClass('node__content') }}>
-    {{ content }}
-  </div>
-
-</article>

core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig

@@ -58,11 +58,13 @@
     </header>
   {% endif %}
 
-
-  <div class="layout-highlighted">
-    {{ page.highlighted }}
-  </div>
-
+  {% if page.highlighted %}
+    <div class="container">
+      <div class="layout-highlighted">
+        {{ page.highlighted }}
+      </div>
+    </div>
+  {% endif %}
 
   {% if page.tabs %}
   <div class="layout-tabs">