@wordpress/block-editor 14.3.6 → 14.3.7

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -15,40 +15,31 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const { isToolbarEnabled, isDefaultEditingMode } = useSelect(
-		( select ) => {
-			const {
-				getBlockEditingMode,
-				getBlockName,
-				getBlockSelectionStart,
-			} = select( blockEditorStore );
+	const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => {
+		const { getBlockEditingMode, getBlockName, getBlockSelectionStart } =
+			select( blockEditorStore );
 
-			// we only care about the 1st selected block
-			// for the toolbar, so we use getBlockSelectionStart
-			// instead of getSelectedBlockClientIds
-			const selectedBlockClientId = getBlockSelectionStart();
+		// we only care about the 1st selected block
+		// for the toolbar, so we use getBlockSelectionStart
+		// instead of getSelectedBlockClientIds
+		const selectedBlockClientId = getBlockSelectionStart();
 
-			const blockType =
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) );
+		const blockType =
+			selectedBlockClientId &&
+			getBlockType( getBlockName( selectedBlockClientId ) );
 
-			return {
-				isToolbarEnabled:
-					blockType &&
-					hasBlockSupport( blockType, '__experimentalToolbar', true ),
-				isDefaultEditingMode:
-					getBlockEditingMode( selectedBlockClientId ) === 'default',
-			};
-		},
-		[]
-	);
+		return {
+			isToolbarEnabled:
+				blockType &&
+				hasBlockSupport( blockType, '__experimentalToolbar', true ),
+			isBlockDisabled:
+				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
+		};
+	}, [] );
 
 	const hasAnyBlockControls = useHasAnyBlockControls();
 
