Issue #3469286 by tim bozeman: Navigation module integration

assets/3column.svg

@@ -3,11 +3,11 @@
   <defs>
     <style>
       .cls-1 {
-        fill: #fff;
+        fill: #4f5661;
       }
     </style>
   </defs>
   <rect class="cls-1" width="13.3" height="60"/>
   <rect class="cls-1" x="36.7" width="13.3" height="60"/>
   <rect class="cls-1" x="18.31" y="0" width="13.3" height="60"/>
-</svg>
\ No newline at end of file
+</svg>

assets/block.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#000000" viewBox="0 0 256 256"><path d="M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"></path></svg>

assets/cog.svg

-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.35 59.12">
-  <defs>
-    <style>
-      .cls-1, .cls-2 {
-        fill: #fff;
-      }
-
-      .cls-2 {
-        stroke: #fff;
-        stroke-miterlimit: 10;
-      }
-    </style>
-  </defs>
-  <path class="cls-1" d="m29.68,20.52c5.01,0,9.09,4.08,9.09,9.09s-4.08,9.09-9.09,9.09-9.09-4.08-9.09-9.09,4.08-9.09,9.09-9.09m0-12c-11.65,0-21.09,9.44-21.09,21.09s9.44,21.09,21.09,21.09,21.09-9.44,21.09-21.09-9.44-21.09-21.09-21.09h0Z"/>
-  <polygon class="cls-2" points="22.53 9.81 36.88 9.81 33.74 .5 25.76 .5 22.53 9.81"/>
-  <polygon class="cls-2" points="22.53 49.3 36.88 49.3 33.74 58.62 25.76 58.62 22.53 49.3"/>
-  <polygon class="cls-2" points="9.81 36.78 9.81 22.43 .5 25.57 .5 33.55 9.81 36.78"/>
-  <polygon class="cls-2" points="10.69 20.99 20.81 10.81 11.99 6.47 6.36 12.13 10.69 20.99"/>
-  <polygon class="cls-2" points="10.69 38.34 20.81 48.52 11.99 52.86 6.36 47.2 10.69 38.34"/>
-  <polygon class="cls-2" points="49.53 36.78 49.53 22.43 58.85 25.57 58.85 33.55 49.53 36.78"/>
-  <polygon class="cls-2" points="48.72 20.93 38.6 10.75 47.42 6.41 53.05 12.07 48.72 20.93"/>
-  <polygon class="cls-2" points="48.72 38.28 38.6 48.46 47.42 52.8 53.05 47.14 48.72 38.28"/>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#ffffff" viewBox="0 0 256 256"><path d="M216,130.16q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.6,107.6,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.29,107.29,0,0,0-26.25-10.86,8,8,0,0,0-7.06,1.48L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.6,107.6,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z"></path></svg>

assets/columns.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#ffffff" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM112,184H56a8,8,0,0,1,0-16h56a8,8,0,0,1,0,16Zm0-32H56a8,8,0,0,1,0-16h56a8,8,0,0,1,0,16Zm0-32H56a8,8,0,0,1,0-16h56a8,8,0,0,1,0,16Zm0-32H56a8,8,0,0,1,0-16h56a8,8,0,0,1,0,16Zm88,96H144a8,8,0,0,1,0-16h56a8,8,0,0,1,0,16Zm0-32H144a8,8,0,0,1,0-16h56a8,8,0,0,1,0,16Zm0-32H144a8,8,0,0,1,0-16h56a8,8,0,0,1,0,16Zm0-32H144a8,8,0,0,1,0-16h56a8,8,0,0,1,0,16Z"></path></svg>

assets/image.svg

@@ -7,7 +7,7 @@
       }
 
       .cls-1, .cls-2 {
-        stroke: #fff;
+        stroke: #4f5661;
         stroke-miterlimit: 10;
         stroke-width: 5px;
       }
