Try: Use Suspense for site editor

packages/block-library/src/audio/edit.js

@@ -28,7 +28,7 @@ import {
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSuspenseSelect } from '@wordpress/data';
 import { audio as icon } from '@wordpress/icons';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
@@ -51,7 +51,7 @@ function AudioEdit( {
 } ) {
 	const { id, autoplay, caption, loop, preload, src } = attributes;
 	const isTemporaryAudio = ! id && isBlobURL( src );
-	const mediaUpload = useSelect( ( select ) => {
+	const mediaUpload = useSuspenseSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().mediaUpload;
 	}, [] );

packages/block-library/src/audio/edit.native.js

@@ -29,7 +29,7 @@ import {
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { audio as icon, replace } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSuspenseSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { isURL } from '@wordpress/url';
 
@@ -57,7 +57,7 @@ function AudioEdit( {
 		setAttributes( { id: mediaId, src: mediaUrl } );
 	};
 
-	const { wasBlockJustInserted } = useSelect( ( select ) => ( {
+	const { wasBlockJustInserted } = useSuspenseSelect( ( select ) => ( {
 		wasBlockJustInserted: select( blockEditorStore ).wasBlockJustInserted(
 			clientId,
 			'inserter_menu'

packages/block-library/src/avatar/hooks.js

@@ -4,7 +4,7 @@
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSuspenseSelect } from '@wordpress/data';
 
 function getAvatarSizes( sizes ) {
 	const minSize = sizes ? sizes[ 0 ] : 24;
@@ -17,7 +17,7 @@ function getAvatarSizes( sizes ) {
 }
 
 function useDefaultAvatar() {
-	const { avatarURL: defaultAvatarUrl } = useSelect( ( select ) => {
+	const { avatarURL: defaultAvatarUrl } = useSuspenseSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { __experimentalDiscussionSettings } = getSettings();
 		return __experimentalDiscussionSettings;
@@ -56,7 +56,7 @@ export function useCommentAvatar( { commentId } ) {
 }
 
 export function useUserAvatar( { userId, postId, postType } ) {
-	const { authorDetails } = useSelect(
+	const { authorDetails } = useSuspenseSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getUser } = select( coreStore );
 			if ( userId ) {

packages/block-library/src/avatar/user-control.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ComboboxControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSuspenseSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
 
@@ -16,7 +16,7 @@ const AUTHORS_QUERY = {
 
 function UserControl( { value, onChange } ) {
 	const [ filteredAuthorsList, setFilteredAuthorsList ] = useState();
-	const authorsList = useSelect( ( select ) => {
+	const authorsList = useSuspenseSelect( ( select ) => {
 		const { getUsers } = select( coreStore );
 		return getUsers( AUTHORS_QUERY );
 	}, [] );

packages/block-library/src/block/edit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSuspenseSelect } from '@wordpress/data';
 import {
 	useEntityBlockEditor,
 	useEntityProp,
@@ -40,7 +40,7 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	);
 	const isMissing = hasResolved && ! record;
 
-	const canRemove = useSelect(
+	const canRemove = useSuspenseSelect(
 		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
 		[ clientId ]
 	);

packages/block-library/src/block/edit.native.js

@@ -24,7 +24,7 @@ import {
 	Disabled,
 	TextControl,
 } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSuspenseSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalRecursionProvider as RecursionProvider,
@@ -77,7 +77,7 @@ export default function ReusableBlockEdit( {
 		styles.spinnerDark
 	);
 
-	const { hasResolved, isEditing, isMissing } = useSelect(
+	const { hasResolved, isEditing, isMissing } = useSuspenseSelect(
 		( select ) => {
 			const persistedBlock = select( coreStore ).getEntityRecord(
 				'postType',

packages/block-library/src/button/edit.native.js

@@ -7,7 +7,7 @@ import { View, AccessibilityInfo, Platform, Text } from 'react-native';
  * WordPress dependencies
  */
 import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSuspenseSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import {
 	RichText,
@@ -92,7 +92,7 @@ function ButtonEdit( props ) {
 	const initialBorderRadius = props?.attributes?.style?.border?.radius;
 	const { valueUnit = 'px' } = getValueAndUnit( initialBorderRadius ) || {};
 
-	const { editorSidebarOpened, numOfButtons } = useSelect(
+	const { editorSidebarOpened, numOfButtons } = useSuspenseSelect(
 		( select ) => {
 			const { isEditorSidebarOpened } = select( editPostStore );
 			const { getBlockCount, getBlockRootClientId } =

packages/block-library/src/buttons/edit.js

@@ -6,7 +6,7 @@ import {
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSuspenseSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -32,7 +32,7 @@ const DEFAULT_BLOCK = {
 
 function ButtonsEdit( { attributes: { layout = {} } } ) {
 	const blockProps = useBlockProps();
-	const preferredStyle = useSelect( ( select ) => {
+	const preferredStyle = useSuspenseSelect( ( select ) => {
 		const preferredStyleVariations =
 			select( blockEditorStore ).getSettings()
 				.__experimentalPreferredStyleVariations;

packages/block-library/src/buttons/edit.native.js

@@ -15,7 +15,7 @@ import {
 } from '@wordpress/block-editor';
 import { createBlock, getBlockSupport } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useSuspenseSelect } from '@wordpress/data';
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { alignmentHelpers } from '@wordpress/components';
 
@@ -47,7 +47,7 @@ export default function ButtonsEdit( {
 	const usedLayout = layout || defaultBlockLayout || {};
 	const { justifyContent } = usedLayout;
 
-	const { isInnerButtonSelected, shouldDelete } = useSelect(
+	const { isInnerButtonSelected, shouldDelete } = useSuspenseSelect(
 		( select ) => {
 			const { getBlockCount, getBlockParents, getSelectedBlockClientId } =
 				select( blockEditorStore );
@@ -69,7 +69,7 @@ export default function ButtonsEdit( {
 		[ clientId ]
 	);
 
-	const preferredStyle = useSelect( ( select ) => {
+	const preferredStyle = useSuspenseSelect( ( select ) => {
 		const preferredStyleVariations =
 			select( blockEditorStore ).getSettings()
 				.__experimentalPreferredStyleVariations;

packages/block-library/src/calendar/edit.js

@@ -8,7 +8,7 @@ import memoize from 'memize';
  */
 import { calendar as icon } from '@wordpress/icons';
 import { Disabled, Placeholder, Spinner } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSuspenseSelect } from '@wordpress/data';
 import ServerSideRender from '@wordpress/server-side-render';
 import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -35,46 +35,51 @@ const getYearMonth = memoize( ( date ) => {
 
 export default function CalendarEdit( { attributes } ) {
 	const blockProps = useBlockProps();
-	const { date, hasPosts, hasPostsResolved } = useSelect( ( select ) => {
-		const { getEntityRecords, hasFinishedResolution } = select( coreStore );
+	const { date, hasPosts, hasPostsResolved } = useSuspenseSelect(
+		( select ) => {
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreStore );
 
-		const singlePublishedPostQuery = {
-			status: 'publish',
-			per_page: 1,
-		};
-		const posts = getEntityRecords(
-			'postType',
-			'post',
-			singlePublishedPostQuery
-		);
-		const postsResolved = hasFinishedResolution( 'getEntityRecords', [
-			'postType',
-			'post',
-			singlePublishedPostQuery,
-		] );
+			const singlePublishedPostQuery = {
+				status: 'publish',
+				per_page: 1,
+			};
+			const posts = getEntityRecords(
+				'postType',
+				'post',
+				singlePublishedPostQuery
+			);
+			const postsResolved = hasFinishedResolution( 'getEntityRecords', [
+				'postType',
+				'post',
+				singlePublishedPostQuery,
+			] );
 
-		let _date;
+			let _date;
 
-		// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-		// Blocks can be loaded into a *non-post* block editor.
-		// eslint-disable-next-line @wordpress/data-no-store-string-literals
-		const editorSelectors = select( 'core/editor' );
-		if ( editorSelectors ) {
-			const postType = editorSelectors.getEditedPostAttribute( 'type' );
-			// Dates are used to overwrite year and month used on the calendar.
-			// This overwrite should only happen for 'post' post types.
-			// For other post types the calendar always displays the current month.
-			if ( postType === 'post' ) {
-				_date = editorSelectors.getEditedPostAttribute( 'date' );
+			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
+			// Blocks can be loaded into a *non-post* block editor.
+			// eslint-disable-next-line @wordpress/data-no-store-string-literals
+			const editorSelectors = select( 'core/editor' );
+			if ( editorSelectors ) {
+				const postType =
+					editorSelectors.getEditedPostAttribute( 'type' );
+				// Dates are used to overwrite year and month used on the calendar.
+				// This overwrite should only happen for 'post' post types.
+				// For other post types the calendar always displays the current month.
+				if ( postType === 'post' ) {
+					_date = editorSelectors.getEditedPostAttribute( 'date' );
+				}
 			}
-		}
 
-		return {
-			date: _date,
-			hasPostsResolved: postsResolved,
-			hasPosts: postsResolved && posts?.length === 1,
-		};
-	}, [] );
+			return {
+				date: _date,
+				hasPostsResolved: postsResolved,
+				hasPosts: postsResolved && posts?.length === 1,
+			};
+		},
+		[]
+	);
 
 	if ( ! hasPosts ) {
 		return (

packages/block-library/src/column/edit.js

@@ -21,7 +21,7 @@ import {
 	PanelBody,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSuspenseSelect, useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
 function ColumnEdit( {
@@ -48,7 +48,7 @@ function ColumnEdit( {
 		],
 	} );
 
-	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(
+	const { columnsIds, hasChildBlocks, rootClientId } = useSuspenseSelect(
 		( select ) => {
 			const { getBlockOrder, getBlockRootClientId } =
 				select( blockEditorStore );

packages/block-library/src/columns/edit.js

@@ -24,7 +24,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
+import { withDispatch, useDispatch, useSuspenseSelect } from '@wordpress/data';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
@@ -61,7 +61,7 @@ function ColumnsEditContainer( {
 } ) {
 	const { isStackedOnMobile, verticalAlignment } = attributes;
 
-	const { count } = useSelect(
+	const { count } = useSuspenseSelect(
 		( select ) => {
 			return {
 				count: select( blockEditorStore ).getBlockCount( clientId ),
@@ -220,7 +220,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 )( ColumnsEditContainer );
 
 function Placeholder( { clientId, name, setAttributes } ) {
-	const { blockType, defaultVariation, variations } = useSelect(
+	const { blockType, defaultVariation, variations } = useSuspenseSelect(
 		( select ) => {
 			const {
 				getBlockVariations,
@@ -267,7 +267,7 @@ function Placeholder( { clientId, name, setAttributes } ) {
 
 const ColumnsEdit = ( props ) => {
 	const { clientId } = props;
-	const hasInnerBlocks = useSelect(
+	const hasInnerBlocks = useSuspenseSelect(
 		( select ) =>
 			select( blockEditorStore ).getBlocks( clientId ).length > 0,
 		[ clientId ]

packages/block-library/src/columns/edit.native.js

@@ -26,7 +26,7 @@ import {
 	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { withDispatch, useSelect } from '@wordpress/data';
+import { withDispatch, useSuspenseSelect } from '@wordpress/data';
 import {
 	useEffect,
 	useState,
@@ -450,7 +450,7 @@ const ColumnsEdit = ( props ) => {
 		hasParents,
 		parentBlockAlignment,
 		editorSidebarOpened,
-	} = useSelect(
+	} = useSuspenseSelect(
 		( select ) => {
 			const {
 				getBlockCount,

packages/block-library/src/comment-author-avatar/edit.js

@@ -9,7 +9,7 @@ import {
 } from '@wordpress/block-editor';
 import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useSuspenseSelect } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
 
 export default function Edit( {
@@ -40,7 +40,7 @@ export default function Edit( {
 	const blockProps = useBlockProps();
 	const spacingProps = useSpacingProps( attributes );
 	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
-	const { avatarURL } = useSelect( ( select ) => {
+	const { avatarURL } = useSuspenseSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { __experimentalDiscussionSettings } = getSettings();
 		return __experimentalDiscussionSettings;

packages/block-library/src/comment-author-name/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSuspenseSelect } from '@wordpress/data';
 import {
 	AlignmentControl,
 	BlockControls,
@@ -41,7 +41,7 @@ export default function Edit( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
-	let displayName = useSelect(
+	let displayName = useSuspenseSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreStore );