@wordpress/block-library 6.0.20 → 6.1.0

package/src/navigation/menu-items-to-blocks.js

@@ -154,14 +154,15 @@ function menuItemToBlockAttributes( {
 			classes.join( ' ' ).trim() && {
 				className: classes.join( ' ' ).trim(),
 			} ),
+		/* eslint-disable camelcase */
 		...( attr_title?.length && {
 			title: attr_title,
 		} ),
-		// eslint-disable-next-line camelcase
 		...( object_id &&
 			'custom' !== object && {
 				id: object_id,
 			} ),
+		/* eslint-enable camelcase */
 		...( description?.length && {
 			description,
 		} ),

package/src/navigation/style.scss

@@ -306,11 +306,14 @@ button.wp-block-navigation-item__content {
  */
 
 // Menu items with no background.
+.wp-block-navigation__responsive-container,
+.wp-block-navigation__responsive-close,
+.wp-block-navigation__responsive-dialog,
 .wp-block-navigation,
 .wp-block-navigation .wp-block-page-list,
 .wp-block-navigation__container,
 .wp-block-navigation__responsive-container-content {
-	gap: var(--wp--style--block-gap, 2em);
+	gap: inherit;
 }
 
 // Menu items with background.
@@ -321,7 +324,7 @@ button.wp-block-navigation-item__content {
 	&,
 	.wp-block-navigation .wp-block-page-list,
 	.wp-block-navigation__container {
-		gap: var(--wp--style--block-gap, 0.5em);
+		gap: inherit;
 	}
 }
 
@@ -452,7 +455,7 @@ button.wp-block-navigation-item__content {
 		background-color: inherit;
 
 		// Use em units to apply padding, so themes can more easily style this in various ways.
-		padding: 2em;
+		padding: 2rem;
 
 		// Allow modal to scroll.
 		overflow: auto;
@@ -462,7 +465,7 @@ button.wp-block-navigation-item__content {
 
 		.wp-block-navigation__responsive-container-content {
 			// Add padding above to accommodate close button.
-			padding-top: calc(2em + #{ $navigation-icon-size });
+			padding-top: calc(2rem + #{ $navigation-icon-size });
 
 			// Don't crop the focus style.
 			overflow: visible;
@@ -502,14 +505,14 @@ button.wp-block-navigation-item__content {
 				// Position and style.
 				position: static;
 				border: none;
-				padding-left: 2em;
-				padding-right: 2em;
+				padding-left: 2rem;
+				padding-right: 2rem;
 			}
 
 			// Space unfolded items using gap and padding for submenus.
 			.wp-block-navigation__submenu-container,
 			.wp-block-navigation__container {
-				gap: var(--wp--style--block-gap, 2em);
+				gap: inherit;
 			}
 
 			// Apply top padding to nested submenus.
@@ -580,6 +583,12 @@ button.wp-block-navigation-item__content {
 	color: #000;
 }
 
+// Overlay menu toggle button label
+.wp-block-navigation__toggle_button_label {
+	font-size: 1rem;
+	font-weight: bold;
+}
+
 // Menu and close buttons.
 .wp-block-navigation__responsive-container-open,
 .wp-block-navigation__responsive-container-close {
@@ -622,6 +631,14 @@ button.wp-block-navigation-item__content {
 // The menu adds wrapping containers.
 .wp-block-navigation__responsive-close {
 	width: 100%;
+
+	// This element is not keyboard accessible, and is focusable only using the mouse.
+	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,
+	// where clicking that scrim closes the overlay just like the close button.
+	// It should not have a visible focus rectangle.
+	&:focus {
+		outline: none;
+	}
 }
 
 .is-menu-open .wp-block-navigation__responsive-close,

package/src/navigation/use-convert-classic-menu.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useNavigationEntities from './use-navigation-entities';
+import menuItemsToBlocks from './menu-items-to-blocks';
+
+export default function useConvertClassicMenu( onFinish ) {
+	const [ selectedMenu, setSelectedMenu ] = useState();
+	const [
+		isAwaitingMenuItemResolution,
+		setIsAwaitingMenuItemResolution,
+	] = useState( false );
+	const [ menuName, setMenuName ] = useState( '' );
+
+	const { menuItems, hasResolvedMenuItems } = useNavigationEntities(
+		selectedMenu
+	);
+
+	const createFromMenu = useCallback(
+		( name ) => {
+			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
+			onFinish( blocks, name );
+		},
+		[ menuItems, menuItemsToBlocks, onFinish ]
+	);
+
+	useEffect( () => {
+		// If the user selected a menu but we had to wait for menu items to
+		// finish resolving, then create the block once resolution finishes.
+		if ( isAwaitingMenuItemResolution && hasResolvedMenuItems ) {
+			createFromMenu( menuName );
+			setIsAwaitingMenuItemResolution( false );
+		}
+	}, [ isAwaitingMenuItemResolution, hasResolvedMenuItems, menuName ] );
+
+	return useCallback(
+		( id, name ) => {
+			setSelectedMenu( id );
+
+			// If we have menu items, create the block right away.
+			if ( hasResolvedMenuItems ) {
+				createFromMenu( name );
+				return;
+			}
+
+			// Otherwise, create the block when resolution finishes.
+			setIsAwaitingMenuItemResolution( true );
+			// Store the name to use later.
+			setMenuName( name );
+		},
+		[ hasResolvedMenuItems, createFromMenu ]
+	);
+}

package/src/navigation/use-navigation-entities.js

@@ -40,7 +40,7 @@ function useMenuEntities() {
 				coreStore
 			);
 
-			const menusParameters = [ { per_page: -1 } ];
+			const menusParameters = [ { per_page: -1, context: 'view' } ];
 
 			return {
 				menus: getMenus( ...menusParameters ),
@@ -73,6 +73,7 @@ function useMenuItemEntities( menuId ) {
 						{
 							menus: menuId,
 							per_page: -1,
+							context: 'view',
 						},
 				  ]
 				: undefined;
@@ -115,6 +116,7 @@ function usePageEntities() {
 					order: 'asc',
 					orderby: 'id',
 					per_page: -1,
+					context: 'view',
 				},
 			];
 

package/src/navigation-area/block.json

@@ -1,15 +1,11 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/navigation-area",
 	"title": "Navigation Area",
 	"category": "theme",
 	"description": "Define a navigation area for your theme. The navigation block associated with this area will be automatically displayed.",
-	"keywords": [
-		"menu",
-		"navigation",
-		"links",
-		"location"
-	],
+	"keywords": [ "menu", "navigation", "links", "location" ],
 	"textdomain": "default",
 	"attributes": {
 		"area": {
@@ -22,6 +18,6 @@
 	},
 	"supports": {
 		"html": false,
-		"inserter": true
+		"inserter": false
 	}
 }

package/src/navigation-area/edit.js

@@ -53,7 +53,8 @@ function NavigationAreaBlock( { attributes, setAttributes } ) {
 	);
 
 	deprecated( 'wp.blockLibrary.NavigationArea', {
-		since: '5.9',
+		since: '12.0',
+		plugin: 'gutenberg',
 	} );
 
 	return (

package/src/navigation-link/block.json

@@ -1,11 +1,10 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/navigation-link",
 	"title": "Custom Link",
 	"category": "design",
-	"parent": [
-		"core/navigation"
-	],
+	"parent": [ "core/navigation" ],
 	"description": "Add a page, link, or another item to your navigation.",
 	"textdomain": "default",
 	"attributes": {

package/src/navigation-link/edit.js

@@ -286,6 +286,10 @@ function navStripHTML( html ) {
  */
 
 function LinkControlTransforms( { block, transforms, replace } ) {
+	if ( ! transforms?.length ) {
+		return null;
+	}
+
 	return (
 		<div className="link-control-transform">
 			<h3 className="link-control-transform__subheading">
@@ -722,6 +726,7 @@ export default function NavigationLinkEdit( {
 						>
 							<LinkControl
 								hasTextControl
+								hasRichPreviews
 								className="wp-block-navigation-link__inline-link-input"
 								value={ link }
 								showInitialSuggestions={ true }

package/src/navigation-link/index.php

@@ -116,9 +116,9 @@ function block_core_navigation_link_render_submenu_icon() {
 /**
  * Renders the `core/navigation-link` block.
  *
- * @param array $attributes The block attributes.
- * @param array $content The saved content.
- * @param array $block The parsed block.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the post content with the legacy widget added.
  */

package/src/navigation-submenu/block.json

@@ -1,11 +1,10 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/navigation-submenu",
 	"title": "Submenu",
 	"category": "design",
-	"parent": [
-		"core/navigation"
-	],
+	"parent": [ "core/navigation" ],
 	"description": "Add a submenu to your navigation.",
 	"textdomain": "default",
 	"attributes": {

package/src/navigation-submenu/edit.js

@@ -50,7 +50,9 @@ import { name } from './block.json';
 
 const ALLOWED_BLOCKS = [ 'core/navigation-link', 'core/navigation-submenu' ];
 
-const DEFAULT_BLOCK = [ 'core/navigation-link' ];
+const DEFAULT_BLOCK = {
+	name: 'core/navigation-link',
+};
 
 const MAX_NESTING = 5;
 

package/src/navigation-submenu/index.php

@@ -116,9 +116,9 @@ function block_core_navigation_submenu_render_submenu_icon() {
 /**
  * Renders the `core/navigation-submenu` block.
  *
- * @param array  $attributes The block attributes.
- * @param string $content The saved content.
- * @param object $block The parsed block.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the post content with the legacy widget added.
  */
@@ -199,9 +199,9 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	// If Submenus open on hover, we render an anchor tag with attributes.
 	// If submenu icons are set to show, we also render a submenu button, so the submenu can be opened on click.
 	if ( ! $open_on_click ) {
-		$item_url = isset( $attributes['url'] ) ? esc_url( $attributes['url'] ) : '';
+		$item_url = isset( $attributes['url'] ) ? $attributes['url'] : '';
 		// Start appending HTML attributes to anchor tag.
-		$html .= '<a class="wp-block-navigation-item__content" href="' . $item_url . '"';
+		$html .= '<a class="wp-block-navigation-item__content" href="' . esc_url( $item_url ) . '"';
 
 		if ( $is_active ) {
 			$html .= ' aria-current="page"';
@@ -232,11 +232,11 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		if ( $show_submenu_indicators ) {
 			// The submenu icon is rendered in a button here
 			// so that there's a clickable element to open the submenu.
-			$html .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
+			$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
 		}
 	} else {
 		// If menus open on click, we render the parent as a button.
-		$html .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
+		$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
 
 		// Wrap title with span to isolate it from submenu icon.
 		$html .= '<span class="wp-block-navigation-item__label">';

package/src/nextpage/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/nextpage",
 	"title": "Page Break",

package/src/page-list/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/page-list",
 	"title": "Page List",
@@ -7,6 +8,9 @@
 	"keywords": [ "menu", "navigation" ],
 	"textdomain": "default",
 	"attributes": {
+		"__unstableMaxPages": {
+			"type": "number"
+		}
 	},
 	"usesContext": [
 		"textColor",

package/src/page-list/edit.js

@@ -12,7 +12,12 @@ import {
 	useBlockProps,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import { ToolbarButton, Placeholder, Spinner } from '@wordpress/components';
+import {
+	ToolbarButton,
+	Placeholder,
+	Spinner,
+	Notice,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -29,7 +34,7 @@ import { ItemSubmenuIcon } from '../navigation-link/icons';
 const MAX_PAGE_COUNT = 100;
 
 export default function PageListEdit( { context, clientId } ) {
-	const { pagesByParentId, totalPages } = usePagesByParentId();
+	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const allowConvertToLinks =
@@ -70,16 +75,29 @@ export default function PageListEdit( { context, clientId } ) {
 					clientId={ clientId }
 				/>
 			) }
-			{ totalPages === undefined && (
+			{ ! hasResolvedPages && (
 				<div { ...blockProps }>
 					<Placeholder>
 						<Spinner />
 					</Placeholder>
 				</div>
 			) }
+
+			{ hasResolvedPages && totalPages === null && (
+				<div { ...blockProps }>
+					<div { ...blockProps }>
+						<Notice status={ 'warning' } isDismissible={ false }>
+							{ __( 'Page List: Cannot retrieve Pages.' ) }
+						</Notice>
+					</div>
+				</div>
+			) }
+
 			{ totalPages === 0 && (
 				<div { ...blockProps }>
-					<span>{ __( 'Page List: No pages to show.' ) }</span>
+					<Notice status={ 'info' } isDismissible={ false }>
+						{ __( 'Page List: Cannot retrieve Pages.' ) }
+					</Notice>
 				</div>
 			) }
 			{ totalPages > 0 && (
@@ -94,9 +112,16 @@ export default function PageListEdit( { context, clientId } ) {
 	);
 }
 
-function usePagesByParentId() {
-	const { pages } = useSelect( ( select ) => {
-		const { getEntityRecords } = select( coreStore );
+function useFrontPageId() {
+	return useSelect( ( select ) => {
+		const site = select( coreStore ).getEntityRecord( 'root', 'site' );
+		return site?.show_on_front === 'page' && site?.page_on_front;
+	}, [] );
+}
+
+function usePageData() {
+	const { pages, hasResolvedPages } = useSelect( ( select ) => {
+		const { getEntityRecords, hasFinishedResolution } = select( coreStore );
 
 		return {
 			pages: getEntityRecords( 'postType', 'page', {
@@ -105,6 +130,16 @@ function usePagesByParentId() {
 				_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
 				per_page: -1,
 			} ),
+			hasResolvedPages: hasFinishedResolution( 'getEntityRecords', [
+				'postType',
+				'page',
+				{
+					orderby: 'menu_order',
+					order: 'asc',
+					_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
+					per_page: -1,
+				},
+			] ),
 		};
 	}, [] );
 
@@ -125,9 +160,10 @@ function usePagesByParentId() {
 
 		return {
 			pagesByParentId,
-			totalPages: pages?.length,
+			hasResolvedPages,
+			totalPages: pages?.length ?? null,
 		};
-	}, [ pages ] );
+	}, [ pages, hasResolvedPages ] );
 }
 
 const PageItems = memo( function PageItems( {
@@ -137,6 +173,7 @@ const PageItems = memo( function PageItems( {
 	depth = 0,
 } ) {
 	const pages = pagesByParentId.get( parentId );
+	const frontPageId = useFrontPageId();
 
 	if ( ! pages?.length ) {
 		return [];
@@ -155,6 +192,7 @@ const PageItems = memo( function PageItems( {
 					'open-on-hover-click':
 						! context.openSubmenusOnClick &&
 						context.showSubmenuIcon,
+					'menu-item-home': page.id === frontPageId,
 				} ) }
 			>
 				{ hasChildren && context.openSubmenusOnClick ? (

package/src/page-list/editor.scss

@@ -39,16 +39,15 @@
 
 // Modal that shows conversion option.
 .wp-block-page-list-modal {
-	max-width: 400px;
+	@include break-small() {
+		max-width: $break-mobile;
+	}
 }
 
 .wp-block-page-list-modal-buttons {
 	display: flex;
 	justify-content: flex-end;
-
-	.components-button {
-		margin-left: $grid-unit-15;
-	}
+	gap: $grid-unit-15;
 }
 
 // Simulate open on click behaviour in the editor by opening on focus instead.
@@ -64,3 +63,7 @@
 		}
 	}
 }
+
+.wp-block-page-list .components-notice {
+	margin-left: 0;
+}

package/src/page-list/index.php

@@ -173,6 +173,11 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			}
 		}
 
+		$front_page_id = (int) get_option( 'page_on_front' );
+		if ( (int) $page['page_id'] === $front_page_id ) {
+			$css_class .= ' menu-item-home';
+		}
+
 		$title      = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );
 		$aria_label = sprintf(
 			/* translators: Accessibility text. %s: Parent page title. */
@@ -180,18 +185,18 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			wp_strip_all_tags( $title )
 		);
 
-		$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';
+		$markup .= '<li class="wp-block-pages-list__item' . esc_attr( $css_class ) . '"' . $style_attribute . '>';
 
 		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
-			$markup .= '<button aria-label="' . $aria_label . '" class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . $title . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
+			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . esc_html( $title ) . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
 			'</button>';
 		} else {
-			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
+			$markup .= '<a class="wp-block-pages-list__item__link' . esc_attr( $navigation_child_content_class ) . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . esc_html( $title ) . '</a>';
 		}
 
 		if ( isset( $page['children'] ) ) {
 			if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
-				$markup .= '<button aria-label="' . $aria_label . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
+				$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
 				$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
 				$markup .= '</button>';
 			}
@@ -230,9 +235,9 @@ function block_core_page_list_nest_pages( $current_level, $children ) {
 /**
  * Renders the `core/page-list` block on server.
  *
- * @param array $attributes The block attributes.
- * @param array $content The saved content.
- * @param array $block The parsed block.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the page list markup.
  */
@@ -247,7 +252,7 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 		)
 	);
 
-	// If thare are no pages, there is nothing to show.
+	// If there are no pages, there is nothing to show.
 	if ( empty( $all_pages ) ) {
 		return;
 	}
@@ -311,8 +316,8 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => $css_classes,
-			'style' => $style_attribute,
+			'class' => esc_attr( $css_classes ),
+			'style' => esc_attr( $style_attribute ),
 		)
 	);
 

package/src/paragraph/block.json

@@ -1,9 +1,10 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/paragraph",
 	"title": "Paragraph",
 	"category": "text",
-	"description": "Start with the building block of all narrative.",
+	"description": "Start with the basic building block of all narrative.",
 	"keywords": [ "text" ],
 	"textdomain": "default",
 	"attributes": {

package/src/paragraph/edit.js

@@ -9,8 +9,8 @@ import classnames from 'classnames';
 import { __, _x, isRTL } from '@wordpress/i18n';
 import {
 	ToolbarDropdownMenu,
-	PanelBody,
 	ToggleControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	AlignmentControl,
@@ -81,8 +81,16 @@ function ParagraphBlock( {
 				/>
 			</BlockControls>
 			{ isDropCapFeatureEnabled && (
-				<InspectorControls>
-					<PanelBody title={ __( 'Text settings' ) }>
+				<InspectorControls __experimentalGroup="typography">
+					<ToolsPanelItem
+						hasValue={ () => !! dropCap }
+						label={ __( 'Drop cap' ) }
+						onDeselect={ () =>
+							setAttributes( { dropCap: undefined } )
+						}
+						resetAllFilter={ () => ( { dropCap: undefined } ) }
+						panelId={ clientId }
+					>
 						<ToggleControl
 							label={ __( 'Drop cap' ) }
 							checked={ !! dropCap }
@@ -97,7 +105,7 @@ function ParagraphBlock( {
 									  )
 							}
 						/>
-					</PanelBody>
+					</ToolsPanelItem>
 				</InspectorControls>
 			) }
 			<RichText

package/src/paragraph/test/edit.native.js

@@ -1,24 +1,15 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from 'test/helpers';
 
 /**
  * Internal dependencies
  */
 import Paragraph from '../edit';
 
-/**
- * WordPress dependencies
- */
-jest.mock( '@wordpress/blocks' );
-jest.mock( '../../../../data/src/components/use-select', () => () => ( {
-	attributes: () => {},
-	settingsColors: [],
-} ) );
-
 const getTestComponentWithContent = ( content ) => {
-	return shallow(
+	return render(
 		<Paragraph
 			attributes={ { content } }
 			setAttributes={ jest.fn() }
@@ -30,7 +21,7 @@ const getTestComponentWithContent = ( content ) => {
 
 describe( 'Paragraph block', () => {
 	it( 'renders without crashing', () => {
-		const component = getTestComponentWithContent( '' );
-		expect( component.exists() ).toBe( true );
+		const screen = getTestComponentWithContent( '' );
+		expect( screen.container ).toBeTruthy();
 	} );
 } );