-	if (
-		! isToolbarEnabled ||
-		( ! isDefaultEditingMode && ! hasAnyBlockControls )
-	) {
+	if ( ! isToolbarEnabled || ( isBlockDisabled && ! hasAnyBlockControls ) ) {
 		return false;
 	}
 

package/src/components/block-tools/index.js

@@ -20,7 +20,6 @@ import {
 } from './insertion-point';
 import BlockToolbarPopover from './block-toolbar-popover';
 import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
-import ZoomOutPopover from './zoom-out-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
@@ -80,7 +79,6 @@ export default function BlockTools( {
 		showEmptyBlockSideInserter,
 		showBreadcrumb,
 		showBlockToolbarPopover,
-		showZoomOutToolbar,
 	} = useShowBlockTools();
 
 	const {
@@ -231,13 +229,6 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showZoomOutToolbar && (
-					<ZoomOutPopover
-						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
-					/>
-				) }
-
 				{ /* Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. */ }
 				{ ! isZoomOutMode && ! hasFixedToolbar && (
 					<Popover.Slot

package/src/components/block-tools/style.scss

@@ -270,30 +270,6 @@
 	left: 50%;
 }
 
-.zoom-out-toolbar {
-
-	.block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-	.zoom-out-toolbar-button:focus::before,
-	.block-editor-block-toolbar-shuffle:focus::before,
-	.block-selection-button_drag-handle:focus::before {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	.block-editor-block-mover {
-		background: none;
-		border: none;
-	}
-
-	// Make the spacing consistent between controls.
-	.zoom-out-toolbar-button {
-		height: $button-size-next-default-40px;
-	}
-}
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-	visibility: hidden;
-
-	&.is-visible {
-		visibility: visible;
-	}
+.components-button.block-editor-button-pattern-inserter__button.block-editor-block-tools__zoom-out-mode-inserter-button {
+	top: -1px;
 }

package/src/components/block-tools/use-show-block-tools.js

@@ -8,6 +8,7 @@ import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Source of truth for which block tools are showing in the block editor.
@@ -25,7 +26,7 @@ export function useShowBlockTools() {
 			hasMultiSelection,
 			__unstableGetEditorMode,
 			isTyping,
-		} = select( blockEditorStore );
+		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
 			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -46,15 +47,7 @@ export function useShowBlockTools() {
 			hasSelectedBlock &&
 			! hasMultiSelection() &&
 			editorMode === 'navigation';
-
-		const isZoomOut = editorMode === 'zoom-out';
-		const _showZoomOutToolbar =
-			isZoomOut &&
-			block?.attributes?.align === 'full' &&
-			! _showEmptyBlockSideInserter &&
-			! maybeShowBreadcrumb;
 		const _showBlockToolbarPopover =
-			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
@@ -66,7 +59,6 @@ export function useShowBlockTools() {
 			showBreadcrumb:
 				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
-			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -16,22 +16,16 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
-		blockInsertionPoint,
 		blockOrder,
-		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
-		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
-			getBlockInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
-			getHoveredBlockClientId,
-			isBlockInsertionPointVisible,
 			getSectionRootClientId,
 		} = unlock( select( blockEditorStore ) );
 
@@ -39,14 +33,11 @@ function ZoomOutModeInserters() {
 
 		return {
 			hasSelection: !! getSelectionStart().clientId,
-			blockInsertionPoint: getBlockInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
-			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
-			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
@@ -62,51 +53,36 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! hasSelection ) {
 		return null;
 	}
 
-	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInsertionPoint =
-			blockInsertionPointVisible && blockInsertionPoint.index === index;
+	const previousClientId = selectedBlockClientId;
+	const index = blockOrder.findIndex(
+		( clientId ) => selectedBlockClientId === clientId
+	);
+	const nextClientId = blockOrder[ index + 1 ];
 
-		const previousClientId = clientId;
-		const nextClientId = blockOrder[ index ];
-
-		const isSelected =
-			hasSelection &&
-			( selectedBlockClientId === previousClientId ||
-				selectedBlockClientId === nextClientId );
-
-		const isHovered =
-			hoveredBlockClientId === previousClientId ||
-			hoveredBlockClientId === nextClientId;
-
-		return (
-			<BlockPopoverInbetween
-				key={ index }
-				previousClientId={ previousClientId }
-				nextClientId={ nextClientId }
-			>
-				{ ! shouldRenderInsertionPoint && (
-					<ZoomOutModeInserterButton
-						isVisible={ isSelected || isHovered }
-						onClick={ () => {
-							setInserterIsOpened( {
-								rootClientId: sectionRootClientId,
-								insertionIndex: index,
-								tab: 'patterns',
-								category: 'all',
-							} );
-							showInsertionPoint( sectionRootClientId, index, {
-								operation: 'insert',
-							} );
-						} }
-					/>
-				) }
-			</BlockPopoverInbetween>
-		);
-	} );
+	return (
+		<BlockPopoverInbetween
+			previousClientId={ previousClientId }
+			nextClientId={ nextClientId }
+		>
+			<ZoomOutModeInserterButton
+				onClick={ () => {
+					setInserterIsOpened( {
+						rootClientId: sectionRootClientId,
+						insertionIndex: index + 1,
+						tab: 'patterns',
+						category: 'all',
+					} );
+					showInsertionPoint( sectionRootClientId, index + 1, {
+						operation: 'insert',
+					} );
+				} }
+			/>
+		</BlockPopoverInbetween>
+	);
 }
 
 export default ZoomOutModeInserters;

package/src/components/iframe/content.scss

@@ -3,28 +3,19 @@
 	border: 0.01px solid transparent;
 }
 
-.block-editor-iframe__container {
-	width: 100%;
-	height: 100%;
-	overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-}
-
-.block-editor-iframe__scale-container.is-zoomed-out {
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-	width: $prev-container-width;
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
-}
-
 .block-editor-iframe__html {
 	transform-origin: top center;
-	@include editor-canvas-resize-animation;
+	// We don't want to animate the transform of the translateX because it is used
+	// to "center" the canvas. Leaving it on causes the canvas to slide around in
+	// odd ways.
+	@include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);
+
+	&.zoom-out-animation {
+		// we only want to animate the scaling when entering zoom out. When sidebars
+		// are toggled, the resizing of the iframe handles scaling the canvas as well,
+		// and the doubled animations cause very odd animations.
+		@include editor-canvas-resize-animation(transform 0s);
+	}
 }
 
 .block-editor-iframe__html.is-zoomed-out {
@@ -32,10 +23,11 @@
 	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
 	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width);
-
-	transform: scale(#{$scale});
-
+	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
+	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+	// Apply an X translation to center the scaled content within the available space.
+	transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
+	scale: #{$scale};
 	background-color: $gray-300;
 
 	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,

package/src/components/iframe/index.js

@@ -122,7 +122,7 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const prevContainerWidthRef = useRef();
+	const initialContainerWidth = useRef( 0 );
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -243,10 +243,15 @@ function Iframe( {
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			prevContainerWidthRef.current = containerWidth;
+			initialContainerWidth.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
+	const scaleContainerWidth = Math.max(
+		initialContainerWidth.current,
+		containerWidth
+	);
+
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -298,14 +303,52 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
+	const zoomOutAnimationClassnameRef = useRef( null );
+
+	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
+	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
+	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
+	// number of dependencies.
 	useEffect( () => {
 		if ( ! iframeDocument || ! isZoomedOut ) {
 			return;
 		}
 
+		const handleZoomOutAnimationClassname = () => {
+			clearTimeout( zoomOutAnimationClassnameRef.current );
+
+			iframeDocument.documentElement.classList.add(
+				'zoom-out-animation'
+			);
+
+			zoomOutAnimationClassnameRef.current = setTimeout( () => {
+				iframeDocument.documentElement.classList.remove(
+					'zoom-out-animation'
+				);
+			}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+		};
+
+		handleZoomOutAnimationClassname();
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
+		return () => {
+			handleZoomOutAnimationClassname();
+			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		};
+	}, [ iframeDocument, isZoomedOut ] );
+
+	// Calculate the scaling and CSS variables for the zoom out canvas
+	useEffect( () => {
+		if ( ! iframeDocument || ! isZoomedOut ) {
+			return;
+		}
+
 		const maxWidth = 750;
+		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
+		// initialContainerWidth will be smaller than the full page, and reflow will happen
+		// when the canvas area becomes larger due to sidebars closing. This is a known but
+		// minor divergence for now.
+
 		// This scaling calculation has to happen within the JS because CSS calc() can
 		// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
 		// but calc( 100px / 2px ) is not.
@@ -314,7 +357,7 @@ function Iframe( {
 			scale === 'default'
 				? ( Math.min( containerWidth, maxWidth ) -
 						parseInt( frameSize ) * 2 ) /
-						prevContainerWidthRef.current
+						scaleContainerWidth
 				: scale
 		);
 
@@ -336,13 +379,11 @@ function Iframe( {
 			`${ containerWidth }px`
 		);
 		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-prev-container-width',
-			`${ prevContainerWidthRef.current }px`
+			'--wp-block-editor-iframe-zoom-out-scale-container-width',
+			`${ scaleContainerWidth }px`
 		);
 
 		return () => {
-			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
-
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-scale'
 			);
@@ -359,7 +400,7 @@ function Iframe( {
 				'--wp-block-editor-iframe-zoom-out-container-width'
 			);
 			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-prev-container-width'
+				'--wp-block-editor-iframe-zoom-out-scale-container-width'
 			);
 		};
 	}, [
@@ -371,6 +412,7 @@ function Iframe( {
 		containerWidth,
 		windowInnerWidth,
 		isZoomedOut,
+		scaleContainerWidth,
 	] );
 
 	// Make sure to not render the before and after focusable div elements in view
@@ -386,6 +428,7 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: props.style?.height,
+					border: 0,
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
@@ -459,10 +502,8 @@ function Iframe( {
 					isZoomedOut && 'is-zoomed-out'
 				) }
 				style={ {
-					'--wp-block-editor-iframe-zoom-out-container-width':
-						isZoomedOut && `${ containerWidth }px`,
-					'--wp-block-editor-iframe-zoom-out-prev-container-width':
-						isZoomedOut && `${ prevContainerWidthRef.current }px`,
+					'--wp-block-editor-iframe-zoom-out-scale-container-width':
+						isZoomedOut && `${ scaleContainerWidth }px`,
 				} }
 			>
 				{ iframe }

package/src/components/iframe/style.scss

@@ -9,9 +9,10 @@
 }
 
 .block-editor-iframe__scale-container.is-zoomed-out {
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-	width: $prev-container-width;
-	// This is to offset the movement of the iframe when we open sidebars
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
+	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
+	width: $scale-container-width;
+	// Position the iframe so that it is always aligned with the right side so that
+	// the scrollbar is always visible on the right side
+	position: absolute;
+	right: 0;
 }

package/src/components/inserter/block-patterns-tab/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -24,6 +24,7 @@ function BlockPatternsTab( {
 	selectedCategory,
 	onInsert,
 	rootClientId,
+	setHasCategories,
 	children,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
@@ -37,6 +38,10 @@ function BlockPatternsTab( {
 		[]
 	);
 
+	useEffect( () => {
+		setHasCategories( !! categories.length );
+	}, [ categories, setHasCategories ] );
+
 	if ( isResolvingPatterns ) {
 		return (
 			<div className="block-editor-inserter__patterns-loading">

package/src/components/inserter/hooks/use-insertion-point.js

@@ -79,7 +79,9 @@ function useInsertionPoint( {
 				getBlockRootClientId,
 				getBlockIndex,
 				getBlockOrder,
-			} = select( blockEditorStore );
+				getSectionRootClientId,
+				__unstableGetEditorMode,
+			} = unlock( select( blockEditorStore ) );
 			const selectedBlockClientId = getSelectedBlockClientId();
 
 			let _destinationRootClientId = rootClientId;
@@ -92,10 +94,26 @@ function useInsertionPoint( {
 				// Insert after a specific client ID.
 				_destinationIndex = getBlockIndex( clientId );
 			} else if ( ! isAppender && selectedBlockClientId ) {
-				_destinationRootClientId = getBlockRootClientId(
-					selectedBlockClientId
-				);
-				_destinationIndex = getBlockIndex( selectedBlockClientId ) + 1;
+				const sectionRootClientId = getSectionRootClientId();
+
+				// Avoids empty inserter when the selected block is acting
+				// as the "root".
+				// See https://github.com/WordPress/gutenberg/pull/66214.
+				if (
+					__unstableGetEditorMode() === 'zoom-out' &&
+					sectionRootClientId === selectedBlockClientId
+				) {
+					_destinationRootClientId = sectionRootClientId;
+					_destinationIndex = getBlockOrder(
+						_destinationRootClientId
+					).length;
+				} else {
+					_destinationRootClientId = getBlockRootClientId(
+						selectedBlockClientId
+					);
+					_destinationIndex =
+						getBlockIndex( selectedBlockClientId ) + 1;
+				}
 			} else {
 				// Insert at the end of the list.
 				_destinationIndex = getBlockOrder(

package/src/components/inserter/media-tab/media-tab.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useEffect, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,6 +24,7 @@ function MediaTab( {
 	rootClientId,
 	selectedCategory,
 	onSelectCategory,
+	setHasCategories,
 	onInsert,
 	children,
 } ) {
@@ -49,6 +50,10 @@ function MediaTab( {
 		[ mediaCategories ]
 	);
 
+	useEffect( () => {
+		setHasCategories( !! categories.length );
+	}, [ categories, setHasCategories ] );
+
 	if ( ! categories.length ) {
 		return <InserterNoResults />;
 	}

package/src/components/inserter/menu.js

@@ -67,6 +67,8 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
+
+	const [ hasCategories, setHasCategories ] = useState( true );
 	function getInitialTab() {
 		if ( __experimentalInitialTab ) {
 			return __experimentalInitialTab;
@@ -146,10 +148,12 @@ function InserterMenu(
 
 	const showPatternPanel =
 		selectedTab === 'patterns' &&
+		hasCategories &&
 		! delayedFilterValue &&
 		!! selectedPatternCategory;
 
-	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
+	const showMediaPanel =
+		selectedTab === 'media' && !! selectedMediaCategory && hasCategories;
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
@@ -242,6 +246,7 @@ function InserterMenu(
 				onInsert={ onInsertPattern }
 				onSelectCategory={ onClickPatternCategory }
 				selectedCategory={ selectedPatternCategory }
+				setHasCategories={ setHasCategories }
 			>
 				{ showPatternPanel && (
 					<PatternCategoryPreviews
@@ -270,6 +275,7 @@ function InserterMenu(
 				selectedCategory={ selectedMediaCategory }
 				onSelectCategory={ setSelectedMediaCategory }
 				onInsert={ onInsert }
+				setHasCategories={ setHasCategories }
 			>
 				{ showMediaPanel && (
 					<MediaCategoryPanel

package/src/components/inserter/style.scss

@@ -123,6 +123,12 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__panel-header {
+	// Use `position: relative` to ensure any absolute positioned child elements are
+	// positioned relative to the panel header.
+	// This makes the overflow rule of the panel work correctly, particularly when the
+	// `VisuallyHidden` component is used within the inserter UI.
+	position: relative;
+
 	display: inline-flex;
 	align-items: center;
 	padding: $grid-unit-20 $grid-unit-20 0;

package/src/components/rich-text/style.scss

@@ -9,12 +9,17 @@
 		margin-bottom: $grid-unit-10;
 		box-shadow: none;
 		outline: none;
+		border-radius: $radius-small;
 	}
 
 	.components-toolbar {
 		border-radius: $radius-small;
 	}
 
+	.components-toolbar-group {
+		background: none;
+	}
+
 	.components-toolbar__control,
 	.components-dropdown-menu__toggle {
 		min-width: $block-toolbar-height;