Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Site editor]: Lower emphasis on style variations in navigation sidebar #51964

Closed
wants to merge 3 commits into from
Closed

[Site editor]: Lower emphasis on style variations in navigation sidebar #51964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a3ceb0d
[Site editor]: Lower emphasis on style variations in navigation sidebar
ntsekouras Jun 27, 2023
63adb0e
update label to `Edit styles`
ntsekouras Jun 27, 2023
f925c7b
keep turning dfm when opening global styles
ntsekouras Jun 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen-browse-global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { BlockEditorProvider } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import StyleVariationsContainer from '../global-styles/style-variations-container';
import SidebarNavigationScreen from '../sidebar-navigation-screen';

const noop = () => {};

export default function SidebarNavigationScreenBrowseGlobalStyles() {
const { storedSettings } = useSelect( ( select ) => {
const { getSettings } = unlock( select( editSiteStore ) );

return {
storedSettings: getSettings( false ),
};
}, [] );
return (
<SidebarNavigationScreen
title={ __( 'Browse styles' ) }
description={ __(
'Choose a different style combination for the theme styles.'
) }
content={
// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
// loaded. This is necessary because the Iframe component waits until
// the block editor store's `__internalIsInitialized` is true before
// rendering the iframe. Without this, the iframe previews will not render
// in mobile viewport sizes, where the editor canvas is hidden.
<BlockEditorProvider
settings={ storedSettings }
onChange={ noop }
onInput={ noop }
>
<StyleVariationsContainer />
</BlockEditorProvider>
}
/>
);
}
186 changes: 75 additions & 111 deletions packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,103 +2,33 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { backup, edit, seen } from '@wordpress/icons';
import { backup, styles, seen, brush } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import {
Icon,
__experimentalNavigatorButton as NavigatorButton,
__experimentalItemGroup as ItemGroup,
__experimentalVStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { store as noticesStore } from '@wordpress/notices';
import { store as preferencesStore } from '@wordpress/preferences';
import { useViewportMatch } from '@wordpress/compose';
import { BlockEditorProvider } from '@wordpress/block-editor';
import { humanTimeDiff } from '@wordpress/date';
import { useCallback } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';

/**
* Internal dependencies
*/
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import StyleVariationsContainer from '../global-styles/style-variations-container';
import { useLink } from '../routes/link';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import SidebarButton from '../sidebar-button';
import SidebarNavigationItem from '../sidebar-navigation-item';
import StyleBook from '../style-book';
import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';

const noop = () => {};

export function SidebarNavigationItemGlobalStyles( props ) {
const { openGeneralSidebar, toggleFeature } = useDispatch( editSiteStore );
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
const { createNotice } = useDispatch( noticesStore );
const hasGlobalStyleVariations = useSelect(
( select ) =>
!! select(
coreStore
).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
[]
);
if ( hasGlobalStyleVariations ) {
return (
<NavigatorButton
{ ...props }
as={ SidebarNavigationItem }
path="/wp_global_styles"
/>
);
}
return (
<SidebarNavigationItem
{ ...props }
onClick={ () => {
// Disable distraction free mode.
toggleFeature( 'distractionFree', false );
createNotice(
'info',
__( 'Distraction free mode turned off' ),
{
isDismissible: true,
type: 'snackbar',
}
);
// Switch to edit mode.
setCanvasMode( 'edit' );
// Open global styles sidebar.
openGeneralSidebar( 'edit-site/global-styles' );
} }
/>
);
}

function SidebarNavigationScreenGlobalStylesContent() {
const { storedSettings } = useSelect( ( select ) => {
const { getSettings } = unlock( select( editSiteStore ) );

return {
storedSettings: getSettings( false ),
};
}, [] );

// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
// loaded. This is necessary because the Iframe component waits until
// the block editor store's `__internalIsInitialized` is true before
// rendering the iframe. Without this, the iframe previews will not render
// in mobile viewport sizes, where the editor canvas is hidden.
return (
<BlockEditorProvider
settings={ storedSettings }
onChange={ noop }
onInput={ noop }
>
<StyleVariationsContainer />
</BlockEditorProvider>
);
}

function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
const { revisions, isLoading } = useGlobalStylesRevisions();
const { revisionsCount } = useSelect( ( select ) => {
Expand Down Expand Up @@ -155,26 +85,49 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
export default function SidebarNavigationScreenGlobalStyles() {
const { openGeneralSidebar, setIsListViewOpened } =
useDispatch( editSiteStore );
const { createInfoNotice } = useDispatch( noticesStore );
const { set: setPreference } = useDispatch( preferencesStore );
const isMobileViewport = useViewportMatch( 'medium', '<' );
const { setCanvasMode, setEditorCanvasContainerView } = unlock(
useDispatch( editSiteStore )
);
const browseStylesLink = useLink( {
path: '/wp_global_styles/browseStyles',
} );
const { isStyleBookOpened, hasGlobalStyleVariations, isDistractionFree } =
useSelect(
( select ) => ( {
isStyleBookOpened:
'style-book' ===
unlock(
select( editSiteStore )
).getEditorCanvasContainerView(),
hasGlobalStyleVariations:
!! select(
coreStore
).__experimentalGetCurrentThemeGlobalStylesVariations()
?.length,
isDistractionFree: select( preferencesStore ).get(
editSiteStore.name,
'distractionFree'
),
} ),
[]
);

const isStyleBookOpened = useSelect(
( select ) =>
'style-book' ===
unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
[]
);

const openGlobalStyles = useCallback(
async () =>
Promise.all( [
setCanvasMode( 'edit' ),
openGeneralSidebar( 'edit-site/global-styles' ),
] ),
[ setCanvasMode, openGeneralSidebar ]
);
const openGlobalStyles = useCallback( async () => {
// Disable distraction free mode.
if ( isDistractionFree ) {
setPreference( editSiteStore.name, 'distractionFree', false );
draganescu marked this conversation as resolved.
Show resolved Hide resolved
createInfoNotice( __( 'Distraction free mode turned off.' ), {
type: 'snackbar',
} );
}
return Promise.all( [
setCanvasMode( 'edit' ),
openGeneralSidebar( 'edit-site/global-styles' ),
] );
}, [ setCanvasMode, openGeneralSidebar, isDistractionFree ] );

const openStyleBook = useCallback( async () => {
await openGlobalStyles();
Expand Down Expand Up @@ -203,36 +156,47 @@ export default function SidebarNavigationScreenGlobalStyles() {
<SidebarNavigationScreen
title={ __( 'Styles' ) }
description={ __(
'Choose a different style combination for the theme styles.'
'Customize the visual styles of your entire website.'
) }
content={ <SidebarNavigationScreenGlobalStylesContent /> }
content={
<ItemGroup>
{ hasGlobalStyleVariations && (
<SidebarNavigationItem
icon={ brush }
withChevron
{ ...browseStylesLink }
>
{ __( 'Browse styles' ) }
</SidebarNavigationItem>
) }
<SidebarNavigationItem
icon={ styles }
onClick={ openGlobalStyles }
>
{ __( 'Edit styles' ) }
</SidebarNavigationItem>
</ItemGroup>
}
footer={
<SidebarNavigationScreenGlobalStylesFooter
onClickRevisions={ openRevisions }
/>
}
actions={
<>
{ ! isMobileViewport && (
<SidebarButton
icon={ seen }
label={ __( 'Style Book' ) }
onClick={ () =>
setEditorCanvasContainerView(
! isStyleBookOpened
? 'style-book'
: undefined
)
}
isPressed={ isStyleBookOpened }
/>
) }
! isMobileViewport && (
<SidebarButton
icon={ edit }
label={ __( 'Edit styles' ) }
onClick={ async () => await openGlobalStyles() }
icon={ seen }
label={ __( 'Style Book' ) }
onClick={ () =>
setEditorCanvasContainerView(
! isStyleBookOpened
? 'style-book'
: undefined
)
}
isPressed={ isStyleBookOpened }
/>
</>
)
}
/>
{ isStyleBookOpened && ! isMobileViewport && (
Expand Down
7 changes: 4 additions & 3 deletions packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { useEffect } from '@wordpress/element';
*/
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import SidebarNavigationItem from '../sidebar-navigation-item';
import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';

Expand Down Expand Up @@ -51,12 +50,14 @@ export default function SidebarNavigationScreenMain() {
>
{ __( 'Navigation' ) }
</NavigatorButton>
<SidebarNavigationItemGlobalStyles
<NavigatorButton
as={ SidebarNavigationItem }
path="/wp_global_styles"
withChevron
icon={ styles }
>
{ __( 'Styles' ) }
</SidebarNavigationItemGlobalStyles>
</NavigatorButton>
<NavigatorButton
as={ SidebarNavigationItem }
path="/page"
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-site/src/components/sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen
import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
import SidebarNavigationScreenBrowseGlobalStyles from '../sidebar-navigation-screen-browse-global-styles';
import SaveHub from '../save-hub';
import { unlock } from '../../lock-unlock';
import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
Expand All @@ -47,6 +48,9 @@ function SidebarScreens() {
<NavigatorScreen path="/wp_global_styles">
<SidebarNavigationScreenGlobalStyles />
</NavigatorScreen>
<NavigatorScreen path="/wp_global_styles/browseStyles">
<SidebarNavigationScreenBrowseGlobalStyles />
</NavigatorScreen>
<NavigatorScreen path="/page">
<SidebarNavigationScreenPages />
</NavigatorScreen>
Expand Down