From 5a2fe8144df573642a83d7a18ebc5308dd9a7ddc Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 7 Sep 2018 10:47:54 +0100 Subject: [PATCH 01/10] Add collapse support to the toolbar component --- .../components/src/dropdown-menu/index.js | 56 ++++++++++++------- .../components/src/dropdown-menu/style.scss | 26 +++++++-- packages/components/src/toolbar/index.js | 14 ++++- 3 files changed, 70 insertions(+), 26 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index 0ec348097c7db..012de475f959a 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -2,6 +2,7 @@ * External dependencies */ import classnames from 'classnames'; +import { flatMap } from 'lodash'; /** * WordPress dependencies @@ -21,14 +22,21 @@ function DropdownMenu( { label, menuLabel, controls, + className, } ) { if ( ! controls || ! controls.length ) { return null; } + // Normalize controls to nested array of objects (sets of controls) + let controlSets = controls; + if ( ! Array.isArray( controlSets[ 0 ] ) ) { + controlSets = [ controlSets ]; + } + return ( { const openOnArrowDown = ( event ) => { @@ -64,26 +72,32 @@ function DropdownMenu( { role="menu" aria-label={ menuLabel } > - { controls.map( ( control, index ) => ( - { - if ( control.isDisabled ) { - return; - } - event.stopPropagation(); - onClose(); - if ( control.onClick ) { - control.onClick(); - } - } } - className="components-dropdown-menu__menu-item" - icon={ control.icon } - role="menuitem" - disabled={ control.isDisabled } - > - { control.title } - + { flatMap( controlSets, ( controlSet, indexOfSet ) => ( + controlSet.map( ( control, indexOfControl ) => ( + { + if ( control.isDisabled ) { + return; + } + event.stopPropagation(); + onClose(); + if ( control.onClick ) { + control.onClick(); + } + } } + className={ classnames( + 'components-dropdown-menu__menu-item', + { 'has-separator': indexOfSet > 0 && indexOfControl === 0 } + ) } + icon={ control.icon } + role="menuitem" + disabled={ control.isDisabled } + > + { control.title } + + ) ) ) ) } ); diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index fa53a1040e4a0..1c78f1dc8a5b4 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -7,12 +7,12 @@ margin: 0; padding: 4px; border: $border-width solid transparent; - border-radius: 0; display: flex; flex-direction: row; &.is-active, &.is-active:hover { + box-shadow: none; background-color: $dark-gray-500; color: $white; } @@ -26,7 +26,7 @@ &:hover, &:focus, - &:not(:disabled):hover { + &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { box-shadow: none; outline: none; color: $dark-gray-500; @@ -45,9 +45,8 @@ } .components-dropdown-menu__menu { - // note that left is set by react in a style attribute width: 100%; - padding: 3px 3px 0; + padding: 9px; font-family: $default-font; font-size: $default-font-size; line-height: $default-line-height; @@ -62,6 +61,25 @@ .dashicon { margin-right: 8px; } + + + &.has-separator { + margin-top: 6px; + position: relative; + overflow: visible; + } + + &.has-separator::before { + display: block; + content: ""; + box-sizing: content-box; + background-color: $light-gray-500; + position: absolute; + top: -3px; + left: 0; + right: 0; + height: 1px; + } } } diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js index 91f1baffbd211..548c5fb4affff 100644 --- a/packages/components/src/toolbar/index.js +++ b/packages/components/src/toolbar/index.js @@ -8,6 +8,7 @@ import { flatMap } from 'lodash'; * Internal dependencies */ import IconButton from '../icon-button'; +import DropdownMenu from '../dropdown-menu'; import ToolbarContainer from './toolbar-container'; import ToolbarButtonContainer from './toolbar-button-container'; @@ -41,7 +42,7 @@ import ToolbarButtonContainer from './toolbar-button-container'; * * @return {ReactElement} The rendered toolbar. */ -function Toolbar( { controls = [], children, className } ) { +function Toolbar( { controls = [], children, className, isCollapsed, icon, label } ) { if ( ( ! controls || ! controls.length ) && ! children @@ -55,6 +56,17 @@ function Toolbar( { controls = [], children, className } ) { controlSets = [ controlSets ]; } + if ( isCollapsed ) { + return ( + + ); + } + return ( { flatMap( controlSets, ( controlSet, indexOfSet ) => ( From 8332163f9785a9d37b988e1018299b0f83ceafd1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 7 Sep 2018 12:14:12 +0100 Subject: [PATCH 02/10] Collapse Text Alignment Toolbar for paragraphs and mobile --- packages/block-library/src/paragraph/edit.js | 1 + .../src/components/alignment-toolbar/index.js | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 0d12b7f8e4d7d..597ddc38ddeb3 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -150,6 +150,7 @@ class ParagraphBlock extends Component { { setAttributes( { align: nextAlign } ); diff --git a/packages/editor/src/components/alignment-toolbar/index.js b/packages/editor/src/components/alignment-toolbar/index.js index 73fac92bdd768..87bff9fee249d 100644 --- a/packages/editor/src/components/alignment-toolbar/index.js +++ b/packages/editor/src/components/alignment-toolbar/index.js @@ -1,8 +1,14 @@ +/** + * External dependencies + */ +import { find } from 'lodash'; + /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; +import { withViewportMatch } from '@wordpress/viewport'; const ALIGNMENT_CONTROLS = [ { @@ -22,13 +28,18 @@ const ALIGNMENT_CONTROLS = [ }, ]; -export default function AlignmentToolbar( { value, onChange } ) { +function AlignmentToolbar( { isCollapsed, isLargeViewport, value, onChange } ) { function applyOrUnset( align ) { return () => onChange( value === align ? undefined : align ); } + const activeAlignment = find( ALIGNMENT_CONTROLS, ( control ) => control.align === value ); + return ( { const { align } = control; const isActive = ( value === align ); @@ -42,3 +53,5 @@ export default function AlignmentToolbar( { value, onChange } ) { /> ); } + +export default withViewportMatch( { isLargeViewport: 'medium' } )( AlignmentToolbar ); From 1c954c47b63cba75e06077c23030959bff4d1b07 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 12 Sep 2018 09:30:33 +0100 Subject: [PATCH 03/10] Auto-collapse in nested blocks --- packages/block-library/src/paragraph/edit.js | 1 - .../src/components/alignment-toolbar/index.js | 29 +++++++++++++++++-- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 597ddc38ddeb3..0d12b7f8e4d7d 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -150,7 +150,6 @@ class ParagraphBlock extends Component { { setAttributes( { align: nextAlign } ); diff --git a/packages/editor/src/components/alignment-toolbar/index.js b/packages/editor/src/components/alignment-toolbar/index.js index 87bff9fee249d..a44cba3ae67b6 100644 --- a/packages/editor/src/components/alignment-toolbar/index.js +++ b/packages/editor/src/components/alignment-toolbar/index.js @@ -9,6 +9,13 @@ import { find } from 'lodash'; import { __ } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; import { withViewportMatch } from '@wordpress/viewport'; +import { withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { withBlockEditContext } from '../block-edit/context'; const ALIGNMENT_CONTROLS = [ { @@ -28,7 +35,7 @@ const ALIGNMENT_CONTROLS = [ }, ]; -function AlignmentToolbar( { isCollapsed, isLargeViewport, value, onChange } ) { +function AlignmentToolbar( { isCollapsed, value, onChange } ) { function applyOrUnset( align ) { return () => onChange( value === align ? undefined : align ); } @@ -37,7 +44,7 @@ function AlignmentToolbar( { isCollapsed, isLargeViewport, value, onChange } ) { return ( { @@ -54,4 +61,20 @@ function AlignmentToolbar( { isCollapsed, isLargeViewport, value, onChange } ) { ); } -export default withViewportMatch( { isLargeViewport: 'medium' } )( AlignmentToolbar ); +export default compose( + withBlockEditContext( ( { clientId } ) => { + return { + clientId, + }; + } ), + withViewportMatch( { isLargeViewport: 'medium' } ), + withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => { + const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' ); + return { + isCollapsed: isCollapsed || ! isLargeViewport || ( + getBlockRootClientId( clientId ) && + ! getEditorSettings().hasFixedToolbar + ), + }; + } ), +)( AlignmentToolbar ); From 027ada616bb2a864469b16ab95ae3b6c4df4bcf2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 12 Sep 2018 10:29:51 +0100 Subject: [PATCH 04/10] Collapse Block Alignment Toolbars --- .../block-alignment-toolbar/index.js | 35 ++++++++++++++++--- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/block-alignment-toolbar/index.js b/packages/editor/src/components/block-alignment-toolbar/index.js index 6477611dcd7b8..c0f80d960523c 100644 --- a/packages/editor/src/components/block-alignment-toolbar/index.js +++ b/packages/editor/src/components/block-alignment-toolbar/index.js @@ -3,7 +3,14 @@ */ import { __ } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; +import { withViewportMatch } from '@wordpress/viewport'; import { withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { withBlockEditContext } from '../block-edit/context'; const BLOCK_ALIGNMENTS_CONTROLS = { left: { @@ -31,7 +38,7 @@ const BLOCK_ALIGNMENTS_CONTROLS = { const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ]; const WIDE_CONTROLS = [ 'wide', 'full' ]; -export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, wideControlsEnabled = false } ) { +export function BlockAlignmentToolbar( { isCollapsed, value, onChange, controls = DEFAULT_CONTROLS, wideControlsEnabled = false } ) { function applyOrUnset( align ) { return () => onChange( value === align ? undefined : align ); } @@ -40,8 +47,13 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON controls : controls.filter( ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 ); + const activeAlignment = BLOCK_ALIGNMENTS_CONTROLS[ value ]; + return ( { return { @@ -55,8 +67,21 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON ); } -export default withSelect( - ( select ) => ( { - wideControlsEnabled: select( 'core/editor' ).getEditorSettings().alignWide, - } ) +export default compose( + withBlockEditContext( ( { clientId } ) => { + return { + clientId, + }; + } ), + withViewportMatch( { isLargeViewport: 'medium' } ), + withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => { + const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' ); + return { + wideControlsEnabled: select( 'core/editor' ).getEditorSettings().alignWide, + isCollapsed: isCollapsed || ! isLargeViewport || ( + getBlockRootClientId( clientId ) && + ! getEditorSettings().hasFixedToolbar + ), + }; + } ), )( BlockAlignmentToolbar ); From af0449356cd872c000d19dc6aacbd20cf74b6331 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 12 Sep 2018 11:07:08 +0100 Subject: [PATCH 05/10] Fix unit tests --- packages/editor/src/components/alignment-toolbar/index.js | 2 +- .../alignment-toolbar/test/__snapshots__/index.js.snap | 2 ++ packages/editor/src/components/alignment-toolbar/test/index.js | 2 +- packages/editor/src/components/block-alignment-toolbar/index.js | 2 +- .../block-alignment-toolbar/test/__snapshots__/index.js.snap | 2 ++ 5 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/alignment-toolbar/index.js b/packages/editor/src/components/alignment-toolbar/index.js index a44cba3ae67b6..a086c91049ecf 100644 --- a/packages/editor/src/components/alignment-toolbar/index.js +++ b/packages/editor/src/components/alignment-toolbar/index.js @@ -35,7 +35,7 @@ const ALIGNMENT_CONTROLS = [ }, ]; -function AlignmentToolbar( { isCollapsed, value, onChange } ) { +export function AlignmentToolbar( { isCollapsed, value, onChange } ) { function applyOrUnset( align ) { return () => onChange( value === align ? undefined : align ); } diff --git a/packages/editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap index 76d307f173ede..2308f4cda66ae 100644 --- a/packages/editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap @@ -27,5 +27,7 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` }, ] } + icon="editor-alignleft" + label="Change Text Alignment" /> `; diff --git a/packages/editor/src/components/alignment-toolbar/test/index.js b/packages/editor/src/components/alignment-toolbar/test/index.js index 4c0df34079de9..803a5a56e6a82 100644 --- a/packages/editor/src/components/alignment-toolbar/test/index.js +++ b/packages/editor/src/components/alignment-toolbar/test/index.js @@ -6,7 +6,7 @@ import { shallow } from 'enzyme'; /** * Internal dependencies */ -import AlignmentToolbar from '../'; +import { AlignmentToolbar } from '../'; describe( 'AlignmentToolbar', () => { const alignment = 'left'; diff --git a/packages/editor/src/components/block-alignment-toolbar/index.js b/packages/editor/src/components/block-alignment-toolbar/index.js index c0f80d960523c..9452711da41bc 100644 --- a/packages/editor/src/components/block-alignment-toolbar/index.js +++ b/packages/editor/src/components/block-alignment-toolbar/index.js @@ -53,7 +53,7 @@ export function BlockAlignmentToolbar( { isCollapsed, value, onChange, controls { return { diff --git a/packages/editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap index 273ad8f56496e..27fbae699c3bd 100644 --- a/packages/editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap @@ -24,5 +24,7 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = ` }, ] } + icon="align-left" + label="Change Alignment" /> `; From 6d92309be4b5278e07bf1163945ee122e29aa942 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 13 Sep 2018 08:51:43 +0100 Subject: [PATCH 06/10] Make the active item noticeable --- packages/components/src/dropdown-menu/index.js | 6 ++++-- packages/components/src/dropdown-menu/style.scss | 4 ++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index 012de475f959a..106accd770228 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -76,7 +76,6 @@ function DropdownMenu( { controlSet.map( ( control, indexOfControl ) => ( { if ( control.isDisabled ) { return; @@ -89,7 +88,10 @@ function DropdownMenu( { } } className={ classnames( 'components-dropdown-menu__menu-item', - { 'has-separator': indexOfSet > 0 && indexOfControl === 0 } + { + 'has-separator': indexOfSet > 0 && indexOfControl === 0, + 'is-active': control.isActive, + }, ) } icon={ control.icon } role="menuitem" diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index 1c78f1dc8a5b4..1c480cb5c6541 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -80,6 +80,10 @@ right: 0; height: 1px; } + + &:not(:disabled).is-active > svg { + @include formatting-button-style__active; + } } } From c933243c7adf5100b8460c51fb7c10812308baa6 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 13 Sep 2018 12:11:10 +0200 Subject: [PATCH 07/10] Polish dropdown arrow. Now it's the same as for switcher. --- edit-post/assets/stylesheets/_mixins.scss | 13 +++++++++++++ packages/components/src/dropdown-menu/index.js | 3 +-- packages/components/src/dropdown-menu/style.scss | 16 +++++++++++----- .../src/components/block-switcher/style.scss | 11 +---------- 4 files changed, 26 insertions(+), 17 deletions(-) diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss index ee17b9b3c45e3..c352646eea007 100644 --- a/edit-post/assets/stylesheets/_mixins.scss +++ b/edit-post/assets/stylesheets/_mixins.scss @@ -304,3 +304,16 @@ text-align: center; font-size: $default-font-size; } + +@mixin dropdown-arrow() { + content: ""; + pointer-events: none; + display: block; + position: absolute; + width: 0; + height: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 5px solid currentColor; + right: 6px; +} diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index 106accd770228..ff969d6d05406 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -13,7 +13,6 @@ import { DOWN } from '@wordpress/keycodes'; * Internal dependencies */ import IconButton from '../icon-button'; -import Dashicon from '../dashicon'; import Dropdown from '../dropdown'; import { NavigableMenu } from '../navigable-container'; @@ -61,7 +60,7 @@ function DropdownMenu( { label={ label } tooltip={ label } > - + ); } } diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index 1c480cb5c6541..da561de179769 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -38,6 +38,17 @@ background-color: $dark-gray-500; color: $white; } + + .components-dropdown-menu__indicator { + display: inline-block; + margin-left: 10px; + + // Add a dropdown arrow indicator. + &::after { + @include dropdown-arrow(); + top: $icon-button-size-small / 2 + 1px; + } + } } } .components-dropdown-menu__popover .components-popover__content { @@ -58,11 +69,6 @@ outline: none; cursor: pointer; - .dashicon { - margin-right: 8px; - } - - &.has-separator { margin-top: 6px; position: relative; diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss index 39cf29a819b85..a5c2292b01fb9 100644 --- a/packages/editor/src/components/block-switcher/style.scss +++ b/packages/editor/src/components/block-switcher/style.scss @@ -36,17 +36,8 @@ // Add a dropdown arrow indicator. .editor-block-icon::after { - content: ""; - pointer-events: none; - display: block; - position: absolute; + @include dropdown-arrow(); top: $icon-button-size-small / 2 - 1px; - width: 0; - height: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; - border-top: 5px solid currentColor; - right: 6px; } .editor-block-switcher__transform { From 89790a6158da2bc40dae025b769f69d052b3ff4e Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 13 Sep 2018 12:28:44 +0200 Subject: [PATCH 08/10] Polish focus styles. --- .../components/src/dropdown-menu/index.js | 6 +---- .../components/src/dropdown-menu/style.scss | 26 +++++++++---------- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index ff969d6d05406..5ac52e03173ec 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -47,11 +47,7 @@ function DropdownMenu( { }; return ( svg, - &.is-active:hover > svg { - background-color: $dark-gray-500; - color: $white; + @include formatting-button-style__hover(); } .components-dropdown-menu__indicator { @@ -65,9 +56,9 @@ .components-dropdown-menu__menu-item { width: 100%; padding: 6px; - border-radius: 0; outline: none; cursor: pointer; + margin-bottom: $grid-size-small; &.has-separator { margin-top: 6px; @@ -87,9 +78,16 @@ height: 1px; } - &:not(:disabled).is-active > svg { - @include formatting-button-style__active; + &:hover:not(:disabled):not([aria-disabled="true"]):not(.is-default) { + @include formatting-button-style__hover(); + } + + &:not(:disabled):not([aria-disabled="true"]):not(.is-default).is-active { + @include formatting-button-style__active(); + } + + &:focus:not(:disabled):not([aria-disabled="true"]):not(.is-default) { + @include formatting-button-style__focus(); } } } - From b1c31ae7f8cd9de8769c81ecb9e9cc6f997d6976 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 13 Sep 2018 16:15:00 +0200 Subject: [PATCH 09/10] Address feedback. --- .../components/src/dropdown-menu/style.scss | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index b3f8af51805ee..a63eab3c69924 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -78,16 +78,24 @@ height: 1px; } - &:hover:not(:disabled):not([aria-disabled="true"]):not(.is-default) { - @include formatting-button-style__hover(); + // Plain menu styles. + &:focus:not(:disabled):not([aria-disabled="true"]):not(.is-default) { + @include menu-style__focus(); } - &:not(:disabled):not([aria-disabled="true"]):not(.is-default).is-active { - @include formatting-button-style__active(); + // Formatting buttons + > svg { + border-radius: $radius-round-rectangle; + + // This assumes 20x20px dashicons. + padding: 2px; + width: $icon-button-size-small; + height: $icon-button-size-small; + margin: -1px $grid-size -1px 0; } - &:focus:not(:disabled):not([aria-disabled="true"]):not(.is-default) { - @include formatting-button-style__focus(); + &:not(:disabled):not([aria-disabled="true"]):not(.is-default).is-active > svg { + @include formatting-button-style__active(); } } } From f4f3cac06ce491103ff08d6f9853ff5873d9e480 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 14 Sep 2018 10:38:48 +0100 Subject: [PATCH 10/10] Small changes per review --- packages/components/src/dropdown-menu/index.js | 3 --- packages/editor/src/components/alignment-toolbar/index.js | 4 ++-- .../editor/src/components/block-alignment-toolbar/index.js | 4 ++-- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index 5ac52e03173ec..9434eab2098d7 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -72,9 +72,6 @@ function DropdownMenu( { { - if ( control.isDisabled ) { - return; - } event.stopPropagation(); onClose(); if ( control.onClick ) { diff --git a/packages/editor/src/components/alignment-toolbar/index.js b/packages/editor/src/components/alignment-toolbar/index.js index a086c91049ecf..5aa2d61b0c083 100644 --- a/packages/editor/src/components/alignment-toolbar/index.js +++ b/packages/editor/src/components/alignment-toolbar/index.js @@ -72,8 +72,8 @@ export default compose( const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' ); return { isCollapsed: isCollapsed || ! isLargeViewport || ( - getBlockRootClientId( clientId ) && - ! getEditorSettings().hasFixedToolbar + ! getEditorSettings().hasFixedToolbar && + getBlockRootClientId( clientId ) ), }; } ), diff --git a/packages/editor/src/components/block-alignment-toolbar/index.js b/packages/editor/src/components/block-alignment-toolbar/index.js index 9452711da41bc..acfe1cb4ed344 100644 --- a/packages/editor/src/components/block-alignment-toolbar/index.js +++ b/packages/editor/src/components/block-alignment-toolbar/index.js @@ -79,8 +79,8 @@ export default compose( return { wideControlsEnabled: select( 'core/editor' ).getEditorSettings().alignWide, isCollapsed: isCollapsed || ! isLargeViewport || ( - getBlockRootClientId( clientId ) && - ! getEditorSettings().hasFixedToolbar + ! getEditorSettings().hasFixedToolbar && + getBlockRootClientId( clientId ) ), }; } ),