Skip to content

Commit

Permalink
Style Revisions: Remove style revisions dropdown menu (#56454)
Browse files Browse the repository at this point in the history
* Remove dropdown menu

* Make sure setEditorCanvasContainerView() calls are made when needed so that toggle status works correctly when viewing any other sections of global styles.

* Pre select the revisions count to prevent flashes of incorrect revision counts. Hat tip @ramonjd.

* Remove CSS no longer needed.

* Modify e2e test to reflect removal of menu item.

* Fix issue with style book closing when browsing blocks.

* Replace onClick with onBack to reduce confusion with screen header click action.

* Change ordering of `isRevisionsOpened` const.
  • Loading branch information
apeatling authored Nov 27, 2023
1 parent 1f7d32a commit 6f62e38
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 99 deletions.
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/global-styles/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
import { isRTL, __ } from '@wordpress/i18n';
import { chevronRight, chevronLeft } from '@wordpress/icons';

function ScreenHeader( { title, description } ) {
function ScreenHeader( { title, description, onBack } ) {
return (
<VStack spacing={ 0 }>
<View>
Expand All @@ -27,6 +27,7 @@ function ScreenHeader( { title, description } ) {
icon={ isRTL() ? chevronRight : chevronLeft }
isSmall
aria-label={ __( 'Navigate to the previous view' ) }
onClick={ onBack }
/>
<Spacer>
<Heading
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import {
Button,
__experimentalUseNavigator as useNavigator,
Expand All @@ -10,6 +10,7 @@ import {
__experimentalSpacer as Spacer,
} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { useContext, useState, useEffect } from '@wordpress/element';
import {
privateApis as blockEditorPrivateApis,
Expand All @@ -35,14 +36,36 @@ function ScreenRevisions() {
const { goTo } = useNavigator();
const { user: currentEditorGlobalStyles, setUserConfig } =
useContext( GlobalStylesContext );
const { blocks, editorCanvasContainerView } = useSelect( ( select ) => {
return {
editorCanvasContainerView: unlock(
select( editSiteStore )
).getEditorCanvasContainerView(),
blocks: select( blockEditorStore ).getBlocks(),
};
}, [] );
const { blocks, editorCanvasContainerView, revisionsCount } = useSelect(
( select ) => {
const {
getEntityRecord,
__experimentalGetCurrentGlobalStylesId,
__experimentalGetDirtyEntityRecords,
} = select( coreStore );
const isDirty = __experimentalGetDirtyEntityRecords().length > 0;
const globalStylesId = __experimentalGetCurrentGlobalStylesId();
const globalStyles = globalStylesId
? getEntityRecord( 'root', 'globalStyles', globalStylesId )
: undefined;
let _revisionsCount =
globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count || 0;
// one for the reset item.
_revisionsCount++;
// one for any dirty changes (unsaved).
if ( isDirty ) {
_revisionsCount++;
}
return {
editorCanvasContainerView: unlock(
select( editSiteStore )
).getEditorCanvasContainerView(),
blocks: select( blockEditorStore ).getBlocks(),
revisionsCount: _revisionsCount,
};
},
[]
);
const { revisions, isLoading, hasUnsavedChanges } =
useGlobalStylesRevisions();
const [ currentlySelectedRevision, setCurrentlySelectedRevision ] =
Expand All @@ -61,6 +84,7 @@ function ScreenRevisions() {

const onCloseRevisions = () => {
goTo( '/' ); // Return to global styles main panel.
setEditorCanvasContainerView( undefined );
};

const restoreRevision = ( revision ) => {
Expand Down Expand Up @@ -119,10 +143,15 @@ function ScreenRevisions() {
return (
<>
<ScreenHeader
title={ __( 'Revisions' ) }
title={
revisionsCount &&
// translators: %s: number of revisions.
sprintf( __( 'Revisions (%s)' ), revisionsCount )
}
description={ __(
'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
) }
onBack={ onCloseRevisions }
/>
{ isLoading && (
<Spinner className="edit-site-global-styles-screen-revisions__loading" />
Expand Down
11 changes: 0 additions & 11 deletions packages/edit-site/src/components/global-styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -191,14 +191,3 @@
.edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
fill: currentColor;
}

[class][class].edit-site-global-styles-sidebar__revisions-count-badge {
align-items: center;
background: $gray-800;
border-radius: 2px;
color: $white;
display: inline-flex;
justify-content: center;
min-height: $icon-size;
min-width: $icon-size;
}
133 changes: 59 additions & 74 deletions packages/edit-site/src/components/global-styles/ui.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -55,6 +50,7 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
createSlotFill( SLOT_FILL_NAME );

function GlobalStylesActionMenu() {
const [ canReset, onReset ] = useGlobalStylesReset();
const { toggle } = useDispatch( preferencesStore );
const { canEditCSS } = useSelect( ( select ) => {
const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
Expand All @@ -69,49 +65,56 @@ function GlobalStylesActionMenu() {
canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
};
}, [] );
const { setEditorCanvasContainerView } = unlock(
useDispatch( editSiteStore )
);
const { goTo } = useNavigator();
const loadCustomCSS = () => goTo( '/css' );
const loadCustomCSS = () => {
setEditorCanvasContainerView( 'global-styles-css' );
goTo( '/css' );
};

return (
<GlobalStylesMenuFill>
<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
{ ( { onClose } ) => (
<MenuGroup>
{ canEditCSS && (
<MenuItem onClick={ loadCustomCSS }>
{ __( 'Additional CSS' ) }
<>
<MenuGroup>
{ canEditCSS && (
<MenuItem onClick={ loadCustomCSS }>
{ __( 'Additional CSS' ) }
</MenuItem>
) }
<MenuItem
onClick={ () => {
toggle(
'core/edit-site',
'welcomeGuideStyles'
);
onClose();
} }
>
{ __( 'Welcome Guide' ) }
</MenuItem>
</MenuGroup>
<MenuGroup>
<MenuItem
onClick={ () => {
onReset();
onClose();
} }
disabled={ ! canReset }
>
{ __( 'Reset styles' ) }
</MenuItem>
) }
<MenuItem
onClick={ () => {
toggle(
'core/edit-site',
'welcomeGuideStyles'
);
onClose();
} }
>
{ __( 'Welcome Guide' ) }
</MenuItem>
</MenuGroup>
</MenuGroup>
</>
) }
</DropdownMenu>
</GlobalStylesMenuFill>
);
}

function RevisionsCountBadge( { className, children } ) {
return (
<span
className={ classnames(
className,
'edit-site-global-styles-sidebar__revisions-count-badge'
) }
>
{ children }
</span>
);
}
function GlobalStylesRevisionsMenu() {
const { setIsListViewOpened } = useDispatch( editSiteStore );
const { revisionsCount } = useSelect( ( select ) => {
Expand All @@ -128,56 +131,38 @@ function GlobalStylesRevisionsMenu() {
globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
};
}, [] );
const [ canReset, onReset ] = useGlobalStylesReset();
const { goTo } = useNavigator();
const { setEditorCanvasContainerView } = unlock(
useDispatch( editSiteStore )
);
const isRevisionsOpened = useSelect(
( select ) =>
'global-styles-revisions' ===
unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
[]
);
const loadRevisions = () => {
setIsListViewOpened( false );
goTo( '/revisions' );
setEditorCanvasContainerView( 'global-styles-revisions' );

if ( ! isRevisionsOpened ) {
goTo( '/revisions' );
setEditorCanvasContainerView( 'global-styles-revisions' );
} else {
goTo( '/' );
setEditorCanvasContainerView( undefined );
}
};
const hasRevisions = revisionsCount > 0;

return (
<GlobalStylesMenuFill>
{ canReset || hasRevisions ? (
<DropdownMenu icon={ backup } label={ __( 'Revisions' ) }>
{ ( { onClose } ) => (
<MenuGroup>
{ hasRevisions && (
<MenuItem
onClick={ loadRevisions }
icon={
<RevisionsCountBadge>
{ revisionsCount }
</RevisionsCountBadge>
}
>
{ __( 'Revision history' ) }
</MenuItem>
) }
<MenuItem
onClick={ () => {
onReset();
onClose();
} }
disabled={ ! canReset }
>
{ __( 'Reset to defaults' ) }
</MenuItem>
</MenuGroup>
) }
</DropdownMenu>
) : (
<Button
label={ __( 'Revisions' ) }
icon={ backup }
disabled
__experimentalIsFocusable
/>
) }
<Button
label={ __( 'Revisions' ) }
icon={ backup }
onClick={ loadRevisions }
disabled={ ! hasRevisions }
isPressed={ isRevisionsOpened }
/>
</GlobalStylesMenuFill>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,6 @@ class UserGlobalStylesRevisions {
.getByRole( 'menubar', { name: 'Styles actions' } )
.click();
await this.page.getByRole( 'button', { name: 'Revisions' } ).click();
await this.page
.getByRole( 'menuitem', { name: /^Revision history/ } )
.click();
}

async openStylesPanel() {
Expand Down

0 comments on commit 6f62e38

Please sign in to comment.