Visually separate the parent selector from the other buttons.

WordPress · Aug 12, 2020 · ba3866b · ba3866b
1 parent 02cf4da
commit ba3866b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -12,17 +17,23 @@ import NavigableToolbar from '../navigable-toolbar';
 import { BlockToolbar } from '../';
 
 function BlockContextualToolbar( { focusOnMount, ...props } ) {
-	const { blockType } = useSelect( ( select ) => {
-		const { getBlockName, getSelectedBlockClientIds } = select(
-			'core/block-editor'
-		);
+	const { blockType, hasParent, isMultiToolbar } = useSelect( ( select ) => {
+		const {
+			getBlockName,
+			getBlockParents,
+			getSelectedBlockClientIds,
+		} = select( 'core/block-editor' );
 		const { getBlockType } = select( 'core/blocks' );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		return {
 			blockType:
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) ),
+			hasParent:
+				selectedBlockClientId &&
+				getBlockParents( selectedBlockClientId ).length > 0,
+			isMultiToolbar: selectedBlockClientIds.length > 1,
 		};
 	}, [] );
 	if ( blockType ) {
@@ -34,7 +45,10 @@ function BlockContextualToolbar( { focusOnMount, ...props } ) {
 		<div className="block-editor-block-contextual-toolbar-wrapper">
 			<NavigableToolbar
 				focusOnMount={ focusOnMount }
-				className="block-editor-block-contextual-toolbar"
+				className={ classnames(
+					'block-editor-block-contextual-toolbar',
+					{ 'has-parent-selector': hasParent && ! isMultiToolbar }
+				) }
 				/* translators: accessibility text for the block toolbar */
 				aria-label={ __( 'Block tools' ) }
 				{ ...props }

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -526,6 +526,11 @@
 	border-radius: $radius-block-ui;
 	background-color: $white;
 
+	// Adjust positioning when parent selector button is available
+	&.has-parent-selector {
+		margin-left: $grid-unit-60 + $grid-unit-15;
+	}
+
 	.block-editor-block-toolbar .components-toolbar-group,
 	.block-editor-block-toolbar .components-toolbar {
 		border-right-color: $gray-900;

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -67,10 +67,27 @@
 }
 
 .block-editor-block-toolbar__block-parent-selector-wrapper {
-	// Hide the Parent button in Top Toolbar mode.
+	position: absolute;
+	left: -($grid-unit-60 + $grid-unit-15);
+	width: $grid-unit-60;
+	height: $grid-unit-60;
+	border-radius: $radius-block-ui;
+
+	// Extra specificity to override toolbar or toolbar group styles.
+	&.block-editor-block-toolbar__block-parent-selector-wrapper {
+		background-color: $white;
+		border: $border-width solid $gray-900;
+	}
+
+	// Hide the parent selector button in Top Toolbar mode.
 	.edit-post-header-toolbar__block-toolbar & {
 		display: none;
 	}
+
+	.block-editor-block-parent-selector {
+		margin-top: -1px;
+		margin-left: -1px;
+	}
 }
 
 .block-editor-block-toolbar-animated-width-container {