-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Site Editor: Add navigation panel with placeholder content (#25506)
- Loading branch information
1 parent
bc4304a
commit 50d996a
Showing
13 changed files
with
392 additions
and
68 deletions.
There are no files selected for viewing
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
78 changes: 78 additions & 0 deletions
78
packages/edit-site/src/components/header/navigation-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,78 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { Button, Icon } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { wordpress } from '@wordpress/icons'; | ||
|
|
||
| function NavigationToggle( { icon, isOpen, onClick } ) { | ||
| const { | ||
| isActive, | ||
| isRequestingSiteIcon, | ||
| siteIconUrl, | ||
| siteTitle, | ||
| } = useSelect( ( select ) => { | ||
| const { isFeatureActive } = select( 'core/edit-site' ); | ||
| const { getEntityRecord } = select( 'core' ); | ||
| const { isResolving } = select( 'core/data' ); | ||
| const siteData = | ||
| getEntityRecord( 'root', '__unstableBase', undefined ) || {}; | ||
|
|
||
| return { | ||
| isActive: isFeatureActive( 'fullscreenMode' ), | ||
| isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [ | ||
| 'root', | ||
| '__unstableBase', | ||
| undefined, | ||
| ] ), | ||
| siteIconUrl: siteData.site_icon_url, | ||
| siteTitle: siteData.name, | ||
| }; | ||
| }, [] ); | ||
|
|
||
| if ( ! isActive ) { | ||
| return null; | ||
| } | ||
|
|
||
| let buttonIcon = <Icon size="32px" icon={ wordpress } />; | ||
|
|
||
| if ( siteIconUrl ) { | ||
| buttonIcon = ( | ||
| <img | ||
| alt={ __( 'Site Icon' ) } | ||
| className="edit-site-navigation-toggle__site-icon" | ||
| src={ siteIconUrl } | ||
| /> | ||
| ); | ||
| } else if ( isRequestingSiteIcon ) { | ||
| buttonIcon = null; | ||
| } else if ( icon ) { | ||
| buttonIcon = <Icon size="32px" icon={ icon } />; | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className={ | ||
| 'edit-site-navigation-toggle' + ( isOpen ? ' is-open' : '' ) | ||
| } | ||
| > | ||
| <Button | ||
| className="edit-site-navigation-toggle__button has-icon" | ||
| label={ __( 'Toggle navigation' ) } | ||
| onClick={ onClick } | ||
| showTooltip | ||
| > | ||
| { buttonIcon } | ||
| </Button> | ||
|
|
||
| { isOpen && ( | ||
| <div className="edit-site-navigation-toggle__site-title"> | ||
| { siteTitle } | ||
| </div> | ||
| ) } | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default NavigationToggle; |
47 changes: 47 additions & 0 deletions
47
packages/edit-site/src/components/header/navigation-toggle/style.scss
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,47 @@ | ||
| .edit-site-navigation-toggle { | ||
| display: none; | ||
|
|
||
| @include break-medium() { | ||
| display: flex; | ||
| align-items: center; | ||
| background-color: #1e1e1e; | ||
| height: 61px; | ||
| border-radius: 0; | ||
| } | ||
| } | ||
|
|
||
| .edit-site-navigation-toggle.is-open { | ||
| width: 300px; | ||
| } | ||
|
|
||
| .edit-site-navigation-toggle__button { | ||
| color: #fff; | ||
| margin-left: 14px; | ||
| margin-right: 14px; | ||
|
|
||
| &:hover { | ||
| color: #ddd; | ||
| } | ||
| } | ||
|
|
||
| .edit-site-navigation-toggle.components-button.has-icon { | ||
| justify-content: flex-start; | ||
| padding: 0; | ||
| height: 32px; | ||
| width: 32px; | ||
| min-width: 32px; | ||
| } | ||
|
|
||
| .edit-site-navigation-toggle__site-title { | ||
| font-style: normal; | ||
| font-weight: 600; | ||
| font-size: 13px; | ||
| line-height: 16px; | ||
| color: #ddd; | ||
| margin-right: 14px; | ||
|
|
||
| display: -webkit-box; | ||
| -webkit-line-clamp: 2; | ||
| -webkit-box-orient: vertical; | ||
| overflow: hidden; | ||
| } |
66 changes: 66 additions & 0 deletions
66
packages/edit-site/src/components/header/navigation-toggle/test/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,66 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render } from '@testing-library/react'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import NavigationToggle from '..'; | ||
|
|
||
| jest.mock( '@wordpress/data/src/components/use-select', () => { | ||
| // This allows us to tweak the returned value on each test | ||
| const mock = jest.fn(); | ||
| return mock; | ||
| } ); | ||
|
|
||
| jest.mock( '@wordpress/core-data' ); | ||
|
|
||
| describe( 'NavigationToggle', () => { | ||
| describe( 'when in full screen mode', () => { | ||
| it( 'should display a user uploaded site icon if it exists', () => { | ||
| useSelect.mockImplementation( ( cb ) => { | ||
| return cb( () => ( { | ||
| isResolving: () => false, | ||
| isFeatureActive: () => true, | ||
| getEntityRecord: () => ( { | ||
| site_icon_url: 'https://fakeUrl.com', | ||
| } ), | ||
| } ) ); | ||
| } ); | ||
|
|
||
| const { container } = render( <NavigationToggle /> ); | ||
| const siteIcon = container.querySelector( | ||
| '.edit-site-navigation-toggle__site-icon' | ||
| ); | ||
|
|
||
| expect( siteIcon ).toBeTruthy(); | ||
| } ); | ||
|
|
||
| it( 'should display a default site icon if no user uploaded site icon exists', () => { | ||
| useSelect.mockImplementation( ( cb ) => { | ||
| return cb( () => ( { | ||
| isResolving: () => false, | ||
| isFeatureActive: () => true, | ||
| getEntityRecord: () => ( { | ||
| site_icon_url: '', | ||
| } ), | ||
| } ) ); | ||
| } ); | ||
|
|
||
| const { container } = render( <NavigationToggle /> ); | ||
| const siteIcon = container.querySelector( | ||
| '.edit-site-navigation-toggle__site-icon' | ||
| ); | ||
| const defaultIcon = container.querySelector( 'svg' ); | ||
|
|
||
| expect( siteIcon ).toBeFalsy(); | ||
| expect( defaultIcon ).toBeTruthy(); | ||
| } ); | ||
| } ); | ||
| } ); |
Oops, something went wrong.