Hide ghost top toolbar (#54555)

* hide white rectangle caused by the fixed block toolbar

* fix bug that kept calculated width on rendered block toolbar even if no block was selected

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

@@ -86,9 +86,15 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const isFullscreen =
 		document.body.classList.contains( 'is-fullscreen-mode' );
 
+	/**
+	 * The following code is a workaround to fix the width of the toolbar
+	 * it should be removed when the toolbar will be rendered inline
+	 * FIXME: remove this layout effect when the toolbar is no longer
+	 * 				absolutely positioned
+	 */
 	useLayoutEffect( () => {
 		// don't do anything if not fixed toolbar
-		if ( ! isFixed || ! blockType ) {
+		if ( ! isFixed ) {
 			return;
 		}
 
@@ -100,6 +106,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			return;
 		}
 
+		if ( ! blockType ) {
+			blockToolbar.style.width = 'initial';
+			return;
+		}
+
 		if ( ! isLargerThanTabletViewport ) {
 			// set the width of the toolbar to auto
 			blockToolbar.style = {};
@@ -116,7 +127,6 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 		const pinnedItems = document.querySelector(
 			'.edit-post-header__settings, .edit-widgets-header__actions'
 		);
-
 		// get the width of the left header in the site editor
 		const leftHeader = document.querySelector(
 			'.edit-site-header-edit-mode__end'

packages/edit-site/src/components/block-editor/style.scss

@@ -77,7 +77,7 @@
 			contextual toolbar has been redesigned.
 			See: https://github.com/WordPress/gutenberg/issues/40450
 		*/
-		.block-editor-block-contextual-toolbar {
+		.block-editor-block-contextual-toolbar.is-fixed {
 			display: none;
 		}
 	}