Skip to content

Commit

Permalink
Styles Screen: Add link to global styles revisions (#51149)
Browse files Browse the repository at this point in the history 
* Styles Screen: Add link to global styles revisions

* Add button label

* Update packages/edit-site/src/components/global-styles/ui.js

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

* Small code quality improvements

* Try sticking the navigation screen footer to the bottom of the screen at all times

* Add as span to the HStack

* Update border radius and left padding so that the button lines up

* Remove classnames call

* Add redirect for style book, too

* Only redirect to root when opening the style book on the revisions screen

* Use truthy check for editor canvas container when redirecting from the revisions screen.

Co-authored-by: ramon <ramonjd@gmail.com>

---------

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: ramon <ramonjd@gmail.com>
  • Loading branch information
@andrewserong @ramonjd
3 people authored Jun 6, 2023
1 parent a59c1b6 commit a1d941e
Show file tree
Hide file tree
Showing 9 changed files with 222 additions and 74 deletions.
28 changes: 28 additions & 0 deletions packages/edit-site/src/components/global-styles/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,33 @@ function GlobalStylesBlockLink() {
}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
}

function GlobalStylesEditorCanvasContainerLink() {
const { goTo, location } = useNavigator();
const editorCanvasContainerView = useSelect(
( select ) =>
unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
[]
);

// If the user switches the editor canvas container view, redirect
// to the appropriate screen. This effectively allows deep linking to the
// desired screens from outside the global styles navigation provider.
useEffect( () => {
if ( editorCanvasContainerView === 'global-styles-revisions' ) {
// Switching to the revisions container view should
// redirect to the revisions screen.
goTo( '/revisions' );
} else if (
!! editorCanvasContainerView &&
location?.path === '/revisions'
) {
// Switching to any container other than revisions should
// redirect from the revisions screen to the root global styles screen.
goTo( '/' );
}
}, [ editorCanvasContainerView, location?.path, goTo ] );
}

function GlobalStylesUI() {
const blocks = getBlockTypes();
const editorCanvasContainerView = useSelect(
Expand Down Expand Up @@ -326,6 +353,7 @@ function GlobalStylesUI() {

<GlobalStylesActionMenu />
<GlobalStylesBlockLink />
<GlobalStylesEditorCanvasContainerLink />
</NavigatorProvider>
);
}
Expand Down
100 changes: 88 additions & 12 deletions packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,19 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { edit, seen } from '@wordpress/icons';
import { backup, edit, seen } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
import {
Icon,
__experimentalNavigatorButton as NavigatorButton,
__experimentalVStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { BlockEditorProvider } from '@wordpress/block-editor';
import { humanTimeDiff } from '@wordpress/date';
import { useCallback } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -19,6 +26,7 @@ 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 = () => {};

Expand Down Expand Up @@ -74,13 +82,64 @@ function SidebarNavigationScreenGlobalStylesContent() {
onChange={ noop }
onInput={ noop }
>
<div className="edit-site-sidebar-navigation-screen-global-styles__content">
<StyleVariationsContainer />
</div>
<StyleVariationsContainer />
</BlockEditorProvider>
);
}

function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
const { revisions, isLoading } = useGlobalStylesRevisions();
const { revisionsCount } = useSelect( ( select ) => {
const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
select( coreStore );

const globalStylesId = __experimentalGetCurrentGlobalStylesId();
const globalStyles = globalStylesId
? getEntityRecord( 'root', 'globalStyles', globalStylesId )
: undefined;

return {
revisionsCount:
globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
};
}, [] );

const hasRevisions = revisionsCount >= 2;
const modified = revisions?.[ 0 ]?.modified;

if ( ! hasRevisions || isLoading || ! modified ) {
return null;
}

return (
<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
<SidebarNavigationItem
className="edit-site-sidebar-navigation-screen-global-styles__revisions"
label={ __( 'Revisions' ) }
onClick={ onClickRevisions }
>
<HStack
as="span"
alignment="center"
spacing={ 5 }
direction="row"
justify="space-between"
>
<span className="edit-site-sidebar-navigation-screen-global-styles__revisions__label">
{ __( 'Last modified' ) }
</span>
<span>
<time dateTime={ modified }>
{ humanTimeDiff( modified ) }
</time>
</span>
<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
</HStack>
</SidebarNavigationItem>
</VStack>
);
}

