Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Unify right click override preference #57468

Merged
merged 5 commits into from
Jan 3, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
Expand Down
Original file line number Diff line number Diff line change
@@ -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 }
/>
);
}
6 changes: 0 additions & 6 deletions packages/edit-post/src/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
const isLargeViewport = useViewportMatch( 'medium' );

const {
allowRightClickOverrides,
hasFixedToolbar,
focusMode,
isDistractionFree,
Expand Down Expand Up @@ -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' ),
Expand Down Expand Up @@ -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
Expand All @@ -135,7 +130,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
return result;
}, [
settings,
allowRightClickOverrides,
hasFixedToolbar,
hasInlineToolbar,
focusMode,
Expand Down
5 changes: 4 additions & 1 deletion packages/edit-post/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,6 @@ export function useSpecificEditorSettings() {
const {
templateSlug,
focusMode,
allowRightClickOverrides,
isDistractionFree,
hasFixedToolbar,
keepCaretInsideBlock,
Expand Down Expand Up @@ -126,10 +125,6 @@ export function useSpecificEditorSettings() {
'core/edit-site',
'distractionFree'
),
allowRightClickOverrides: !! getPreference(
'core/edit-site',
'allowRightClickOverrides'
),
hasFixedToolbar:
!! getPreference( 'core/edit-site', 'fixedToolbar' ) ||
! isLargeViewport,
Expand All @@ -153,7 +148,6 @@ export function useSpecificEditorSettings() {
richEditingEnabled: true,
supportsTemplateMode: true,
focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
allowRightClickOverrides,
isDistractionFree,
hasFixedToolbar,
keepCaretInsideBlock,
Expand All @@ -166,7 +160,6 @@ export function useSpecificEditorSettings() {
}, [
settings,
focusMode,
allowRightClickOverrides,
isDistractionFree,
hasFixedToolbar,
keepCaretInsideBlock,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
Expand Down
4 changes: 3 additions & 1 deletion packages/edit-site/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -28,7 +29,6 @@ const BLOCK_EDITOR_SETTINGS = [
'__unstableGalleryWithImageBlocks',
'alignWide',
'allowedBlockTypes',
'allowRightClickOverrides',
'blockInspectorTabs',
'allowedMimeTypes',
'bodyPlaceholder',
Expand Down Expand Up @@ -89,6 +89,7 @@ const BLOCK_EDITOR_SETTINGS = [
*/
function useBlockEditorSettings( settings, postType, postId ) {
const {
allowRightClickOverrides,
reusableBlocks,
hasUploadPermissions,
canUseUnfilteredHTML,
Expand Down Expand Up @@ -116,6 +117,10 @@ function useBlockEditorSettings( settings, postType, postId ) {
: undefined;

return {
allowRightClickOverrides: select( preferencesStore ).get(
'core',
'allowRightClickOverrides'
),
canUseUnfilteredHTML: getRawEntityRecord(
'postType',
postType,
Expand Down Expand Up @@ -209,6 +214,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
BLOCK_EDITOR_SETTINGS.includes( key )
)
),
allowRightClickOverrides,
mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
__experimentalReusableBlocks: reusableBlocks,
__experimentalBlockPatterns: blockPatterns,
Expand Down Expand Up @@ -241,6 +247,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
__experimentalSetIsInserterOpened: setIsInserterOpened,
} ),
[
allowRightClickOverrides,
settings,
hasUploadPermissions,
reusableBlocks,
Expand Down
Original file line number Diff line number Diff line change
@@ -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 ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we do the same for core/edit-site store? Maybe first check if it's already set in core scope..

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

absence of "core/edit-post" value doesn't really mean we don't have a preference, it just means that it was not explicitly set. So I think we should just keep it simple as is.

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 ) {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
delete newData[ 'core/edit-post' ];
}

return newData;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
@@ -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 );
} );
} );
Loading