-
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.
Add: Styles section to the browse mode sidebar. (#49014)
- Loading branch information
1 parent
c1ca585
commit 78c4a2a
Showing
7 changed files
with
221 additions
and
130 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
136 changes: 136 additions & 0 deletions
136
packages/edit-site/src/components/global-styles/style-variations-container.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,136 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
| import fastDeepEqual from 'fast-deep-equal/es6'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { store as coreStore } from '@wordpress/core-data'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useMemo, useContext, useState } from '@wordpress/element'; | ||
| import { ENTER } from '@wordpress/keycodes'; | ||
| import { __experimentalGrid as Grid } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { mergeBaseAndUserConfigs } from './global-styles-provider'; | ||
| import StylesPreview from './preview'; | ||
| import { unlock } from '../../private-apis'; | ||
|
|
||
| const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); | ||
|
|
||
| function compareVariations( a, b ) { | ||
| return ( | ||
| fastDeepEqual( a.styles, b.styles ) && | ||
| fastDeepEqual( a.settings, b.settings ) | ||
| ); | ||
| } | ||
|
|
||
| function Variation( { variation } ) { | ||
| const [ isFocused, setIsFocused ] = useState( false ); | ||
| const { base, user, setUserConfig } = useContext( GlobalStylesContext ); | ||
| const context = useMemo( () => { | ||
| return { | ||
| user: { | ||
| settings: variation.settings ?? {}, | ||
| styles: variation.styles ?? {}, | ||
| }, | ||
| base, | ||
| merged: mergeBaseAndUserConfigs( base, variation ), | ||
| setUserConfig: () => {}, | ||
| }; | ||
| }, [ variation, base ] ); | ||
|
|
||
| const selectVariation = () => { | ||
| setUserConfig( () => { | ||
| return { | ||
| settings: variation.settings, | ||
| styles: variation.styles, | ||
| }; | ||
| } ); | ||
| }; | ||
|
|
||
| const selectOnEnter = ( event ) => { | ||
| if ( event.keyCode === ENTER ) { | ||
| event.preventDefault(); | ||
| selectVariation(); | ||
| } | ||
| }; | ||
|
|
||
| const isActive = useMemo( () => { | ||
| return compareVariations( user, variation ); | ||
| }, [ user, variation ] ); | ||
|
|
||
| return ( | ||
| <GlobalStylesContext.Provider value={ context }> | ||
| <div | ||
| className={ classnames( | ||
| 'edit-site-global-styles-variations_item', | ||
| { | ||
| 'is-active': isActive, | ||
| } | ||
| ) } | ||
| role="button" | ||
| onClick={ selectVariation } | ||
| onKeyDown={ selectOnEnter } | ||
| tabIndex="0" | ||
| aria-label={ variation?.title } | ||
| aria-current={ isActive } | ||
| onFocus={ () => setIsFocused( true ) } | ||
| onBlur={ () => setIsFocused( false ) } | ||
| > | ||
| <div className="edit-site-global-styles-variations_item-preview"> | ||
| <StylesPreview | ||
| label={ variation?.title } | ||
| isFocused={ isFocused } | ||
| withHoverView | ||
| /> | ||
| </div> | ||
| </div> | ||
| </GlobalStylesContext.Provider> | ||
| ); | ||
| } | ||
|
|
||
| export default function StyleVariationsContainer() { | ||
| const { variations } = useSelect( ( select ) => { | ||
| return { | ||
| variations: | ||
| select( | ||
| coreStore | ||
| ).__experimentalGetCurrentThemeGlobalStylesVariations() || [], | ||
| }; | ||
| }, [] ); | ||
|
|
||
| const withEmptyVariation = useMemo( () => { | ||
| return [ | ||
| { | ||
| title: __( 'Default' ), | ||
| settings: {}, | ||
| styles: {}, | ||
| }, | ||
| ...variations.map( ( variation ) => ( { | ||
| ...variation, | ||
| settings: variation.settings ?? {}, | ||
| styles: variation.styles ?? {}, | ||
| } ) ), | ||
| ]; | ||
| }, [ variations ] ); | ||
|
|
||
| return ( | ||
| <> | ||
| <Grid | ||
| columns={ 2 } | ||
| className="edit-site-global-styles-style-variations-container" | ||
| > | ||
| { withEmptyVariation?.map( ( variation, index ) => ( | ||
| <Variation key={ index } variation={ variation } /> | ||
| ) ) } | ||
| </Grid> | ||
| </> | ||
| ); | ||
| } |
41 changes: 41 additions & 0 deletions
41
packages/edit-site/src/components/sidebar-navigation-screen-global-styles/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,41 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { edit } from '@wordpress/icons'; | ||
| import { useDispatch } from '@wordpress/data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import SidebarNavigationScreen from '../sidebar-navigation-screen'; | ||
| import StyleVariationsContainer from '../global-styles/style-variations-container'; | ||
| import { unlock } from '../../private-apis'; | ||
| import { store as editSiteStore } from '../../store'; | ||
| import SidebarButton from '../sidebar-button'; | ||
|
|
||
| export default function SidebarNavigationScreenGlobalStyles() { | ||
| const { openGeneralSidebar } = useDispatch( editSiteStore ); | ||
| const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); | ||
| return ( | ||
| <SidebarNavigationScreen | ||
| title={ __( 'Styles' ) } | ||
| description={ __( | ||
| 'Choose a different style combination for the theme styles.' | ||
| ) } | ||
| content={ <StyleVariationsContainer /> } | ||
| actions={ | ||
| <SidebarButton | ||
| icon={ edit } | ||
| label={ __( 'Edit styles' ) } | ||
| onClick={ () => { | ||
| // switch to edit mode. | ||
| setCanvasMode( 'edit' ); | ||
| // open global styles sidebar. | ||
| openGeneralSidebar( 'edit-site/global-styles' ); | ||
| } } | ||
| /> | ||
| } | ||
| /> | ||
| ); | ||
| } |
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
Oops, something went wrong.