diff --git a/packages/block-library/src/template-part/edit/import-controls.js b/packages/block-library/src/template-part/edit/import-controls.js index 1512cd936f02c..dc6ace88ebdf2 100644 --- a/packages/block-library/src/template-part/edit/import-controls.js +++ b/packages/block-library/src/template-part/edit/import-controls.js @@ -30,11 +30,21 @@ export function TemplatePartImportControls( { area, setAttributes } ) { const [ isBusy, setIsBusy ] = useState( false ); const registry = useRegistry(); - const sidebars = useSelect( ( select ) => { - return select( coreStore ).getSidebars( { - per_page: -1, - _fields: 'id,name,description,status,widgets', - } ); + const { sidebars, hasResolved } = useSelect( ( select ) => { + const { getSidebars, hasFinishedResolution } = select( coreStore ); + + return { + sidebars: getSidebars( { + per_page: -1, + _fields: 'id,name,description,status,widgets', + } ), + hasResolved: hasFinishedResolution( 'getSidebars', [ + { + per_page: -1, + _fields: 'id,name,description,status,widgets', + }, + ] ), + }; }, [] ); const { createErrorNotice } = useDispatch( noticesStore ); @@ -67,6 +77,12 @@ export function TemplatePartImportControls( { area, setAttributes } ) { ]; }, [ sidebars ] ); + // Only bailout from rendering after data is loaded, and there is nothing to import, + // to avoid SlotFill re-positioning issue. See: https://github.com/WordPress/gutenberg/issues/15641. + if ( hasResolved && ! options.length ) { + return null; + } + async function createFromWidgets( event ) { event.preventDefault();