diff --git a/editor/components/document-outline/check.js b/editor/components/document-outline/check.js
new file mode 100644
index 00000000000000..43ad0d956f6fed
--- /dev/null
+++ b/editor/components/document-outline/check.js
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { filter } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { getBlocks } from '../../selectors';
+
+function DocumentOutlineCheck( { blocks, children } ) {
+	const headings = filter( blocks, ( block ) => block.name === 'core/heading' );
+
+	if ( headings.length <= 1 ) {
+		return null;
+	}
+
+	return children;
+}
+
+export default connect(
+	( state ) => ( {
+		blocks: getBlocks( state ),
+	} )
+)( DocumentOutlineCheck );
diff --git a/editor/components/index.js b/editor/components/index.js
index 4383cf01bb4a82..5f1288ded4984d 100644
--- a/editor/components/index.js
+++ b/editor/components/index.js
@@ -1,6 +1,7 @@
 // Post Related Components
 export { default as AutosaveMonitor } from './autosave-monitor';
 export { default as DocumentOutline } from './document-outline';
+export { default as DocumentOutlineCheck } from './document-outline/check';
 export { default as EditorGlobalKeyboardShortcuts } from './editor-global-keyboard-shortcuts';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
diff --git a/editor/edit-post/sidebar/document-outline-panel/index.js b/editor/edit-post/sidebar/document-outline-panel/index.js
index 5fc8d06c04c026..92b6f61644134a 100644
--- a/editor/edit-post/sidebar/document-outline-panel/index.js
+++ b/editor/edit-post/sidebar/document-outline-panel/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,8 +12,8 @@ import { PanelBody } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { DocumentOutline } from '../../../components';
-import { getBlocks, isEditorSidebarPanelOpened } from '../../../selectors';
+import { DocumentOutline, DocumentOutlineCheck } from '../../../components';
+import { isEditorSidebarPanelOpened } from '../../../selectors';
 import { toggleSidebarPanel } from '../../../actions';
 
 /**
@@ -22,24 +21,19 @@ import { toggleSidebarPanel } from '../../../actions';
  */
 const PANEL_NAME = 'table-of-contents';
 
-const DocumentOutlinePanel = ( { blocks, isOpened, onTogglePanel } ) => {
-	const headings = filter( blocks, ( block ) => block.name === 'core/heading' );
-
-	if ( headings.length <= 1 ) {
-		return null;
-	}
-
+function DocumentOutlinePanel( { isOpened, onTogglePanel } ) {
 	return (
-		<PanelBody title={ __( 'Document Outline' ) } opened={ isOpened } onToggle={ onTogglePanel }>
-			<DocumentOutline />
-		</PanelBody>
+		<DocumentOutlineCheck>
+			<PanelBody title={ __( 'Document Outline' ) } opened={ isOpened } onToggle={ onTogglePanel }>
+				<DocumentOutline />
+			</PanelBody>
+		</DocumentOutlineCheck>
 	);
-};
+}
 
 export default connect(
 	( state ) => {
 		return {
-			blocks: getBlocks( state ),
 			isOpened: isEditorSidebarPanelOpened( state, PANEL_NAME ),
 		};
 	},