Skip to content

Commit

Permalink
Add: Styles section to the browse mode sidebar. (#49014)
Browse files Browse the repository at this point in the history
  • Loading branch information
jorgefilipecosta authored Mar 31, 2023
1 parent c1ca585 commit 78c4a2a
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 130 deletions.
2 changes: 2 additions & 0 deletions packages/base-styles/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,8 @@ $z-layers: (
".edit-site-layout__canvas-container": 2,
".edit-site-layout__sidebar": 1,
".edit-site-layout__canvas-container.is-resizing::after": 100,
// Title needs to appear above other UI the section content.
".edit-site-sidebar-navigation-screen__title-icon": 1,
);

@function z-index( $key ) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,143 +1,25 @@
/**
* 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, useDispatch } from '@wordpress/data';
import {
useMemo,
useContext,
useState,
useEffect,
useRef,
} from '@wordpress/element';
import { ENTER } from '@wordpress/keycodes';
import {
__experimentalGrid as Grid,
Card,
CardBody,
} from '@wordpress/components';
import { Card, CardBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
store as blockEditorStore,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useEffect, useRef } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';

/**
* Internal dependencies
*/
import { mergeBaseAndUserConfigs } from './global-styles-provider';
import StylesPreview from './preview';
import ScreenHeader from './header';
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>
);
}
import StyleVariationsContainer from './style-variations-container';

function ScreenStyleVariations() {
const { variations, mode } = useSelect( ( select ) => {
const { mode } = useSelect( ( select ) => {
return {
variations:
select(
coreStore
).__experimentalGetCurrentThemeGlobalStylesVariations(),

mode: select( blockEditorStore ).__unstableGetEditorMode(),
};
}, [] );

const withEmptyVariation = useMemo( () => {
return [
{
title: __( 'Default' ),
settings: {},
styles: {},
},
...variations.map( ( variation ) => ( {
...variation,
settings: variation.settings ?? {},
styles: variation.styles ?? {},
} ) ),
];
}, [ variations ] );

const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
const shouldRevertInitialMode = useRef( null );
useEffect( () => {
// ignore changes to zoom-out mode as we explictily change to it on mount.
Expand All @@ -160,8 +42,11 @@ function ScreenStyleVariations() {
}
};
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [] );

const { __unstableSetEditorMode } = useDispatch( blockEditorStore );

return (
<>
<ScreenHeader
Expand All @@ -178,11 +63,7 @@ function ScreenStyleVariations() {
className="edit-site-global-styles-screen-style-variations"
>
<CardBody>
<Grid columns={ 2 }>
{ withEmptyVariation?.map( ( variation, index ) => (
<Variation key={ index } variation={ variation } />
) ) }
</Grid>
<StyleVariationsContainer />
</CardBody>
</Card>
</>
Expand Down
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>
</>
);
}
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' );
} }
/>
}
/>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
__experimentalNavigatorButton as NavigatorButton,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { layout, symbolFilled, navigation } from '@wordpress/icons';
import { layout, symbolFilled, navigation, styles } from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

Expand Down Expand Up @@ -56,6 +56,14 @@ export default function SidebarNavigationScreenMain() {
{ __( 'Navigation' ) }
</NavigatorButton>
) }
<NavigatorButton
as={ SidebarNavigationItem }
path="/wp_global_styles"
withChevron
icon={ styles }
>
{ __( 'Styles' ) }
</NavigatorButton>
<NavigatorButton
as={ SidebarNavigationItem }
path="/wp_template"
Expand Down
Loading

0 comments on commit 78c4a2a

Please sign in to comment.