independently customise fixed top toolbar for the customizer editor

Author: draganescu

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

@@ -92,11 +92,6 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			return;
 		}
 
-		// bail if we're in the customizer
-		if ( document.body.classList.contains( 'wp-customizer' ) ) {
-			return;
-		}
-
 		const blockToolbar = document.querySelector(
 			'.block-editor-block-contextual-toolbar'
 		);

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

@@ -203,11 +203,6 @@
 			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
 				border: none;
 
-				.wp-customizer & {
-					// In the customizer, the collapse button is not shown.
-					display: none;
-				}
-
 				.show-icon-labels & {
 					.components-button.has-icon {
 						// Hide the button icons when labels are set to display...

packages/customize-widgets/src/components/sidebar-block-editor/style.scss

@@ -5,7 +5,13 @@
 	// Offset the customizer's sidebar padding.
 	margin-left: -$grid-unit-15;
 	margin-right: -$grid-unit-15;
-	width: calc(100% + #{ $grid-unit-30 });
+	// added important to override the inline style coming from
+	// the block-editor/block-contextual-toolbar component.
+	width: calc(100% + #{ $grid-unit-30 }) !important;
+
+	& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
+		display: none;
+	}
 
 	// Scroll sideways.
 	overflow-y: auto;