-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Fullscreen Mode: Change the "Back" button to toggle the sidebar #21121
Merged
Merged
Changes from all commits
Commits
Show all changes
24 commits
Select commit
Hold shift + click to select a range
3428949
A quick and dirty try at making the wp-admin sidebar accessible while…
shaunandrews fa9c5ce
Back to the dark background by default, and accounting for the `folde…
shaunandrews ccfdb6e
Making the WP logo just a little smaller.
shaunandrews 3b04e76
Improve interaction handling for Navigation menu logo
06925b2
Adjust click outside to close logic
76824a9
A quick and dirty try at making the wp-admin sidebar accessible while…
shaunandrews e435096
Fix SVG color and pointer events
d0cb8f3
Rename fullscreen-mode-close to admin-menu-toggle
3b2e3a3
Fix classNames and imports for renamed admin-menu-toggle
13b2cb6
Focus Admin Menu on TAB press when open
4f85339
Make sure the top toolbar moves when the menu is opened.
shaunandrews 28efc8e
Adjusting focus state to use new line-width, making the button a litt…
shaunandrews 746f9e6
Improve admin menu keyboard navigation in open/close states
87ff44b
Updating classNames after a rebase.
shaunandrews f134242
Moving to toggle button from edit-post into the interface package so …
shaunandrews 3946045
Oops, forgot to remove this.
shaunandrews baab65c
Updating classnames.
shaunandrews 96e2d94
Replacing the FullscreenModeClose component with the new AdminMenuTog…
shaunandrews e1ff1cd
Removing the .js selector.
shaunandrews 70d046d
Moving the display logic out of the component and into the places whe…
shaunandrews e5ce2f6
Update package-lock and e2e test
edb8102
Refactor event bindings in relation to state within admin-menu-toggle
84a3da5
Refactoring the transition to avoid a display bug in Safari.
shaunandrews d55ad2c
Update package-lock.json
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 0 additions & 44 deletions
44
packages/edit-post/src/components/header/fullscreen-mode-close/index.js
This file was deleted.
Oops, something went wrong.
29 changes: 0 additions & 29 deletions
29
packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 0 additions & 35 deletions
35
packages/edit-site/src/components/header/fullscreen-mode-close/index.js
This file was deleted.
Oops, something went wrong.
29 changes: 0 additions & 29 deletions
29
packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 105 additions & 0 deletions
105
packages/interface/src/components/admin-menu-toggle/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Button } from '@wordpress/components'; | ||
import { useRef, useEffect, useState } from '@wordpress/element'; | ||
import { ESCAPE, TAB } from '@wordpress/keycodes'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { wordpress } from '@wordpress/icons'; | ||
|
||
function AdminMenuToggle() { | ||
const buttonRef = useRef(); | ||
const toggleMenu = useToggle( { ref: buttonRef } ); | ||
|
||
return ( | ||
<Button | ||
className="interface-admin-menu-toggle" | ||
icon={ wordpress } | ||
iconSize={ 36 } | ||
onClick={ toggleMenu } | ||
label={ __( 'Show sidebar menu' ) } | ||
ref={ buttonRef } | ||
/> | ||
); | ||
} | ||
|
||
function useToggle( { ref } ) { | ||
const [ isActive, setIsActive ] = useState( false ); | ||
const buttonNode = ref?.current; | ||
|
||
const adminMenuNode = document.querySelector( '#adminmenumain' ); | ||
|
||
const toggleClassName = 'is-showing-admin-menu'; | ||
|
||
const toggleAdminMenu = () => setIsActive( ! isActive ); | ||
const closeAdminMenu = () => setIsActive( false ); | ||
|
||
const focusFirstAdminMenuItem = () => { | ||
if ( ! buttonNode ) return; | ||
|
||
const isButtonFocused = buttonNode.matches( ':focus' ); | ||
const item = adminMenuNode.querySelector( '#adminmenu > li > a' ); | ||
|
||
if ( isButtonFocused && item ) { | ||
item.focus(); | ||
} | ||
}; | ||
|
||
// Renders the open/closed UI for the admin menu | ||
useEffect( () => { | ||
if ( isActive ) { | ||
document.body.classList.add( toggleClassName ); | ||
} else { | ||
document.body.classList.remove( toggleClassName ); | ||
} | ||
}, [ isActive ] ); | ||
|
||
// Handles closing the admin menu when clicking outside | ||
useEffect( () => { | ||
const handleOnClickOutside = ( event ) => { | ||
if ( ! isActive ) return; | ||
|
||
const { target } = event; | ||
|
||
const didClickOutside = | ||
! adminMenuNode.contains( target ) && target !== buttonNode; | ||
|
||
if ( didClickOutside ) { | ||
closeAdminMenu(); | ||
} | ||
}; | ||
|
||
document.body.addEventListener( 'click', handleOnClickOutside ); | ||
|
||
return () => { | ||
document.body.removeEventListener( 'click', handleOnClickOutside ); | ||
}; | ||
}, [ isActive, buttonNode ] ); | ||
|
||
// Handles admin menu keyboard interactions | ||
useEffect( () => { | ||
const handleOnKeyDown = ( event ) => { | ||
if ( ! isActive ) return; | ||
|
||
const { keyCode } = event; | ||
|
||
if ( keyCode === ESCAPE ) { | ||
closeAdminMenu(); | ||
} | ||
|
||
if ( keyCode === TAB ) { | ||
focusFirstAdminMenuItem(); | ||
} | ||
}; | ||
|
||
document.body.addEventListener( 'keydown', handleOnKeyDown ); | ||
|
||
return () => { | ||
document.body.removeEventListener( 'keydown', handleOnKeyDown ); | ||
}; | ||
}, [ isActive ] ); | ||
|
||
return toggleAdminMenu; | ||
} | ||
|
||
export default AdminMenuToggle; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know it's not a component, but the is an existing thing that collapses the admin menu. I'm not sure what it's called, but it's at the bottom of the menu. I think using the name
AdminMenuToggle
could be a bit confusing since one already exists. I'm not sure why the existing one isn't used for this fullscreen thing.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess I think of the
#collapse-button
option that exists at the bottom of the menu as a different feature; The collapse button changes the width of the admin sidebar, not the visibility.This new
AdminMenuToggle
component toggles the visibility.The two features can work together; You can collapse the admin sidebar and toggle its visibility.