@@ -21,4 +21,4 @@
   <polygon class="cls-1" points="70.02 201.25 149.31 141.96 245.19 201.25 70.02 201.25"/>
   <polyline class="cls-1" points="142.72 201.25 21.74 201.25 87.84 123.64 142.72 201.25"/>
   <circle class="cls-1" cx="207.85" cy="92.88" r="22.45"/>
-</svg>
\ No newline at end of file
+</svg>

assets/layout-cursor.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19.5">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke: #fff;
+        stroke-miterlimit: 10;
+        stroke-width: .25px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M21.12.12H1.88C.91.12.12.91.12,1.88v15.75c0,.97.78,1.75,1.75,1.75h19.25c.97,0,1.75-.78,1.75-1.75V1.88c0-.97-.78-1.75-1.75-1.75ZM1.88,1.88h19.25v4.38H1.88V1.88ZM21.12,17.62h-11.38v-9.62h11.38v9.62Z"/>
+</svg>

assets/layout.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 256 256"><path fill="currentColor" d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V96H40V56ZM40,112H96v88H40Zm176,88H112V112H216v88Z"></path></svg>

assets/plain-text.svg

@@ -4,7 +4,7 @@
     <style>
       .cls-1 {
         fill: none;
-        stroke: #fff;
+        stroke: #4f5661;
         stroke-miterlimit: 10;
         stroke-width: 6px;
       }
@@ -15,4 +15,4 @@
   <path class="cls-1" d="m6.15,230.5c20.62,0,20.62,19.92,41.25,19.92s20.6-19.97,41.23-19.97,20.62,19.92,41.25,19.92,20.6-19.97,41.23-19.97,20.62,19.92,41.25,19.92,20.6-19.97,41.23-19.97"/>
   <path class="cls-1" d="m6.15,170.11c20.62,0,20.62,19.92,41.25,19.92s20.6-19.97,41.23-19.97,20.62,19.92,41.25,19.92,20.6-19.97,41.23-19.97,20.62,19.92,41.25,19.92,20.6-19.97,41.23-19.97"/>
   <path class="cls-1" d="m6.24,112.63c20.62,0,20.62,19.92,41.25,19.92s20.6-19.97,41.23-19.97,20.62,19.92,41.25,19.92,20.6-19.97,41.23-19.97,20.62,19.92,41.25,19.92,20.6-19.97,41.23-19.97"/>
-</svg>
\ No newline at end of file
+</svg>

assets/remove.svg

-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.86 36.86">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #fff;
-        stroke-miterlimit: 10;
-        stroke-width: 9px;
-      }
-    </style>
-  </defs>
-  <line class="cls-1" x1="3.18" y1="3.18" x2="33.68" y2="33.68"/>
-  <line class="cls-1" x1="33.68" y1="3.18" x2="3.18" y2="33.68"/>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#ffffff" viewBox="0 0 256 256"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg>

assets/section.svg

@@ -4,13 +4,13 @@
     <style>
       .cls-1 {
         fill: none;
-        stroke: #fff;
+        stroke: #323946;
         stroke-miterlimit: 10;
         stroke-width: 13px;
       }
 
       .cls-2 {
-        fill: #fff;
+        fill: #323946;
         stroke-width: 0px;
       }
     </style>
@@ -20,4 +20,4 @@
     <polygon class="cls-1" points="242.88 243.25 6.5 243.25 6.5 6.5 130.26 6.5 242.88 6.5 242.88 243.25"/>
     <rect class="cls-1" x="6.87" y="6.75" width="112.29" height="37.71"/>
   </g>
-</svg>
\ No newline at end of file
+</svg>

assets/updown.svg

