@wordpress/block-editor 12.19.2 → 12.20.0

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -9,30 +9,24 @@ import {
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import {
-	Children,
-	cloneElement,
-	useCallback,
-	useRef,
-} from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { Children, cloneElement, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import {
 	store as keyboardShortcutsStore,
 	__unstableUseShortcutEventMatch,
 } from '@wordpress/keyboard-shortcuts';
-import { pipe, useCopyToClipboard, useViewportMatch } from '@wordpress/compose';
+import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
-import BlockIcon from '../block-icon';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
+import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -45,38 +39,6 @@ function CopyMenuItem( { blocks, onCopy, label } ) {
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
-function ParentSelectorMenuItem( { parentClientId, parentBlockType } ) {
-	const isSmallViewport = useViewportMatch( 'medium', '<' );
-	const { selectBlock } = useDispatch( blockEditorStore );
-
-	// Allows highlighting the parent block outline when focusing or hovering
-	// the parent block selector within the child.
-	const menuItemRef = useRef();
-	const gesturesProps = useShowHoveredOrFocusedGestures( {
-		ref: menuItemRef,
-		highlightParent: true,
-	} );
-
-	if ( ! isSmallViewport ) {
-		return null;
-	}
-
-	return (
-		<MenuItem
-			{ ...gesturesProps }
-			ref={ menuItemRef }
-			icon={ <BlockIcon icon={ parentBlockType.icon } /> }
-			onClick={ () => selectBlock( parentClientId ) }
-		>
-			{ sprintf(
-				/* translators: %s: Name of the block's parent. */
-				__( 'Select parent block (%s)' ),
-				parentBlockType.title
-			) }
-		</MenuItem>
-	);
-}
-
 export function BlockSettingsDropdown( {
 	block,
 	clientIds,
@@ -98,6 +60,7 @@ export function BlockSettingsDropdown( {
 		parentBlockType,
 		previousBlockClientId,
 		selectedBlockClientIds,
+		openedBlockSettingsMenu,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -107,7 +70,8 @@ export function BlockSettingsDropdown( {
 				getPreviousBlockClientId,
 				getSelectedBlockClientIds,
 				getBlockAttributes,
-			} = select( blockEditorStore );
+				getOpenedBlockSettingsMenu,
+			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
 
@@ -129,6 +93,7 @@ export function BlockSettingsDropdown( {
 				previousBlockClientId:
 					getPreviousBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
+				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 			};
 		},
 		[ firstBlockClientId ]
@@ -136,12 +101,6 @@ export function BlockSettingsDropdown( {
 	const { getBlockOrder, getSelectedBlockClientIds } =
 		useSelect( blockEditorStore );
 
-	const openedBlockSettingsMenu = useSelect(
-		( select ) =>
-			unlock( select( blockEditorStore ) ).getOpenedBlockSettingsMenu(),
-		[]
-	);
-
 	const { setOpenedBlockSettingsMenu } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -314,7 +273,7 @@ export function BlockSettingsDropdown( {
 								/>
 								{ ! parentBlockIsSelected &&
 									!! firstParentClientId && (
-										<ParentSelectorMenuItem
+										<BlockParentSelectorMenuItem
 											parentClientId={
 												firstParentClientId
 											}

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

@@ -1,7 +1,3 @@
-.block-editor-block-styles + .default-style-picker__default-switcher {
-	margin-top: $grid-unit-20;
-}
-
 .block-editor-block-styles__preview-panel {
 	display: none;
 	// Same layer as the sidebar from which it's triggered.

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

@@ -207,17 +207,18 @@
 		}
 	}
 
-	.block-editor-block-mover .block-editor-block-mover__move-button-container {
-		width: auto;
-
-		@include break-small() {
+	.block-editor-block-mover {
+		.block-editor-block-mover__move-button-container {
+			width: auto;
 			position: relative;
+		}
 
-			&::before {
+		&:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+			@include break-small() {
 				content: "";
 				height: $border-width;
 				width: 100%;
-				background: $gray-900;
+				background: $gray-200;
 				position: absolute;
 				top: 50%;
 				left: 50%;
@@ -226,6 +227,10 @@
 				transform: translate(-50%, 0);
 				margin-top: -$border-width * 0.5;
 			}
+
+			@include break-medium {
+				background: $gray-900;
+			}
 		}
 	}
 

package/src/components/block-tools/insertion-point.js

@@ -81,11 +81,16 @@ function InbetweenInsertionPointPopover( {
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 		};
 	}, [] );
+	const { getBlockEditingMode } = useSelect( blockEditorStore );
 
 	const disableMotion = useReducedMotion();
 
 	function onClick( event ) {
-		if ( event.target === ref.current && nextClientId ) {
+		if (
+			event.target === ref.current &&
+			nextClientId &&
+			getBlockEditingMode( nextClientId ) !== 'disabled'
+		) {
 			selectBlock( nextClientId, -1 );
 		}
 	}

package/src/components/child-layout-control/index.js

@@ -5,6 +5,8 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
+	__experimentalInputControl as InputControl,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
@@ -38,7 +40,12 @@ export default function ChildLayoutControl( {
 	onChange,
 	parentLayout,
 } ) {
-	const { selfStretch, flexSize } = childLayout;
+	const { selfStretch, flexSize, columnSpan, rowSpan } = childLayout;
+	const {
+		type: parentType,
+		default: { type: defaultParentType = 'default' } = {},
+	} = parentLayout ?? {};
+	const parentLayoutType = parentType || defaultParentType;
 
 	useEffect( () => {
 		if ( selfStretch === 'fixed' && ! flexSize ) {
@@ -51,49 +58,83 @@ export default function ChildLayoutControl( {
 
 	return (
 		<>
-			<ToggleGroupControl
-				__nextHasNoMarginBottom
-				size={ '__unstable-large' }
-				label={ childLayoutOrientation( parentLayout ) }
-				value={ selfStretch || 'fit' }
-				help={ helpText( selfStretch, parentLayout ) }
-				onChange={ ( value ) => {
-					const newFlexSize = value !== 'fixed' ? null : flexSize;
-					onChange( {
-						...childLayout,
-						selfStretch: value,
-						flexSize: newFlexSize,
-					} );
-				} }
-				isBlock={ true }
-			>
-				<ToggleGroupControlOption
-					key={ 'fit' }
-					value={ 'fit' }
-					label={ __( 'Fit' ) }
-				/>
-				<ToggleGroupControlOption
-					key={ 'fill' }
-					value={ 'fill' }
-					label={ __( 'Fill' ) }
-				/>
-				<ToggleGroupControlOption
-					key={ 'fixed' }
-					value={ 'fixed' }
-					label={ __( 'Fixed' ) }
-				/>
-			</ToggleGroupControl>
-			{ selfStretch === 'fixed' && (
-				<UnitControl
-					size={ '__unstable-large' }
-					onChange={ ( value ) => {
-						onChange( {
-							...childLayout,
-							flexSize: value,
-						} );
-					} }
-					value={ flexSize }
-				/>
+			{ parentLayoutType === 'flex' && (
+				<>
+					<ToggleGroupControl
+						__nextHasNoMarginBottom
+						size={ '__unstable-large' }
+						label={ childLayoutOrientation( parentLayout ) }
+						value={ selfStretch || 'fit' }
+						help={ helpText( selfStretch, parentLayout ) }
+						onChange={ ( value ) => {
+							const newFlexSize =
+								value !== 'fixed' ? null : flexSize;
+							onChange( {
+								selfStretch: value,
+								flexSize: newFlexSize,
+							} );
+						} }
+						isBlock={ true }
+					>
+						<ToggleGroupControlOption
+							key={ 'fit' }
+							value={ 'fit' }
+							label={ __( 'Fit' ) }
+						/>
+						<ToggleGroupControlOption
+							key={ 'fill' }
+							value={ 'fill' }
+							label={ __( 'Fill' ) }
+						/>
+						<ToggleGroupControlOption
+							key={ 'fixed' }
+							value={ 'fixed' }
+							label={ __( 'Fixed' ) }
+						/>
+					</ToggleGroupControl>
+					{ selfStretch === 'fixed' && (
+						<UnitControl
+							size={ '__unstable-large' }
+							onChange={ ( value ) => {
+								onChange( {
+									selfStretch,
+									flexSize: value,
+								} );
+							} }
+							value={ flexSize }
+						/>
+					) }
+				</>
+			) }
+			{ parentLayoutType === 'grid' && (
+				<HStack>
+					<InputControl
+						size={ '__unstable-large' }
+						label={ __( 'Column Span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							onChange( {
+								rowSpan,
+								columnSpan: value,
+							} );
+						} }
+						value={ columnSpan }
+						min={ 1 }
+					/>
+					<InputControl
+						size={ '__unstable-large' }
+						label={ __( 'Row Span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							onChange( {
+								columnSpan,
+								rowSpan: value,
+							} );
+						} }
+						value={ rowSpan }
+						min={ 1 }
+					/>
+				</HStack>
 			) }
 		</>
 	);

package/src/components/date-format-picker/index.js

@@ -117,7 +117,6 @@ function NonDefaultControls( { format, onChange } ) {
 	return (
 		<VStack>
 			<CustomSelectControl
-				__nextUnconstrainedWidth
 				label={ __( 'Choose a format' ) }
 				options={ [ ...suggestedOptions, customOption ] }
 				value={

package/src/components/font-appearance-control/index.js

@@ -215,7 +215,6 @@ export default function FontAppearanceControl( props ) {
 				onChange={ ( { selectedItem } ) =>
 					onChange( selectedItem.style )
 				}
-				__nextUnconstrainedWidth
 			/>
 		)
 	);

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

@@ -3,12 +3,11 @@
  */
 import {
 	TextareaControl,
-	Tooltip,
+	Notice,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon, info } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -58,6 +57,11 @@ export default function AdvancedPanel( {
 
 	return (
 		<VStack spacing={ 3 }>
+			{ cssError && (
+				<Notice status="error" onRemove={ () => setCSSError( null ) }>
+					{ cssError }
+				</Notice>
+			) }
 			<TextareaControl
 				label={ __( 'Additional CSS' ) }
 				__nextHasNoMarginBottom
@@ -67,16 +71,6 @@ export default function AdvancedPanel( {
 				className="block-editor-global-styles-advanced-panel__custom-css-input"
 				spellCheck={ false }
 			/>
-			{ cssError && (
-				<Tooltip text={ cssError }>
-					<div className="block-editor-global-styles-advanced-panel__custom-css-validation-wrapper">
-						<Icon
-							icon={ info }
-							className="block-editor-global-styles-advanced-panel__custom-css-validation-icon"
-						/>
-					</div>
-				</Tooltip>
-			) }
 		</VStack>
 	);
 }

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

@@ -92,9 +92,11 @@ function useHasChildLayout( settings ) {
 	} = settings?.parentLayout ?? {};
 
 	const support =
-		( defaultParentLayoutType === 'flex' || parentLayoutType === 'flex' ) &&
+		( defaultParentLayoutType === 'flex' ||
+			parentLayoutType === 'flex' ||
+			defaultParentLayoutType === 'grid' ||
+			parentLayoutType === 'grid' ) &&
 		allowSizingOnChildren;
-
 	return !! settings?.layout && support;
 }
 
@@ -395,13 +397,19 @@ export default function DimensionsPanel( {
 	const showChildLayoutControl = useHasChildLayout( settings );
 	const childLayout = inheritedValue?.layout;
 	const { orientation = 'horizontal' } = settings?.parentLayout ?? {};
-	const childLayoutOrientationLabel =
+	const {
+		type: parentType,
+		default: { type: defaultParentType = 'default' } = {},
+	} = settings?.parentLayout ?? {};
+	const parentLayoutType = parentType || defaultParentType;
+	const flexResetLabel =
 		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+	const childLayoutResetLabel =
+		parentLayoutType === 'flex' ? flexResetLabel : __( 'Grid spans' );
 	const setChildLayout = ( newChildLayout ) => {
 		onChange( {
 			...value,
 			layout: {
-				...value?.layout,
 				...newChildLayout,
 			},
 		} );
@@ -410,6 +418,8 @@ export default function DimensionsPanel( {
 		setChildLayout( {
 			selfStretch: undefined,
 			flexSize: undefined,
+			columnSpan: undefined,
+			rowSpan: undefined,
 		} );
 	};
 	const hasChildLayoutValue = () => !! value?.layout;
@@ -423,6 +433,8 @@ export default function DimensionsPanel( {
 				wideSize: undefined,
 				selfStretch: undefined,
 				flexSize: undefined,
+				columnSpan: undefined,
+				rowSpan: undefined,
 			} ),
 			spacing: {
 				...previousValue?.spacing,
@@ -637,6 +649,26 @@ export default function DimensionsPanel( {
 					) }
 				</ToolsPanelItem>
 			) }
+			{ showChildLayoutControl && (
+				<VStack
+					as={ ToolsPanelItem }
+					spacing={ 2 }
+					hasValue={ hasChildLayoutValue }
+					label={ childLayoutResetLabel }
+					onDeselect={ resetChildLayoutValue }
+					isShownByDefault={
+						defaultControls.childLayout ??
+						DEFAULT_CONTROLS.childLayout
+					}
+					panelId={ panelId }
+				>
+					<ChildLayoutControl
+						value={ childLayout }
+						onChange={ setChildLayout }
+						parentLayout={ settings?.parentLayout }
+					/>
+				</VStack>
+			) }
 			{ showMinHeightControl && (
 				<ToolsPanelItem
 					hasValue={ hasMinHeightValue }
@@ -666,26 +698,6 @@ export default function DimensionsPanel( {
 					}
 				/>
 			) }
-			{ showChildLayoutControl && (
-				<VStack
-					as={ ToolsPanelItem }
-					spacing={ 2 }
-					hasValue={ hasChildLayoutValue }
-					label={ childLayoutOrientationLabel }
-					onDeselect={ resetChildLayoutValue }
-					isShownByDefault={
-						defaultControls.childLayout ??
-						DEFAULT_CONTROLS.childLayout
-					}
-					panelId={ panelId }
-				>
-					<ChildLayoutControl
-						value={ childLayout }
-						onChange={ setChildLayout }
-						parentLayout={ settings?.parentLayout }
-					/>
-				</VStack>
-			) }
 		</Wrapper>
 	);
 }

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

@@ -19,13 +19,13 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
 import classNames from 'classnames';
 
 export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
-	const defaultShadows = settings?.shadow?.presets?.default;
-	const themeShadows = settings?.shadow?.presets?.theme;
+	const defaultShadows = settings?.shadow?.presets?.default || [];
+	const themeShadows = settings?.shadow?.presets?.theme || [];
 	const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
 
 	const shadows = [
 		...( defaultPresetsEnabled ? defaultShadows : [] ),
-		...( themeShadows || [] ),
+		...themeShadows,
 	];
 
 	return (

package/src/components/global-styles/style.scss

@@ -47,13 +47,3 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
-	position: absolute;
-	bottom: $grid-unit-20;
-	right: $grid-unit * 3;
-}
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
-	fill: $alert-red;
-}

package/src/components/global-styles/test/use-global-styles-output.js

@@ -169,7 +169,8 @@ describe( 'global styles renderer', () => {
 							},
 						},
 					},
-					selector: '.my-heading1 a, .my-heading2 a',
+					selector:
+						'.my-heading1 a:where(:not(.wp-element-button)), .my-heading2 a:where(:not(.wp-element-button))',
 				},
 				{
 					styles: {
@@ -480,7 +481,7 @@ describe( 'global styles renderer', () => {
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }body .is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }body .is-layout-grid { display:grid; }body .is-layout-grid > * { margin: 0; }' +
-					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
+					'body{background-color: red;margin: 10px;padding: 10px;}a:where(:not(.wp-element-button)){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button)){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}' +
 					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px;}.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);

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

@@ -195,7 +195,12 @@ export function MediaPreview( { media, onClick, category } ) {
 			createSuccessNotice,
 		]
 	);
-	const title = media.title?.rendered || media.title;
+
+	const title =
+		typeof media.title === 'string'
+			? media.title
+			: media.title?.rendered || __( 'no title' );
+
 	let truncatedTitle;
 	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
 		const omission = '...';

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

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -9,7 +8,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockStyles from '../block-styles';
-import DefaultStylePicker from '../default-style-picker';
 import InspectorControls from '../inspector-controls';
 import { getBorderPanelLabel } from '../../hooks/border';
 
@@ -22,11 +20,6 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				<div>
 					<PanelBody title={ __( 'Styles' ) }>
 						<BlockStyles clientId={ clientId } />
-						{ hasBlockSupport(
-							blockName,
-							'defaultStylePicker',
-							true
-						) && <DefaultStylePicker blockName={ blockName } /> }
 					</PanelBody>
 				</div>
 			) }

package/src/components/observe-typing/index.js

@@ -115,11 +115,10 @@ export function useMouseMoveTypingReset() {
  *   field, presses ESC or TAB, or moves the mouse in the document.
  */
 export function useTypingObserver() {
-	const { isTyping, hasInlineToolbar } = useSelect( ( select ) => {
-		const { isTyping: _isTyping, getSettings } = select( blockEditorStore );
+	const { isTyping } = useSelect( ( select ) => {
+		const { isTyping: _isTyping } = select( blockEditorStore );
 		return {
 			isTyping: _isTyping(),
-			hasInlineToolbar: getSettings().hasInlineToolbar,
 		};
 	}, [] );
 	const { startTyping, stopTyping } = useDispatch( blockEditorStore );
@@ -183,12 +182,10 @@ export function useTypingObserver() {
 				node.addEventListener( 'focus', stopTypingOnNonTextField );
 				node.addEventListener( 'keydown', stopTypingOnEscapeKey );
 
-				if ( ! hasInlineToolbar ) {
-					ownerDocument.addEventListener(
-						'selectionchange',
-						stopTypingOnSelectionUncollapse
-					);
-				}
+				ownerDocument.addEventListener(
+					'selectionchange',
+					stopTypingOnSelectionUncollapse
+				);
 
 				return () => {
 					defaultView.clearTimeout( timerId );
@@ -245,7 +242,7 @@ export function useTypingObserver() {
 				node.removeEventListener( 'keydown', startTypingInTextField );
 			};
 		},
-		[ isTyping, hasInlineToolbar, startTyping, stopTyping ]
+		[ isTyping, startTyping, stopTyping ]
 	);
 
 	return useMergeRefs( [ ref1, ref2 ] );