Issue #2922603 by tedbow, Wim Leers, andrewmacpherson: Mark Settings Tray module as stable

core/lib/Drupal/Core/Block/Plugin/Block/PageTitleBlock.php

@@ -11,6 +11,9 @@ use Drupal\Core\Block\TitleBlockPluginInterface;
  * @Block(
  *   id = "page_title_block",
  *   admin_label = @Translation("Page title"),
+ *   forms = {
+ *     "settings_tray" = FALSE,
+ *   },
  * )
  */
 class PageTitleBlock extends BlockBase implements TitleBlockPluginInterface {

core/modules/help/src/Plugin/Block/HelpBlock.php

@@ -15,7 +15,10 @@ use Symfony\Component\HttpFoundation\Request;
  *
  * @Block(
  *   id = "help_block",
- *   admin_label = @Translation("Help")
+ *   admin_label = @Translation("Help"),
+ *   forms = {
+ *     "settings_tray" = FALSE,
+ *   },
  * )
  */
 class HelpBlock extends BlockBase implements ContainerFactoryPluginInterface {

core/modules/settings_tray/settings_tray.info.yml

@@ -1,7 +1,7 @@
 name: 'Settings Tray'
 type: module
 description: 'Provides a sidebar to configure blocks on the page.'
-package: Core (Experimental)
+package: Core
 version: VERSION
 core: 8.x
 dependencies:

core/modules/settings_tray/settings_tray.module

@@ -9,8 +9,6 @@ use Drupal\Core\Asset\AttachedAssetsInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\Core\Url;
 use Drupal\settings_tray\Block\BlockEntityOffCanvasForm;
-use Drupal\settings_tray\Form\SystemBrandingOffCanvasForm;
-use Drupal\settings_tray\Form\SystemMenuOffCanvasForm;
 use Drupal\block\entity\Block;
 use Drupal\block\BlockInterface;
 
@@ -168,47 +166,10 @@ function settings_tray_toolbar_alter(&$items) {
  */
 function settings_tray_block_alter(&$definitions) {
   foreach ($definitions as &$definition) {
-    // If a block plugin already defines its own 'settings_tray' form, use that
-    // form instead of specifying one here.
-    if (isset($definition['forms']['settings_tray'])) {
-      continue;
-    }
-
-    switch ($definition['id']) {
-      // Use specialized forms for certain blocks that do not yet provide the
-      // form with their own annotation.
-      // @todo Move these into the corresponding block plugin annotations in
-      //   https://www.drupal.org/node/2896356.
-      case 'system_menu_block':
-        $definition['forms']['settings_tray'] = SystemMenuOffCanvasForm::class;
-        break;
-
-      case 'system_branding_block':
-        $definition['forms']['settings_tray'] = SystemBrandingOffCanvasForm::class;
-        break;
-
-      // No off-canvas form for the page title block, despite it having
-      // contextual links: it's too confusing that you're editing configuration,
-      // not content, so the title itself cannot actually be changed.
-      // @todo Move these into the corresponding block plugin annotations in
-      //   https://www.drupal.org/node/2896356.
-      case 'page_title_block':
-        $definition['forms']['settings_tray'] = FALSE;
-        break;
-
-      case 'system_main_block':
-        $definition['forms']['settings_tray'] = FALSE;
-        break;
-
-      case 'help_block':
-        $definition['forms']['settings_tray'] = FALSE;
-        break;
-
-      // Otherwise, use the block plugin's normal form rather than
-      // a custom form for Settings Tray.
-      default:
-        $definition['forms']['settings_tray'] = $definition['class'];
-        break;
+    // If a block plugin does not define its own 'settings_tray' form, use the
+    // plugin class itself.
+    if (!isset($definition['forms']['settings_tray'])) {
+      $definition['forms']['settings_tray'] = $definition['class'];
     }
   }
 }

core/modules/system/src/Form/SystemBrandingOffCanvasForm.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\settings_tray\Form;
+namespace Drupal\system\Form;
 
 use Drupal\Core\Access\AccessResult;
 use Drupal\Core\Config\ConfigFactoryInterface;
@@ -10,9 +10,7 @@ use Drupal\Core\Plugin\PluginFormBase;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 
 /**
- * The off-canvas form handler for the SystemBrandingBlock.
- *
- * @see settings_tray_block_alter()
+ * The settings_tray form handler for the SystemBrandingBlock.
  *
  * @internal
  */

core/modules/system/src/Form/SystemMenuOffCanvasForm.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\settings_tray\Form;
+namespace Drupal\system\Form;
 
 use Drupal\Component\Plugin\PluginInspectionInterface;
 use Drupal\Core\Access\AccessResult;
@@ -18,9 +18,7 @@ use Drupal\system\MenuInterface;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 
 /**
- * The off-canvas form handler for the SystemMenuBlock.
- *
- * @see settings_tray_block_alter()
+ * The setting_tray form handler for the SystemMenuBlock.
  *
  * @internal
  */

core/modules/system/src/Plugin/Block/SystemBrandingBlock.php

@@ -15,7 +15,10 @@ use Symfony\Component\DependencyInjection\ContainerInterface;
  *
  * @Block(
  *   id = "system_branding_block",
- *   admin_label = @Translation("Site branding")
+ *   admin_label = @Translation("Site branding"),
+ *   forms = {
+ *     "settings_tray" = "Drupal\system\Form\SystemBrandingOffCanvasForm",
+ *   },
  * )
  */
 class SystemBrandingBlock extends BlockBase implements ContainerFactoryPluginInterface {

core/modules/system/src/Plugin/Block/SystemMainBlock.php

@@ -10,7 +10,10 @@ use Drupal\Core\Block\MainContentBlockPluginInterface;
  *
  * @Block(
  *   id = "system_main_block",
- *   admin_label = @Translation("Main page content")
+ *   admin_label = @Translation("Main page content"),
+ *   forms = {
+ *     "settings_tray" = FALSE,
+ *   },
  * )
  */
 class SystemMainBlock extends BlockBase implements MainContentBlockPluginInterface {

core/modules/system/src/Plugin/Block/SystemMenuBlock.php

@@ -16,7 +16,10 @@ use Symfony\Component\DependencyInjection\ContainerInterface;
  *   id = "system_menu_block",
  *   admin_label = @Translation("Menu"),
  *   category = @Translation("Menus"),
- *   deriver = "Drupal\system\Plugin\Derivative\SystemMenuBlock"
+ *   deriver = "Drupal\system\Plugin\Derivative\SystemMenuBlock",
+ *   forms = {
+ *     "settings_tray" = "\Drupal\system\Form\SystemMenuOffCanvasForm",
+ *   },
  * )
  */
 class SystemMenuBlock extends BlockBase implements ContainerFactoryPluginInterface {

core/themes/stable/css/settings_tray/settings_tray.module.css

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Styling for Settings Tray module.
+ */
+/*
+ * Position the edit toolbar tab.
+ * @todo Move changes into contextual module when Settings Tray is not
+ *   experimental: https://www.drupal.org/node/2784591.
+ */
+.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
+  float: left;
+}
+[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
+  float: right;
+}
+
+.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode a,
+.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode input {
+  pointer-events: none;
+}
+.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode .contextual-links a {
+  pointer-events: inherit;
+}

core/themes/stable/css/settings_tray/settings_tray.motion.css

@@ -0,0 +1,19 @@
+/**
+ * @file
+ * Motion effects for Settings Tray module.
+ *
+ * Motion effects are in a separate file so that they can be easily turned off
+ * to improve performance if desired.
+ */
+
+/* Transition the edit icon in the toolbar. */
+#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
+  transition: all 0.7s ease;
+}
+
+/* Transition the editables on the page, their contextual links and their hover states. */
+.dialog-off-canvas-main-canvas .contextual,
+.dialog-off-canvas-main-canvas .js-settings-tray-edit-mode .settings-tray-editable,
+.dialog-off-canvas-main-canvas.js-off-canvas-dialog-open .js-settings-tray-edit-mode .settings-tray-editable {
+  transition: all 0.7s ease;
+}

core/themes/stable/css/settings_tray/settings_tray.theme.css

@@ -0,0 +1,70 @@
+/**
+ * @file
+ * Visual styling for Settings Tray module.
+ */
+
+/* @todo remove the @imports when we find a better way to load these styles last.
+ * https://www.drupal.org/node/1945262.
+ */
+
+/* Style the edit mode toolbar and tabs. */
+#toolbar-bar.js-settings-tray-edit-mode {
+  background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
+}
+.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
+  color: #999;
+}
+.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
+  color: #333;
+}
+
+/* Style both the edit and editing states of the contextual links toggle tab. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
+  background-color: #0066a1;
+  background-image: linear-gradient(to bottom, #0066a1, #005b98);
+  color: #eee;
+  text-shadow: none;
+  font-weight: bold;
+  outline: none;
+}
+/* Make the hover of the inactive state the same as the active state. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
+  background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
+  color: #fff;
+}
+/* Make the hover of the active state the same as the inactive state. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
+  background-color: #0066a1;
+  background-image: linear-gradient(to bottom, #0066a1, #005b98);
+  color: #fff;
+}
+/* Make the inactive icon grey. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
+  background-image: url(../../../misc/icons/bebebe/pencil.svg);
+}
+/* Make the active icon white. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+
+/* Style the editables while in edit mode. */
+.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode .settings-tray-editable {
+  outline: 1px dashed rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
+}
+.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode .settings-tray-editable:hover,
+.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode .settings-tray-editable.settings-tray-active-editable {
+  background-color: rgba(0, 0, 0, 0.2);
+}

core/themes/stable/css/settings_tray/settings_tray.toolbar.css

@@ -0,0 +1,66 @@
+/**
+ * @file
+ * Visual styling for the toolbar when Settings Tray module is enabled.
+ */
+
+/* @todo Move this into toolbar when module is not experimental:
+ *   https://www.drupal.org/node/2784593.
+ */
+
+/* Style the edit mode toolbar and tabs. */
+#toolbar-bar.js-settings-tray-edit-mode {
+  background-color: #fff;
+}
+#toolbar-bar.js-settings-tray-edit-mode .toolbar-item {
+  color: #999;
+}
+#toolbar-bar.js-settings-tray-edit-mode .toolbar-item .is-active {
+  color: #333;
+}
+
+/* Style both the edit and editing states of the contextual links toggle tab. */
+.toolbar-icon-edit.toolbar-item {
+  background-color: #0066a1;
+  background-image: linear-gradient(to bottom, #0066a1, #005b98);
+  color: #eee;
+  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+}
+.toolbar-icon-edit.toolbar-item.is-active {
+  background-color: #0a7bc1;
+  background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
+  color: #fff;
+  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+}
+.toolbar-tab:hover > .toolbar-icon-edit,
+.toolbar-icon-edit:focus .toolbar-item {
+  background-color: #0a7bc1;
+  background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
+  border-color: #1e5c90;
+  color: #fff;
+  outline: none;
+}
+.toolbar-icon.toolbar-icon-edit.toolbar-item:before,
+button.toolbar-icon.toolbar-icon-edit.toolbar-item:before {
+  background-image: url(../../../misc/icons/bebebe/pencil.svg);
+}
+.toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover,
+button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+
+#toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
+  color: #fff;
+}
+#toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
+  background-image: linear-gradient(to bottom, #0a6fb4, #0a65aa);
+}

core/themes/stable/stable.info.yml

@@ -169,6 +169,15 @@ libraries-override:
         css/quickedit.theme.css: css/quickedit/quickedit.theme.css
         css/quickedit.icons.theme.css: css/quickedit/quickedit.icons.theme.css
 
+  settings_tray/drupal.settings_tray:
+    css:
+      component:
+        css/settings_tray.module.css: css/settings_tray/settings_tray.module.css
+        css/settings_tray.motion.css: css/settings_tray/settings_tray.motion.css
+        css/settings_tray.toolbar.css: css/settings_tray/settings_tray.toolbar.css
+      theme:
+        css/settings_tray.theme.css: css/settings_tray/settings_tray.theme.css
+
   shortcut/drupal.shortcut:
     css:
       theme: