Skip to content

Experiment: Add revisions panel to templates, template parts and patterns #77008

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

Merged
ntsekouras merged 4 commits into from
Apr 9, 2026
Merged

Experiment: Add revisions panel to templates, template parts and patterns #77008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
08f698b
Experiment: Add revisions panel to templates
ntsekouras Apr 2, 2026
cbef742
add the panel for template parts and patterns too
ntsekouras Apr 3, 2026
30a2f9e
use `getValue`
ntsekouras Apr 6, 2026
aba4492
use template's `date` field
ntsekouras Apr 9, 2026
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
88 changes: 45 additions & 43 deletions packages/editor/src/components/post-revisions-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,30 +25,23 @@ import { unlock } from '../../lock-unlock';
const { Badge } = unlock( componentsPrivateApis );
const DAY_IN_MILLISECONDS = 86400000;
const EMPTY_ARRAY = [];

const REVISIONS_QUERY = {
per_page: 3,
orderby: 'date',
order: 'desc',
context: 'embed',
_fields: 'id,date,author',
};
const defaultLayouts = { activity: {} };
const noop = () => {};
const paginationInfo = {};
const view = {
type: 'activity',
titleField: 'date',
fields: [ 'author' ],
layout: {
density: 'compact',
},
layout: { density: 'compact' },
};
const fields = [
{
id: 'date',
label: __( 'Date' ),
render: ( { item } ) => {
render: ( { item, field } ) => {
const dateNowInMs = getDate( null ).getTime();
const date = getDate( item.date ?? null );
const _value = field.getValue( { item } );
const date = getDate( _value ?? null );
const displayDate =
dateNowInMs - date.getTime() > DAY_IN_MILLISECONDS
? dateI18n(
Expand All @@ -59,7 +52,7 @@ const fields = [
return (
<time
className="editor-post-revisions-panel__revision-date"
dateTime={ item.date }
dateTime={ _value }
>
{ displayDate }
</time>
Expand All @@ -70,36 +63,45 @@ const fields = [
},
authorField,
];
const noop = () => {};
const paginationInfo = {};

function PostRevisionsPanelContent() {
const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
const { revisionsCount, revisions, isLoading, lastRevisionId } = useSelect(
( select ) => {
const { getCurrentPostId, getCurrentPostType } =
select( editorStore );
const {
getCurrentPostRevisionsCount,
getCurrentPostLastRevisionId,
} = select( editorStore );
const { getRevisions, isResolving } = select( coreStore );
const query = [
'postType',
getCurrentPostType(),
getCurrentPostId(),
REVISIONS_QUERY,
];
const _revisions = getRevisions( ...query );
return {
revisionsCount: getCurrentPostRevisionsCount(),
lastRevisionId: getCurrentPostLastRevisionId(),
revisions: _revisions,
isLoading: isResolving( 'getRevisions', query ),
};
},
[]
);
const {
revisionsCount,
revisions,
revisionKey,
isLoading,
lastRevisionId,
} = useSelect( ( select ) => {
const { getCurrentPostId, getCurrentPostType } = select( editorStore );
const { getCurrentPostRevisionsCount, getCurrentPostLastRevisionId } =
select( editorStore );
const { getRevisions, getEntityConfig, isResolving } =
select( coreStore );
const _postType = getCurrentPostType();
const entityConfig = getEntityConfig( 'postType', _postType );
const _revisionKey = entityConfig?.revisionKey || 'id';
const revisionsQuery = {
per_page: 3,
orderby: 'date',
order: 'desc',
_fields: `${ _revisionKey },date,author`,
};
const query = [
'postType',
_postType,
getCurrentPostId(),
revisionsQuery,
];
const _revisions = getRevisions( ...query );
return {
revisionsCount: getCurrentPostRevisionsCount(),
lastRevisionId: getCurrentPostLastRevisionId(),
revisions: _revisions,
revisionKey: _revisionKey,
isLoading: isResolving( 'getRevisions', query ),
};
Comment thread
ntsekouras marked this conversation as resolved.
}, [] );
return (
<PanelBody
title={
Expand All @@ -121,10 +123,10 @@ function PostRevisionsPanelContent() {
isLoading={ isLoading }
paginationInfo={ paginationInfo }
defaultLayouts={ defaultLayouts }
getItemId={ ( item ) => item.id }
getItemId={ ( item ) => item[ revisionKey ] }
isItemClickable={ () => true }
onClickItem={ ( item ) => {
setCurrentRevisionId( item.id );
setCurrentRevisionId( item[ revisionKey ] );
} }
>
<DataViews.Layout />
Expand Down
8 changes: 7 additions & 1 deletion packages/editor/src/components/sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,13 @@ const SidebarContent = ( {
<PluginDocumentSettingPanel.Slot />
<TemplateContentPanel />
{ window?.__experimentalDataFormInspector &&
[ 'post', 'page' ].includes( postType ) && (
[
Copy link
Copy Markdown
Member

@oandregal oandregal Apr 6, 2026

Choose a reason for hiding this comment

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

Small practical thing: can we have this logic in a single place? The sidebar component could be that place, which means we move these checks to the sidebar.

By doing the above, the bigger question is more obvious. How do we absorb all the parts of the inspector into the view config endpoint? Right now, it only provides the DataForm config for the summary. What are the blockers, if any, to provide config for every panel?

Copy link
Copy Markdown
Member

@oandregal oandregal Apr 6, 2026

Choose a reason for hiding this comment

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

Small practical thing: can we have this logic in a single place? The sidebar component could be that place, which means we move these checks to the sidebar.

Tracked this at #76076 as "Centralize logic to load experiment in the sidebar component (conversation)."

Copy link
Copy Markdown
Member

@oandregal oandregal Apr 6, 2026

Choose a reason for hiding this comment

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

By doing the above, the bigger question is more obvious. How do we absorb all the parts of the inspector into the view config endpoint? Right now, it only provides the DataForm config for the summary. What are the blockers, if any, to provide config for every panel?

This is connected with a conversation I had with @mcsf that's tracked #76544

Identifier. How do we support screens that don't match 1:1 to entities (e.g., Connectors, Settings?).

This is the case here as well: revisions are not an entity, but a feature of an entity. Alternatives we discussed are:

  • Switch to a specific id. For example, to address this, we could have postType/template as id (for the summary) but also postType/template/revisions as an id for the revisions part.
  • Alternatively, we could add a 3rd parameter (variant) to address those alternate situations related to the kind/name. In this case, kind: postType, name: template, variant: revisions, for example.

In both cases, we'd have two requests to the endpoint to retrieve the data we need (summary and revisions of the entity).

Copy link
Copy Markdown
Member

@oandregal oandregal Apr 6, 2026

Choose a reason for hiding this comment

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

Or, given this premise: revisions are not an entity, but a feature of an entity, we add revisions by default as a new prop in the view config endpoint. But, again, the view config endpoint may need to work with screens that don't match 1:1 to entities (in which case, what'd be the usage of the revisions prop for them?).

Copy link
Copy Markdown
Contributor Author

@ntsekouras ntsekouras Apr 6, 2026

Choose a reason for hiding this comment

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

I encountered part of what you describe (1:1 match) in this PR where we want a template to have a form for site settings and even for a different page altogether (see blog title). I used different forms in that case and I think that's something the consumer should need to handle per use case - for us it was post-summary with more forms.

Small practical thing: can we have this logic in a single place? The sidebar component could be that place, which means we move these checks to the sidebar.

If I'm understanding right, you'd like to have a way for the view config endpoint to return panels too?

'post',
'page',
'wp_template',
'wp_template_part',
'wp_block',
].includes( postType ) && (
<>
<TemplateActionsPanel />
<PostRevisionsPanel />
Expand Down
16 changes: 13 additions & 3 deletions packages/editor/src/components/sidebar/post-revision-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { __experimentalVStack as VStack } from '@wordpress/components';
import {
ExternalLink,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';

/**
* Internal dependencies
Expand All @@ -15,7 +20,6 @@ import { PostContentInformationUI } from '../post-content-information';
import RevisionFieldsDiffPanel from '../revision-fields-diff';
import PostPanelSection from '../post-panel-section';
import PostCardPanel from '../post-card-panel';
import { OpenRevisionsClassicScreen } from './post-summary';

export default function PostRevisionSummary() {
const { revisionId, postId, postContent } = useSelect( ( select ) => {
Expand All @@ -40,7 +44,13 @@ export default function PostRevisionSummary() {
<PostContentInformationUI postContent={ postContent } />
<RevisionCreatedPanel />
</VStack>
<OpenRevisionsClassicScreen revisionId={ revisionId } />
<ExternalLink
href={ addQueryArgs( 'revision.php', {
revision: revisionId,
} ) }
>
{ __( 'Open classic revisions screen' ) }
</ExternalLink>
<RevisionAuthorPanel />
</VStack>
</PostPanelSection>
Expand Down
19 changes: 1 addition & 18 deletions packages/editor/src/components/sidebar/post-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
/**
* WordPress dependencies
*/
import {
__experimentalVStack as VStack,
ExternalLink,
} from '@wordpress/components';
import { __experimentalVStack as VStack } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';

/**
* Internal dependencies
Expand Down Expand Up @@ -41,18 +36,6 @@ import PostTrash from '../post-trash';
*/
const PANEL_NAME = 'post-status';

export function OpenRevisionsClassicScreen( { revisionId } ) {
Copy link
Copy Markdown
Contributor Author

@ntsekouras ntsekouras Apr 2, 2026

Choose a reason for hiding this comment

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

This change is not related to the revisions panel, but it's a leftover I noticed now, from my previous refactoring when I created PostRevisionSummary.

return (
<ExternalLink
href={ addQueryArgs( 'revision.php', {
revision: revisionId,
} ) }
>
{ __( 'Open classic revisions screen' ) }
</ExternalLink>
);
}

export default function PostSummary( { onActionPerformed } ) {
const postType = useSelect(
( select ) => select( editorStore ).getCurrentPostType(),
Expand Down
Loading