Add variants to block editor and remove workarounds

packages/block-editor/src/components/block-tools/block-contextual-toolbar.js

@@ -188,6 +188,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			className={ classes }
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
+			variant={ isFixed ? 'unstyled' : undefined }
 			{ ...props }
 		>
 			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }

packages/block-editor/src/components/block-tools/style.scss

@@ -109,7 +109,6 @@
 			overflow-y: hidden;
 		}
 
-		border: none;
 		border-bottom: $border-width solid $gray-200;
 		border-radius: 0;
 

packages/block-editor/src/components/tool-selector/index.js

@@ -51,7 +51,7 @@ function ToolSelector( props, ref ) {
 					label={ __( 'Tools' ) }
 				/>
 			) }
-			popoverProps={ { placement: 'bottom-start', variant: undefined } }
+			popoverProps={ { placement: 'bottom-start' } }
 			renderContent={ () => (
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -136,6 +136,7 @@ function HeaderToolbar( { setListViewToggleElement } ) {
 			className="edit-post-header-toolbar"
 			aria-label={ toolbarAriaLabel }
 			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+			variant={ 'unstyled' }
 		>
 			<div className="edit-post-header-toolbar__left">
 				<ToolbarItem

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -1,7 +1,6 @@
 .edit-post-header-toolbar {
 	display: inline-flex;
 	align-items: center;
-	border: none;
 
 	// Hide all action buttons except the inserter on mobile.
 	.edit-post-header-toolbar__left > .components-button {