From 2fc5404590c57efb923533b458e1994a85d42c71 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 7 Feb 2019 10:08:26 +0100 Subject: [PATCH 1/2] Try: Show background and increased opacity on disabled switcher This one goes out to all the @chrivanpatten's in the crowd! Well, specifically, it is in response to this conversation we had here: https://github.com/WordPress/gutenberg/issues/11669#issuecomment-456808244 The problem: we always show the Block Switcher interface, even if no transformations are available. When no transformations are available, the buttonis _disabled_, which usually means it needs to have very contrast. However in this case, the block switcher also works as a block type indicator, which makes it valuable to be able to see the icon in question. This PR tries to marry the two challenges and shows the button as disabled adding a light gray background, but still increasing the opacity. Thoughts? --- .../editor/src/components/block-switcher/style.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss index a994ff75424044..caef9e50bfb2e5 100644 --- a/packages/editor/src/components/block-switcher/style.scss +++ b/packages/editor/src/components/block-switcher/style.scss @@ -11,15 +11,23 @@ padding: 3px; } - .components-icon-button.editor-block-switcher__no-switcher-icon { width: $icon-button-size + 6px + 6px; + .editor-block-icon { margin-right: auto; margin-left: auto; } } +// When the block switcher does not have any transformations, we show it but as disabled. +// The background and opacity change helps make the icon legible, despite being disabled. +.components-button.editor-block-switcher__no-switcher-icon:disabled { + background: $light-gray-100; + border-radius: 0; + opacity: 0.8; +} + // Style this the same as the block buttons in the library. // Needs specificiity to override the icon button. .components-icon-button.editor-block-switcher__toggle { From 826ab85e07883e283731e3a05d51d0b82d918ff6 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 8 Feb 2019 10:07:09 +0100 Subject: [PATCH 2/2] Try darker gray and monochrome icon. --- .../editor/src/components/block-switcher/style.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss index caef9e50bfb2e5..0f062116d1b002 100644 --- a/packages/editor/src/components/block-switcher/style.scss +++ b/packages/editor/src/components/block-switcher/style.scss @@ -23,9 +23,16 @@ // When the block switcher does not have any transformations, we show it but as disabled. // The background and opacity change helps make the icon legible, despite being disabled. .components-button.editor-block-switcher__no-switcher-icon:disabled { - background: $light-gray-100; + background: $light-gray-200; border-radius: 0; - opacity: 0.8; + opacity: 0.84; + + // Also make the icon monochrome to further imply disabled state. + // We use !important here because icon colors are set as inline styles, + // and should be overridden when disabled. + .editor-block-icon.has-colors { + color: $dark-gray-500 !important; + } } // Style this the same as the block buttons in the library.