Lighter UI for the fixed toolbar

WordPress · Aug 30, 2018 · d573e40 · d573e40
1 parent 6388348
commit d573e40
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
@@ -386,9 +386,9 @@ export class BlockListBlock extends Component {
 		// Empty paragraph blocks should always show up as unselected.
 		const showEmptyBlockSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
 		const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
-		const shouldAppearSelected = ! isFocusMode && ! showSideInserter && isSelected && ! isTypingWithinBlock;
-		const shouldAppearSelectedParent = ! isFocusMode && ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock;
-		const shouldAppearHovered = ! isFocusMode && isHovered && ! isEmptyDefaultBlock;
+		const shouldAppearSelected = ! isFocusMode && ! hasFixedToolbar && ! showSideInserter && isSelected && ! isTypingWithinBlock;
+		const shouldAppearSelectedParent = ! isFocusMode && ! hasFixedToolbar && ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock;
+		const shouldAppearHovered = ! isFocusMode && ! hasFixedToolbar && isHovered && ! isEmptyDefaultBlock;
 		// We render block movers and block settings to keep them tabbale even if hidden
 		const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock;
 		const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection;

diff --git a/packages/editor/src/components/block-list/breadcrumb.js b/packages/editor/src/components/block-list/breadcrumb.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -48,10 +53,12 @@ export class BlockBreadcrumb extends Component {
 	}
 
 	render() {
-		const { clientId, rootClientId } = this.props;
+		const { clientId, rootClientId, isLight } = this.props;
 
 		return (
-			<div className={ 'editor-block-list__breadcrumb' }>
+			<div className={ classnames( 'editor-block-list__breadcrumb', {
+				'is-light': isLight,
+			} ) }>
 				<Toolbar>
 					{ rootClientId && (
 						<Fragment>
@@ -68,11 +75,12 @@ export class BlockBreadcrumb extends Component {
 
 export default compose( [
 	withSelect( ( select, ownProps ) => {
-		const { getBlockRootClientId } = select( 'core/editor' );
+		const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' );
 		const { clientId } = ownProps;
 
 		return {
 			rootClientId: getBlockRootClientId( clientId ),
+			isLight: getEditorSettings().hasFixedToolbar,
 		};
 	} ),
 ] )( BlockBreadcrumb );
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -1021,6 +1021,11 @@
 			@include fade_in(60ms, 0.5s);
 		}
 	}
+
+	&.is-light .components-toolbar {
+		background: rgba($white, 0.5);
+		color: $dark-gray-700;
+	}
 }
 
 .editor-block-list__descendant-arrow::before {