export default function SidebarNavigationScreenGlobalStyles() {
const { openGeneralSidebar } = useDispatch( editSiteStore );
const isMobileViewport = useViewportMatch( 'medium', '<' );
Expand All @@ -95,19 +154,31 @@ export default function SidebarNavigationScreenGlobalStyles() {
[]
);

const openGlobalStyles = async () =>
Promise.all( [
setCanvasMode( 'edit' ),
openGeneralSidebar( 'edit-site/global-styles' ),
] );
const openGlobalStyles = useCallback(
async () =>
Promise.all( [
setCanvasMode( 'edit' ),
openGeneralSidebar( 'edit-site/global-styles' ),
] ),
[ setCanvasMode, openGeneralSidebar ]
);

const openStyleBook = async () => {
const openStyleBook = useCallback( async () => {
await openGlobalStyles();
// Open the Style Book once the canvas mode is set to edit,
// and the global styles sidebar is open. This ensures that
// the Style Book is not prematurely closed.
setEditorCanvasContainerView( 'style-book' );
};
}, [ openGlobalStyles, setEditorCanvasContainerView ] );

const openRevisions = useCallback( async () => {
await openGlobalStyles();
// Open the global styles revisions once the canvas mode is set to edit,
// and the global styles sidebar is open. The global styles UI is responsible
// for redirecting to the revisions screen once the editor canvas container
// has been set to 'global-styles-revisions'.
setEditorCanvasContainerView( 'global-styles-revisions' );
}, [ openGlobalStyles, setEditorCanvasContainerView ] );

return (
<>
Expand All @@ -117,6 +188,11 @@ export default function SidebarNavigationScreenGlobalStyles() {
'Choose a different style combination for the theme styles.'
) }
content={ <SidebarNavigationScreenGlobalStylesContent /> }
footer={
<SidebarNavigationScreenGlobalStylesFooter
onClickRevisions={ openRevisions }
/>
}
actions={
<>
{ ! isMobileViewport && (
Expand Down
15 changes: 15 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen-global-styles/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.edit-site-sidebar-navigation-screen-global-styles__footer {
padding-left: $grid-unit-15;
}

.edit-site-sidebar-navigation-screen-global-styles__revisions {
border-radius: $radius-block-ui;

&:not(:hover) {
color: $gray-200;

.edit-site-sidebar-navigation-screen-global-styles__revisions__label {
color: $gray-600;
}
}
}
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ export default function SidebarNavigationScreenPage() {
<HStack
spacing={ 5 }
alignment="left"
className="edit-site-sidebar-navigation-screen-page__details"
className="edit-site-sidebar-navigation-screen-page__details edit-site-sidebar-navigation-screen-page__footer"
>
<Text className="edit-site-sidebar-navigation-screen-page__details-label">
{ __( 'Last modified' ) }
Expand Down
6 changes: 6 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,12 @@
}
}

.edit-site-sidebar-navigation-screen-page__footer {
padding-top: $grid-unit-10;
padding-bottom: $grid-unit-10;
padding-left: $grid-unit-20;
}

.edit-site-sidebar-navigation-screen-page__details {
.edit-site-sidebar-navigation-screen-page__details-label {
color: $gray-600;
Expand Down
128 changes: 67 additions & 61 deletions packages/edit-site/src/components/sidebar-navigation-screen/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,74 +42,80 @@ export default function SidebarNavigationScreen( {
const theme = getTheme( currentlyPreviewingTheme() );

return (
<VStack spacing={ 0 }>
<HStack
spacing={ 4 }
alignment="flex-start"
className="edit-site-sidebar-navigation-screen__title-icon"
<>
<VStack
className="edit-site-sidebar-navigation-screen__main"
spacing={ 0 }
justify="flex-start"
>
{ ! isRoot ? (
<NavigatorToParentButton
as={ SidebarButton }
icon={ isRTL() ? chevronRight : chevronLeft }
label={ __( 'Back' ) }
/>
) : (
<SidebarButton
icon={ isRTL() ? chevronRight : chevronLeft }
label={
! isPreviewingTheme()
? __( 'Go back to the Dashboard' )
: __( 'Go back to the theme showcase' )
}
href={
! isPreviewingTheme()
? dashboardLink || 'index.php'
: 'themes.php'
}
/>
) }
<Heading
className="edit-site-sidebar-navigation-screen__title"
color={ 'white' }
level={ 2 }
size={ 20 }
<HStack
spacing={ 4 }
alignment="flex-start"
className="edit-site-sidebar-navigation-screen__title-icon"
>
{ ! isPreviewingTheme()
? title
: sprintf(
'Previewing %1$s: %2$s',
theme?.name?.rendered,
title
) }
</Heading>
{ actions && (
<div className="edit-site-sidebar-navigation-screen__actions">
{ actions }
</div>
{ ! isRoot ? (
<NavigatorToParentButton
as={ SidebarButton }
icon={ isRTL() ? chevronRight : chevronLeft }
label={ __( 'Back' ) }
/>
) : (
<SidebarButton
icon={ isRTL() ? chevronRight : chevronLeft }
label={
! isPreviewingTheme()
? __( 'Go back to the Dashboard' )
: __( 'Go back to the theme showcase' )
}
href={
! isPreviewingTheme()
? dashboardLink || 'index.php'
: 'themes.php'
}
/>
) }
<Heading
className="edit-site-sidebar-navigation-screen__title"
color={ 'white' }
level={ 2 }
size={ 20 }
>
{ ! isPreviewingTheme()
? title
: sprintf(
'Previewing %1$s: %2$s',
theme?.name?.rendered,
title
) }
</Heading>
{ actions && (
<div className="edit-site-sidebar-navigation-screen__actions">
{ actions }
</div>
) }
</HStack>
{ meta && (
<>
<div className="edit-site-sidebar-navigation-screen__meta">
{ meta }
</div>
</>
) }
</HStack>
{ meta && (
<>
<div className="edit-site-sidebar-navigation-screen__meta">
{ meta }
</div>
</>
) }

<nav className="edit-site-sidebar-navigation-screen__content">
{ description && (
<p className="edit-site-sidebar-navigation-screen__description">
{ description }
</p>
) }
{ content }
</nav>
<nav className="edit-site-sidebar-navigation-screen__content">
{ description && (
<p className="edit-site-sidebar-navigation-screen__description">
{ description }
</p>
) }
{ content }
</nav>
</VStack>
{ footer && (
<footer className="edit-site-sidebar-navigation-screen__sticky-section">
<footer className="edit-site-sidebar-navigation-screen__footer">
{ footer }
</footer>
) }
</VStack>
</>
);
}
13 changes: 13 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@
position: relative;
}

.edit-site-sidebar-navigation-screen__main {
// Ensure the sidebar is always at least as tall as the viewport.
// This allows the footer section to be sticky at the bottom of the viewport.
flex-grow: 1;
}

.edit-site-sidebar-navigation-screen__content {
margin: 0 0 $grid-unit-20 0;
color: $gray-400;
Expand Down Expand Up @@ -86,3 +92,10 @@
margin: $grid-unit-40 $grid-unit-20;
border-top: 1px solid $gray-800;
}

.edit-site-sidebar-navigation-screen__footer {
position: sticky;
bottom: 0;
background-color: $gray-900;
padding: $grid-unit-20 0;
}
Loading

1 comment on commit a1d941e

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in a1d941e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5184475742
📝 Reported issues:

Please sign in to comment.