Editor: Add the show most used blocks preference to the site editor (#…

…57637)
WordPress · Jan 8, 2024 · f57bcc8 · f57bcc8
1 parent 56e53df
commit f57bcc8
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -160,7 +160,6 @@ function Layout() {
 		isDistractionFree,
 		showBlockBreadcrumbs,
 		showMetaBoxes,
-		showMostUsedBlocks,
 		documentLabel,
 		hasHistory,
 	} = useSelect( ( select ) => {
@@ -193,8 +192,6 @@ function Layout() {
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			showMostUsedBlocks:
-				select( editPostStore ).isFeatureActive( 'mostUsedBlocks' ),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 			hasBlockSelected:
@@ -263,9 +260,7 @@ function Layout() {
 
 	const secondarySidebar = () => {
 		if ( mode === 'visual' && isInserterOpened ) {
-			return (
-				<InserterSidebar showMostUsedBlocks={ showMostUsedBlocks } />
-			);
+			return <InserterSidebar />;
 		}
 		if ( mode === 'visual' && isListViewOpened ) {
 			return <ListViewSidebar />;

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
@@ -263,6 +263,7 @@ export default function EditPostPreferencesModal() {
 					<>
 						<PreferencesModalSection title={ __( 'Inserter' ) }>
 							<EnableFeature
+								scope="core"
 								featureName="mostUsedBlocks"
 								help={ __(
 									'Adds a category with the most frequently used blocks in the inserter.'

diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
@@ -202,6 +202,24 @@ export default function EditSitePreferencesModal() {
 				</>
 			),
 		},
+		{
+			name: 'blocks',
+			tabLabel: __( 'Blocks' ),
+			content: (
+				<>
+					<PreferencesModalSection title={ __( 'Inserter' ) }>
+						<EnableFeature
+							scope="core"
+							featureName="mostUsedBlocks"
+							help={ __(
+								'Adds a category with the most frequently used blocks in the inserter.'
+							) }
+							label={ __( 'Show most used blocks' ) }
+						/>
+					</PreferencesModalSection>
+				</>
+			),
+		},
 	];
 	if ( ! isModalActive ) {
 		return null;

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
@@ -11,18 +11,21 @@ import {
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-export default function InserterSidebar( { showMostUsedBlocks } ) {
-	const { insertionPoint } = useSelect( ( select ) => {
+export default function InserterSidebar() {
+	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
 		const { getInsertionPoint } = unlock( select( editorStore ) );
+		const { get } = select( preferencesStore );
 		return {
 			insertionPoint: getInsertionPoint(),
+			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
 		};
 	}, [] );
 	const { setIsInserterOpened } = useDispatch( editorStore );

diff --git a/...references-persistence/src/migrations/preferences-package-data/convert-editor-settings.js b/...references-persistence/src/migrations/preferences-package-data/convert-editor-settings.js
@@ -11,6 +11,7 @@ export default function convertEditorSettings( data ) {
 		'focusMode',
 		'inactivePanels',
 		'keepCaretInsideBlock',
+		'mostUsedBlocks',
 		'openPanels',
 		'showBlockBreadcrumbs',
 		'showIconLabels',