hide the most used blocks by default and add an option to enable it

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

@@ -35,6 +35,7 @@ export function InserterBlockList( {
 	onHover,
 	filterValue,
 	debouncedSpeak,
+	showMostUsedBlocks,
 } ) {
 	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
 		rootClientId,
@@ -130,15 +131,18 @@ export function InserterBlockList( {
 				</ChildBlocks>
 			) }
 
-			{ ! hasChildItems && !! suggestedItems.length && ! filterValue && (
-				<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
-					<BlockTypesList
-						items={ suggestedItems }
-						onSelect={ onSelectItem }
-						onHover={ onHover }
-					/>
-				</InserterPanel>
-			) }
+			{ showMostUsedBlocks &&
+				! hasChildItems &&
+				!! suggestedItems.length &&
+				! filterValue && (
+					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
+						<BlockTypesList
+							items={ suggestedItems }
+							onSelect={ onSelectItem }
+							onHover={ onHover }
+						/>
+					</InserterPanel>
+				) }
 
 			{ ! hasChildItems &&
 				map( categories, ( category ) => {

packages/block-editor/src/components/inserter/library.js

@@ -18,6 +18,7 @@ function InserterLibrary( {
 	clientId,
 	isAppender,
 	showInserterHelpPanel,
+	showMostUsedBlocks = false,
 	__experimentalSelectBlockOnInsert: selectBlockOnInsert,
 	onSelect = noop,
 } ) {
@@ -39,6 +40,7 @@ function InserterLibrary( {
 			clientId={ clientId }
 			isAppender={ isAppender }
 			showInserterHelpPanel={ showInserterHelpPanel }
+			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalSelectBlockOnInsert={ selectBlockOnInsert }
 		/>
 	);

packages/block-editor/src/components/inserter/menu.js

@@ -31,6 +31,7 @@ function InserterMenu( {
 	__experimentalSelectBlockOnInsert,
 	onSelect,
 	showInserterHelpPanel,
+	showMostUsedBlocks,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
@@ -86,6 +87,7 @@ function InserterMenu( {
 					onInsert={ onInsert }
 					onHover={ onHover }
 					filterValue={ filterValue }
+					showMostUsedBlocks={ showMostUsedBlocks }
 				/>
 			</div>
 			{ showInserterHelpPanel && (

packages/edit-post/src/components/layout/index.js

@@ -72,6 +72,7 @@ function Layout() {
 		previousShortcut,
 		nextShortcut,
 		hasBlockSelected,
+		showMostUsedBlocks,
 	} = useSelect( ( select ) => {
 		return {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
@@ -85,6 +86,9 @@ function Layout() {
 			isFullscreenActive: select( 'core/edit-post' ).isFeatureActive(
 				'fullscreenMode'
 			),
+			showMostUsedBlocks: select( 'core/edit-post' ).isFeatureActive(
+				'mostUsedBlocks'
+			),
 			mode: select( 'core/edit-post' ).getEditorMode(),
 			isRichEditingEnabled: select( 'core/editor' ).getEditorSettings()
 				.richEditingEnabled,
@@ -176,6 +180,9 @@ function Layout() {
 								</div>
 								<div className="edit-post-layout__inserter-panel-content">
 									<Library
+										showMostUsedBlocks={
+											showMostUsedBlocks
+										}
 										showInserterHelpPanel
 										onSelect={ () => {
 											if ( isMobileViewport ) {

packages/edit-post/src/components/options-modal/index.js

@@ -26,6 +26,7 @@ import {
 	EnablePluginDocumentSettingPanelOption,
 	EnablePublishSidebarOption,
 	EnablePanelOption,
+	EnableFeature,
 } from './options';
 import MetaBoxesSection from './meta-boxes-section';
 
@@ -47,6 +48,12 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
 				<EnablePublishSidebarOption
 					label={ __( 'Pre-publish checks' ) }
 				/>
+				<EnableFeature
+					featureName="mostUsedBlocks"
+					label={ __(
+						'Enable the Most Used Blocks category in the block library'
+					) }
+				/>
 			</Section>
 			<Section title={ __( 'Document panels' ) }>
 				<EnablePluginDocumentSettingPanelOption.Slot />

packages/edit-post/src/components/options-modal/options/enable-feature.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BaseOption from './base';
+
+export default compose(
+	withSelect( ( select, { featureName } ) => {
+		const { isFeatureActive } = select( 'core/edit-post' );
+		return {
+			isChecked: isFeatureActive( featureName ),
+		};
+	} ),
+	withDispatch( ( dispatch, { featureName } ) => ( {
+		onChange: () =>
+			dispatch( 'core/edit-post' ).toggleFeature( featureName ),
+	} ) )
+)( BaseOption );

packages/edit-post/src/components/options-modal/options/index.js

@@ -2,3 +2,4 @@ export { default as EnableCustomFieldsOption } from './enable-custom-fields';
 export { default as EnablePanelOption } from './enable-panel';
 export { default as EnablePluginDocumentSettingPanelOption } from './enable-plugin-document-setting-panel';
 export { default as EnablePublishSidebarOption } from './enable-publish-sidebar';
+export { default as EnableFeature } from './enable-feature';