@wordpress/block-editor 8.0.13 → 8.1.0

package/src/components/default-block-appender/test/index.js

@@ -14,16 +14,10 @@ describe( 'DefaultBlockAppender', () => {
 		expect( onAppend ).toHaveBeenCalledWith();
 	};
 
-	it( 'should render nothing if not visible', () => {
-		const wrapper = shallow( <DefaultBlockAppender /> );
-
-		expect( wrapper.type() ).toBe( null );
-	} );
-
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
+			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
 		expect( wrapper ).toMatchSnapshot();
@@ -32,10 +26,10 @@ describe( 'DefaultBlockAppender', () => {
 	it( 'should append a default block when input focused', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
+			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
-		wrapper.find( 'p' ).simulate( 'focus' );
+		wrapper.find( 'p' ).simulate( 'click' );
 
 		expect( wrapper ).toMatchSnapshot();
 
@@ -45,11 +39,7 @@ describe( 'DefaultBlockAppender', () => {
 	it( 'should optionally show without prompt', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender
-				isVisible
-				onAppend={ onAppend }
-				showPrompt={ false }
-			/>
+			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
 		);
 		const input = wrapper.find( 'p' );
 

package/src/components/default-style-picker/index.js

@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { getDefaultStyle } from '../block-styles/utils';
 
 export default function DefaultStylePicker( { blockName } ) {
 	const {
@@ -38,6 +39,9 @@ export default function DefaultStylePicker( { blockName } ) {
 		],
 		[ styles ]
 	);
+	const defaultStyleName = useMemo( () => getDefaultStyle( styles )?.name, [
+		styles,
+	] );
 	const selectOnChange = useCallback(
 		( blockStyle ) => {
 			onUpdatePreferredStyleVariations( blockName, blockStyle );
@@ -45,14 +49,22 @@ export default function DefaultStylePicker( { blockName } ) {
 		[ blockName, onUpdatePreferredStyleVariations ]
 	);
 
+	// Until the functionality is migrated to global styles,
+	// only show the default style picker if a non-default style has already been selected.
+	if ( ! preferredStyle || preferredStyle === defaultStyleName ) {
+		return null;
+	}
+
 	return (
 		onUpdatePreferredStyleVariations && (
-			<SelectControl
-				options={ selectOptions }
-				value={ preferredStyle || '' }
-				label={ __( 'Default Style' ) }
-				onChange={ selectOnChange }
-			/>
+			<div className="default-style-picker__default-switcher">
+				<SelectControl
+					options={ selectOptions }
+					value={ preferredStyle || '' }
+					label={ __( 'Default Style' ) }
+					onChange={ selectOnChange }
+				/>
+			</div>
 		)
 	);
 }

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

@@ -3,54 +3,54 @@
  */
 import { CustomSelectControl } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 const FONT_STYLES = [
 	{
-		name: __( 'Regular' ),
+		name: _x( 'Regular', 'font style' ),
 		value: 'normal',
 	},
 	{
-		name: __( 'Italic' ),
+		name: _x( 'Italic', 'font style' ),
 		value: 'italic',
 	},
 ];
 
 const FONT_WEIGHTS = [
 	{
-		name: __( 'Thin' ),
+		name: _x( 'Thin', 'font weight' ),
 		value: '100',
 	},
 	{
-		name: __( 'Extra Light' ),
+		name: _x( 'Extra Light', 'font weight' ),
 		value: '200',
 	},
 	{
-		name: __( 'Light' ),
+		name: _x( 'Light', 'font weight' ),
 		value: '300',
 	},
 	{
-		name: __( 'Regular' ),
+		name: _x( 'Regular', 'font weight' ),
 		value: '400',
 	},
 	{
-		name: __( 'Medium' ),
+		name: _x( 'Medium', 'font weight' ),
 		value: '500',
 	},
 	{
-		name: __( 'Semi Bold' ),
+		name: _x( 'Semi Bold', 'font weight' ),
 		value: '600',
 	},
 	{
-		name: __( 'Bold' ),
+		name: _x( 'Bold', 'font weight' ),
 		value: '700',
 	},
 	{
-		name: __( 'Extra Bold' ),
+		name: _x( 'Extra Bold', 'font weight' ),
 		value: '800',
 	},
 	{
-		name: __( 'Black' ),
+		name: _x( 'Black', 'font weight' ),
 		value: '900',
 	},
 ];

package/src/components/iframe/index.js

@@ -75,13 +75,9 @@ function styleSheetsCompat( doc ) {
 		);
 
 		if ( isMatch && ! doc.getElementById( ownerNode.id ) ) {
-			// eslint-disable-next-line no-console
-			console.warn(
-				`Stylesheet ${ ownerNode.id } was not properly added.
-For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
-For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`,
-				ownerNode.outerHTML
-			);
+			// Display warning once we have a way to add style dependencies to the editor.
+			// See: https://github.com/WordPress/gutenberg/pull/37466.
+
 			doc.head.appendChild( ownerNode.cloneNode( true ) );
 
 			// Add inline styles belonging to the stylesheet.
@@ -164,12 +160,15 @@ async function loadScript( head, { id, src } ) {
 	} );
 }
 
-function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
+function Iframe(
+	{ contentRef, children, head, tabIndex = 0, assets, ...props },
+	ref
+) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( window.__editorAssets?.styles );
-	const scripts = useParsedAssets( window.__editorAssets?.scripts );
+	const styles = useParsedAssets( assets?.styles );
+	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 	const setRef = useRefEffect( ( node ) => {
@@ -192,6 +191,7 @@ function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
 				Array.from( ownerDocument.body.classList ).filter(
 					( name ) =>
 						name.startsWith( 'admin-color-' ) ||
+						name.startsWith( 'post-type-' ) ||
 						name === 'wp-embed-responsive'
 				)
 			);

package/src/components/index.js

@@ -24,6 +24,7 @@ export { default as BlockColorsStyleSelector } from './color-style-selector';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
+export { default as BlockStyles } from './block-styles';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
@@ -48,6 +49,7 @@ export { default as __experimentalLetterSpacingControl } from './letter-spacing-
 export { default as __experimentalTextDecorationControl } from './text-decoration-control';
 export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
+export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export {
 	default as __experimentalImageEditor,
@@ -140,7 +142,6 @@ export {
 } from './typewriter';
 export { default as Warning } from './warning';
 export { default as WritingFlow } from './writing-flow';
-export { useCanvasClickRedirect as __unstableUseCanvasClickRedirect } from './use-canvas-click-redirect';
 export { default as useBlockDisplayInformation } from './use-block-display-information';
 export { default as __unstableIframe } from './iframe';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';

package/src/components/index.native.js

@@ -54,6 +54,7 @@ export { default as __experimentalPanelColorGradientSettings } from './colors-gr
 export { default as useSetting } from './use-setting';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
 export { default as Warning } from './warning';
+export { default as ContrastChecker } from './contrast-checker';
 
 export {
 	BottomSheetSettings,

package/src/components/inner-blocks/README.md

@@ -41,6 +41,8 @@ _Note:_ A block can render at most a single `InnerBlocks` and `InnerBlocks.Conte
 
 _Note:_ Because the save step will automatically apply props to the element returned by `save`, it is important to include the wrapping `div` in the above simple example even though we are applying no props of our own. In a real-world example, you may have your own attributes to apply to the saved markup, or sibling content adjacent to the rendered nested blocks.
 
+_Note:_ Inner blocks, by default, are not visible inside a WordPress excerpt. If you wish your block to appear then it needs to be returned from the `excerpt_allowed_wrapper_blocks` filter. More details can be found on the [filter reference page](https://developer.wordpress.org/reference/hooks/excerpt_allowed_wrapper_blocks/) page, as well as the [excerpt_remove_blocks](https://developer.wordpress.org/reference/functions/excerpt_remove_blocks/) page.
+
 ## Props
 
 ### `allowedBlocks`

package/src/components/inner-blocks/default-block-appender.js

@@ -16,13 +16,8 @@ import BaseDefaultBlockAppender from '../default-block-appender';
 import withClientId from './with-client-id';
 import { store as blockEditorStore } from '../../store';
 
-export const DefaultBlockAppender = ( { clientId, lastBlockClientId } ) => {
-	return (
-		<BaseDefaultBlockAppender
-			rootClientId={ clientId }
-			lastBlockClientId={ lastBlockClientId }
-		/>
-	);
+export const DefaultBlockAppender = ( { clientId } ) => {
+	return <BaseDefaultBlockAppender rootClientId={ clientId } />;
 };
 
 export default compose( [

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

@@ -11,6 +11,8 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
 
+/** @typedef {import('../../selectors').WPDirectInsertBlock } WPDirectInsertBlock */
+
 /**
  * This hook is a side effect which updates the block-editor store when changes
  * happen to inner block settings. The given props are transformed into a
@@ -18,20 +20,20 @@ import { getLayoutType } from '../../layouts';
  * the block-editor store, then the store is updated with the new settings which
  * came from props.
  *
- * @param {string}            clientId                   The client ID of the block to update.
- * @param {string[]}          allowedBlocks              An array of block names which are permitted
- *                                                       in inner blocks.
- * @param {?Array}            __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ].
- * @param {?Function|boolean} __experimentalDirectInsert If a default block should be inserted directly by the
- *                                                       appender.
- * @param {string}            [templateLock]             The template lock specified for the inner
- *                                                       blocks component. (e.g. "all")
- * @param {boolean}           captureToolbars            Whether or children toolbars should be shown
- *                                                       in the inner blocks component rather than on
- *                                                       the child block.
- * @param {string}            orientation                The direction in which the block
- *                                                       should face.
- * @param {Object}            layout                     The layout object for the block container.
+ * @param {string}               clientId                   The client ID of the block to update.
+ * @param {string[]}             allowedBlocks              An array of block names which are permitted
+ *                                                          in inner blocks.
+ * @param {?WPDirectInsertBlock} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ].
+ * @param {?Function|boolean}    __experimentalDirectInsert If a default block should be inserted directly by the
+ *                                                          appender.
+ * @param {string}               [templateLock]             The template lock specified for the inner
+ *                                                          blocks component. (e.g. "all")
+ * @param {boolean}              captureToolbars            Whether or children toolbars should be shown
+ *                                                          in the inner blocks component rather than on
+ *                                                          the child block.
+ * @param {string}               orientation                The direction in which the block
+ *                                                          should face.
+ * @param {Object}               layout                     The layout object for the block container.
  */
 export default function useNestedSettingsUpdate(
 	clientId,

package/src/components/inserter/index.js

@@ -176,7 +176,7 @@ class Inserter extends Component {
 			onSelectOrClose,
 		} = this.props;
 
-		if ( hasSingleBlockType || directInsertBlock?.length ) {
+		if ( hasSingleBlockType || directInsertBlock ) {
 			return this.renderToggle( { onToggle: insertOnlyAllowedBlock } );
 		}
 
@@ -251,10 +251,68 @@ export default compose( [
 					onSelectOrClose,
 				} = ownProps;
 
-				if ( ! hasSingleBlockType && ! directInsertBlock?.length ) {
+				if ( ! hasSingleBlockType && ! directInsertBlock ) {
 					return;
 				}
 
+				function getAdjacentBlockAttributes( attributesToCopy ) {
+					const { getBlock, getPreviousBlockClientId } = select(
+						blockEditorStore
+					);
+
+					if (
+						! attributesToCopy ||
+						( ! clientId && ! rootClientId )
+					) {
+						return {};
+					}
+
+					const result = {};
+					let adjacentAttributes = {};
+
+					// If there is no clientId, then attempt to get attributes
+					// from the last block within innerBlocks of the root block.
+					if ( ! clientId ) {
+						const parentBlock = getBlock( rootClientId );
+
+						if ( parentBlock?.innerBlocks?.length ) {
+							const lastInnerBlock =
+								parentBlock.innerBlocks[
+									parentBlock.innerBlocks.length - 1
+								];
+
+							if (
+								directInsertBlock &&
+								directInsertBlock?.name === lastInnerBlock.name
+							) {
+								adjacentAttributes = lastInnerBlock.attributes;
+							}
+						}
+					} else {
+						// Otherwise, attempt to get attributes from the
+						// previous block relative to the current clientId.
+						const currentBlock = getBlock( clientId );
+						const previousBlock = getBlock(
+							getPreviousBlockClientId( clientId )
+						);
+
+						if ( currentBlock?.name === previousBlock?.name ) {
+							adjacentAttributes =
+								previousBlock?.attributes || {};
+						}
+					}
+
+					// Copy over only those attributes flagged to be copied.
+					attributesToCopy.forEach( ( attribute ) => {
+						if ( adjacentAttributes.hasOwnProperty( attribute ) ) {
+							result[ attribute ] =
+								adjacentAttributes[ attribute ];
+						}
+					} );
+
+					return result;
+				}
+
 				function getInsertionIndex() {
 					const {
 						getBlockIndex,
@@ -284,9 +342,23 @@ export default compose( [
 
 				const { insertBlock } = dispatch( blockEditorStore );
 
-				const blockToInsert = directInsertBlock?.length
-					? createBlock( ...directInsertBlock )
-					: createBlock( allowedBlockType.name );
+				let blockToInsert;
+
+				// Attempt to augment the directInsertBlock with attributes from an adjacent block.
+				// This ensures styling from nearby blocks is preserved in the newly inserted block.
+				// See: https://github.com/WordPress/gutenberg/issues/37904
+				if ( directInsertBlock ) {
+					const newAttributes = getAdjacentBlockAttributes(
+						directInsertBlock.attributesToCopy
+					);
+
+					blockToInsert = createBlock( directInsertBlock.name, {
+						...( directInsertBlock.attributes || {} ),
+						...newAttributes,
+					} );
+				} else {
+					blockToInsert = createBlock( allowedBlockType.name );
+				}
 
 				insertBlock( blockToInsert, getInsertionIndex(), rootClientId );
 

package/src/components/inserter/index.native.js

@@ -7,7 +7,7 @@ import { delay } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { Dropdown, ToolbarButton, Picker } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -34,7 +34,7 @@ const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 
 const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
 	<ToolbarButton
-		title={ __( 'Add block' ) }
+		title={ _x( 'Add block', 'Generic label for block inserter button' ) }
 		icon={
 			<Icon
 				icon={ plusCircleFilled }

package/src/components/inserter/library.js

@@ -7,6 +7,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,17 +15,20 @@ import { useSelect } from '@wordpress/data';
 import InserterMenu from './menu';
 import { store as blockEditorStore } from '../../store';
 
-function InserterLibrary( {
-	rootClientId,
-	clientId,
-	isAppender,
-	showInserterHelpPanel,
-	showMostUsedBlocks = false,
-	__experimentalInsertionIndex,
-	__experimentalFilterValue,
-	onSelect = noop,
-	shouldFocusBlock = false,
-} ) {
+function InserterLibrary(
+	{
+		rootClientId,
+		clientId,
+		isAppender,
+		showInserterHelpPanel,
+		showMostUsedBlocks = false,
+		__experimentalInsertionIndex,
+		__experimentalFilterValue,
+		onSelect = noop,
+		shouldFocusBlock = false,
+	},
+	ref
+) {
 	const destinationRootClientId = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -47,8 +51,9 @@ function InserterLibrary( {
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }
+			ref={ ref }
 		/>
 	);
 }
 
-export default InserterLibrary;
+export default forwardRef( InserterLibrary );

package/src/components/inserter/menu.js

@@ -1,7 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useState, useCallback, useMemo } from '@wordpress/element';
+import {
+	forwardRef,
+	useState,
+	useCallback,
+	useMemo,
+	useImperativeHandle,
+	useRef,
+} from '@wordpress/element';
 import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -19,17 +26,20 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
 
-function InserterMenu( {
-	rootClientId,
-	clientId,
-	isAppender,
-	__experimentalInsertionIndex,
-	onSelect,
-	showInserterHelpPanel,
-	showMostUsedBlocks,
-	__experimentalFilterValue = '',
-	shouldFocusBlock = true,
-} ) {
+function InserterMenu(
+	{
+		rootClientId,
+		clientId,
+		isAppender,
+		__experimentalInsertionIndex,
+		onSelect,
+		showInserterHelpPanel,
+		showMostUsedBlocks,
+		__experimentalFilterValue = '',
+		shouldFocusBlock = true,
+	},
+	ref
+) {
 	const [ filterValue, setFilterValue ] = useState(
 		__experimentalFilterValue
 	);
@@ -168,6 +178,13 @@ function InserterMenu( {
 		[ blocksTab, patternsTab, reusableBlocksTab ]
 	);
 
+	const searchRef = useRef();
+	useImperativeHandle( ref, () => ( {
+		focusSearch: () => {
+			searchRef.current.focus();
+		},
+	} ) );
+
 	return (
 		<div className="block-editor-inserter__menu">
 			<div className="block-editor-inserter__main-area">
@@ -182,6 +199,7 @@ function InserterMenu( {
 						value={ filterValue }
 						label={ __( 'Search for blocks and patterns' ) }
 						placeholder={ __( 'Search' ) }
+						ref={ searchRef }
 					/>
 					{ !! filterValue && (
 						<InserterSearchResults
@@ -219,4 +237,4 @@ function InserterMenu( {
 	);
 }
 
-export default InserterMenu;
+export default forwardRef( InserterMenu );

package/src/components/inserter/tabs.native.js

@@ -63,7 +63,7 @@ function InserterTabs( {
 	}, [ tabIndex ] );
 
 	const { tabs, tabKeys } = useMemo( () => {
-		const filteredTabs = InserterTabs.TABS.filter(
+		const filteredTabs = InserterTabs.getTabs().filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return {
@@ -114,8 +114,9 @@ function InserterTabs( {
 }
 
 function TabsControl( { onChangeTab, showReusableBlocks } ) {
+	const tabs = InserterTabs.getTabs();
 	const segments = useMemo( () => {
-		const filteredTabs = InserterTabs.TABS.filter(
+		const filteredTabs = tabs.filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return filteredTabs.map( ( { title } ) => title );
@@ -123,7 +124,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 	const segmentHandler = useCallback(
 		( selectedTab ) => {
-			const tabTitles = InserterTabs.TABS.map( ( { title } ) => title );
+			const tabTitles = tabs.map( ( { title } ) => title );
 			onChangeTab( tabTitles.indexOf( selectedTab ) );
 		},
 		[ onChangeTab ]
@@ -139,7 +140,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 InserterTabs.Control = TabsControl;
 
-InserterTabs.TABS = [
+InserterTabs.getTabs = () => [
 	{ name: 'blocks', title: __( 'Blocks' ), component: BlockTypesTab },
 	{ name: 'reusable', title: __( 'Reusable' ), component: ReusableBlocksTab },
 ];

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -13,9 +13,7 @@ import { useSelect } from '@wordpress/data';
  */
 import items from './fixtures';
 import BlockTypesTab from '../block-types-tab';
-import BlockTypesList from '../../block-types-list';
 
-jest.mock( '../../block-types-list' );
 jest.mock( '../hooks/use-clipboard-block' );
 jest.mock( '@wordpress/data/src/components/use-select' );
 
@@ -35,11 +33,11 @@ describe( 'BlockTypesTab component', () => {
 	} );
 
 	it( 'renders without crashing', () => {
-		const component = shallow(
+		const component = render(
 			<BlockTypesTab
 				rootClientId={ 0 }
 				onSelect={ jest.fn() }
-				listProps={ {} }
+				listProps={ { contentContainerStyle: {} } }
 			/>
 		);
 		expect( component ).toBeTruthy();
@@ -52,15 +50,16 @@ describe( 'BlockTypesTab component', () => {
 			( { id, category } ) =>
 				category !== 'reusable' && id !== 'core-embed/a-paragraph-embed'
 		);
-		const component = shallow(
+		const component = render(
 			<BlockTypesTab
 				rootClientId={ 0 }
 				onSelect={ jest.fn() }
-				listProps={ {} }
+				listProps={ { contentContainerStyle: {} } }
 			/>
 		);
-		expect( component.find( BlockTypesList ).prop( 'items' ) ).toEqual(
-			blockItems
-		);
+
+		blockItems.forEach( ( item ) => {
+			expect( component.getByText( item.title ) ).toBeTruthy();
+		} );
 	} );
 } );