-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.49 58.99">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke-width: 11px;
-      }
-
-      .cls-1, .cls-2 {
-        stroke: #fff;
-        stroke-miterlimit: 10;
-      }
-
-      .cls-2 {
-        stroke-width: 8px;
-      }
-    </style>
-  </defs>
-  <polygon class="cls-2" points="9.67 49.69 13.28 53.33 16.92 49.71 9.67 49.69"/>
-  <line class="cls-1" x1="13.39" y1="11.22" x2="13.21" y2="47.03"/>
-  <polygon class="cls-2" points="16.97 9.31 13.44 5.66 9.76 9.23 16.97 9.31"/>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#ffffff" viewBox="0 0 256 256"><path d="M168.49,191.51a12,12,0,0,1,0,17l-32,32a12,12,0,0,1-17,0l-32-32a12,12,0,0,1,17-17L116,203V53L104.49,64.49a12,12,0,1,1-17-17l32-32a12,12,0,0,1,17,0l32,32a12,12,0,0,1-17,17L140,53V203l11.51-11.52A12,12,0,0,1,168.49,191.51Z"></path></svg>

css/lb-plus/section.css

@@ -8,7 +8,7 @@
   -webkit-user-select: none;
   background-color: var(--lb-plus-main-color);
   font-size: 12px;
-  z-index: 10;
+  z-index: 2;
 }
 
 .lb-plus-section-admin a {
@@ -21,7 +21,7 @@
 
 .active .lb-plus-section.hover:hover {
   box-shadow: 0 0 0 10px var(--lb-plus-main-color);
-  z-index: 10;
+  z-index: 2;
 }
 
 .active .lb-plus-section.hover:hover .lb-plus-section-admin {

css/lb-plus/sidebar.css

-#lb-plus-sidebar {
-  position: fixed;
-  right: 0;
-  top: 80px;
-  width: 350px;
-  overflow-y: auto;
-  background-color: var(--lb-plus-main-color);
-  z-index: 490;
-  display: none;
-  color: white;
-  font-weight: 600;
-  margin-bottom: 0;
+#lb_plus-left-sidebar {
+  user-select: none;
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
-
 .draggable-block,
 .draggable-section {
   display: grid;
-  margin: 1em;
+  margin: 0;
   grid-template-columns: 1fr 1fr 1fr;
   align-items: center;
   column-gap: 1em;
   -webkit-user-drag: element;
   user-select: none;
   -webkit-user-select: none;
-  padding: .5em;
+  padding: .25rem;
   cursor: move;
 }
 .draggable-section:hover,
@@ -41,6 +32,9 @@
 
 .draggable-block-label {
   grid-column: span 2;
+  font-size: var(--admin-toolbar-font-size-info-sm);
+  font-variation-settings: 'wght' 700;
+  color: var(--admin-toolbar-color-gray-800);
 }
 
 /* Tab styling */
@@ -52,6 +46,9 @@
 }
 
 .choose-block-tab {
+  font-size: var(--admin-toolbar-font-size-heading-md);
+  color: var(--admin-toolbar-color-gray-900);
+  font-variation-settings: 'wght' 700;
   user-select: none;
   -webkit-user-select: none;
   cursor: pointer;
@@ -64,8 +61,7 @@
 }
 
 .choose-block-tab.active {
-  background-color: white;
-  color: #000;
+  text-decoration: underline var(--admin-toolbar-color-gray-800) 5px;
 }
 
 #close-add-block-sidebar {
@@ -96,6 +92,9 @@
 
 #other-block-content summary {
   background-color: transparent;
+  font-size: var(--admin-toolbar-font-size-info-sm);
+  font-variation-settings: 'wght' 700;
+  color: var(--admin-toolbar-color-gray-800);
 }
 
 #other-block-content .draggable-block {
@@ -103,5 +102,5 @@
 }
 
 #other-block-content .details-wrapper {
-  margin: 0 1em;
+  margin: 0;
 }

js/lb-plus.js

