From 097564fab017591cb2cf235a4b95f041b91951ea Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 13 May 2022 12:05:25 +1000 Subject: [PATCH 1/7] List View: Add right-click onContextMenu callback to open block settings dropdown instead of browser default --- .../src/components/list-view/block-select-button.js | 2 ++ .../block-editor/src/components/list-view/block.js | 11 +++++++++++ 2 files changed, 13 insertions(+) diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index f6eb82be503784..3a13ad3f379ccb 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -25,6 +25,7 @@ function ListViewBlockSelectButton( className, block: { clientId }, onClick, + onContextMenu, onToggleExpanded, tabIndex, onFocus, @@ -60,6 +61,7 @@ function ListViewBlockSelectButton( className ) } onClick={ onClick } + onContextMenu={ onContextMenu } onKeyDown={ onKeyDownHandler } ref={ ref } tabIndex={ tabIndex } diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index f8645a1071ff10..d08c8b3febd58c 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -56,6 +56,7 @@ function ListViewBlock( { preventAnnouncement, } ) { const cellRef = useRef( null ); + const settingsRef = useRef( null ); const [ isHovered, setIsHovered ] = useState( false ); const { clientId } = block; const isFirstSelectedBlock = @@ -173,6 +174,14 @@ function ListViewBlock( { [ clientId, expand, collapse, isExpanded ] ); + // Allow right-clicking an item in the List View to open up the block settings dropdown. + const onContextMenu = useCallback( ( event ) => { + if ( showBlockActions ) { + event.preventDefault(); + settingsRef.current?.click(); + } + } ); + let colSpan; if ( hasRenderedMovers ) { colSpan = 2; @@ -227,6 +236,7 @@ function ListViewBlock( { { ( { ref, tabIndex, onFocus } ) => ( Date: Fri, 13 May 2022 12:25:30 +1000 Subject: [PATCH 2/7] Add edit-post and edit-site option to disable overriding default right-click browser behaviour --- .../src/components/list-view/block.js | 3 ++- .../src/components/list-view/branch.js | 4 ++++ .../src/components/list-view/index.js | 22 +++++++++++++------ .../src/components/preferences-modal/index.js | 9 ++++++++ .../secondary-sidebar/list-view-sidebar.js | 10 +++++++-- packages/edit-post/src/index.js | 1 + .../src/components/preferences-modal/index.js | 7 ++++++ .../secondary-sidebar/list-view-sidebar.js | 14 ++++++++++-- packages/edit-site/src/index.js | 1 + 9 files changed, 59 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index d08c8b3febd58c..597b767485c6a9 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -40,6 +40,7 @@ import useBlockDisplayInformation from '../use-block-display-information'; import { useBlockLock } from '../block-lock'; function ListViewBlock( { + allowRightClickOverrides, block, isDragged, isSelected, @@ -176,7 +177,7 @@ function ListViewBlock( { // Allow right-clicking an item in the List View to open up the block settings dropdown. const onContextMenu = useCallback( ( event ) => { - if ( showBlockActions ) { + if ( showBlockActions && allowRightClickOverrides ) { event.preventDefault(); settingsRef.current?.click(); } diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js index 5325d6a869591b..f4a0c04f3b37ba 100644 --- a/packages/block-editor/src/components/list-view/branch.js +++ b/packages/block-editor/src/components/list-view/branch.js @@ -82,6 +82,7 @@ const countReducer = ( function ListViewBranch( props ) { const { + allowRightClickOverrides, blocks, selectBlock, showBlockMovers, @@ -144,6 +145,9 @@ function ListViewBranch( props ) { { showBlock && ( ) } + ), diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js index 10ee573e6257c6..43137886b6994c 100644 --- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js @@ -9,7 +9,7 @@ import { useInstanceId, useMergeRefs, } from '@wordpress/compose'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { closeSmall } from '@wordpress/icons'; import { ESCAPE } from '@wordpress/keycodes'; @@ -25,6 +25,10 @@ export default function ListViewSidebar() { const focusOnMountRef = useFocusOnMount( 'firstElement' ); const headerFocusReturnRef = useFocusReturn(); const contentFocusReturnRef = useFocusReturn(); + const allowRightClickOverrides = useSelect( ( select ) => + select( editPostStore ).isFeatureActive( 'allowRightClickOverrides' ) + ); + function closeOnEscape( event ) { if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { event.preventDefault(); @@ -60,7 +64,9 @@ export default function ListViewSidebar() { focusOnMountRef, ] ) } > - + ); diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 68e3d4ba76bbd8..26cd08237a7f40 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -107,6 +107,7 @@ export function initializeEditor( ); dispatch( preferencesStore ).setDefaults( 'core/edit-post', { + allowRightClickOverrides: true, editorMode: 'visual', fixedToolbar: false, fullscreenMode: true, diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js index b022824570e677..52fef35104304c 100644 --- a/packages/edit-site/src/components/preferences-modal/index.js +++ b/packages/edit-site/src/components/preferences-modal/index.js @@ -48,6 +48,13 @@ export default function EditSitePreferencesModal( { ) } label={ __( 'Always open list view' ) } /> + ), }, diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js index eaad82acafa273..6c7f073d5d6c1f 100644 --- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js @@ -9,10 +9,11 @@ import { useInstanceId, useMergeRefs, } from '@wordpress/compose'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { closeSmall } from '@wordpress/icons'; import { ESCAPE } from '@wordpress/keycodes'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -25,6 +26,13 @@ export default function ListViewSidebar() { const focusOnMountRef = useFocusOnMount( 'firstElement' ); const headerFocusReturnRef = useFocusReturn(); const contentFocusReturnRef = useFocusReturn(); + const allowRightClickOverrides = useSelect( ( select ) => + select( preferencesStore ).get( + 'core/edit-site', + 'allowRightClickOverrides' + ) + ); + function closeOnEscape( event ) { if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { setIsListViewOpened( false ); @@ -59,7 +67,9 @@ export default function ListViewSidebar() { focusOnMountRef, ] ) } > - + ); diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 8129241ad45a42..0196469c7ea363 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -59,6 +59,7 @@ export function reinitializeEditor( target, settings ) { // 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, From 6e3198c598be1d92d29970e10e77cb5552669bd9 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 13 May 2022 12:32:05 +1000 Subject: [PATCH 3/7] Update snapshot --- .../preferences-modal/test/__snapshots__/index.js.snap | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index 8a1de0ddfb75b8..ee772411754c44 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -52,6 +52,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active help="Shows block breadcrumbs at the bottom of the editor." label="Display block breadcrumbs" /> + , "name": "general", @@ -183,6 +188,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active help="Shows block breadcrumbs at the bottom of the editor." label="Display block breadcrumbs" /> + , "name": "general", From 7b458093756ba4f9a65a8b2fb0354c60ba4c093e Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 13 May 2022 16:28:15 +1000 Subject: [PATCH 4/7] Move allowRightClickOverrides to an editor setting instead of a stable prop on ListView --- .../src/components/list-view/block.js | 7 +++++- .../src/components/list-view/branch.js | 4 ---- .../src/components/list-view/index.js | 22 ++++++------------- .../secondary-sidebar/list-view-sidebar.js | 9 ++------ packages/edit-post/src/editor.js | 6 +++++ .../secondary-sidebar/list-view-sidebar.js | 13 ++--------- packages/edit-site/src/store/selectors.js | 5 +++++ .../provider/use-block-editor-settings.js | 1 + 8 files changed, 29 insertions(+), 38 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 597b767485c6a9..53cda3c5621434 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -40,7 +40,6 @@ import useBlockDisplayInformation from '../use-block-display-information'; import { useBlockLock } from '../block-lock'; function ListViewBlock( { - allowRightClickOverrides, block, isDragged, isSelected, @@ -73,6 +72,12 @@ function ListViewBlock( { ( select ) => select( blockEditorStore ).getBlockName( clientId ), [ clientId ] ); + const { allowRightClickOverrides } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return { + allowRightClickOverrides: getSettings().allowRightClickOverrides, + }; + } ); // When a block hides its toolbar it also hides the block settings menu, // since that menu is part of the toolbar in the editor canvas. diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js index f4a0c04f3b37ba..5325d6a869591b 100644 --- a/packages/block-editor/src/components/list-view/branch.js +++ b/packages/block-editor/src/components/list-view/branch.js @@ -82,7 +82,6 @@ const countReducer = ( function ListViewBranch( props ) { const { - allowRightClickOverrides, blocks, selectBlock, showBlockMovers, @@ -145,9 +144,6 @@ function ListViewBranch( props ) { { showBlock && ( - select( editPostStore ).isFeatureActive( 'allowRightClickOverrides' ) - ); function closeOnEscape( event ) { if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { @@ -64,9 +61,7 @@ export default function ListViewSidebar() { focusOnMountRef, ] ) } > - + ); diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 7c939d19976c86..a9074b1ce061df 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -36,6 +36,7 @@ function Editor( { ...props } ) { const { + allowRightClickOverrides, hasFixedToolbar, focusMode, hasReducedUI, @@ -80,6 +81,9 @@ function Editor( { const isViewable = getPostType( postType )?.viewable ?? false; return { + allowRightClickOverrides: isFeatureActive( + 'allowRightClickOverrides' + ), hasFixedToolbar: isFeatureActive( 'fixedToolbar' ) || __experimentalGetPreviewDeviceType() !== 'Desktop', @@ -118,6 +122,7 @@ function Editor( { hasFixedToolbar, focusMode, hasReducedUI, + allowRightClickOverrides, // This is marked as experimental to give time for the quick inserter to mature. __experimentalSetIsInserterOpened: setIsInserterOpened, @@ -145,6 +150,7 @@ function Editor( { return result; }, [ + allowRightClickOverrides, settings, hasFixedToolbar, focusMode, diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js index 6c7f073d5d6c1f..d3d0359ff4f135 100644 --- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js @@ -9,11 +9,10 @@ import { useInstanceId, useMergeRefs, } from '@wordpress/compose'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { closeSmall } from '@wordpress/icons'; import { ESCAPE } from '@wordpress/keycodes'; -import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -26,12 +25,6 @@ export default function ListViewSidebar() { const focusOnMountRef = useFocusOnMount( 'firstElement' ); const headerFocusReturnRef = useFocusReturn(); const contentFocusReturnRef = useFocusReturn(); - const allowRightClickOverrides = useSelect( ( select ) => - select( preferencesStore ).get( - 'core/edit-site', - 'allowRightClickOverrides' - ) - ); function closeOnEscape( event ) { if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { @@ -67,9 +60,7 @@ export default function ListViewSidebar() { focusOnMountRef, ] ) } > - + ); diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 3aeda35a2ff819..01dcfb48031559 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -128,6 +128,10 @@ export const getSettings = createSelector( state, 'showIconLabels' ), + allowRightClickOverrides: !! __unstableGetPreference( + state, + 'allowRightClickOverrides' + ), __experimentalSetIsInserterOpened: setIsInserterOpen, __experimentalReusableBlocks: getReusableBlocks( state ), __experimentalPreferPatternsOnRoot: @@ -155,6 +159,7 @@ export const getSettings = createSelector( __unstableGetPreference( state, 'fixedToolbar' ), __unstableGetPreference( state, 'keepCaretInsideBlock' ), __unstableGetPreference( state, 'showIconLabels' ), + __unstableGetPreference( state, 'allowRightClickOverrides' ), getReusableBlocks( state ), getEditedPostType( state ), ] diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 0b52f841ece117..34b2fdd0c1680e 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -124,6 +124,7 @@ function useBlockEditorSettings( settings, hasTemplate ) { '__unstableGalleryWithImageBlocks', 'alignWide', 'allowedBlockTypes', + 'allowRightClickOverrides', 'bodyPlaceholder', 'canLockBlocks', 'codeEditingEnabled', From cd8d58f169b195711c89446e1a7d0aa1059584d8 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 13 May 2022 16:30:16 +1000 Subject: [PATCH 5/7] Remove unneeded whitespace change --- .../src/components/secondary-sidebar/list-view-sidebar.js | 1 - .../src/components/secondary-sidebar/list-view-sidebar.js | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js index 404afb8ceb36f6..10ee573e6257c6 100644 --- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js @@ -25,7 +25,6 @@ export default function ListViewSidebar() { const focusOnMountRef = useFocusOnMount( 'firstElement' ); const headerFocusReturnRef = useFocusReturn(); const contentFocusReturnRef = useFocusReturn(); - function closeOnEscape( event ) { if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { event.preventDefault(); diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js index d3d0359ff4f135..eaad82acafa273 100644 --- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js @@ -25,7 +25,6 @@ export default function ListViewSidebar() { const focusOnMountRef = useFocusOnMount( 'firstElement' ); const headerFocusReturnRef = useFocusReturn(); const contentFocusReturnRef = useFocusReturn(); - function closeOnEscape( event ) { if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { setIsListViewOpened( false ); From d2bc0610e8fc79ede52f91b39a96abc544b9fe93 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 13 May 2022 16:43:19 +1000 Subject: [PATCH 6/7] Update getSettings test --- packages/edit-site/src/store/test/selectors.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js index 907c2dc52eae46..feeb4ca4aca12a 100644 --- a/packages/edit-site/src/store/test/selectors.js +++ b/packages/edit-site/src/store/test/selectors.js @@ -76,6 +76,7 @@ describe( 'selectors', () => { }; const setInserterOpened = () => {}; expect( getSettings( state, setInserterOpened ) ).toEqual( { + allowRightClickOverrides: false, outlineMode: true, focusMode: false, hasFixedToolbar: false, @@ -100,6 +101,7 @@ describe( 'selectors', () => { const setInserterOpened = () => {}; expect( getSettings( state, setInserterOpened ) ).toEqual( { + allowRightClickOverrides: false, outlineMode: true, key: 'value', focusMode: true, From 3b48415787c77e9b3704b46a87986439a141ebda Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 27 May 2022 12:54:48 +1000 Subject: [PATCH 7/7] Try anchoring the position of the settings dropdown to the right click position --- .../block-settings-dropdown.js | 3 ++- .../src/components/list-view/block.js | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index 2d31b49d2ed2d6..2c7061edbbd394 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -48,6 +48,7 @@ export function BlockSettingsDropdown( { clientIds, __experimentalSelectBlock, children, + popoverProps, ...props } ) { const blockClientIds = castArray( clientIds ); @@ -195,7 +196,7 @@ export function BlockSettingsDropdown( { icon={ moreVertical } label={ __( 'Options' ) } className="block-editor-block-settings-menu" - popoverProps={ POPOVER_PROPS } + popoverProps={ { ...POPOVER_PROPS, ...popoverProps } } noIcons { ...props } > diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 53cda3c5621434..7bb9f292be0f0f 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -58,6 +58,7 @@ function ListViewBlock( { const cellRef = useRef( null ); const settingsRef = useRef( null ); const [ isHovered, setIsHovered ] = useState( false ); + const [ settingsAnchorRect, setSettingsAnchorRect ] = useState(); const { clientId } = block; const isFirstSelectedBlock = isSelected && selectedClientIds[ 0 ] === clientId; @@ -183,11 +184,21 @@ function ListViewBlock( { // Allow right-clicking an item in the List View to open up the block settings dropdown. const onContextMenu = useCallback( ( event ) => { if ( showBlockActions && allowRightClickOverrides ) { - event.preventDefault(); settingsRef.current?.click(); + // Ensure the position of the settings dropdown is at the cursor. + setSettingsAnchorRect( + new window.DOMRect( event.clientX, event.clientY, 0, 0 ) + ); + event.preventDefault(); } } ); + const clearSettingsAnchorRect = useCallback( () => { + // Clear the custom position for the settings dropdown so that it is restored back + // to being anchored to the DropdownMenu toggle button. + setSettingsAnchorRect( undefined ); + } ); + let colSpan; if ( hasRenderedMovers ) { colSpan = 2; @@ -307,10 +318,14 @@ function ListViewBlock( { clientIds={ dropdownClientIds } icon={ moreVertical } label={ settingsAriaLabel } + popoverProps={ { + anchorRect: settingsAnchorRect, // Used to position the settings at the cursor on right-click. + } } toggleProps={ { ref, className: 'block-editor-list-view-block__menu', tabIndex, + onClick: clearSettingsAnchorRect, onFocus, } } disableOpenOnArrowDown