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

…23358)
WordPress · Jun 22, 2020 · e8a126d · e8a126d
1 parent 149a1e1
commit e8a126d
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-list.js b/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 ) => {

diff --git a/packages/block-editor/src/components/inserter/library.js b/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 }
 		/>
 	);

diff --git a/packages/block-editor/src/components/inserter/menu.js b/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 && (

diff --git a/packages/block-editor/src/components/inserter/test/block-list.js b/packages/block-editor/src/components/inserter/test/block-list.js
@@ -102,10 +102,10 @@ describe( 'InserterMenu', () => {
 		const { container } = initializeAllClosedMenuState();
 		const embedTabContent = container.querySelectorAll(
 			'.block-editor-inserter__panel-content'
-		)[ 4 ];
+		)[ 3 ];
 		const embedTabTitle = container.querySelectorAll(
 			'.block-editor-inserter__panel-title'
-		)[ 4 ];
+		)[ 3 ];
 		const blocks = embedTabContent.querySelectorAll(
 			'.block-editor-block-types-list__item-title'
 		);
@@ -122,10 +122,10 @@ describe( 'InserterMenu', () => {
 		const { container } = initializeAllClosedMenuState();
 		const reusableTabContent = container.querySelectorAll(
 			'.block-editor-inserter__panel-content'
-		)[ 6 ];
+		)[ 5 ];
 		const reusableTabTitle = container.querySelectorAll(
 			'.block-editor-inserter__panel-title'
-		)[ 6 ];
+		)[ 5 ];
 		const blocks = reusableTabContent.querySelectorAll(
 			'.block-editor-block-types-list__item-title'
 		);
@@ -141,10 +141,10 @@ describe( 'InserterMenu', () => {
 		const { container } = initializeAllClosedMenuState();
 		const commonTabContent = container.querySelectorAll(
 			'.block-editor-inserter__panel-content'
-		)[ 1 ];
+		)[ 0 ];
 		const commonTabTitle = container.querySelectorAll(
 			'.block-editor-inserter__panel-title'
-		)[ 1 ];
+		)[ 0 ];
 		const blocks = commonTabContent.querySelectorAll(
 			'.block-editor-block-types-list__item-title'
 		);
@@ -176,7 +176,7 @@ describe( 'InserterMenu', () => {
 		const { container } = initializeAllClosedMenuState();
 		const layoutTabContent = container.querySelectorAll(
 			'.block-editor-inserter__panel-content'
-		)[ 2 ];
+		)[ 1 ];
 		const disabledBlocks = layoutTabContent.querySelectorAll(
 			'.block-editor-block-types-list__item[disabled], .block-editor-block-types-list__item[aria-disabled="true"]'
 		);

diff --git a/packages/edit-post/src/components/layout/index.js b/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 ) {

diff --git a/packages/edit-post/src/components/options-modal/index.js b/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 />

diff --git a/packages/edit-post/src/components/options-modal/options/enable-feature.js b/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 );
diff --git a/packages/edit-post/src/components/options-modal/options/index.js b/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';
diff --git a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
@@ -12,6 +12,10 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
     <WithSelect(WithDispatch(IfViewportMatches(BaseOption)))
       label="Pre-publish checks"
     />
+    <WithSelect(WithDispatch(BaseOption))
+      featureName="mostUsedBlocks"
+      label="Enable the Most Used Blocks category in the block library"
+    />
   </Section>
   <Section
     title="Document panels"