@@ -3,7 +3,6 @@ import * as blocks from './lb-plus/blocks.js';
 import * as dropZones from './lb-plus/drop-zones.js';
 
 (($, Drupal, once) => {
-
   Drupal.LBPlus = {};
 
   /**
@@ -38,5 +37,6 @@ jQuery.fn.LBPlusSetLayoutBuilderInactive = () => {
   for (const layoutBuilders of document.querySelectorAll('.layout-builder.active')) {
     layoutBuilders.classList.remove('active');
   }
-  document.getElementById('lb-plus-nested-layout-breadcrumb').style.display = 'block';
+  // @todo Re-implement bread crumbs.
+  // document.getElementById('lb-plus-nested-layout-breadcrumb').style.display = 'block';
 };

js/lb-plus/drop-zones.js

@@ -213,7 +213,8 @@ function dropZonesEnterRegion (message, e) {
       column.insertBefore(dropZoneListener(regionDropZone), column.firstElementChild);
     }
     // Add a dropzone after each block.
-    for (let block of column.children) {
+    for (let entityWrapper of column.children) {
+      const block = entityWrapper.hasAttribute('data-toolbar-plus-entity-wrapper') ? entityWrapper.firstElementChild : entityWrapper;
       if (
         // Ensure this is a block. It is tempting to call
         // column.querySelectorAll('.js-layout-builder-block') here, but we need
@@ -227,7 +228,7 @@ function dropZonesEnterRegion (message, e) {
       ) {
         regionDropZone = createDropZone(message, 'region').cloneNode(true);
         regionDropZone.setAttribute('preceding-block-uuid', block.dataset.blockUuid);
-        column.insertBefore(dropZoneListener(regionDropZone), block.nextSibling);
+        column.insertBefore(dropZoneListener(regionDropZone), entityWrapper.nextSibling);
       }
     }
   }

lb_plus.libraries.yml

 layout_builder:
   js:
-    js/lb-plus.js: { attributes: { type: 'module' }}
-    js/misc/layout-builder.js: {}
     js/misc/dnd-page-scroll.js: {}
+    js/misc/layout-builder.js: {}
+    js/lb-plus.js: { attributes: { type: 'module' }}
   css:
     theme:
       css/lb-plus/section.css: {}
@@ -15,15 +15,17 @@ layout_builder:
   dependencies:
     - core/drupal.displace
     - core/drupal.message
+    - core/drupal.ajax
     - core/drupal.dialog
-    - toolbar/toolbar
 
 lb_plus_ui:
   js:
-    js/lb-plus-ui.js: {}
+    src/Plugin/Tool/lb-plus.js: { attributes: { type: 'module' }}
+  css:
+    theme:
+      src/Plugin/Tool/lb-plus.css: {}
   dependencies:
-    - core/drupal.announce
-    - core/drupal.debounce
+    - toolbar_plus/toolbar_plus
 
 settings:
   js:

lb_plus.module

@@ -74,18 +74,16 @@ function lb_plus_page_top(array &$page_top) {
  * Implements hook_preprocess_HOOK().
  */
 function lb_plus_preprocess_status_messages(&$variables) {
-  if (LayoutBuilderPlusUI::LbType() === 'layout_block') {
-    // Remove the unsaved changes message in nested layout builders. It's annoying.
-    if (isset($variables['message_list']['warning'])) {
-      foreach ($variables['message_list']['warning'] as $key => $message) {
-        if (str_contains($message, 'You have unsaved changes.')) {
-          unset($variables['message_list']['warning'][$key]);
-        }
-      }
-      if (empty($variables['message_list']['warning'])) {
-        unset($variables['message_list']['warning']);
+  // Remove the "Unsaved changes" messages.
+  if (isset($variables['message_list']['warning'])) {
+    foreach ($variables['message_list']['warning'] as $key => $message) {
+      if (str_contains($message, 'You have unsaved changes.')) {
+        unset($variables['message_list']['warning'][$key]);
       }
     }
+    if (empty($variables['message_list']['warning'])) {
+      unset($variables['message_list']['warning']);
+    }
   }
 }
 
@@ -169,3 +167,21 @@ function lb_plus_entity_update(EntityInterface $entity) {
     \Drupal::classResolver(InlineBlockEntityOperations::class)->trackInlineBlockUsage($entity);
   }
 }
+
+/**
+ * Implements hook_page_attachments().
+ */
+function lb_plus_page_attachments(array &$attachments) {
+  if (!\Drupal::currentUser()->hasPermission('configure any layout')) {
+    return;
+  }
+
+  // Don't edit admin pages.
+  $route = \Drupal::service('current_route_match')->getCurrentRouteMatch()->getRouteObject();
+  if (\Drupal::service('router.admin_context')->isAdminRoute($route)) {
+    return;
+  }
+
+  $attachments['#cache']['contexts'][] = 'user.permissions';
+  $attachments['#attached']['library'][] = 'lb_plus/lb_plus_ui';
+}

lb_plus.routing.yml

@@ -200,3 +200,29 @@ lb_plus.js.configure_changed_layout:
     parameters:
       section_storage:
         layout_builder_tempstore: TRUE
+
+lb_plus.js.enable-ui:
+  path: '/lb-plus/enable-layout-mode/{section_storage_type}/{section_storage}'
+  defaults:
+    _title: 'Layout Builder'
+    _controller: '\Drupal\lb_plus\Controller\LbPlusUi::enabledLayoutMode'
+  requirements:
+    _layout_builder_access: 'view'
+  options:
+    _admin_route: TRUE
+    parameters:
+      section_storage:
+        layout_builder_tempstore: TRUE
+
+lb_plus.js.disable-ui:
+  path: 'lb-plus/disable-layout-mode/{section_storage_type}/{section_storage}/{view_mode}'
+  defaults:
+    _title: 'Layout Builder'
+    _controller: '\Drupal\lb_plus\Controller\LbPlusUi::disableLayoutMode'
+  requirements:
+    _layout_builder_access: 'view'
+  options:
+    _admin_route: TRUE
+    parameters:
+      section_storage:
+        layout_builder_tempstore: TRUE

lb_plus.services.yml

@@ -20,7 +20,7 @@ services:
     class: Drupal\lb_plus\SectionStorageHandler
     arguments: ['@block_content.uuid_lookup', '@entity_type.manager', '@plugin.manager.layout_builder.section_storage', '@layout_builder.tempstore_repository', '@module_handler']
 
-  lb_plus.event_subscriber:
+  lb_plus.block_component_render_array:
     class: Drupal\lb_plus\EventSubscriber\BlockComponentRenderArray
     arguments: ['@lb_plus.section_storage_handler']
     tags:

modules/lb_plus_edit_plus/src/Form/UpdateBlockForm.php

@@ -6,6 +6,7 @@ use Drupal\Core\Cache\Cache;
 use Drupal\Core\Ajax\AjaxResponse;
 use Drupal\Core\Form\SubformState;
 use Drupal\lb_plus\LbPlusFormTrait;
+use Drupal\Core\Ajax\InvokeCommand;
 use Drupal\Core\Entity\EntityInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\layout_builder\SectionStorageInterface;
@@ -56,8 +57,6 @@ class UpdateBlockForm extends UpdateBlockFormBase {
     $storage['main_section_storage'] = $main_section_storage;
     $form_state->setStorage($storage);
 
-
-    $this->messenger()->addWarning($this->t('You have unsaved changes.'));
     $form_state->setRebuild(TRUE);
 
     // Clear the page cache.
@@ -73,12 +72,15 @@ class UpdateBlockForm extends UpdateBlockFormBase {
   protected function successfulAjaxSubmit(array $form, FormStateInterface $form_state) {
     $response = new AjaxResponse();
 
-    $entity = $this->getMainEntity($form, $form_state);
-    $this->buildBottomBar($entity, $response);
     $this->renderMessages($response);
-    $this->updateForm($response, $form, $form_state);
     $this->updatePage($response, $form, $form_state);
 
+    // Check if a field was just emptied.
+    if (!empty($form_state->getUserInput()['settings']['block_form']['empty_field'])) {
+      $this->updateForm($response, $form, $form_state);
+    }
+    $response->addCommand(new InvokeCommand(NULL, 'editPlusIsDoneUpdating'));
+
     return $response;
   }