Move StopEditingAsBlocksOnOutsideSelect to Root

packages/block-editor/src/components/block-list/index.js

@@ -46,19 +46,26 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
  const isLargeViewport = useViewportMatch( 'medium' );
- const { isOutlineMode, isFocusMode, editorMode } = useSelect(
- ( select ) => {
- const { getSettings, __unstableGetEditorMode } =
- select( blockEditorStore );
- const { outlineMode, focusMode } = getSettings();
- return {
- isOutlineMode: outlineMode,
- isFocusMode: focusMode,
- editorMode: __unstableGetEditorMode(),
- };
- },
- []
- );
+ const {
+ isOutlineMode,
+ isFocusMode,
+ editorMode,
+ temporarilyEditingAsBlocks,
+ } = useSelect( ( select ) => {
+ const {
+ getSettings,
+ __unstableGetEditorMode,
+ __unstableGetTemporarilyEditingAsBlocks,
+ } = select( blockEditorStore );
+ const { outlineMode, focusMode } = getSettings();
+ return {
+ isOutlineMode: outlineMode,
+ isFocusMode: focusMode,
+ editorMode: __unstableGetEditorMode(),
+ temporarilyEditingAsBlocks:
+ __unstableGetTemporarilyEditingAsBlocks(),
+ };
+ }, [] );
  const registry = useRegistry();
  const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -115,6 +122,11 @@ function Root( { className, ...settings } ) {
  return (
  <IntersectionObserver.Provider value={ intersectionObserver }>
  <div { ...innerBlocksProps } />
+ { !! temporarilyEditingAsBlocks && (
+ <StopEditingAsBlocksOnOutsideSelect
+ clientId={ temporarilyEditingAsBlocks }
+ />
+ ) }
  </IntersectionObserver.Provider>
  );
 }
@@ -159,43 +171,36 @@ function Items( {
  // function on every render.
  const hasAppender = CustomAppender !== false;
  const hasCustomAppender = !! CustomAppender;
- const {
- order,
- selectedBlocks,
- visibleBlocks,
- temporarilyEditingAsBlocks,
- shouldRenderAppender,
- } = useSelect(
- ( select ) => {
- const {
- getBlockOrder,
- getSelectedBlockClientId,
- getSelectedBlockClientIds,
- __unstableGetVisibleBlocks,
- __unstableGetTemporarilyEditingAsBlocks,
- getTemplateLock,
- getBlockEditingMode,
- __unstableGetEditorMode,
- } = select( blockEditorStore );
- const selectedBlockClientId = getSelectedBlockClientId();
- return {
- order: getBlockOrder( rootClientId ),
- selectedBlocks: getSelectedBlockClientIds(),
- visibleBlocks: __unstableGetVisibleBlocks(),
- temporarilyEditingAsBlocks:
- __unstableGetTemporarilyEditingAsBlocks(),
- shouldRenderAppender:
- hasAppender &&
- ( hasCustomAppender
- ? ! getTemplateLock( rootClientId ) &&
- getBlockEditingMode( rootClientId ) !== 'disabled' &&
- __unstableGetEditorMode() !== 'zoom-out'
- : rootClientId === selectedBlockClientId ||
- ( ! rootClientId && ! selectedBlockClientId ) ),
- };
- },
- [ rootClientId, hasAppender, hasCustomAppender ]
- );
+ const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
+ useSelect(
+ ( select ) => {
+ const {
+ getBlockOrder,
+ getSelectedBlockClientId,
+ getSelectedBlockClientIds,
+ __unstableGetVisibleBlocks,
+ getTemplateLock,
+ getBlockEditingMode,
+ __unstableGetEditorMode,
+ } = select( blockEditorStore );
+ const selectedBlockClientId = getSelectedBlockClientId();
+ return {
+ order: getBlockOrder( rootClientId ),
+ selectedBlocks: getSelectedBlockClientIds(),
+ visibleBlocks: __unstableGetVisibleBlocks(),
+ shouldRenderAppender:
+ hasAppender &&
+ ( hasCustomAppender
+ ? ! getTemplateLock( rootClientId ) &&
+ getBlockEditingMode( rootClientId ) !==
+ 'disabled' &&
+ __unstableGetEditorMode() !== 'zoom-out'
+ : rootClientId === selectedBlockClientId ||
+ ( ! rootClientId && ! selectedBlockClientId ) ),
+ };
+ },
+ [ rootClientId, hasAppender, hasCustomAppender ]
+ );
 
  return (
  <LayoutProvider value={ layout }>
@@ -216,11 +221,6 @@ function Items( {
  </AsyncModeProvider>
  ) ) }
  { order.length < 1 && placeholder }
- { !! temporarilyEditingAsBlocks && (
- <StopEditingAsBlocksOnOutsideSelect
- clientId={ temporarilyEditingAsBlocks }
- />
- ) }
  { shouldRenderAppender && (
  <BlockListAppender
  tagName={ __experimentalAppenderTagName }