Editor: Unify right click override preference

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

@@ -117,6 +117,7 @@ export default function EditPostPreferencesModal() {
 								/>
 							) }
 							<EnableFeature
+								scope="core"
 								featureName="allowRightClickOverrides"
 								help={ __(
 									'Allows contextual list view menus via right-click, overriding browser defaults.'

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

@@ -1,26 +1,31 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default compose(
-	withSelect( ( select, { featureName } ) => {
-		const { isFeatureActive } = select( editPostStore );
-		return {
-			isChecked: isFeatureActive( featureName ),
-		};
-	} ),
-	withDispatch( ( dispatch, { featureName, onToggle = () => {} } ) => ( {
-		onChange: () => {
-			onToggle();
-			dispatch( editPostStore ).toggleFeature( featureName );
-		},
-	} ) )
-)( BaseOption );
+export default function EnableFeature( props ) {
+	const {
+		scope = 'core/edit-post',
+		featureName,
+		onToggle = () => {},
+		...remainingProps
+	} = props;
+	const isChecked = useSelect(
+		( select ) => !! select( preferencesStore ).get( scope, featureName ),
+		[ scope, featureName ]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+	const onChange = () => {
+		onToggle();
+		toggle( scope, featureName );
+	};
+	return (
+		<BaseOption
+			onChange={ onChange }
+			isChecked={ isChecked }
+			{ ...remainingProps }
+		/>
+	);
+}

packages/edit-post/src/editor.js

@@ -30,7 +30,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 
 	const {
-		allowRightClickOverrides,
 		hasFixedToolbar,
 		focusMode,
 		isDistractionFree,
@@ -71,9 +70,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 			const isViewable = getPostType( postType )?.viewable ?? false;
 			const canEditTemplate = canUser( 'create', 'templates' );
 			return {
-				allowRightClickOverrides: isFeatureActive(
-					'allowRightClickOverrides'
-				),
 				hasFixedToolbar:
 					isFeatureActive( 'fixedToolbar' ) || ! isLargeViewport,
 				focusMode: isFeatureActive( 'focusMode' ),
@@ -109,7 +105,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 			focusMode,
 			isDistractionFree,
 			hasInlineToolbar,
-			allowRightClickOverrides,
 
 			keepCaretInsideBlock,
 			// Keep a reference of the `allowedBlockTypes` from the server to handle use cases
@@ -135,7 +130,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 		return result;
 	}, [
 		settings,
-		allowRightClickOverrides,
 		hasFixedToolbar,
 		hasInlineToolbar,
 		focusMode,

packages/edit-post/src/index.js

@@ -54,7 +54,6 @@ export function initializeEditor(
 	const root = createRoot( target );
 
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
-		allowRightClickOverrides: true,
 		editorMode: 'visual',
 		fixedToolbar: false,
 		fullscreenMode: true,
@@ -71,6 +70,10 @@ export function initializeEditor(
 		welcomeGuideTemplate: true,
 	} );
 
+	dispatch( preferencesStore ).setDefaults( 'core', {
+		allowRightClickOverrides: true,
+	} );
+
 	dispatch( blocksStore ).reapplyBlockTypeFilters();
 
 	// Check if the block list view should be open by default.

packages/edit-site/src/components/block-editor/use-site-editor-settings.js

@@ -93,7 +93,6 @@ export function useSpecificEditorSettings() {
 	const {
 		templateSlug,
 		focusMode,
-		allowRightClickOverrides,
 		isDistractionFree,
 		hasFixedToolbar,
 		keepCaretInsideBlock,
@@ -126,10 +125,6 @@ export function useSpecificEditorSettings() {
 					'core/edit-site',
 					'distractionFree'
 				),
-				allowRightClickOverrides: !! getPreference(
-					'core/edit-site',
-					'allowRightClickOverrides'
-				),
 				hasFixedToolbar:
 					!! getPreference( 'core/edit-site', 'fixedToolbar' ) ||
 					! isLargeViewport,
@@ -153,7 +148,6 @@ export function useSpecificEditorSettings() {
 			richEditingEnabled: true,
 			supportsTemplateMode: true,
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
-			allowRightClickOverrides,
 			isDistractionFree,
 			hasFixedToolbar,
 			keepCaretInsideBlock,
@@ -166,7 +160,6 @@ export function useSpecificEditorSettings() {
 	}, [
 		settings,
 		focusMode,
-		allowRightClickOverrides,
 		isDistractionFree,
 		hasFixedToolbar,
 		keepCaretInsideBlock,

packages/edit-site/src/components/preferences-modal/enable-feature.js

@@ -6,16 +6,20 @@ import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/
 import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function EnableFeature( props ) {
-	const { featureName, onToggle = () => {}, ...remainingProps } = props;
+	const {
+		scope = 'core/edit-site',
+		featureName,
+		onToggle = () => {},
+		...remainingProps
+	} = props;
 	const isChecked = useSelect(
-		( select ) =>
-			!! select( preferencesStore ).get( 'core/edit-site', featureName ),
-		[ featureName ]
+		( select ) => !! select( preferencesStore ).get( scope, featureName ),
+		[ scope, featureName ]
 	);
 	const { toggle } = useDispatch( preferencesStore );
 	const onChange = () => {
 		onToggle();
-		toggle( 'core/edit-site', featureName );
+		toggle( scope, featureName );
 	};
 	return (
 		<BaseOption

packages/edit-site/src/components/preferences-modal/index.js

@@ -68,6 +68,7 @@ export default function EditSitePreferencesModal() {
 						label={ __( 'Display block breadcrumbs' ) }
 					/>
 					<EnableFeature
+						scope="core"
 						featureName="allowRightClickOverrides"
 						help={ __(
 							'Allows contextual list view menus via right-click, overriding browser defaults.'

packages/edit-site/src/index.js

@@ -52,7 +52,6 @@ export function initializeEditor( id, settings ) {
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.
 	dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
-		allowRightClickOverrides: true,
 		editorMode: 'visual',
 		fixedToolbar: false,
 		focusMode: false,
@@ -65,6 +64,9 @@ export function initializeEditor( id, settings ) {
 		showListViewByDefault: false,
 		showBlockBreadcrumbs: true,
 	} );
+	dispatch( preferencesStore ).setDefaults( 'core', {
+		allowRightClickOverrides: true,
+	} );
 
 	dispatch( interfaceStore ).setDefaultComplementaryArea(
 		'core/edit-site',

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -9,6 +9,7 @@ import {
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -28,7 +29,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__unstableGalleryWithImageBlocks',
 	'alignWide',
 	'allowedBlockTypes',
-	'allowRightClickOverrides',
 	'blockInspectorTabs',
 	'allowedMimeTypes',
 	'bodyPlaceholder',
@@ -89,6 +89,7 @@ const BLOCK_EDITOR_SETTINGS = [
  */
 function useBlockEditorSettings( settings, postType, postId ) {
 	const {
+		allowRightClickOverrides,
 		reusableBlocks,
 		hasUploadPermissions,
 		canUseUnfilteredHTML,
@@ -116,6 +117,10 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				: undefined;
 
 			return {
+				allowRightClickOverrides: select( preferencesStore ).get(
+					'core',
+					'allowRightClickOverrides'
+				),
 				canUseUnfilteredHTML: getRawEntityRecord(
 					'postType',
 					postType,
@@ -209,6 +214,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
+			allowRightClickOverrides,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalReusableBlocks: reusableBlocks,
 			__experimentalBlockPatterns: blockPatterns,
@@ -241,6 +247,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 		} ),
 		[
+			allowRightClickOverrides,
 			settings,
 			hasUploadPermissions,
 			reusableBlocks,

packages/preferences-persistence/src/migrations/preferences-package-data/convert-editor-settings.js

@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+
+export default function convertEditorSettings( data ) {
+	let newData = data;
+	const settingsToMoveToCore = [ 'allowRightClickOverrides' ];
+
+	settingsToMoveToCore.forEach( ( setting ) => {
+		if ( data?.[ 'core/edit-post' ]?.[ setting ] !== undefined ) {
+			newData = {
+				...newData,
+				core: {
+					...newData?.core,
+					[ setting ]: data[ 'core/edit-post' ][ setting ],
+				},
+			};
+			delete newData[ 'core/edit-post' ][ setting ];
+		}
+	} );
+
+	if ( Object.keys( newData?.[ 'core/edit-post' ] ?? {} )?.length === 0 ) {
+		delete newData[ 'core/edit-post' ];
+	}
+
+	return newData;
+}

packages/preferences-persistence/src/migrations/preferences-package-data/index.js

@@ -2,7 +2,10 @@
  * Internal dependencies
  */
 import convertComplementaryAreas from './convert-complementary-areas';
+import convertEditorSettings from './convert-editor-settings';
 
 export default function convertPreferencesPackageData( data ) {
-	return convertComplementaryAreas( data );
+	let newData = convertComplementaryAreas( data );
+	newData = convertEditorSettings( newData );
+	return newData;
 }

packages/preferences-persistence/src/migrations/preferences-package-data/test/convert-editor-settings.js

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import convertEditorSettings from '../convert-editor-settings';
+
+describe( 'convertEditorSettings', () => {
+	it( 'converts the `allowRightClickOverrides` property', () => {
+		const input = {
+			'core/edit-post': {
+				allowRightClickOverrides: false,
+			},
+		};
+
+		const expectedOutput = {
+			core: {
+				allowRightClickOverrides: false,
+			},
+		};
+
+		expect( convertEditorSettings( input ) ).toEqual( expectedOutput );
+	} );
+} );