Skip to content

🚧 Experimental: Global styles revisions #49912

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

Closed
ramonjd wants to merge 28 commits into from
Closed

🚧 Experimental: Global styles revisions #49912

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
705cda0
Initial commit
ramonjd Dec 20, 2022
376d279
Updating test
ramonjd Dec 20, 2022
9978710
Sending and checking for settings as well since some style variations…
ramonjd Dec 21, 2022
926a2b0
Added a new endpoint to the global styles rest API (/revisions)
ramonjd Dec 22, 2022
11600cf
revisions is no longer a property of the response object
ramonjd Dec 22, 2022
631432e
Update description for rest param
ramonjd Dec 23, 2022
1a13b77
There's no reason to use the stored userConfig at all if we're reinst…
ramonjd Dec 23, 2022
bc2a83d
added a test for the revisions endpoint
ramonjd Dec 23, 2022
146464c
Added text domain
ramonjd Dec 23, 2022
087e786
Bumping minimum revision count until display to two:
ramonjd Dec 23, 2022
958e746
Added a very unpretty E2E test for global styles revisions. We can't …
ramonjd Dec 29, 2022
3c88909
Formatting the comments in the E2E test.
ramonjd Dec 29, 2022
5df24c5
Fixing up things after a rebase, mainly usage of __experimentalGetCur…
ramonjd Apr 5, 2023
225606b
Moving changes to global styles controller to 6.2 compat
ramonjd Apr 5, 2023
5c77f1e
JS LINT YO!
ramonjd Apr 5, 2023
70150bb
Relocate js utils tests for isGlobalStyleConfigEqual
ramonjd Apr 5, 2023
10b2de0
Move rest route registration to compat 6.3
ramonjd Apr 5, 2023
a066ab4
update e2e tests so that they pass :D I was importing a non-existant …
ramonjd Apr 11, 2023
be5005f
Testing with undo/reset buttons
ramonjd Apr 11, 2023
eed6463
Moving the revisions link so that it's under the drop down
ramonjd Apr 12, 2023
8671471
Yoda?
ramonjd Apr 12, 2023
7ee47a1
Adding author display name and avatar to rest response
ramonjd Apr 13, 2023
8640877
Update PHP tests title > date
ramonjd Apr 14, 2023
fc2b825
This is trash
ramonjd Apr 18, 2023
d16bd4d
This is also trash.
ramonjd Apr 19, 2023
7287070
This is also trash.
ramonjd Apr 20, 2023
23c4a57
This is also trash.
ramonjd Apr 20, 2023
f3cfeb0
This is also trash.
ramonjd Apr 20, 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
Prev Previous commit
Next Next commit
Fixing up things after a rebase, mainly usage of __experimentalGetCur… 
…rentGlobalStylesId, which has been removed in this PR.

Adding a reset button.
  • Loading branch information
@ramonjd
ramonjd committed Apr 21, 2023
commit 5df24c5e5f686e3c1b66c2c3606f1467555e3368
8 changes: 4 additions & 4 deletions packages/edit-site/src/components/global-styles/context-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,12 @@ function ContextMenu( { name, parentMenu = '' } ) {
const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );

