From ebe9ce1592bea489f40e0676266bf633a493a073 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Wed, 17 Aug 2022 14:31:07 +0300 Subject: [PATCH] Try: Use Suspense for site editor --- packages/block-library/src/audio/edit.js | 4 +- .../block-library/src/audio/edit.native.js | 4 +- packages/block-library/src/avatar/hooks.js | 6 +- .../block-library/src/avatar/user-control.js | 4 +- packages/block-library/src/block/edit.js | 4 +- .../block-library/src/block/edit.native.js | 4 +- .../block-library/src/button/edit.native.js | 4 +- packages/block-library/src/buttons/edit.js | 4 +- .../block-library/src/buttons/edit.native.js | 6 +- packages/block-library/src/calendar/edit.js | 77 ++++++++++--------- packages/block-library/src/column/edit.js | 4 +- packages/block-library/src/columns/edit.js | 8 +- .../block-library/src/columns/edit.native.js | 4 +- .../src/comment-author-avatar/edit.js | 4 +- .../src/comment-author-name/edit.js | 4 +- .../src/comment-template/edit.js | 6 +- .../src/comment-template/hooks.js | 4 +- .../src/comments-pagination/edit.js | 6 +- .../src/comments/edit/placeholder.js | 4 +- .../block-library/src/cover/edit/index.js | 6 +- packages/block-library/src/embed/edit.js | 4 +- .../block-library/src/embed/edit.native.js | 6 +- .../src/embed/embed-no-preview.native.js | 4 +- packages/block-library/src/file/edit.js | 4 +- .../src/freeform/convert-to-blocks-button.js | 4 +- packages/block-library/src/gallery/edit.js | 30 ++++---- .../src/gallery/use-get-media.js | 4 +- .../src/gallery/use-get-media.native.js | 4 +- packages/block-library/src/gallery/v1/edit.js | 4 +- .../src/gallery/v1/gallery.native.js | 4 +- packages/block-library/src/group/edit.js | 4 +- packages/block-library/src/heading/edit.js | 4 +- packages/block-library/src/home-link/edit.js | 4 +- packages/block-library/src/html/preview.js | 4 +- packages/block-library/src/image/edit.js | 4 +- packages/block-library/src/image/image.js | 6 +- .../block-library/src/latest-posts/edit.js | 4 +- .../src/list-item/edit.native.js | 4 +- .../list-item/hooks/use-indent-list-item.js | 4 +- .../list-item/hooks/use-outdent-list-item.js | 9 ++- .../src/list-item/hooks/use-split.js | 4 +- packages/block-library/src/list/v2/edit.js | 9 ++- packages/block-library/src/media-text/edit.js | 6 +- .../block-library/src/navigation-link/edit.js | 8 +- .../src/navigation-submenu/edit.js | 4 +- .../src/navigation/edit/inner-blocks.js | 4 +- .../navigation/edit/unsaved-inner-blocks.js | 4 +- .../src/navigation/edit/use-inner-blocks.js | 4 +- .../navigation/test/use-navigation-menu.js | 4 +- .../src/navigation/use-navigation-menu.js | 4 +- .../use-template-part-area-label.js | 4 +- packages/block-library/src/page-list/edit.js | 4 +- .../src/paragraph/edit.native.js | 4 +- packages/block-library/src/pattern/edit.js | 4 +- .../src/post-author-biography/edit.js | 4 +- .../src/post-author-name/edit.js | 4 +- .../block-library/src/post-author/edit.js | 4 +- .../src/post-comments-form/form.js | 6 +- .../src/post-comments-link/edit.js | 4 +- .../block-library/src/post-content/edit.js | 4 +- packages/block-library/src/post-date/edit.js | 4 +- .../src/post-featured-image/edit.js | 6 +- .../block-library/src/post-template/edit.js | 4 +- packages/block-library/src/post-terms/edit.js | 4 +- .../src/post-terms/use-post-terms.js | 4 +- .../src/query-pagination/edit.js | 4 +- .../block-library/src/query/edit/index.js | 10 +-- .../edit/inspector-controls/author-control.js | 4 +- .../query/edit/inspector-controls/index.js | 4 +- .../edit/inspector-controls/parent-control.js | 6 +- .../inspector-controls/taxonomy-controls.js | 4 +- .../src/query/edit/query-placeholder.js | 4 +- .../src/query/edit/query-toolbar.js | 4 +- packages/block-library/src/query/utils.js | 6 +- packages/block-library/src/quote/edit.js | 4 +- packages/block-library/src/search/edit.js | 4 +- packages/block-library/src/site-logo/edit.js | 6 +- .../block-library/src/site-tagline/edit.js | 21 ++--- .../src/site-title/edit/index.js | 4 +- .../src/table-of-contents/edit.js | 10 +-- .../template-part/edit/advanced-controls.js | 4 +- .../src/template-part/edit/index.js | 4 +- .../src/template-part/edit/inner-blocks.js | 4 +- .../src/template-part/edit/utils/hooks.js | 8 +- packages/block-library/src/utils/hooks.js | 4 +- packages/block-library/src/video/edit.js | 4 +- .../block-library/src/video/tracks-editor.js | 4 +- .../edit-site/src/components/editor/index.js | 43 ++++++++++- 88 files changed, 312 insertions(+), 255 deletions(-) diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index c220ea33c71fd..ae81fb76ce5f3 100644 --- a/packages/block-library/src/audio/edit.js +++ b/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; }, [] ); diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 30ee44ff3f948..f340042cda2cd 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/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' diff --git a/packages/block-library/src/avatar/hooks.js b/packages/block-library/src/avatar/hooks.js index 1f84b5c107682..94b04c4694945 100644 --- a/packages/block-library/src/avatar/hooks.js +++ b/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 ) { diff --git a/packages/block-library/src/avatar/user-control.js b/packages/block-library/src/avatar/user-control.js index 49370b39716ef..fa46dd5f53e3a 100644 --- a/packages/block-library/src/avatar/user-control.js +++ b/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 ); }, [] ); diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 2e9eefedbc19b..1d7a597d1145e 100644 --- a/packages/block-library/src/block/edit.js +++ b/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 ] ); diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js index f6e49bf1be0f0..0d0db62e570f0 100644 --- a/packages/block-library/src/block/edit.native.js +++ b/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', diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 39082488f1f65..d0d71082e9a8c 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/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 } = diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index 37291f430024f..b5aba36916a82 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/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; diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 93610196834e4..5b274ee1f169e 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/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; diff --git a/packages/block-library/src/calendar/edit.js b/packages/block-library/src/calendar/edit.js index a60a18d8eeae8..ffe99d17bf253 100644 --- a/packages/block-library/src/calendar/edit.js +++ b/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 ( diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 33231d716a22c..3d472812615e6 100644 --- a/packages/block-library/src/column/edit.js +++ b/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 ); diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 1edb80df45073..93d720609534c 100644 --- a/packages/block-library/src/columns/edit.js +++ b/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 ] diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index 4f62e227d890e..b29dc48ed2035 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/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, diff --git a/packages/block-library/src/comment-author-avatar/edit.js b/packages/block-library/src/comment-author-avatar/edit.js index 6bc4651af4307..c8dc5c5bdfda2 100644 --- a/packages/block-library/src/comment-author-avatar/edit.js +++ b/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; diff --git a/packages/block-library/src/comment-author-name/edit.js b/packages/block-library/src/comment-author-name/edit.js index e71d26ccee361..dd3d170bffa2c 100644 --- a/packages/block-library/src/comment-author-name/edit.js +++ b/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 ); diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index a2acb7c6d38d9..f6ab066fa9396 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useState, memo } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { BlockContextProvider, @@ -239,7 +239,7 @@ export default function CommentTemplateEdit( { threadCommentsDepth, threadComments, commentsPerPage, - } = useSelect( ( select ) => { + } = useSuspenseSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().__experimentalDiscussionSettings; } ); @@ -248,7 +248,7 @@ export default function CommentTemplateEdit( { postId, } ); - const { topLevelComments, blocks } = useSelect( + const { topLevelComments, blocks } = useSuspenseSelect( ( select ) => { const { getEntityRecords } = select( coreStore ); const { getBlocks } = select( blockEditorStore ); diff --git a/packages/block-library/src/comment-template/hooks.js b/packages/block-library/src/comment-template/hooks.js index 30c40c8b58b50..2fbcfe2504a02 100644 --- a/packages/block-library/src/comment-template/hooks.js +++ b/packages/block-library/src/comment-template/hooks.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useState, useEffect, useMemo } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { addQueryArgs } from '@wordpress/url'; import apiFetch from '@wordpress/api-fetch'; @@ -35,7 +35,7 @@ export const useCommentQueryArgs = ( { postId } ) => { pageComments, commentsPerPage, defaultCommentsPage: defaultPage, - } = useSelect( ( select ) => { + } = useSuspenseSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); const { __experimentalDiscussionSettings } = getSettings(); return __experimentalDiscussionSettings; diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js index e656d35406e3c..196c3c46ec94e 100644 --- a/packages/block-library/src/comments-pagination/edit.js +++ b/packages/block-library/src/comments-pagination/edit.js @@ -9,7 +9,7 @@ import { store as blockEditorStore, Warning, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { getBlockSupport } from '@wordpress/blocks'; import { PanelBody } from '@wordpress/components'; @@ -39,7 +39,7 @@ export default function QueryPaginationEdit( { name, } ) { const usedLayout = layout || getDefaultBlockLayout( name ); - const hasNextPreviousBlocks = useSelect( ( select ) => { + const hasNextPreviousBlocks = useSuspenseSelect( ( select ) => { const { getBlocks } = select( blockEditorStore ); const innerBlocks = getBlocks( clientId ); /** @@ -67,7 +67,7 @@ export default function QueryPaginationEdit( { } ); // Get the Discussion settings - const pageComments = useSelect( ( select ) => { + const pageComments = useSuspenseSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); const { __experimentalDiscussionSettings } = getSettings(); return __experimentalDiscussionSettings?.pageComments; diff --git a/packages/block-library/src/comments/edit/placeholder.js b/packages/block-library/src/comments/edit/placeholder.js index 837561aad15c0..eaca4b09baa02 100644 --- a/packages/block-library/src/comments/edit/placeholder.js +++ b/packages/block-library/src/comments/edit/placeholder.js @@ -3,7 +3,7 @@ */ import { store as blockEditorStore } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useEntityProp } from '@wordpress/core-data'; import { useDisabled } from '@wordpress/compose'; @@ -16,7 +16,7 @@ export default function PostCommentsPlaceholder( { postType, postId } ) { let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId ); postTitle = postTitle || __( 'Post Title' ); - const { avatarURL } = useSelect( + const { avatarURL } = useSuspenseSelect( ( select ) => select( blockEditorStore ).getSettings() .__experimentalDiscussionSettings diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index ee9536aa1ed2b..13ac18a96a8c6 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -22,7 +22,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { isBlobURL } from '@wordpress/blob'; import { store as noticesStore } from '@wordpress/notices'; @@ -103,7 +103,7 @@ function CoverEdit( { postId ); - const media = useSelect( + const media = useSuspenseSelect( ( select ) => featuredImage && select( coreStore ).getMedia( featuredImage, { context: 'view' } ), @@ -173,7 +173,7 @@ function CoverEdit( { const hasBackground = !! ( url || overlayColor.color || gradientValue ); - const hasInnerBlocks = useSelect( + const hasInnerBlocks = useSuspenseSelect( ( select ) => select( blockEditorStore ).getBlock( clientId ).innerBlocks.length > 0, diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index c3e664385809c..31d9110df22ec 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -24,7 +24,7 @@ import classnames from 'classnames'; */ import { __, _x, sprintf } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useSuspenseSelect } from '@wordpress/data'; import { useBlockProps } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { View } from '@wordpress/primitives'; @@ -57,7 +57,7 @@ const EmbedEdit = ( props ) => { const { invalidateResolution } = useDispatch( coreStore ); const { preview, fetching, themeSupportsResponsive, cannotEmbed } = - useSelect( + useSuspenseSelect( ( select ) => { const { getEmbedPreview, diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js index 109478461c0b3..81644bae6f758 100644 --- a/packages/block-library/src/embed/edit.native.js +++ b/packages/block-library/src/embed/edit.native.js @@ -25,7 +25,7 @@ import classnames from 'classnames'; */ import { _x } from '@wordpress/i18n'; import { useCallback, useState, useEffect } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useSuspenseSelect } from '@wordpress/data'; import { useBlockProps, store as blockEditorStore, @@ -61,7 +61,7 @@ const EmbedEdit = ( props ) => { const embedInfoByProvider = getEmbedInfoByProvider( providerNameSlug ); const { icon, title } = embedInfoByProvider || defaultEmbedInfo; - const { wasBlockJustInserted } = useSelect( + const { wasBlockJustInserted } = useSuspenseSelect( ( select ) => ( { wasBlockJustInserted: select( blockEditorStore @@ -77,7 +77,7 @@ const EmbedEdit = ( props ) => { const { invalidateResolution } = useDispatch( coreStore ); const { preview, fetching, themeSupportsResponsive, cannotEmbed } = - useSelect( + useSuspenseSelect( ( select ) => { const { getEmbedPreview, diff --git a/packages/block-library/src/embed/embed-no-preview.native.js b/packages/block-library/src/embed/embed-no-preview.native.js index cac8c5d1a4c10..a507281194dd3 100644 --- a/packages/block-library/src/embed/embed-no-preview.native.js +++ b/packages/block-library/src/embed/embed-no-preview.native.js @@ -12,7 +12,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { useRef, useState } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { requestPreview } from '@wordpress/react-native-bridge'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as editorStore } from '@wordpress/editor'; import { BottomSheet, Icon, TextControl } from '@wordpress/components'; import { help } from '@wordpress/icons'; @@ -34,7 +34,7 @@ const EmbedNoPreview = ( { const shouldRequestReview = useRef( false ); const [ isSheetVisible, setIsSheetVisible ] = useState( false ); - const { postType } = useSelect( ( select ) => ( { + const { postType } = useSuspenseSelect( ( select ) => ( { postType: select( editorStore ).getEditedPostAttribute( 'type' ), } ) ); diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 6ec80a8c7c12c..4ca6b63e2b767 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -13,7 +13,7 @@ import { ResizableBox, ToolbarButton, } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { BlockControls, BlockIcon, @@ -80,7 +80,7 @@ function FileEdit( { displayPreview, previewHeight, } = attributes; - const { media, mediaUpload } = useSelect( + const { media, mediaUpload } = useSuspenseSelect( ( select ) => ( { media: id === undefined diff --git a/packages/block-library/src/freeform/convert-to-blocks-button.js b/packages/block-library/src/freeform/convert-to-blocks-button.js index bf73ecafb382f..8f3e30902cd5c 100644 --- a/packages/block-library/src/freeform/convert-to-blocks-button.js +++ b/packages/block-library/src/freeform/convert-to-blocks-button.js @@ -3,13 +3,13 @@ */ import { __ } from '@wordpress/i18n'; import { ToolbarButton } from '@wordpress/components'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useSuspenseSelect } from '@wordpress/data'; import { rawHandler, serialize } from '@wordpress/blocks'; import { store as blockEditorStore } from '@wordpress/block-editor'; const ConvertToBlocksButton = ( { clientId } ) => { const { replaceBlocks } = useDispatch( blockEditorStore ); - const block = useSelect( + const block = useSuspenseSelect( ( select ) => { return select( blockEditorStore ).getBlock( clientId ); }, diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index d0ba808946d7a..59d26151eb95c 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -27,7 +27,7 @@ import { } from '@wordpress/block-editor'; import { Platform, useEffect, useMemo } from '@wordpress/element'; import { __, _x, sprintf } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; import { View } from '@wordpress/primitives'; import { createBlock } from '@wordpress/blocks'; @@ -97,25 +97,29 @@ function GalleryEdit( props ) { } = useDispatch( blockEditorStore ); const { createSuccessNotice } = useDispatch( noticesStore ); - const { getBlock, getSettings, preferredStyle } = useSelect( ( select ) => { - const settings = select( blockEditorStore ).getSettings(); - const preferredStyleVariations = - settings.__experimentalPreferredStyleVariations; - return { - getBlock: select( blockEditorStore ).getBlock, - getSettings: select( blockEditorStore ).getSettings, - preferredStyle: preferredStyleVariations?.value?.[ 'core/image' ], - }; - }, [] ); + const { getBlock, getSettings, preferredStyle } = useSuspenseSelect( + ( select ) => { + const settings = select( blockEditorStore ).getSettings(); + const preferredStyleVariations = + settings.__experimentalPreferredStyleVariations; + return { + getBlock: select( blockEditorStore ).getBlock, + getSettings: select( blockEditorStore ).getSettings, + preferredStyle: + preferredStyleVariations?.value?.[ 'core/image' ], + }; + }, + [] + ); - const innerBlockImages = useSelect( + const innerBlockImages = useSuspenseSelect( ( select ) => { return select( blockEditorStore ).getBlock( clientId )?.innerBlocks; }, [ clientId ] ); - const wasBlockJustInserted = useSelect( + const wasBlockJustInserted = useSuspenseSelect( ( select ) => { return select( blockEditorStore ).wasBlockJustInserted( clientId, diff --git a/packages/block-library/src/gallery/use-get-media.js b/packages/block-library/src/gallery/use-get-media.js index 36559447ae291..dcb62d0d4e662 100644 --- a/packages/block-library/src/gallery/use-get-media.js +++ b/packages/block-library/src/gallery/use-get-media.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; const EMPTY_IMAGE_MEDIA = []; @@ -15,7 +15,7 @@ const EMPTY_IMAGE_MEDIA = []; * @return {Array} An array of media info options for each gallery image. */ export default function useGetMedia( innerBlockImages ) { - return useSelect( + return useSuspenseSelect( ( select ) => { const imageIds = innerBlockImages .map( ( imageBlock ) => imageBlock.attributes.id ) diff --git a/packages/block-library/src/gallery/use-get-media.native.js b/packages/block-library/src/gallery/use-get-media.native.js index 994a2152f756c..afe4482a5d52d 100644 --- a/packages/block-library/src/gallery/use-get-media.native.js +++ b/packages/block-library/src/gallery/use-get-media.native.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; const EMPTY_IMAGE_MEDIA = []; @@ -15,7 +15,7 @@ const EMPTY_IMAGE_MEDIA = []; * @return {Array} An array of media info options for each gallery image. */ export default function useGetMedia( innerBlockImages ) { - return useSelect( + return useSuspenseSelect( ( select ) => { const imagesUploading = innerBlockImages.some( ( { attributes } ) => attributes?.url?.indexOf( 'file:' ) === 0 diff --git a/packages/block-library/src/gallery/v1/edit.js b/packages/block-library/src/gallery/v1/edit.js index e86fb49d4ad83..405c06b2eda73 100644 --- a/packages/block-library/src/gallery/v1/edit.js +++ b/packages/block-library/src/gallery/v1/edit.js @@ -33,7 +33,7 @@ import { import { Platform, useEffect, useState, useMemo } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useSuspenseSelect } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; import { View } from '@wordpress/primitives'; import { store as coreStore } from '@wordpress/core-data'; @@ -93,7 +93,7 @@ function GalleryEdit( props ) { useDispatch( blockEditorStore ); const { imageSizes, mediaUpload, getMedia, wasBlockJustInserted } = - useSelect( ( select ) => { + useSuspenseSelect( ( select ) => { const settings = select( blockEditorStore ).getSettings(); return { diff --git a/packages/block-library/src/gallery/v1/gallery.native.js b/packages/block-library/src/gallery/v1/gallery.native.js index 7908d17988a1a..e6983649277d6 100644 --- a/packages/block-library/src/gallery/v1/gallery.native.js +++ b/packages/block-library/src/gallery/v1/gallery.native.js @@ -22,7 +22,7 @@ import { } from '@wordpress/block-editor'; import { useState, useEffect } from '@wordpress/element'; import { mediaUploadSync } from '@wordpress/react-native-bridge'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { alignmentHelpers } from '@wordpress/components'; const TILE_SPACING = 15; @@ -37,7 +37,7 @@ export const Gallery = ( props ) => { const [ isCaptionSelected, setIsCaptionSelected ] = useState( false ); useEffect( mediaUploadSync, [] ); - const isRTL = useSelect( ( select ) => { + const isRTL = useSuspenseSelect( ( select ) => { return !! select( blockEditorStore ).getSettings().isRTL; }, [] ); diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index e45613bbba25d..a05b3105858cd 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { InnerBlocks, useBlockProps, @@ -35,7 +35,7 @@ const htmlElementMessages = { }; function GroupEdit( { attributes, setAttributes, clientId } ) { - const { hasInnerBlocks, themeSupportsLayout } = useSelect( + const { hasInnerBlocks, themeSupportsLayout } = useSuspenseSelect( ( select ) => { const { getBlock, getSettings } = select( blockEditorStore ); const block = getBlock( clientId ); diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 3f8fd39ee9caa..b42fdc19cf687 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { __ } from '@wordpress/i18n'; import { useEffect, Platform } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useSuspenseSelect } from '@wordpress/data'; import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { AlignmentControl, @@ -41,7 +41,7 @@ function HeadingEdit( { style, } ); - const { canGenerateAnchors } = useSelect( ( select ) => { + const { canGenerateAnchors } = useSuspenseSelect( ( select ) => { const { getGlobalBlockCount, getSettings } = select( blockEditorStore ); const settings = getSettings(); diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js index 4d13dd1939e4c..e3224c09e209d 100644 --- a/packages/block-library/src/home-link/edit.js +++ b/packages/block-library/src/home-link/edit.js @@ -12,14 +12,14 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useEffect } from '@wordpress/element'; const preventDefault = ( event ) => event.preventDefault(); export default function HomeEdit( { attributes, setAttributes, context } ) { - const { homeUrl } = useSelect( ( select ) => { + const { homeUrl } = useSuspenseSelect( ( select ) => { const { getUnstableBase, // Site index. } = select( coreStore ); diff --git a/packages/block-library/src/html/preview.js b/packages/block-library/src/html/preview.js index 262f6ef626e0a..4096bf7f9e50c 100644 --- a/packages/block-library/src/html/preview.js +++ b/packages/block-library/src/html/preview.js @@ -7,7 +7,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { SandBox } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; // Default styles used to unset some of the styles // that might be inherited from the editor style. @@ -21,7 +21,7 @@ const DEFAULT_STYLES = ` `; export default function HTMLEditPreview( { content, isSelected } ) { - const settingStyles = useSelect( ( select ) => { + const settingStyles = useSuspenseSelect( ( select ) => { return select( blockEditorStore ).getSettings()?.styles; }, [] ); diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 7b426be38e6d8..88f4ae06e9339 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -9,7 +9,7 @@ import { get, has, isEmpty, omit, pick } from 'lodash'; */ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; import { withNotices } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { BlockAlignmentControl, BlockControls, @@ -121,7 +121,7 @@ export function ImageEdit( { }, [ caption ] ); const ref = useRef(); - const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => { + const { imageDefaultSize, mediaUpload } = useSuspenseSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] ); }, [] ); diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 1275af2eb2248..cae787422ce8b 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -17,7 +17,7 @@ import { ToolbarButton, } from '@wordpress/components'; import { useViewportMatch, usePrevious } from '@wordpress/compose'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect, useSuspenseSelect, useDispatch } from '@wordpress/data'; import { BlockControls, InspectorControls, @@ -92,7 +92,7 @@ export default function Image( { const { allowResize = true } = context; const { getBlock } = useSelect( blockEditorStore ); - const { image, multiImageSelection } = useSelect( + const { image, multiImageSelection } = useSuspenseSelect( ( select ) => { const { getMedia } = select( coreStore ); const { getMultiSelectedBlockClientIds, getBlockName } = @@ -114,7 +114,7 @@ export default function Image( { [ id, isSelected ] ); const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } = - useSelect( + useSuspenseSelect( ( select ) => { const { getBlockRootClientId, diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 5481cc1cd9b9b..2c6e8f91f5e23 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -28,7 +28,7 @@ import { useBlockProps, store as blockEditorStore, } from '@wordpress/block-editor'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { pin, list, grid } from '@wordpress/icons'; import { store as coreStore } from '@wordpress/core-data'; import { store as noticeStore } from '@wordpress/notices'; @@ -96,7 +96,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { defaultImageHeight, categoriesList, authorList, - } = useSelect( + } = useSuspenseSelect( ( select ) => { const { getEntityRecords, getUsers } = select( coreStore ); const settings = select( blockEditorStore ).getSettings(); diff --git a/packages/block-library/src/list-item/edit.native.js b/packages/block-library/src/list-item/edit.native.js index 2762c28c6024d..3814bbaceb671 100644 --- a/packages/block-library/src/list-item/edit.native.js +++ b/packages/block-library/src/list-item/edit.native.js @@ -14,7 +14,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useState, useCallback } from '@wordpress/element'; /** @@ -43,7 +43,7 @@ export default function ListItemEdit( { ordered, reversed, start, - } = useSelect( + } = useSuspenseSelect( ( select ) => { const { getBlockAttributes, diff --git a/packages/block-library/src/list-item/hooks/use-indent-list-item.js b/packages/block-library/src/list-item/hooks/use-indent-list-item.js index b1fd8394be43c..9498cc342af92 100644 --- a/packages/block-library/src/list-item/hooks/use-indent-list-item.js +++ b/packages/block-library/src/list-item/hooks/use-indent-list-item.js @@ -2,12 +2,12 @@ * WordPress dependencies */ import { useCallback } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect, useSuspenseSelect, useDispatch } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { createBlock, cloneBlock } from '@wordpress/blocks'; export default function useIndentListItem( clientId ) { - const canIndent = useSelect( + const canIndent = useSuspenseSelect( ( select ) => select( blockEditorStore ).getBlockIndex( clientId ) > 0, [ clientId ] ); diff --git a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js index a5c37c0dc647b..49588e9a61dbd 100644 --- a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js +++ b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js @@ -7,7 +7,12 @@ import { first, last, castArray } from 'lodash'; * WordPress dependencies */ import { useCallback } from '@wordpress/element'; -import { useSelect, useDispatch, useRegistry } from '@wordpress/data'; +import { + useSelect, + useSuspenseSelect, + useDispatch, + useRegistry, +} from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { cloneBlock } from '@wordpress/blocks'; @@ -18,7 +23,7 @@ import { name as listItemName } from '../block.json'; export default function useOutdentListItem( clientId ) { const registry = useRegistry(); - const { canOutdent } = useSelect( + const { canOutdent } = useSuspenseSelect( ( innerSelect ) => { const { getBlockRootClientId } = innerSelect( blockEditorStore ); const grandParentId = getBlockRootClientId( diff --git a/packages/block-library/src/list-item/hooks/use-split.js b/packages/block-library/src/list-item/hooks/use-split.js index 51ede7de45c45..ec73004d77a20 100644 --- a/packages/block-library/src/list-item/hooks/use-split.js +++ b/packages/block-library/src/list-item/hooks/use-split.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useCallback, useRef } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { cloneBlock, createBlock } from '@wordpress/blocks'; @@ -13,7 +13,7 @@ export default function useSplit( clientId ) { // a flag where the first execution of the callback is false (it is the before value) // and the second execution is true, it is the after value. const isAfter = useRef( false ); - const { getBlock } = useSelect( blockEditorStore ); + const { getBlock } = useSuspenseSelect( blockEditorStore ); return useCallback( ( value ) => { const block = getBlock( clientId ); diff --git a/packages/block-library/src/list/v2/edit.js b/packages/block-library/src/list/v2/edit.js index 9ef320b53b001..5fee2fc672b4f 100644 --- a/packages/block-library/src/list/v2/edit.js +++ b/packages/block-library/src/list/v2/edit.js @@ -13,7 +13,12 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { ToolbarButton } from '@wordpress/components'; -import { useDispatch, useSelect, useRegistry } from '@wordpress/data'; +import { + useDispatch, + useSelect, + useSuspenseSelect, + useRegistry, +} from '@wordpress/data'; import { isRTL, __ } from '@wordpress/i18n'; import { formatListBullets, @@ -73,7 +78,7 @@ function useMigrateOnLoad( attributes, clientId ) { } function useOutdentList( clientId ) { - const { canOutdent } = useSelect( + const { canOutdent } = useSuspenseSelect( ( innerSelect ) => { const { getBlockRootClientId, getBlock } = innerSelect( blockEditorStore ); diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 41d33ab14e4e5..9404bf9d873f7 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -8,7 +8,7 @@ import { map, filter } from 'lodash'; * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useState, useRef } from '@wordpress/element'; import { BlockControls, @@ -157,7 +157,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { } = attributes; const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG; - const image = useSelect( + const image = useSuspenseSelect( ( select ) => mediaId && isSelected ? select( coreStore ).getMedia( mediaId, { context: 'view' } ) @@ -213,7 +213,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { setAttributes( { verticalAlignment: alignment } ); }; - const imageSizes = useSelect( ( select ) => { + const imageSizes = useSuspenseSelect( ( select ) => { const settings = select( blockEditorStore ).getSettings(); return settings?.imageSizes; }, [] ); diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index befe613e32fc8..b6e118c27cf9d 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -8,7 +8,7 @@ import { escape, unescape } from 'lodash'; * WordPress dependencies */ import { createBlock, switchToBlockType } from '@wordpress/blocks'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { Button, PanelBody, @@ -286,7 +286,7 @@ const useIsInvalidLink = ( kind, type, id ) => { const isPostType = kind === 'post-type' || type === 'post' || type === 'page'; const hasId = Number.isInteger( id ); - const postStatus = useSelect( + const postStatus = useSuspenseSelect( ( select ) => { if ( ! isPostType ) { return null; @@ -361,7 +361,7 @@ function navStripHTML( html ) { */ function LinkControlTransforms( { clientId, replace } ) { - const { getBlock, blockTransforms } = useSelect( + const { getBlock, blockTransforms } = useSuspenseSelect( ( select ) => { const { getBlock: _getBlock, @@ -471,7 +471,7 @@ export default function NavigationLinkEdit( { hasChildren, userCanCreatePages, userCanCreatePosts, - } = useSelect( + } = useSuspenseSelect( ( select ) => { const { getBlocks, diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index 8b4d3d1b833b1..ddc33cdd2888e 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -7,7 +7,7 @@ import { escape, without } from 'lodash'; /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { PanelBody, Popover, @@ -304,7 +304,7 @@ export default function NavigationSubmenuEdit( { userCanCreatePages, userCanCreatePosts, onlyDescendantIsEmptyLink, - } = useSelect( + } = useSuspenseSelect( ( select ) => { const { hasSelectedInnerBlock, diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js index dfaa2170991b4..1b97a3ada514f 100644 --- a/packages/block-library/src/navigation/edit/inner-blocks.js +++ b/packages/block-library/src/navigation/edit/inner-blocks.js @@ -7,7 +7,7 @@ import { InnerBlocks, store as blockEditorStore, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; /** @@ -45,7 +45,7 @@ export default function NavigationInnerBlocks( { isImmediateParentOfSelectedBlock, selectedBlockHasChildren, isSelected, - } = useSelect( + } = useSuspenseSelect( ( select ) => { const { getBlockCount, diff --git a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js index 4a68d5daf50d1..b3cf349b55c23 100644 --- a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js +++ b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { useInnerBlocksProps } from '@wordpress/block-editor'; import { Disabled, Spinner } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useContext, useEffect, useRef, useMemo } from '@wordpress/element'; /** @@ -89,7 +89,7 @@ export default function UnsavedInnerBlocks( { } ); const { isSaving, draftNavigationMenus, hasResolvedDraftNavigationMenus } = - useSelect( + useSuspenseSelect( ( select ) => { if ( isDisabled ) { return EMPTY_OBJECT; diff --git a/packages/block-library/src/navigation/edit/use-inner-blocks.js b/packages/block-library/src/navigation/edit/use-inner-blocks.js index 70a8415e1f993..88e55e567e80b 100644 --- a/packages/block-library/src/navigation/edit/use-inner-blocks.js +++ b/packages/block-library/src/navigation/edit/use-inner-blocks.js @@ -1,13 +1,13 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; const EMPTY_ARRAY = []; export function useInnerBlocks( clientId ) { - return useSelect( + return useSuspenseSelect( ( select ) => { const { getBlock, getBlocks, hasSelectedInnerBlock } = select( blockEditorStore ); diff --git a/packages/block-library/src/navigation/test/use-navigation-menu.js b/packages/block-library/src/navigation/test/use-navigation-menu.js index 69466ae1b1bd2..e4586c2c300dd 100644 --- a/packages/block-library/src/navigation/test/use-navigation-menu.js +++ b/packages/block-library/src/navigation/test/use-navigation-menu.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createRegistry, useSelect } from '@wordpress/data'; +import { createRegistry, useSuspenseSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; /** @@ -83,7 +83,7 @@ describe( 'useNavigationMenus', () => { let registry; beforeEach( () => { registry = createRegistryWithStores(); - useSelect.mockImplementation( ( fn ) => fn( registry.select ) ); + useSuspenseSelect.mockImplementation( ( fn ) => fn( registry.select ) ); } ); it( 'Should return no information when no data is resolved', () => { diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js index e6ccad1d017c8..8e1cfb64615c1 100644 --- a/packages/block-library/src/navigation/use-navigation-menu.js +++ b/packages/block-library/src/navigation/use-navigation-menu.js @@ -5,12 +5,12 @@ import { store as coreStore, __experimentalUseResourcePermissions as useResourcePermissions, } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; export default function useNavigationMenu( ref ) { const permissions = useResourcePermissions( 'navigation', ref ); - return useSelect( + return useSuspenseSelect( ( select ) => { const [ hasResolvedPermissions, diff --git a/packages/block-library/src/navigation/use-template-part-area-label.js b/packages/block-library/src/navigation/use-template-part-area-label.js index 91838b268b47d..743f87f56bff2 100644 --- a/packages/block-library/src/navigation/use-template-part-area-label.js +++ b/packages/block-library/src/navigation/use-template-part-area-label.js @@ -3,7 +3,7 @@ */ import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; /** * Internal dependencies @@ -13,7 +13,7 @@ import { useSelect } from '@wordpress/data'; import { createTemplatePartId } from '../template-part/edit/utils/create-template-part-id'; export default function useTemplatePartAreaLabel( clientId ) { - return useSelect( + return useSuspenseSelect( ( select ) => { // Use the lack of a clientId as an opportunity to bypass the rest // of this hook. diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 6433926b73d6f..22fbb7ead7d38 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -15,7 +15,7 @@ import { import { ToolbarButton, Spinner, Notice } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useMemo, useState, memo } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as coreStore, useEntityRecords } from '@wordpress/core-data'; /** @@ -102,7 +102,7 @@ export default function PageListEdit( { context, clientId } ) { } function useFrontPageId() { - return useSelect( ( select ) => { + return useSuspenseSelect( ( select ) => { const canReadSettings = select( coreStore ).canUser( 'read', 'settings' diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js index 98662ba21c884..35af2216d44d8 100644 --- a/packages/block-library/src/paragraph/edit.native.js +++ b/packages/block-library/src/paragraph/edit.native.js @@ -10,7 +10,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { useCallback } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; const name = 'core/paragraph'; @@ -25,7 +25,7 @@ function ParagraphBlock( { clientId, parentBlockAlignment, } ) { - const isRTL = useSelect( ( select ) => { + const isRTL = useSuspenseSelect( ( select ) => { return !! select( blockEditorStore ).getSettings().isRTL; }, [] ); diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index a9ebee6266b6b..6ac1263a987b4 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import { store as blockEditorStore, @@ -9,7 +9,7 @@ import { } from '@wordpress/block-editor'; const PatternEdit = ( { attributes, clientId } ) => { - const selectedPattern = useSelect( + const selectedPattern = useSuspenseSelect( ( select ) => select( blockEditorStore ).__experimentalGetParsedPattern( attributes.slug diff --git a/packages/block-library/src/post-author-biography/edit.js b/packages/block-library/src/post-author-biography/edit.js index 6bd733f32fd46..1bde371b2d162 100644 --- a/packages/block-library/src/post-author-biography/edit.js +++ b/packages/block-library/src/post-author-biography/edit.js @@ -11,7 +11,7 @@ import { BlockControls, useBlockProps, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; @@ -20,7 +20,7 @@ function PostAuthorBiographyEdit( { attributes: { textAlign }, setAttributes, } ) { - const { authorDetails } = useSelect( + const { authorDetails } = useSuspenseSelect( ( select ) => { const { getEditedEntityRecord, getUser } = select( coreStore ); const _authorId = getEditedEntityRecord( diff --git a/packages/block-library/src/post-author-name/edit.js b/packages/block-library/src/post-author-name/edit.js index 8eda3bf92d193..5b1af8052748b 100644 --- a/packages/block-library/src/post-author-name/edit.js +++ b/packages/block-library/src/post-author-name/edit.js @@ -12,7 +12,7 @@ import { InspectorControls, useBlockProps, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; import { PanelBody, ToggleControl } from '@wordpress/components'; @@ -22,7 +22,7 @@ function PostAuthorNameEdit( { attributes: { textAlign, isLink, linkTarget }, setAttributes, } ) { - const { authorName } = useSelect( + const { authorName } = useSuspenseSelect( ( select ) => { const { getEditedEntityRecord, getUser } = select( coreStore ); const _authorId = getEditedEntityRecord( diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 8d1fd0bd668b8..9d202f1c7a5a6 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -15,7 +15,7 @@ import { useBlockProps, } from '@wordpress/block-editor'; import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; @@ -26,7 +26,7 @@ function PostAuthorEdit( { setAttributes, } ) { const isDescendentOfQueryLoop = Number.isFinite( queryId ); - const { authorId, authorDetails, authors } = useSelect( + const { authorId, authorDetails, authors } = useSuspenseSelect( ( select ) => { const { getEditedEntityRecord, getUser, getUsers } = select( coreStore ); diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js index a71f8231acafa..02f750c36f32f 100644 --- a/packages/block-library/src/post-comments-form/form.js +++ b/packages/block-library/src/post-comments-form/form.js @@ -15,7 +15,7 @@ import { import { Button } from '@wordpress/components'; import { useDisabled, useInstanceId } from '@wordpress/compose'; import { useEntityProp, store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; const CommentsFormPlaceholder = () => { const disabledFormRef = useDisabled(); @@ -63,13 +63,13 @@ const CommentsForm = ( { postId, postType } ) => { const isSiteEditor = postType === undefined || postId === undefined; - const { defaultCommentStatus } = useSelect( + const { defaultCommentStatus } = useSuspenseSelect( ( select ) => select( blockEditorStore ).getSettings() .__experimentalDiscussionSettings ); - const postTypeSupportsComments = useSelect( ( select ) => + const postTypeSupportsComments = useSuspenseSelect( ( select ) => postType ? !! select( coreStore ).getPostType( postType )?.supports.comments : false diff --git a/packages/block-library/src/post-comments-link/edit.js b/packages/block-library/src/post-comments-link/edit.js index 36e617c55a3e7..d0544867c08d9 100644 --- a/packages/block-library/src/post-comments-link/edit.js +++ b/packages/block-library/src/post-comments-link/edit.js @@ -13,7 +13,7 @@ import { useBlockProps, } from '@wordpress/block-editor'; import { useState, useEffect } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; import { __, sprintf, _n } from '@wordpress/i18n'; @@ -49,7 +49,7 @@ function PostCommentsLinkEdit( { context, attributes, setAttributes } ) { } ); }, [ postId ] ); - const post = useSelect( + const post = useSuspenseSelect( ( select ) => select( coreStore ).getEditedEntityRecord( 'postType', diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index 233399a63f8d5..ba310417f8f8f 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useBlockProps, useInnerBlocksProps, @@ -41,7 +41,7 @@ function ReadOnlyContent( { userCanEdit, postType, postId } ) { function EditableContent( { layout, context = {} } ) { const { postType, postId } = context; - const themeSupportsLayout = useSelect( ( select ) => { + const themeSupportsLayout = useSuspenseSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings()?.supportsLayout; }, [] ); diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index 7daab51c751fd..a228c1f1641e5 100644 --- a/packages/block-library/src/post-date/edit.js +++ b/packages/block-library/src/post-date/edit.js @@ -30,7 +30,7 @@ import { import { __, sprintf } from '@wordpress/i18n'; import { edit } from '@wordpress/icons'; import { DOWN } from '@wordpress/keycodes'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; export default function PostDateEdit( { attributes: { textAlign, format, isLink, displayType }, @@ -62,7 +62,7 @@ export default function PostDateEdit( { postId ); - const postType = useSelect( + const postType = useSuspenseSelect( ( select ) => postTypeSlug ? select( coreStore ).getPostType( postTypeSlug ) diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 6ef4d0ee0a408..cfcbaff0cc9f6 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useEntityProp, store as coreStore } from '@wordpress/core-data'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { MenuItem, ToggleControl, @@ -63,7 +63,7 @@ function PostFeaturedImageDisplay( { postId ); - const { media, postType } = useSelect( + const { media, postType } = useSuspenseSelect( ( select ) => { const { getMedia, getPostType } = select( coreStore ); return { @@ -79,7 +79,7 @@ function PostFeaturedImageDisplay( { ); const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug ); - const imageSizes = useSelect( + const imageSizes = useSuspenseSelect( ( select ) => select( blockEditorStore ).getSettings().imageSizes, [] ); diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 0d21a98c477d2..737b1920e553c 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { memo, useMemo, useState } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { BlockContextProvider, @@ -94,7 +94,7 @@ export default function PostTemplateEdit( { const [ { page } ] = queryContext; const [ activeBlockContextId, setActiveBlockContextId ] = useState(); - const { posts, blocks } = useSelect( + const { posts, blocks } = useSuspenseSelect( ( select ) => { const { getEntityRecords, getTaxonomies } = select( coreStore ); const { getBlocks } = select( blockEditorStore ); diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js index 7e7d70ec2b8f1..f12b3c1f33756 100644 --- a/packages/block-library/src/post-terms/edit.js +++ b/packages/block-library/src/post-terms/edit.js @@ -17,7 +17,7 @@ import { } from '@wordpress/block-editor'; import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { Spinner, TextControl } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; @@ -47,7 +47,7 @@ export default function PostTermsEdit( { const { term, textAlign, separator, prefix, suffix } = attributes; const { postId, postType } = context; - const selectedTerm = useSelect( + const selectedTerm = useSuspenseSelect( ( select ) => { if ( ! term ) return {}; const { getTaxonomy } = select( coreStore ); diff --git a/packages/block-library/src/post-terms/use-post-terms.js b/packages/block-library/src/post-terms/use-post-terms.js index 10fdb3ecfea55..08498de298702 100644 --- a/packages/block-library/src/post-terms/use-post-terms.js +++ b/packages/block-library/src/post-terms/use-post-terms.js @@ -2,12 +2,12 @@ * WordPress dependencies */ import { useEntityProp, store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; export default function usePostTerms( { postId, postType, term } ) { const { rest_base: restBase, slug } = term; const [ termIds ] = useEntityProp( 'postType', postType, restBase, postId ); - return useSelect( + return useSuspenseSelect( ( select ) => { const visible = term?.visibility?.publicly_queryable; if ( ! visible ) { diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js index 6fe0c47559660..afa69a0b80fd1 100644 --- a/packages/block-library/src/query-pagination/edit.js +++ b/packages/block-library/src/query-pagination/edit.js @@ -8,7 +8,7 @@ import { useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { getBlockSupport } from '@wordpress/blocks'; import { PanelBody } from '@wordpress/components'; @@ -38,7 +38,7 @@ export default function QueryPaginationEdit( { name, } ) { const usedLayout = layout || getDefaultBlockLayout( name ); - const hasNextPreviousBlocks = useSelect( ( select ) => { + const hasNextPreviousBlocks = useSuspenseSelect( ( select ) => { const { getBlocks } = select( blockEditorStore ); const innerBlocks = getBlocks( clientId ); /** diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index 3cb7996aa2690..9492d0c98e965 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { store as blocksStore, cloneBlock } from '@wordpress/blocks'; import { useInstanceId } from '@wordpress/compose'; import { useState, useEffect } from '@wordpress/element'; @@ -50,7 +50,7 @@ export function QueryContent( { const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); const instanceId = useInstanceId( QueryContent ); - const { themeSupportsLayout } = useSelect( ( select ) => { + const { themeSupportsLayout } = useSuspenseSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return { themeSupportsLayout: getSettings()?.supportsLayout }; }, [] ); @@ -61,7 +61,7 @@ export function QueryContent( { template: TEMPLATE, __experimentalLayout: themeSupportsLayout ? usedLayout : undefined, } ); - const { postsPerPage } = useSelect( ( select ) => { + const { postsPerPage } = useSuspenseSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return { postsPerPage: @@ -148,7 +148,7 @@ function QueryPatternSetup( { const [ isStartingBlank, setIsStartingBlank ] = useState( false ); const blockProps = useBlockProps(); - const { blockType, allVariations, hasPatterns } = useSelect( + const { blockType, allVariations, hasPatterns } = useSuspenseSelect( ( select ) => { const { getBlockVariations, getBlockType } = select( blocksStore ); const { @@ -219,7 +219,7 @@ const QueryEdit = ( props ) => { const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] = useState( false ); const { replaceBlock, selectBlock } = useDispatch( blockEditorStore ); - const hasInnerBlocks = useSelect( + const hasInnerBlocks = useSuspenseSelect( ( select ) => !! select( blockEditorStore ).getBlocks( clientId ).length, [ clientId ] diff --git a/packages/block-library/src/query/edit/inspector-controls/author-control.js b/packages/block-library/src/query/edit/inspector-controls/author-control.js index aeb7a46506d6e..f949b652a57bb 100644 --- a/packages/block-library/src/query/edit/inspector-controls/author-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/author-control.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { FormTokenField } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; /** @@ -19,7 +19,7 @@ const AUTHORS_QUERY = { }; function AuthorControl( { value, onChange } ) { - const authorsList = useSelect( ( select ) => { + const authorsList = useSuspenseSelect( ( select ) => { const { getUsers } = select( coreStore ); return getUsers( AUTHORS_QUERY ); }, [] ); diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js index 72db4563054e4..f3131bea33021 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -19,7 +19,7 @@ import { import { __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/block-editor'; import { useEffect, useState, useCallback } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; /** @@ -33,7 +33,7 @@ import StickyControl from './sticky-control'; import { usePostTypes } from '../../utils'; function useIsPostTypeHierarchical( postType ) { - return useSelect( + return useSuspenseSelect( ( select ) => { const type = select( coreStore ).getPostType( postType ); return type?.viewable && type?.hierarchical; diff --git a/packages/block-library/src/query/edit/inspector-controls/parent-control.js b/packages/block-library/src/query/edit/inspector-controls/parent-control.js index 8e13cb8812f3d..7376d48148098 100644 --- a/packages/block-library/src/query/edit/inspector-controls/parent-control.js +++ b/packages/block-library/src/query/edit/inspector-controls/parent-control.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { FormTokenField } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useState, useEffect, useMemo } from '@wordpress/element'; import { useDebounce } from '@wordpress/compose'; @@ -25,7 +25,7 @@ function ParentControl( { parents, postType, onChange } ) { const [ value, setValue ] = useState( EMPTY_ARRAY ); const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY ); const debouncedSearch = useDebounce( setSearch, 250 ); - const { searchResults, searchHasResolved } = useSelect( + const { searchResults, searchHasResolved } = useSuspenseSelect( ( select ) => { if ( ! search ) { return { searchResults: EMPTY_ARRAY, searchHasResolved: true }; @@ -53,7 +53,7 @@ function ParentControl( { parents, postType, onChange } ) { }, [ search, parents ] ); - const currentParents = useSelect( + const currentParents = useSuspenseSelect( ( select ) => { if ( ! parents?.length ) return EMPTY_ARRAY; const { getEntityRecords } = select( coreStore ); diff --git a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js index a7de415371cad..2601bacc392b9 100644 --- a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js +++ b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { FormTokenField } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; /** @@ -35,7 +35,7 @@ const getTermIdByTermValue = ( termsMappedByName, termValue ) => { export const useTaxonomiesInfo = ( postType ) => { const taxonomies = useTaxonomies( postType ); - const taxonomiesInfo = useSelect( + const taxonomiesInfo = useSuspenseSelect( ( select ) => { const { getEntityRecords } = select( coreStore ); const termsQuery = { context: 'view', per_page: MAX_FETCHED_TERMS }; diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js index 07151aff4823b..4f1f2674b9c24 100644 --- a/packages/block-library/src/query/edit/query-placeholder.js +++ b/packages/block-library/src/query/edit/query-placeholder.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { useBlockProps, __experimentalBlockVariationPicker, @@ -13,7 +13,7 @@ import { } from '@wordpress/blocks'; function QueryPlaceholder( { clientId, name, setAttributes, icon, label } ) { - const { defaultVariation, scopeVariations } = useSelect( + const { defaultVariation, scopeVariations } = useSuspenseSelect( ( select ) => { const { getBlockVariations, diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js index 84deb8d0ed91d..89c85562bd201 100644 --- a/packages/block-library/src/query/edit/query-toolbar.js +++ b/packages/block-library/src/query/edit/query-toolbar.js @@ -11,7 +11,7 @@ import { import { useInstanceId } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { settings, list, grid } from '@wordpress/icons'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; export default function QueryToolbar( { @@ -22,7 +22,7 @@ export default function QueryToolbar( { name, clientId, } ) { - const hasPatterns = useSelect( + const hasPatterns = useSuspenseSelect( ( select ) => { const { getBlockRootClientId, diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index 4fd81566378e2..5ee73cbdc5193 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -6,7 +6,7 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; @@ -77,7 +77,7 @@ export const mapToIHasNameAndId = ( entities, path ) => { * @return {Object} The helper object related to post types. */ export const usePostTypes = () => { - const postTypes = useSelect( ( select ) => { + const postTypes = useSuspenseSelect( ( select ) => { const { getPostTypes } = select( coreStore ); const excludedPostTypes = [ 'attachment' ]; const filteredPostTypes = getPostTypes( { per_page: -1 } )?.filter( @@ -111,7 +111,7 @@ export const usePostTypes = () => { * @return {Object[]} An array of the associated taxonomies. */ export const useTaxonomies = ( postType ) => { - const taxonomies = useSelect( + const taxonomies = useSuspenseSelect( ( select ) => { const { getTaxonomies } = select( coreStore ); const filteredTaxonomies = getTaxonomies( { diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js index e6c560078e501..a01dafbd7124c 100644 --- a/packages/block-library/src/quote/edit.js +++ b/packages/block-library/src/quote/edit.js @@ -16,7 +16,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { BlockQuotation } from '@wordpress/components'; -import { useDispatch, useSelect, useRegistry } from '@wordpress/data'; +import { useDispatch, useSuspenseSelect, useRegistry } from '@wordpress/data'; import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { Platform, useEffect } from '@wordpress/element'; import deprecated from '@wordpress/deprecated'; @@ -78,7 +78,7 @@ export default function QuoteEdit( { useMigrateOnLoad( attributes, clientId ); - const hasSelection = useSelect( ( select ) => { + const hasSelection = useSuspenseSelect( ( select ) => { const { isBlockSelected, hasSelectedInnerBlock } = select( blockEditorStore ); return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId ); diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 0206986961cef..96d197846a8b1 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -16,7 +16,7 @@ import { store as blockEditorStore, __experimentalGetElementClassName, } from '@wordpress/block-editor'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useSuspenseSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import { ToolbarDropdownMenu, @@ -78,7 +78,7 @@ export default function SearchEdit( { style, } = attributes; - const insertedInNavigationBlock = useSelect( + const insertedInNavigationBlock = useSuspenseSelect( ( select ) => { const { getBlockParentsByBlockName, wasBlockJustInserted } = select( blockEditorStore ); diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index c7a97219983f7..6b39e9252c1fc 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -37,7 +37,7 @@ import { __experimentalImageEditor as ImageEditor, __experimentalImageEditingProvider as ImageEditingProvider, } from '@wordpress/block-editor'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSuspenseSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { crop, upload } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; @@ -79,7 +79,7 @@ const SiteLogo = ( { const classes = classnames( 'custom-logo-link', { 'is-transient': isBlobURL( logoUrl ), } ); - const { imageEditing, maxWidth, title } = useSelect( ( select ) => { + const { imageEditing, maxWidth, title } = useSuspenseSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); const siteEntities = select( coreStore ).getEditedEntityRecord( 'root', @@ -367,7 +367,7 @@ export default function LogoEdit( { siteIconId, mediaItemData, isRequestingMediaItem, - } = useSelect( ( select ) => { + } = useSuspenseSelect( ( select ) => { const { canUser, getEntityRecord, getEditedEntityRecord } = select( coreStore ); const siteSettings = getEditedEntityRecord( 'root', 'site' ); diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js index 5c8257d11c3fd..8a363bfb2fa41 100644 --- a/packages/block-library/src/site-tagline/edit.js +++ b/packages/block-library/src/site-tagline/edit.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { AlignmentControl, @@ -28,14 +28,17 @@ export default function SiteTaglineEdit( { 'site', 'description' ); - const { canUserEdit, readOnlySiteTagLine } = useSelect( ( select ) => { - const { canUser, getEntityRecord } = select( coreStore ); - const siteData = getEntityRecord( 'root', '__unstableBase' ); - return { - canUserEdit: canUser( 'update', 'settings' ), - readOnlySiteTagLine: siteData?.description, - }; - }, [] ); + const { canUserEdit, readOnlySiteTagLine } = useSuspenseSelect( + ( select ) => { + const { canUser, getEntityRecord } = select( coreStore ); + const siteData = getEntityRecord( 'root', '__unstableBase' ); + return { + canUserEdit: canUser( 'update', 'settings' ), + readOnlySiteTagLine: siteData?.description, + }; + }, + [] + ); const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, diff --git a/packages/block-library/src/site-title/edit/index.js b/packages/block-library/src/site-title/edit/index.js index bbe91cea95bbb..35e874d3c6dfe 100644 --- a/packages/block-library/src/site-title/edit/index.js +++ b/packages/block-library/src/site-title/edit/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; import { @@ -32,7 +32,7 @@ export default function SiteTitleEdit( { } ) { const { level, textAlign, isLink, linkTarget } = attributes; const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' ); - const { canUserEdit, readOnlyTitle } = useSelect( ( select ) => { + const { canUserEdit, readOnlyTitle } = useSuspenseSelect( ( select ) => { const { canUser, getEntityRecord } = select( coreStore ); const siteData = getEntityRecord( 'root', '__unstableBase' ); return { diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js index 33e6d915be156..53e26137d1d08 100644 --- a/packages/block-library/src/table-of-contents/edit.js +++ b/packages/block-library/src/table-of-contents/edit.js @@ -22,7 +22,7 @@ import { ToolbarGroup, } from '@wordpress/components'; import { useDisabled } from '@wordpress/compose'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useSuspenseSelect } from '@wordpress/data'; import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; import { renderToString, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -57,7 +57,7 @@ export default function TableOfContentsEdit( { const blockProps = useBlockProps(); const disabledRef = useDisabled(); - const canInsertList = useSelect( + const canInsertList = useSuspenseSelect( ( select ) => { const { getBlockRootClientId, canInsertBlockType } = select( blockEditorStore ); @@ -75,7 +75,7 @@ export default function TableOfContentsEdit( { * The latest heading data, or null if the new data deeply equals the saved * headings attribute. * - * Since useSelect forces a re-render when its return value is shallowly + * Since useSuspenseSelect forces a re-render when its return value is shallowly * inequal to its prior call, we would be re-rendering this block every time * the stores change, even if the latest headings were deeply equal to the * ones saved in the block attributes. @@ -83,10 +83,10 @@ export default function TableOfContentsEdit( { * By returning null when they're equal, we reduce that to 2 renders: one * when there are new latest headings (and so it returns them), and one when * they haven't changed (so it returns null). As long as the latest heading - * data remains the same, further calls of the useSelect callback will + * data remains the same, further calls of the useSuspenseSelect callback will * continue to return null, thus preventing any forced re-renders. */ - const latestHeadings = useSelect( + const latestHeadings = useSuspenseSelect( ( select ) => { const { getBlockAttributes, diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js index d57d6b2f63180..7128d320b1919 100644 --- a/packages/block-library/src/template-part/edit/advanced-controls.js +++ b/packages/block-library/src/template-part/edit/advanced-controls.js @@ -5,7 +5,7 @@ import { useEntityProp } from '@wordpress/core-data'; import { SelectControl, TextControl } from '@wordpress/components'; import { sprintf, __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; export function TemplatePartAdvancedControls( { tagName, @@ -28,7 +28,7 @@ export function TemplatePartAdvancedControls( { templatePartId ); - const { areaOptions } = useSelect( ( select ) => { + const { areaOptions } = useSuspenseSelect( ( select ) => { // FIXME: @wordpress/block-library should not depend on @wordpress/editor. // Blocks can be loaded into a *non-post* block editor. /* eslint-disable @wordpress/data-no-store-string-literals */ diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index f18e9f776d5e0..c4482ad72937c 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -6,7 +6,7 @@ import { isEmpty } from 'lodash'; /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { BlockSettingsMenuControls, BlockTitle, @@ -51,7 +51,7 @@ export default function TemplatePartEdit( { // Set the postId block attribute if it did not exist, // but wait until the inner blocks have loaded to allow // new edits to trigger this. - const { isResolved, innerBlocks, isMissing, area } = useSelect( + const { isResolved, innerBlocks, isMissing, area } = useSuspenseSelect( ( select ) => { const { getEditedEntityRecord, hasFinishedResolution } = select( coreStore ); diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js index 19e79dca27e5c..6241a848b409c 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -8,7 +8,7 @@ import { useSetting, store as blockEditorStore, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; export default function TemplatePartInnerBlocks( { postId: id, @@ -17,7 +17,7 @@ export default function TemplatePartInnerBlocks( { tagName: TagName, blockProps, } ) { - const themeSupportsLayout = useSelect( ( select ) => { + const themeSupportsLayout = useSuspenseSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings()?.supportsLayout; }, [] ); diff --git a/packages/block-library/src/template-part/edit/utils/hooks.js b/packages/block-library/src/template-part/edit/utils/hooks.js index e5b60131d84ee..22cdf441305a0 100644 --- a/packages/block-library/src/template-part/edit/utils/hooks.js +++ b/packages/block-library/src/template-part/edit/utils/hooks.js @@ -6,7 +6,7 @@ import { find, kebabCase } from 'lodash'; /** * WordPress dependencies */ -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useSuspenseSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; @@ -27,7 +27,7 @@ import { createTemplatePartId } from './create-template-part-id'; * @return {{ templateParts: Array, isResolving: boolean }} array of template parts. */ export function useAlternativeTemplateParts( area, excludedId ) { - const { templateParts, isResolving } = useSelect( ( select ) => { + const { templateParts, isResolving } = useSuspenseSelect( ( select ) => { const { getEntityRecords, isResolving: _isResolving } = select( coreStore ); const query = { per_page: -1 }; @@ -78,7 +78,7 @@ export function useAlternativeTemplateParts( area, excludedId ) { * @return {Array} array of block patterns. */ export function useAlternativeBlockPatterns( area, clientId ) { - return useSelect( + return useSuspenseSelect( ( select ) => { const blockNameWithArea = area ? `core/template-part/${ area }` @@ -139,7 +139,7 @@ export function useCreateTemplatePartFromBlocks( area, setAttributes ) { * @return {{icon: Object, label: string, tagName: string}} Template Part area. */ export function useTemplatePartArea( area ) { - return useSelect( + return useSuspenseSelect( ( select ) => { // FIXME: @wordpress/block-library should not depend on @wordpress/editor. // Blocks can be loaded into a *non-post* block editor. diff --git a/packages/block-library/src/utils/hooks.js b/packages/block-library/src/utils/hooks.js index 4b64c52929946..68eec72c22520 100644 --- a/packages/block-library/src/utils/hooks.js +++ b/packages/block-library/src/utils/hooks.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; /** @@ -12,7 +12,7 @@ import { store as coreStore } from '@wordpress/core-data'; * @param {string} recordId Record's id. */ export function useCanEditEntity( kind, name, recordId ) { - return useSelect( + return useSuspenseSelect( ( select ) => select( coreStore ).canUserEditEntityRecord( kind, name, recordId ), [ kind, name, recordId ] diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index 3d6467474ca51..8fbaae967e88c 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -31,7 +31,7 @@ import { import { useRef, useEffect } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { useInstanceId } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { video as icon } from '@wordpress/icons'; import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; @@ -61,7 +61,7 @@ function VideoEdit( { const posterImageButton = useRef(); const { id, caption, controls, poster, src, tracks } = attributes; const isTemporaryVideo = ! id && isBlobURL( src ); - const mediaUpload = useSelect( + const mediaUpload = useSuspenseSelect( ( select ) => select( blockEditorStore ).getSettings().mediaUpload, [] ); diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js index 1af22554820c2..0d98d34922a73 100644 --- a/packages/block-library/src/video/tracks-editor.js +++ b/packages/block-library/src/video/tracks-editor.js @@ -22,7 +22,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { upload, media } from '@wordpress/icons'; -import { useSelect } from '@wordpress/data'; +import { useSuspenseSelect } from '@wordpress/data'; import { useState } from '@wordpress/element'; import { getFilename } from '@wordpress/url'; @@ -188,7 +188,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) { } export default function TracksEditor( { tracks = [], onChange } ) { - const mediaUpload = useSelect( ( select ) => { + const mediaUpload = useSuspenseSelect( ( select ) => { return select( blockEditorStore ).getSettings().mediaUpload; }, [] ); const [ trackBeingEdited, setTrackBeingEdited ] = useState( null ); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 7bba08162ae8e..80d876e55b1ed 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -1,9 +1,15 @@ /** * WordPress dependencies */ -import { useEffect, useState, useMemo, useCallback } from '@wordpress/element'; +import { + Suspense, + useEffect, + useState, + useMemo, + useCallback, +} from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { Popover, Button, Notice } from '@wordpress/components'; +import { Popover, Button, Notice, Spinner } from '@wordpress/components'; import { EntityProvider, store as coreStore } from '@wordpress/core-data'; import { BlockContextProvider, @@ -61,6 +67,31 @@ const interfaceLabels = { drawer: __( 'Navigation Sidebar' ), }; +const LoadingScreen = () => ( +
+
+ +
+
+); + function Editor( { onError } ) { const { isInserterOpen, @@ -254,7 +285,11 @@ function Editor( { onError } ) { } notices={ } content={ - <> + + } + > { editorMode === 'visual' && @@ -289,7 +324,7 @@ function Editor( { onError } ) { openEntitiesSavedStates } /> - + } actions={ <>