Issue #3044250 by kjay, shaal, pawandubey, markconroy, Gábor Hojtsy, lauriii:...

Issue #3044250 by kjay, shaal, pawandubey, markconroy, Gábor Hojtsy, lauriii: Make the highlighted region in Umami more flexible so it adapts to its use with Layout Builder and could be used to demonstrate placement of other blocks

core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css

+/**
+ * @file
+ * Styles for help messages.
+ */
+
+.block-help {
+  margin-bottom: 1em;
+  padding: 1.26em;
+  word-wrap: break-word;
+  color: inherit;
+  border: 1px solid #b3daf0;
+  background-color: #eef5f9;
+  overflow-wrap: break-word;
+}
+
+.block-help__container {
+  padding-left: 24px; /* LTR */
+  background-image: url(/core/profiles/demo_umami/themes/umami/images/svg/help.svg);
+  background-repeat: no-repeat;
+  background-position: left 4px; /* LTR */
+}
+[dir=rtl] .block-help__container {
+  padding-right: 24px;
+  padding-left: 0;
+  background-position: right 4px;
+}
+
+.block-help__container > *:last-child {
+  margin-bottom: 0;
+}

core/profiles/demo_umami/themes/umami/css/components/messages/messages.css

@@ -4,6 +4,7 @@
  */
 
 .messages {
+  margin-bottom: 1em;
   padding: 20px;
   word-wrap: break-word;
   color: inherit;
@@ -26,18 +27,21 @@
   background-position: right;
 }
 .messages--status {
+  border: 1px solid #cbdebc;
   background-color: #e6eee0;
 }
 .messages--status .messages__content {
   background-image: url(/core/misc/icons/73b355/check.svg);
 }
 .messages--warning {
+  border: 1px solid #fae2a4;
   background-color: #fcf1d4;
 }
 .messages--warning .messages__content {
   background-image: url(/core/misc/icons/e29700/warning.svg);
 }
 .messages--error {
+  border: 1px solid #f8c8d5;
   background-color: #f9e6eb;
 }
 .messages--error .messages__content {

core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css

+/**
+ * @file
+ * This file is used to style the highlighted region.
+ *
+ */
+
+.layout-highlighted {
+  padding: 0 1.26em 1em;
+  background: #fff;
+}

core/profiles/demo_umami/themes/umami/images/svg/help.svg

+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -1)" fill="none" fill-rule="evenodd"><circle fill="#009FFA" cx="8" cy="9" r="8"/><text font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="14" font-weight="bold" fill="#FFF"><tspan x="4" y="14">?</tspan></text></g></svg>

core/profiles/demo_umami/themes/umami/templates/components/help-block/block--help.html.twig

+{#
+/**
+ * @file
+ * Theme override for help messages.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   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.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+set classes = [
+  'block',
+  'block-' ~ configuration.provider|clean_class,
+  'block-' ~ plugin_id|clean_class,
+]
+%}
+<div{{ attributes.addClass(classes) }}>
+  <div class="block-help__container">
+    {{ title_prefix }}
+    {% if label %}
+      <h2{{ title_attributes }}>{{ label }}</h2>
+    {% endif %}
+    {{ title_suffix }}
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </div>
+</div>

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

@@ -59,8 +59,8 @@
   {% endif %}
 
   {% if page.highlighted %}
-    <div class="container">
-      <div class="layout-highlighted">
+    <div class="layout-highlighted">
+      <div class="container">
         {{ page.highlighted }}
       </div>
     </div>

core/profiles/demo_umami/themes/umami/umami.libraries.yml

@@ -7,6 +7,7 @@ global:
       css/components/blocks/banner/banner.css: {}
       css/components/blocks/branding/branding.css: {}
       css/components/blocks/disclaimer/disclaimer.css: {}
+      css/components/blocks/help/help.css: {}
       css/components/blocks/page-title/page-title.css: {}
       css/components/blocks/footer-promo/footer-promo.css: {}
       css/components/blocks/language-switcher/language-switcher.css: {}
@@ -34,6 +35,7 @@ global:
       css/components/regions/bottom/bottom.css: {}
       css/components/regions/footer/footer.css: {}
       css/components/regions/header/header.css: {}
+      css/components/regions/highlighted/highlighted.css: {}
       css/components/regions/pre-header/pre-header.css: {}
       css/components/toolbar/toolbar.css: {}
     layout: