Skip to content

Commit

Permalink
Fix navigate regions shortcuts on the back button WP logo slot (#63611)
Browse files Browse the repository at this point in the history
* Avoid to pass unnecessary props to useNavigateRegions.

* Remove bubblesVirtually from WP logo slot.

* Restore bubblesVirtually.

* Move useNavigateRegions to an outermost ancestor.

* Remove no longer used enableRegionNavigation prop.

* Add changelog entry

---------

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
  • Loading branch information
7 people committed Oct 14, 2024
1 parent 12a7294 commit b765124
Show file tree
Hide file tree
Showing 8 changed files with 79 additions and 116 deletions.
89 changes: 49 additions & 40 deletions packages/edit-post/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import {
SlotFillProvider,
Tooltip,
VisuallyHidden,
__unstableUseNavigateRegions as useNavigateRegions,
} from '@wordpress/components';
import {
useMediaQuery,
Expand Down Expand Up @@ -480,6 +481,8 @@ function Layout( {
document.body.classList.remove( 'show-icon-labels' );
}

const navigateRegionsProps = useNavigateRegions();

const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
'has-metaboxes': hasActiveMetaboxes,
} );
Expand Down Expand Up @@ -565,47 +568,53 @@ function Layout( {
<ErrorBoundary>
<CommandMenu />
<WelcomeGuide postType={ currentPostType } />
<Editor
settings={ editorSettings }
initialEdits={ initialEdits }
postType={ currentPostType }
postId={ currentPostId }
templateId={ templateId }
className={ className }
styles={ styles }
forceIsDirty={ hasActiveMetaboxes }
contentRef={ paddingAppenderRef }
disableIframe={ ! shouldIframe }
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={ ! isWelcomeGuideVisible }
onActionPerformed={ onActionPerformed }
extraSidebarPanels={
showMetaBoxes && <MetaBoxes location="side" />
}
extraContent={
! isDistractionFree &&
showMetaBoxes && (
<MetaBoxesMain isLegacy={ ! shouldIframe } />
)
}
<div
className={ navigateRegionsProps.className }
{ ...navigateRegionsProps }
ref={ navigateRegionsProps.ref }
>
<PostLockedModal />
<EditorInitialization />
<FullscreenMode isActive={ isFullscreenActive } />
<BrowserURL hasHistory={ hasHistory } />
<UnsavedChangesWarning />
<AutosaveMonitor />
<LocalAutosaveMonitor />
<EditPostKeyboardShortcuts />
<EditorKeyboardShortcutsRegister />
<BlockKeyboardShortcuts />
<InitPatternModal />
<PluginArea onError={ onPluginAreaError } />
<PostEditorMoreMenu />
{ backButton }
<EditorSnackbars />
</Editor>
<Editor
settings={ editorSettings }
initialEdits={ initialEdits }
postType={ currentPostType }
postId={ currentPostId }
templateId={ templateId }
className={ className }
styles={ styles }
forceIsDirty={ hasActiveMetaboxes }
contentRef={ paddingAppenderRef }
disableIframe={ ! shouldIframe }
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={ ! isWelcomeGuideVisible }
onActionPerformed={ onActionPerformed }
extraSidebarPanels={
showMetaBoxes && <MetaBoxes location="side" />
}
extraContent={
! isDistractionFree &&
showMetaBoxes && (
<MetaBoxesMain isLegacy={ ! shouldIframe } />
)
}
>
<PostLockedModal />
<EditorInitialization />
<FullscreenMode isActive={ isFullscreenActive } />
<BrowserURL hasHistory={ hasHistory } />
<UnsavedChangesWarning />
<AutosaveMonitor />
<LocalAutosaveMonitor />
<EditPostKeyboardShortcuts />
<EditorKeyboardShortcutsRegister />
<BlockKeyboardShortcuts />
<InitPatternModal />
<PluginArea onError={ onPluginAreaError } />
<PostEditorMoreMenu />
{ backButton }
<EditorSnackbars />
</Editor>
</div>
</ErrorBoundary>
</SlotFillProvider>
);
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
'show-icon-labels': showIconLabels,
} ) }
styles={ styles }
enableRegionNavigation={ false }
customSaveButton={
_isPreviewingTheme && <SaveButton size="compact" />
}
Expand Down
30 changes: 7 additions & 23 deletions packages/edit-site/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
} from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { useState, useRef, useEffect } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { CommandMenu } from '@wordpress/commands';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import {
Expand Down Expand Up @@ -57,28 +56,13 @@ export default function Layout( { route } ) {
useCommands();
const isMobileViewport = useViewportMatch( 'medium', '<' );
const toggleRef = useRef();
const { canvasMode, previousShortcut, nextShortcut } = useSelect(
( select ) => {
const { getAllShortcutKeyCombinations } = select(
keyboardShortcutsStore
);
const { getCanvasMode } = unlock( select( editSiteStore ) );
return {
canvasMode: getCanvasMode(),
previousShortcut: getAllShortcutKeyCombinations(
'core/editor/previous-region'
),
nextShortcut: getAllShortcutKeyCombinations(
'core/editor/next-region'
),
};
},
[]
);
const navigateRegionsProps = useNavigateRegions( {
previous: previousShortcut,
next: nextShortcut,
} );
const { canvasMode } = useSelect( ( select ) => {
const { getCanvasMode } = unlock( select( editSiteStore ) );
return {
canvasMode: getCanvasMode(),
};
}, [] );
const navigateRegionsProps = useNavigateRegions();
const disableMotion = useReducedMotion();
const [ canvasResizer, canvasSize ] = useResizeObserver();
const isEditorLoading = useIsSiteEditorLoading();
Expand Down
25 changes: 17 additions & 8 deletions packages/edit-widgets/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { PluginArea } from '@wordpress/plugins';
import { store as noticesStore } from '@wordpress/notices';
import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -31,17 +32,25 @@ function Layout( { blockEditorSettings } ) {
);
}

const navigateRegionsProps = useNavigateRegions();

return (
<ErrorBoundary>
<WidgetAreasBlockEditorProvider
blockEditorSettings={ blockEditorSettings }
<div
className={ navigateRegionsProps.className }
{ ...navigateRegionsProps }
ref={ navigateRegionsProps.ref }
>
<Interface blockEditorSettings={ blockEditorSettings } />
<Sidebar />
<PluginArea onError={ onPluginAreaError } />
<UnsavedChangesWarning />
<WelcomeGuide />
</WidgetAreasBlockEditorProvider>
<WidgetAreasBlockEditorProvider
blockEditorSettings={ blockEditorSettings }
>
<Interface blockEditorSettings={ blockEditorSettings } />
<Sidebar />
<PluginArea onError={ onPluginAreaError } />
<UnsavedChangesWarning />
<WelcomeGuide />
</WidgetAreasBlockEditorProvider>
</div>
</ErrorBoundary>
);
}
Expand Down
15 changes: 0 additions & 15 deletions packages/edit-widgets/src/components/layout/interface.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
store as interfaceStore,
} from '@wordpress/interface';
import { __ } from '@wordpress/i18n';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { store as preferencesStore } from '@wordpress/preferences';

/**
Expand Down Expand Up @@ -43,8 +42,6 @@ function Interface( { blockEditorSettings } ) {
hasSidebarEnabled,
isInserterOpened,
isListViewOpened,
previousShortcut,
nextShortcut,
} = useSelect(
( select ) => ( {
hasSidebarEnabled: !! select(
Expand All @@ -56,14 +53,6 @@ function Interface( { blockEditorSettings } ) {
'core/edit-widgets',
'showBlockBreadcrumbs'
),
previousShortcut: select(
keyboardShortcutsStore
).getAllShortcutKeyCombinations(
'core/edit-widgets/previous-region'
),
nextShortcut: select(
keyboardShortcutsStore
).getAllShortcutKeyCombinations( 'core/edit-widgets/next-region' ),
} ),
[]
);
Expand Down Expand Up @@ -112,10 +101,6 @@ function Interface( { blockEditorSettings } ) {
</div>
)
}
shortcuts={ {
previous: previousShortcut,
next: nextShortcut,
} }
/>
);
}
Expand Down
15 changes: 0 additions & 15 deletions packages/editor/src/components/editor-interface/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
BlockBreadcrumb,
BlockToolbar,
} from '@wordpress/block-editor';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useViewportMatch } from '@wordpress/compose';
import { useState, useCallback } from '@wordpress/element';

Expand Down Expand Up @@ -49,7 +48,6 @@ const interfaceLabels = {

export default function EditorInterface( {
className,
enableRegionNavigation,
styles,
children,
forceIsDirty,
Expand All @@ -69,8 +67,6 @@ export default function EditorInterface( {
isListViewOpened,
isDistractionFree,
isPreviewMode,
previousShortcut,
nextShortcut,
showBlockBreadcrumbs,
documentLabel,
isZoomOut,
Expand All @@ -88,12 +84,6 @@ export default function EditorInterface( {
isListViewOpened: select( editorStore ).isListViewOpened(),
isDistractionFree: get( 'core', 'distractionFree' ),
isPreviewMode: editorSettings.__unstableIsPreviewMode,
previousShortcut: select(
keyboardShortcutsStore
).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
nextShortcut: select(
keyboardShortcutsStore
).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
// translators: Default label for the Document in the Block Breadcrumb.
documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
Expand Down Expand Up @@ -121,7 +111,6 @@ export default function EditorInterface( {

return (
<InterfaceSkeleton
enableRegionNavigation={ enableRegionNavigation }
isDistractionFree={ isDistractionFree }
className={ clsx( 'editor-editor-interface', className, {
'is-entity-save-view-open': !! entitiesSavedStatesCallback,
Expand Down Expand Up @@ -231,10 +220,6 @@ export default function EditorInterface( {
)
: undefined
}
shortcuts={ {
previous: previousShortcut,
next: nextShortcut,
} }
/>
);
}
6 changes: 5 additions & 1 deletion packages/interface/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->

## Unreleased
## 6.8.6 (2024-10-14)

### Bug fix

- `InterfaceSkeleton` no longer supports region navigation and its props `enableRegionNavigation` and `shortcuts` are removed. ([#63611](https://github.com/WordPress/gutenberg/pull/63611)). It’s recommended to add region navigation with the higher-order component `navigateRegions` or the hook `__unstableUseNavigateRegions` from `@wordpress/components`.

## 6.8.0 (2024-09-19)

Expand Down
14 changes: 1 addition & 13 deletions packages/interface/src/components/interface-skeleton/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,11 @@ import clsx from 'clsx';
*/
import { forwardRef, useEffect } from '@wordpress/element';
import {
__unstableUseNavigateRegions as useNavigateRegions,
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
} from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';
import {
useMergeRefs,
useReducedMotion,
useViewportMatch,
useResizeObserver,
Expand Down Expand Up @@ -85,10 +83,6 @@ function InterfaceSkeleton(
actions,
labels,
className,
enableRegionNavigation = true,
// Todo: does this need to be a prop.
// Can we use a dependency to keyboard-shortcuts directly?
shortcuts,
},
ref
) {
Expand All @@ -101,7 +95,6 @@ function InterfaceSkeleton(
duration: disableMotion ? 0 : ANIMATION_DURATION,
ease: [ 0.6, 0, 0.4, 1 ],
};
const navigateRegionsProps = useNavigateRegions( shortcuts );
useHTMLClass( 'interface-interface-skeleton__html-container' );

const defaultLabels = {
Expand All @@ -123,15 +116,10 @@ function InterfaceSkeleton(

return (
<div
{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }
ref={ useMergeRefs( [
ref,
enableRegionNavigation ? navigateRegionsProps.ref : undefined,
] ) }
ref={ ref }
className={ clsx(
className,
'interface-interface-skeleton',
navigateRegionsProps.className,
!! footer && 'has-footer'
) }
>
Expand Down

0 comments on commit b765124

Please sign in to comment.