@wordpress/block-editor 15.10.0 → 15.10.1-next.79a2f3cdd.0

package/src/components/global-styles/typography-panel.js

@@ -9,7 +9,7 @@ import {
 	Notice,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo, useEffect } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
@@ -29,6 +29,7 @@ import {
 	getMergedFontFamiliesAndFontFamilyFaces,
 	findNearestStyleAndWeight,
 } from './typography-utils';
+import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -180,7 +181,6 @@ export default function TypographyPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
-	fitText = false,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -196,15 +196,57 @@ export default function TypographyPanel( {
 		const slug = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
-		onChange(
-			setImmutably(
-				value,
-				[ 'typography', 'fontFamily' ],
-				slug
-					? `var:preset|font-family|${ slug }`
-					: newValue || undefined
-			)
+		let updatedValue = setImmutably(
+			value,
+			[ 'typography', 'fontFamily' ],
+			slug ? `var:preset|font-family|${ slug }` : newValue || undefined
+		);
+
+		// Check if current font style/weight are available in the new font family.
+		const newFontFamilyFaces =
+			fontFamilies?.find( ( { fontFamily: f } ) => f === newValue )
+				?.fontFace ?? [];
+		const { fontStyles, fontWeights } =
+			getFontStylesAndWeights( newFontFamilyFaces );
+		const hasFontStyle = fontStyles?.some(
+			( { value: fs } ) => fs === fontStyle
+		);
+		const hasFontWeight = fontWeights?.some(
+			( { value: fw } ) => fw?.toString() === fontWeight?.toString()
 		);
+
+		// Find the nearest available font style/weight if not available.
+		if ( ! hasFontStyle || ! hasFontWeight ) {
+			const { nearestFontStyle, nearestFontWeight } =
+				findNearestStyleAndWeight(
+					newFontFamilyFaces,
+					fontStyle,
+					fontWeight
+				);
+			if ( nearestFontStyle || nearestFontWeight ) {
+				// Update to the nearest available font style/weight in the new font family.
+				updatedValue = {
+					...updatedValue,
+					typography: {
+						...updatedValue?.typography,
+						fontStyle: nearestFontStyle || undefined,
+						fontWeight: nearestFontWeight || undefined,
+					},
+				};
+			} else if ( fontStyle || fontWeight ) {
+				// Reset if no available styles/weights found.
+				updatedValue = {
+					...updatedValue,
+					typography: {
+						...updatedValue?.typography,
+						fontStyle: undefined,
+						fontWeight: undefined,
+					},
+				};
+			}
+		}
+
+		onChange( updatedValue );
 	};
 	const hasFontFamily = () => !! value?.typography?.fontFamily;
 	const resetFontFamily = () => setFontFamily( undefined );
@@ -262,11 +304,6 @@ export default function TypographyPanel( {
 	const hasFontWeights = settings?.typography?.fontWeight;
 	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
 	const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
-	const { nearestFontStyle, nearestFontWeight } = findNearestStyleAndWeight(
-		fontFamilyFaces,
-		fontStyle,
-		fontWeight
-	);
 	const setFontAppearance = useCallback(
 		( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {
 			// Only update the font style and weight if they have changed.
@@ -289,24 +326,6 @@ export default function TypographyPanel( {
 		setFontAppearance( {} );
 	}, [ setFontAppearance ] );
 
-	// Check if previous font style and weight values are available in the new font family.
-	useEffect( () => {
-		if ( nearestFontStyle && nearestFontWeight ) {
-			setFontAppearance( {
-				fontStyle: nearestFontStyle,
-				fontWeight: nearestFontWeight,
-			} );
-		} else {
-			// Reset font appearance if there are no available styles or weights.
-			resetFontAppearance();
-		}
-	}, [
-		nearestFontStyle,
-		nearestFontWeight,
-		resetFontAppearance,
-		setFontAppearance,
-	] );
-
 	// Line Height
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );
 	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
@@ -449,7 +468,7 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasFontSizeEnabled && ! fitText && (
+			{ hasFontSizeEnabled && (
 				<ToolsPanelItem
 					label={ __( 'Size' ) }
 					hasValue={ hasFontSize }
@@ -576,7 +595,6 @@ export default function TypographyPanel( {
 						value={ writingMode }
 						onChange={ setWritingMode }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }
@@ -594,7 +612,6 @@ export default function TypographyPanel( {
 						showNone
 						isBlock
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }
@@ -611,7 +628,6 @@ export default function TypographyPanel( {
 						onChange={ setTextAlign }
 						options={ [ 'left', 'center', 'right', 'justify' ] }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 
 					{ textAlign === 'justify' && (

package/src/components/height-control/README.md

@@ -1,5 +1,7 @@
 # Height Control
 
+**⚠️ DEPRECATED:** This component is deprecated. Please use `DimensionControl` instead for new implementations.
+
 The `HeightControl` component adds a linked unit control and slider component for controlling the height of a block within the block editor. It supports passing a label, and is used for controlling the minimum height dimensions of Group blocks.
 
 _Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls) UI controls.
@@ -8,6 +10,26 @@ _Note:_ It is worth noting that the minimum height option is an opt-in feature.
 
 ### Usage
 
+**For new implementations, use `DimensionControl` instead:**
+
+```jsx
+import { useState } from 'react';
+import { DimensionControl } from '@wordpress/block-editor';
+
+const MyDimensionControl = () => {
+	const [ value, setValue ] = useState();
+	return (
+		<DimensionControl
+			label={ 'Height' }
+			onChange={ setValue }
+			value={ value }
+		/>
+	);
+};
+```
+
+**Legacy usage (deprecated):**
+
 Renders the markup for height control component, to be used in the block inspector.
 
 ```jsx
@@ -16,12 +38,14 @@ import { HeightControl } from '@wordpress/block-editor';
 
 const MyLineHeightControl = () => (
 	const [ value, setValue ] = useState();
-	<HeightControl
-		label={ 'My Height Control' }
-		onChange={ setValue }
-		value={ value }
-	/>
-);
+	return (
+		<HeightControl
+			label={ 'My Height Control' }
+			onChange={ setValue }
+			value={ value }
+		/>
+	);
+};
 ```
 
 ### Props
@@ -47,4 +71,4 @@ A label for the height control. This is useful when using the height control for
 
 ## Related components
 
-Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/height-control/index.js

@@ -13,6 +13,7 @@ import {
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -53,6 +54,8 @@ const RANGE_CONTROL_CUSTOM_SETTINGS = {
 /**
  * HeightControl renders a linked unit control and range control for adjusting the height of a block.
  *
+ * @deprecated Use DimensionControl instead.
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md
  *
  * @param {Object}                     props
@@ -67,6 +70,11 @@ export default function HeightControl( {
 	onChange,
 	value,
 } ) {
+	deprecated( 'wp.blockEditor.HeightControl', {
+		since: '7.0',
+		version: '7.2',
+		alternative: 'wp.blockEditor.DimensionControl',
+	} );
 	const customRangeValue = parseFloat( value );
 
 	const [ availableUnits ] = useSettings( 'spacing.units' );
@@ -177,7 +185,6 @@ export default function HeightControl( {
 							}
 							withInputField={ false }
 							onChange={ handleSliderChange }
-							__nextHasNoMarginBottom
 							label={ label }
 							hideLabelFromVision
 						/>

package/src/components/html-element-control/index.js

@@ -88,7 +88,6 @@ export default function HTMLElementControl( {
 	return (
 		<VStack spacing={ 2 } className="block-editor-html-element-control">
 			<SelectControl
-				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ modifiedOptions }

package/src/components/iframe/index.js

@@ -21,7 +21,6 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
 import { useScaleCanvas } from './use-scale-canvas';
@@ -119,7 +118,6 @@ function Iframe( {
 	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 
 	const setRef = useRefEffect( ( node ) => {
@@ -176,8 +174,6 @@ function Iframe( {
 
 			documentElement.classList.add( 'block-editor-iframe__html' );
 
-			clearerRef( documentElement );
-
 			contentDocument.dir = ownerDocument.dir;
 
 			for ( const compatStyle of getCompatibilityStyles() ) {
@@ -243,7 +239,6 @@ function Iframe( {
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
 		contentRef,
-		clearerRef,
 		writingFlowRef,
 		disabledRef,
 	] );

package/src/components/image-editor/zoom-dropdown.js

@@ -35,7 +35,6 @@ export default function ZoomDropdown() {
 				<DropdownContentWrapper paddingSize="medium">
 					<RangeControl
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 						label={ __( 'Zoom' ) }
 						min={ MIN_ZOOM }
 						max={ MAX_ZOOM }

package/src/components/image-size-control/index.js

@@ -91,7 +91,6 @@ export default function ImageSizeControl( {
 		<VStack className="block-editor-image-size-control" spacing="4">
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
-					__nextHasNoMarginBottom
 					label={ __( 'Resolution' ) }
 					value={ slug }
 					options={ imageSizeOptions }
@@ -129,7 +128,6 @@ export default function ImageSizeControl( {
 						value={ selectedValue }
 						isBlock
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
 					>
 						{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
 							return (

package/src/components/index.js

@@ -60,6 +60,7 @@ export { default as __experimentalColorGradientControl } from './colors-gradient
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
+export { default as DimensionControl } from './dimension-control';
 export { default as HeightControl } from './height-control';
 export { default as __experimentalImageEditor } from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -4,7 +4,7 @@
 import { useLayoutEffect, useState } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import isShallowEqual from '@wordpress/is-shallow-equal';
+import { isShallowEqual } from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies

package/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js

@@ -37,7 +37,6 @@ function PatternsExplorerSearch( { searchValue, setSearchValue } ) {
 	return (
 		<div className={ baseClassName }>
 			<SearchControl
-				__nextHasNoMarginBottom
 				onChange={ setSearchValue }
 				value={ searchValue }
 				label={ __( 'Search' ) }

package/src/components/inserter/block-types-tab.js

@@ -186,6 +186,11 @@ export function BlockTypesTab(
 			continue;
 		}
 
+		// Skip search-only items from browse view (they're still searchable).
+		if ( item.isSearchOnly ) {
+			continue;
+		}
+
 		if ( item.isAllowedInCurrentRoot ) {
 			itemsForCurrentRoot.push( item );
 		} else {

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

@@ -25,7 +25,6 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	return (
 		<div className={ baseCssClass }>
 			<SearchControl
-				__nextHasNoMarginBottom
 				className={ `${ baseCssClass }-search` }
 				onChange={ setSearch }
 				value={ search }

package/src/components/inserter/menu.js

@@ -172,7 +172,6 @@ function InserterMenu(
 		return (
 			<>
 				<SearchControl
-					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					onChange={ ( value ) => {
 						if ( hoveredItem ) {

package/src/components/inserter/quick-inserter.js

@@ -89,7 +89,6 @@ export default function QuickInserter( {
 		>
 			{ showSearch && (
 				<SearchControl
-					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					value={ filterValue }
 					onChange={ ( value ) => {

package/src/components/inspector-controls/README.md

@@ -96,7 +96,6 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<CheckboxControl
-							__nextHasNoMarginBottom
 							heading="Checkbox Field"
 							label="Tick Me"
 							help="Additional help text"
@@ -115,7 +114,6 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<TextControl
-							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							label="Text Field"
 							help="Additional help text"
@@ -124,14 +122,12 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<ToggleControl
-							__nextHasNoMarginBottom
 							label="Toggle Field"
 							checked={ toggleField }
 							onChange={ onChangeToggleField }
 						/>
 
 						<SelectControl
-							__nextHasNoMarginBottom
 							label="Select Control"
 							value={ selectField }
 							options={ [
@@ -208,7 +204,6 @@ function MyBlockEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl
-					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					label="HTML anchor"
 					value={ attributes.anchor }

package/src/components/inspector-controls/fill.js

@@ -18,11 +18,12 @@ import {
 } from '../block-edit/context';
 import groups from './groups';
 
-export default function InspectorControlsFill( {
+export function PrivateInspectorControlsFill( {
 	children,
 	group = 'default',
 	__experimentalGroup,
 	resetAllFilter,
+	forceDisplayControls,
 } ) {
 	if ( __experimentalGroup ) {
 		deprecated(
@@ -42,7 +43,7 @@ export default function InspectorControlsFill( {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! context[ mayDisplayControlsKey ] ) {
+	if ( ! forceDisplayControls && ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 
@@ -63,6 +64,23 @@ export default function InspectorControlsFill( {
 	);
 }
 
+export default function InspectorControlsFill( {
+	children,
+	group = 'default',
+	__experimentalGroup,
+	resetAllFilter,
+} ) {
+	return (
+		<PrivateInspectorControlsFill
+			group={ group }
+			__experimentalGroup={ __experimentalGroup }
+			resetAllFilter={ resetAllFilter }
+		>
+			{ children }
+		</PrivateInspectorControlsFill>
+	);
+}
+
 function RegisterResetAll( { resetAllFilter, children } ) {
 	const { registerResetAllFilter, deregisterResetAllFilter } =
 		useContext( ToolsPanelContext );

package/src/components/inspector-controls/groups.js

@@ -22,6 +22,7 @@ const InspectorControlsTypography = createSlotFill(
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
 const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 const InspectorControlsEffects = createSlotFill( 'InspectorControlsEffects' );
+const InspectorControlsContent = createSlotFill( 'InspectorControlsContent' );
 
 const groups = {
 	default: InspectorControlsDefault,
@@ -30,6 +31,7 @@ const groups = {
 	bindings: InspectorControlsBindings,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
+	content: InspectorControlsContent,
 	dimensions: InspectorControlsDimensions,
 	effects: InspectorControlsEffects,
 	filter: InspectorControlsFilter,

package/src/components/inspector-controls-tabs/content-tab.js

@@ -8,27 +8,23 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockQuickNavigation from '../block-quick-navigation';
-import ContentOnlyControls from '../content-only-controls';
 
-const ContentTab = ( { rootClientId, contentClientIds } ) => {
+const ContentTab = ( { contentClientIds } ) => {
 	if ( ! contentClientIds || contentClientIds.length === 0 ) {
 		return null;
 	}
 
-	const shouldShowContentOnlyControls =
+	const shouldShowBlockFields =
 		window?.__experimentalContentOnlyPatternInsertion &&
 		window?.__experimentalContentOnlyInspectorFields;
 
 	return (
 		<>
-			{ ! shouldShowContentOnlyControls && (
+			{ ! shouldShowBlockFields && (
 				<PanelBody title={ __( 'Content' ) }>
 					<BlockQuickNavigation clientIds={ contentClientIds } />
 				</PanelBody>
 			) }
-			{ shouldShowContentOnlyControls && (
-				<ContentOnlyControls rootClientId={ rootClientId } />
-			) }
 		</>
 	);
 };

package/src/components/inspector-controls-tabs/index.js

@@ -6,7 +6,7 @@ import {
 	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useSelect } from '@wordpress/data';
 
@@ -18,7 +18,6 @@ import SettingsTab from './settings-tab';
 import StylesTab from './styles-tab';
 import ContentTab from './content-tab';
 import InspectorControls from '../inspector-controls';
-import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
 import { unlock } from '../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
@@ -35,47 +34,36 @@ export default function InspectorControlsTabs( {
 		return select( preferencesStore ).get( 'core', 'showIconLabels' );
 	}, [] );
 
-	// The tabs panel will mount before fills are rendered to the list view
-	// slot. This means the list view tab isn't initially included in the
-	// available tabs so the panel defaults selection to the settings tab
-	// which at the time is the first tab. This check allows blocks known to
-	// include the list view tab to set it as the tab selected by default.
-	const initialTabName = ! useIsListViewTabDisabled( blockName )
-		? TAB_LIST_VIEW.name
-		: undefined;
+	const [ selectedTabId, setSelectedTabId ] = useState( tabs[ 0 ]?.name );
+	const hasUserSelectionRef = useRef( false );
 
-	const [ selectedTabId, setSelectedTabId ] = useState(
-		initialTabName ?? tabs[ 0 ]?.name
-	);
+	// Reset when switching blocks
+	useEffect( () => {
+		hasUserSelectionRef.current = false;
+	}, [ clientId ] );
 
-	// When the active tab is not amongst the available `tabs`, it indicates
-	// the list of tabs was changed dynamically with the active one being
-	// removed. Set the active tab back to the first tab.
+	// Auto-select first available tab unless user has made a selection
 	useEffect( () => {
-		// Skip this behavior if `initialTabName` is supplied. In the navigation
-		// block, the list view tab isn't present in `tabs` initially. The early
-		// return here prevents the dynamic behavior that follows from overriding
-		// `initialTabName`.
-		if ( initialTabName ) {
+		if ( ! tabs?.length || hasUserSelectionRef.current ) {
 			return;
 		}
 
-		if ( tabs?.length && selectedTabId ) {
-			const activeTab = tabs.find(
-				( tab ) => tab.name === selectedTabId
-			);
-			if ( ! activeTab ) {
-				setSelectedTabId( tabs[ 0 ].name );
-			}
+		const firstTabName = tabs[ 0 ]?.name;
+		if ( selectedTabId !== firstTabName ) {
+			setSelectedTabId( firstTabName );
 		}
-	}, [ tabs, selectedTabId, initialTabName ] );
+	}, [ tabs, selectedTabId ] );
+
+	const handleTabSelect = ( tabId ) => {
+		setSelectedTabId( tabId );
+		hasUserSelectionRef.current = true;
+	};
 
 	return (
 		<div className="block-editor-block-inspector__tabs">
 			<Tabs
-				defaultTabId={ initialTabName }
 				selectedTabId={ selectedTabId }
-				onSelect={ setSelectedTabId }
+				onSelect={ handleTabSelect }
 				key={ clientId }
 			>
 				<Tabs.TabList>
@@ -109,10 +97,8 @@ export default function InspectorControlsTabs( {
 					/>
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_CONTENT.name } focusable={ false }>
-					<ContentTab
-						rootClientId={ clientId }
-						contentClientIds={ contentClientIds }
-					/>
+					<InspectorControls.Slot group="content" />
+					<ContentTab contentClientIds={ contentClientIds } />
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name } focusable={ false }>
 					<InspectorControls.Slot group="list" />

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 
@@ -71,13 +70,7 @@ const StylesTab = ( {
 
 	return (
 		<>
-			{ hasBlockStyles && (
-				<div>
-					<PanelBody title={ __( 'Styles' ) }>
-						<BlockStyles clientId={ clientId } />
-					</PanelBody>
-				</div>
-			) }
+			{ hasBlockStyles && <BlockStyles clientId={ clientId } /> }
 			{ isSectionBlock &&
 				window?.__experimentalContentOnlyPatternInsertion && (
 					<SectionBlockColorControls