const { canEditCSS } = useSelect( ( select ) => {
const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
const { getEntityRecord, __experimentalGetCurrentGlobalStyles } =
select( coreStore );

const globalStylesId = __experimentalGetCurrentGlobalStylesId();
const globalStyles = globalStylesId
? getEntityRecord( 'root', 'globalStyles', globalStylesId )
const currentGlobalStyles = __experimentalGetCurrentGlobalStyles();
const globalStyles = currentGlobalStyles?.id
? getEntityRecord( 'root', 'globalStyles', currentGlobalStyles?.id )
: undefined;

return {
Expand Down
98 changes: 58 additions & 40 deletions packages/edit-site/src/components/global-styles/screen-revisions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,20 @@ import {
useMemo,
} from '@wordpress/element';
import { check } from '@wordpress/icons';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import ScreenHeader from './header';
import Subtitle from './subtitle';
import { GlobalStylesContext } from './context';
import { decodeEntities } from '@wordpress/html-entities';
import { isGlobalStyleConfigEqual } from './utils';
import { unlock } from '../../private-apis';

export const MINIMUM_REVISION_COUNT = 2;
export const MINIMUM_REVISION_COUNT = 1;

const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
const SELECTOR_MINIMUM_REVISION_COUNT = 10;

function RevisionsSelect( { userRevisions, currentRevisionId, onChange } ) {
Expand Down Expand Up @@ -62,39 +65,52 @@ function RevisionsSelect( { userRevisions, currentRevisionId, onChange } ) {
}

function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
const [ canReset, onReset ] = useGlobalStylesReset();
return (
<ol className="edit-site-global-styles-screen-revisions__revisions-list">
{ userRevisions.map( ( revision ) => {
const isActive = revision?.id === currentRevisionId;
return (
<li key={ `user-styles-revision-${ revision.id }` }>
<Button
className={ classnames(
'edit-site-global-styles-screen-revisions__revision-item',
{
'is-current': isActive,
}
) }
variant={ isActive ? 'tertiary' : 'secondary' }
disabled={ isActive }
icon={ isActive ? check : null }
onClick={ () => {
onChange( revision );
} }
aria-label={ sprintf(
/* translators: %s: human-friendly revision creation date */
__( 'Restore revision from %s' ),
revision.title.rendered
) }
>
<span className="edit-site-global-styles-screen-revisions__title">
{ revision.title.rendered }
</span>
</Button>
</li>
);
} ) }
</ol>
<>
<ol className="edit-site-global-styles-screen-revisions__revisions-list">
{ userRevisions.map( ( revision ) => {
const isActive = revision?.id === currentRevisionId;
return (
<li key={ `user-styles-revision-${ revision.id }` }>
<Button
className={ classnames(
'edit-site-global-styles-screen-revisions__revision-item',
{
'is-current': isActive,
}
) }
variant={ isActive ? 'tertiary' : 'secondary' }
disabled={ isActive }
icon={ isActive ? check : null }
onClick={ () => {
onChange( revision );
} }
aria-label={ sprintf(
/* translators: %s: human-friendly revision creation date */
__( 'Restore revision from %s' ),
revision.title.rendered
) }
>
<span className="edit-site-global-styles-screen-revisions__title">
{ revision.title.rendered }
</span>
</Button>
</li>
);
} ) }
</ol>
{ canReset && (
<Button
isSecondary
onClick={ onReset }
className="edit-site-global-styles-screen-revisions__reset"
>
{ __( 'Reset styles to defaults' ) }
</Button>
) }
</>
);
}

Expand Down Expand Up @@ -148,18 +164,20 @@ function ScreenRevisions() {
<ScreenHeader
title={ __( 'Revisions' ) }
description={ __(
"Select one of your styles revisions to preview it in the editor. Changes won't take effect until you've saved the template."
"Select one of your global styles revisions to preview it in the editor. Changes won't take effect until you've saved the template."
) }
/>
<div className="edit-site-global-styles-screen-revisions">
<VStack spacing={ 3 }>
<Subtitle>{ __( 'REVISIONS' ) }</Subtitle>
{ hasRevisions ? (
<RevisionsComponent
onChange={ restoreRevision }
currentRevisionId={ currentRevisionId }
userRevisions={ userRevisions }
/>
<>
<RevisionsComponent
onChange={ restoreRevision }
currentRevisionId={ currentRevisionId }
userRevisions={ userRevisions }
/>
</>
) : (
<p>{ __( 'There are currently no revisions.' ) }</p>
) }
Expand Down
39 changes: 5 additions & 34 deletions packages/edit-site/src/components/global-styles/screen-root.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,9 @@ import { NavigationButtonAsItem } from './navigation-button';
import ContextMenu from './context-menu';
import StylesPreview from './preview';
import { unlock } from '../../private-apis';
// @TODO does this exist?
import { GlobalStylesContext } from './context';
import { MINIMUM_REVISION_COUNT } from './screen-revisions';

const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
function ScreenRoot() {
const { useGlobalStyle } = unlock( blockEditorPrivateApis );
const [ customCSS ] = useGlobalStyle( 'css' );
Expand All @@ -39,13 +38,13 @@ function ScreenRoot() {
const { variations, canEditCSS } = useSelect( ( select ) => {
const {
getEntityRecord,
__experimentalGetCurrentGlobalStylesId,
__experimentalGetCurrentGlobalStyles,
__experimentalGetCurrentThemeGlobalStylesVariations,
} = select( coreStore );

const globalStylesId = __experimentalGetCurrentGlobalStylesId();
const globalStyles = globalStylesId
? getEntityRecord( 'root', 'globalStyles', globalStylesId )
const currentGlobalStyles = __experimentalGetCurrentGlobalStyles();
const globalStyles = currentGlobalStyles?.id
? getEntityRecord( 'root', 'globalStyles', currentGlobalStyles?.id )
: undefined;

return {
Expand Down Expand Up @@ -151,34 +150,6 @@ function ScreenRoot() {
</>
) }

<CardDivider />

<CardBody>
<Spacer
as="p"
paddingTop={ 2 }
paddingX="13px"
marginBottom={ 4 }
>
{ __(
"View the last ten revisions to your site's styles."
) }
</Spacer>
<ItemGroup>
<NavigationButtonAsItem
path="/revisions"
aria-label={ __( 'Styles revisions' ) }
>
<HStack justify="space-between">
<FlexItem>{ __( 'Revisions' ) }</FlexItem>
<IconWithCurrentColor
icon={ isRTL() ? chevronLeft : chevronRight }
/>
</HStack>
</NavigationButtonAsItem>
</ItemGroup>
</CardBody>

{ revisionsCount >= MINIMUM_REVISION_COUNT ? (
<>
<CardDivider />
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@
margin: 0;
}

.edit-site-global-styles-screen-revisions__reset,
.edit-site-global-styles-screen-revisions__revision-item {
justify-content: center;
width: 100%;
Expand Down
8 changes: 4 additions & 4 deletions packages/edit-site/src/components/global-styles/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,12 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
function GlobalStylesActionMenu() {
const { toggle } = useDispatch( preferencesStore );
const { canEditCSS } = useSelect( ( select ) => {
const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
const { getEntityRecord, __experimentalGetCurrentGlobalStyles } =
select( coreStore );

const globalStylesId = __experimentalGetCurrentGlobalStylesId();
const globalStyles = globalStylesId
? getEntityRecord( 'root', 'globalStyles', globalStylesId )
const currentGlobalStyles = __experimentalGetCurrentGlobalStyles();
const globalStyles = currentGlobalStyles?.id
? getEntityRecord( 'root', 'globalStyles', currentGlobalStyles?.id )
: undefined;

return {
Expand Down
5 changes: 5 additions & 0 deletions packages/edit-site/src/components/global-styles/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import fastDeepEqual from 'fast-deep-equal/es6';

/**
*
* @param {string} variation The variation name.
Expand Down