Add mover support for fixed top toolbar

WordPress · Feb 20, 2020 · 7549d46 · 7549d46
1 parent c218783
commit 7549d46
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
@@ -17,6 +21,7 @@ import { useShowMoversGestures } from './utils';
 export default function BlockToolbar( { hideDragHandle } ) {
 	const {
 		blockClientIds,
+		hasFixedToolbar,
 		isValid,
 		mode,
 		moverDirection,
@@ -39,6 +44,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 
 		return {
 			blockClientIds: selectedBlockClientIds,
+			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
+				'fixedToolbar'
+			),
 			rootClientId: blockRootClientId,
 			isValid:
 				selectedBlockClientIds.length === 1
@@ -61,7 +69,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 	} = useShowMoversGestures( { ref: nodeRef } );
 
 	const shouldShowMovers =
-		useViewportMatch( 'medium', '<' ) || ( showMovers && hasMovers );
+		useViewportMatch( 'medium', '<' ) ||
+		hasFixedToolbar ||
+		( showMovers && hasMovers );
 
 	if ( blockClientIds.length === 0 ) {
 		return null;
@@ -75,8 +85,13 @@ export default function BlockToolbar( { hideDragHandle } ) {
 		transform: shouldShowMovers ? 'translateX(0px)' : 'translateX(100%)',
 	};
 
+	const classes = classnames(
+		'block-editor-block-toolbar',
+		! hasFixedToolbar && 'has-responsive-movers'
+	);
+
 	return (
-		<div className="block-editor-block-toolbar">
+		<div className={ classes }>
 			<div
 				className="block-editor-block-toolbar__mover-switcher-container"
 				ref={ nodeRef }

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -201,34 +201,37 @@
 	display: flex;
 }
 
-.block-editor-block-toolbar__mover-trigger-container {
-	@include break-medium() {
-		bottom: -1px;
-		left: -1px;
-		position: absolute;
-		top: -1px;
-		transform: translateX(-48px);
-		user-select: none;
-		z-index: -1; // This makes it slide out from underneath the toolbar.
+.block-editor-block-toolbar__block-switcher-wrapper {
+	.block-editor-block-switcher {
+		display: block;
 	}
 }
 
-.block-editor-block-toolbar__mover-trigger-wrapper:not(:empty) {
-	@include break-medium() {
-		background-color: $white;
-		border: 1px solid $black;
-		border-bottom-left-radius: 2px;
-		border-top-left-radius: 2px;
-		border-right: none;
-		height: 100%;
-		transition: all 60ms linear;
+.block-editor-block-toolbar.has-responsive-movers {
+	.block-editor-block-toolbar__mover-trigger-container {
+		@include break-medium() {
+			bottom: -1px;
+			left: -1px;
+			position: absolute;
+			top: -1px;
+			transform: translateX(-48px);
+			user-select: none;
+			z-index: -1; // This makes it slide out from underneath the toolbar.
+		}
 	}
 
-	@include reduce-motion("transition");
-}
+	.block-editor-block-toolbar__mover-trigger-wrapper:not(:empty) {
+		@include break-medium() {
+			background-color: $white;
+			border: 1px solid $black;
+			border-bottom-left-radius: 2px;
+			border-top-left-radius: 2px;
+			border-right: none;
+			height: 100%;
+			transition: all 60ms linear;
+		}
 
-.block-editor-block-toolbar__block-switcher-wrapper {
-	.block-editor-block-switcher {
-		display: block;
+		@include reduce-motion("transition");
 	}
 }
+