Issue #3188136 by ahsannazir, tirupati_singh, yevko, bhanu951, kostyashupenko,...

Issue #3188136 by ahsannazir, tirupati_singh, yevko, bhanu951, kostyashupenko, arunkumark, gauravvvv, claudiu.cristea, ameymudras, mherchel, guilhermevp, sagarmohite0031, sourav_paul, manojithape, chetanbharambe, vikashsoni, akhildev.cs, redseujac, emofsnead, andy-blum, smustgrave, alexpott: The site slogan doesn't show with Olivero

core/tests/Drupal/FunctionalTests/Theme/OliveroTest.php

@@ -162,4 +162,16 @@ public function testPagerAttribute(): void {
     }
   }
 
+  /**
+   * Tests slogan of system branding block.
+   */
+  public function testSystemSiteBrandingSlogan(): void {
+    $this->config('system.site')
+      ->set('slogan', 'Community carpentry')
+      ->save();
+
+    $this->drupalGet('<front>');
+    $this->assertSession()->pageTextContains('Community carpentry');
+  }
+
 }

core/themes/olivero/config/optional/block.block.olivero_site_branding.yml

@@ -18,5 +18,5 @@ settings:
   provider: system
   use_site_logo: true
   use_site_name: true
-  use_site_slogan: false
+  use_site_slogan: true
 visibility: {  }

core/themes/olivero/css/components/header-site-branding.css

@@ -17,7 +17,7 @@
   min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
   min-height: var(--sp3);
   margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
-  padding-block: 0 var(--sp0-5);
+  padding-block: var(--sp0-5);
   padding-inline-start: var(--container-padding);
   padding-inline-end: var(--container-padding);
   background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
@@ -66,6 +66,7 @@
 .site-branding__inner {
   display: flex;
   align-items: center;
+  gap: var(--sp0-5);
 }
 
 .site-branding__inner a {
@@ -113,8 +114,6 @@
 
 .site-branding__text {
   color: var(--color--white);
-  font-size: 1.125rem;
-  font-weight: bold;
 }
 
 .site-branding__text a {
@@ -123,24 +122,43 @@
 
 @media (min-width: 43.75rem) {
   .site-branding__text {
+    display: grid;
+    gap: var(--sp0-5);
+  }
+}
+
+.site-branding__name {
+  font-size: 1.125rem;
+  font-weight: bold;
+}
+
+@media (min-width: 43.75rem) {
+  .site-branding__name {
     font-size: 1.75rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width: 75rem) {
-  .site-branding__text {
+  .site-branding__name {
     letter-spacing: 0.02em;
     font-size: 2rem;
     line-height: var(--sp2);
   }
 }
 
+.site-branding__slogan {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+}
+
+@media (min-width: 43.75rem) {
+  .site-branding__slogan {
+    font-size: var(--font-size-base);
+  }
+}
+
 .site-branding--bg-gray .site-branding__text,
 .site-branding--bg-white .site-branding__text {
   color: var(--color--primary-50);
 }
-
-.site-branding__logo + .site-branding__text {
-  margin-inline-start: 0.75rem;
-}

core/themes/olivero/css/components/header-site-branding.pcss.css

@@ -12,7 +12,7 @@
   min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
   min-height: var(--sp3);
   margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
-  padding-block: 0 var(--sp0-5);
+  padding-block: var(--sp0-5);
   padding-inline-start: var(--container-padding);
   padding-inline-end: var(--container-padding);
   background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
@@ -53,6 +53,7 @@
 .site-branding__inner {
   display: flex;
   align-items: center;
+  gap: var(--sp0-5);
 
   & a {
     text-decoration: none;
@@ -91,13 +92,21 @@
 
 .site-branding__text {
   color: var(--color--white);
-  font-size: 18px;
-  font-weight: bold;
 
   & a {
     color: inherit;
   }
 
+  @media (--md) {
+    display: grid;
+    gap: var(--sp0-5);
+  }
+}
+
+.site-branding__name {
+  font-size: 18px;
+  font-weight: bold;
+
   @media (--md) {
     font-size: 28px;
     line-height: 28px;
@@ -110,11 +119,16 @@
   }
 }
 
+.site-branding__slogan {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+
+  @media (--md) {
+    font-size: var(--font-size-base);
+  }
+}
+
 .site-branding--bg-gray .site-branding__text,
 .site-branding--bg-white .site-branding__text {
   color: var(--color--primary-50);
 }
-
-.site-branding__logo + .site-branding__text {
-  margin-inline-start: 12px;
-}

core/themes/olivero/templates/block/block--system-branding-block.html.twig

@@ -18,14 +18,19 @@
   <div class="site-branding__inner">
     {% if site_logo %}
       <a href="{{ path('<front>') }}" rel="home" class="site-branding__logo">
-        <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" fetchpriority="high" />
+        <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" fetchpriority="high"/>
       </a>
     {% endif %}
-    {% if site_name %}
+    {% if site_name or site_slogan %}
       <div class="site-branding__text">
-        <div class="site-branding__name">
-          <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-        </div>
+        {% if site_name %}
+          <div class="site-branding__name">
+            <a href="{{ path('<front>') }}" rel="home" title="{{ 'Home'|t }}">{{ site_name }}</a>
+          </div>
+        {% endif %}
+        {% if site_slogan %}
+          <div class="site-branding__slogan">{{ site_slogan }}</div>
+        {% endif %}
       </div>
     {% endif %}
   </div>