Issue #3377268: Add the "Back to site" link in the breadcrumb

assets/icons/return-left.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-left"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>

css/components/breadcrumb.css

@@ -23,16 +23,43 @@
   text-decoration: none;
 }
 
-.breadcrumb__link::after {
+.breadcrumb__item {
+  list-style: none;
+}
+
+.breadcrumb__list .breadcrumb__item + .breadcrumb__item::before {
+  padding: 0;
+  margin: 0 var(--space-s);
+}
+
+.path-admin .breadcrumb__item:first-child .breadcrumb__link::before {
+  content: "";
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-corner-up-left'%3e%3cpolyline points='9 14 4 9 9 4'/%3e%3cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3e%3c/svg%3e");
+  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-corner-up-left'%3e%3cpolyline points='9 14 4 9 9 4'/%3e%3cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3e%3c/svg%3e");
+  -webkit-mask-size: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  height: 0.875rem;
+  width: 0.875rem;
   display: inline-block;
-  padding: 0 var(--space-s);
-  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
+  padding-left: var(--space-xs);
+  background-color: var(--color-text);
 }
 
-.breadcrumb__item {
-  list-style: none;
+.path-admin .breadcrumb__item:first-child .breadcrumb__link:hover::before {
+  background-color: var(--color-link-hover);
+}
+
+.path-admin .breadcrumb__item:first-child + .breadcrumb__item {
+  display: flex;
+  align-content: center;
 }
 
-.breadcrumb__item:last-of-type .breadcrumb__link:after {
+.path-admin .breadcrumb__item:first-child + .breadcrumb__item::before {
   content: "";
+  width: 1px;
+  height: 100%;
+  background-color: var(--color-text);
+  display: inline;
 }

css/components/breadcrumb.pcss.css

@@ -13,18 +13,46 @@
   font-size: 13px;
   font-weight: 700;
   text-decoration: none;
-
-  &::after {
-    display: inline-block;
-    padding: 0 var(--space-s);
-    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
-  }
 }
 
 .breadcrumb__item {
   list-style: none;
+}
+
+.breadcrumb__list .breadcrumb__item + .breadcrumb__item::before {
+  padding: 0;
+  margin: 0 var(--space-s);
+}
+
+.path-admin .breadcrumb__item:first-child {
+  & .breadcrumb__link {
+    &::before {
+      content: '';
+      mask-image: url(../../assets/icons/return-left.svg);
+      mask-size: 16px;
+      mask-repeat: no-repeat;
+      block-size: 14px;
+      inline-size: 14px;
+      display: inline-block;
+      padding-inline-start: var(--space-xs);
+      background-color: var(--color-text);
+    }
+
+    &:hover::before {
+      background-color: var(--color-link-hover);
+    }
+  }
+
+  & + .breadcrumb__item {
+    display: flex;
+    align-content: center;
 
-  &:last-of-type .breadcrumb__link:after {
-    content: "";
+    &::before {
+      content: '';
+      inline-size: 1px;
+      block-size: 100%;
+      background-color: var(--color-text);
+      display: inline;
+    }
   }
 }

js/escapeAdmin.js

+/**
+ * @file
+ * Replaces the home link in toolbar with a back to site link.
+ */
+
+(function (Drupal, drupalSettings, once) {
+  const pathInfo = drupalSettings.path;
+  const escapeAdminPath = sessionStorage.getItem('escapeAdminPath');
+  const windowLocation = window.location;
+
+  // Saves the last non-administrative page in the browser to be able to link
+  // back to it when browsing administrative pages. If there is a destination
+  // parameter there is not need to save the current path because the page is
+  // loaded within an existing "workflow".
+  if (
+    !pathInfo.currentPathIsAdmin &&
+    !/destination=/.test(windowLocation.search)
+  ) {
+    sessionStorage.setItem('escapeAdminPath', windowLocation);
+  }
+
+  /**
+   * Replaces "Back to site" link url when appropriate.
+   *
+   * Back to site link points to the last non-administrative page the user
+   * visited within the same browser tab.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the replacement functionality to the toolbar-escape-admin element.
+   */
+  Drupal.behaviors.escapeAdmin = {
+    attach() {
+      const toolbarEscape = once('escapeAdmin', '[data-toolbar-escape-admin]');
+      if (
+        toolbarEscape.length &&
+        pathInfo.currentPathIsAdmin &&
+        escapeAdminPath !== null
+      ) {
+        toolbarEscape[0].setAttribute('href', escapeAdminPath);
+      }
+    },
+  };
+})(Drupal, drupalSettings, once);

navigation.libraries.yml

@@ -9,3 +9,13 @@ navigation:
       css/components/breadcrumb.css: {}
       css/components/icons.css: {}
       css/components/menu.css: {}
+
+navigation.escapeAdmin:
+  version: VERSION
+  js:
+    js/escapeAdmin.js: {}
+  dependencies:
+    - core/jquery
+    - core/drupal
+    - core/drupalSettings
+    - core/once

navigation.module

 <?php
+
+use Drupal\Core\Url;
+
 /**
  * Implements hook_preprocess_html().
  */
@@ -9,12 +12,20 @@ function navigation_preprocess_html(array &$variables) {
     '#attached' => [
       'library' => [
         'navigation/navigation',
+        'navigation/navigation.escapeAdmin'
       ],
     ],
     '#access' => \Drupal::currentUser()->hasPermission('access toolbar'),
   ];
 }
 
+/**
+ * Implements hook_theme_suggestions_HOOK_alter() for breadcrumb().
+ */
+function navigation_theme_suggestions_breadcrumb_alter(array &$suggestions, array $variables) {
+  array_unshift($suggestions, 'breadcrumb__navigation');
+}
+
 /**
  * Implements hook_theme().
  */
@@ -25,5 +36,29 @@ function navigation_theme($existing, $type, $theme, $path) {
     ],
   ];
 
+  $items['breadcrumb__navigation'] = [
+    'base hook' => 'breadcrumb',
+  ];
+
   return $items;
 }
+
+function navigation_preprocess_breadcrumb(&$variables) {
+  $variables['breadcrumb'] = [];
+  // add back to site link to breadcrumb if on admin page
+  if (\Drupal::service('router.admin_context')->isAdminRoute()) {
+    $variables['breadcrumb'] = [
+      [
+        'text' => t('Back to site'),
+        'url' => Url::fromRoute('<front>'),
+        'customAttr' => 'data-toolbar-escape-admin',
+      ]
+    ];
+  }
+  // build breadcrumb array
+  foreach ($variables['links'] as $key => $link) {
+    // if admin page, add 1 to key to account for back to site link
+    $key = \Drupal::service('router.admin_context')->isAdminRoute() ? $key + 1 : $key;
+    $variables['breadcrumb'][$key] = ['text' => $link->getText(), 'url' => $link->getUrl()->toString()];
+  }
+}

templates/breadcrumb--navigation.html.twig

+{#
+/**
+ * @file
+ * Theme override for a breadcrumb trail.
+ *
+ * Available variables:
+ * - breadcrumb: Breadcrumb trail items.
+ */
+#}
+
+{% if breadcrumb %}
+  <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
+    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
+    <ol class="breadcrumb__list">
+    {% for item in breadcrumb %}
+      <li class="breadcrumb__item">
+        {% if item.url %}
+          <a href="{{ item.url }}" class="breadcrumb__link"{{ item.customAttr ? ' ' ~ item.customAttr }}>{{ item.text }}</a>
+        {% else %}
+          {{ item.text }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ol>
+  </nav>
+{% endif %}