Skip to content

Site editor v2: patterns take view config from endpoint #82458

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
oandregal merged 8 commits into from
Sep 9, 2026
Merged

Site editor v2: patterns take view config from endpoint #82458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3d532e4
Site editor v2: list the patterns without a category
oandregal Sep 4, 2026
35f39f7
Site editor v2: patterns take view config from endpoint
oandregal Sep 4, 2026
d4c2cb0
Site editor v2: drop the pattern category filter
oandregal Sep 4, 2026
75ef5e4
Site editor v2: redirect patterns to the server "all" view slug
oandregal Sep 4, 2026
423ed3b
Site editor v2: let the pattern tabs scroll horizontally
oandregal Sep 4, 2026
d5ff4dd
Site editor v2: inline the pattern view config loader
oandregal Sep 9, 2026
514ea2a
Site editor v2: inline the active pattern view overrides
oandregal Sep 9, 2026
cbb3847
Site editor v2: keep the fixed pattern tabs
oandregal Sep 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
10 changes: 10 additions & 0 deletions routes/pattern-list/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import { resolveSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { __ } from '@wordpress/i18n';
import { unlock } from '@wordpress/routes-lock-unlock';

/**
* Route configuration for pattern list.
*/
export const route = {
title: () => __( 'Patterns' ),
loader: async () => {
// Preload the view configuration the stage resolves its view from.
await unlock( resolveSelect( coreStore ) ).getViewConfig(
'postType',
'wp_block'
);
},
};
58 changes: 48 additions & 10 deletions routes/pattern-list/stage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,15 @@ import {
Link,
useInvalidate,
} from '@wordpress/route';
import { useView } from '@wordpress/views';
import { useView, useViewConfig } from '@wordpress/views';
import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
import { Page } from '@wordpress/admin-ui';
import type { View, Action, Field } from '@wordpress/dataviews';
import type {
View,
Action,
Field,
SupportedLayouts,
} from '@wordpress/dataviews';
import { store as coreStore } from '@wordpress/core-data';
import {
Button,
Expand All @@ -23,7 +28,7 @@ import {
} from '@wordpress/patterns';
import { __ } from '@wordpress/i18n';
import { unlock } from '@wordpress/routes-lock-unlock';
import { DEFAULT_VIEW, DEFAULT_VIEWS, DEFAULT_LAYOUTS } from './view-utils';
import { DEFAULT_VIEWS } from './view-utils';
import { previewField } from './fields/preview';
import { usePatternCategoryField } from './fields/category';
import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
Expand All @@ -38,16 +43,48 @@ const { PATTERN_TYPES, CreatePatternModal } = unlock( patternPrivateApis );
*/
import './style.scss';

const PATTERN_POST_TYPE = 'wp_block';

function PatternList() {
const invalidate = useInvalidate();
const { type = 'all' } = useParams( {
from: '/patterns/list/$type',
} );
const { default_view: defaultView, default_layouts: defaultLayouts } =

@oandregal oandregal Sep 9, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This screen does not use the activeViewOverrides so that the tabs remain as they are now: "All", "My patterns", "Registered".

useViewConfig( {
kind: 'postType',
name: PATTERN_POST_TYPE,
} );

if ( ! defaultView ) {
// The route loader resolves the view configuration before the stage
// mounts, so this only guards against the store being reset.
return null;
}

return (
<PatternListView
type={ type }
defaultView={ defaultView }
defaultLayouts={ defaultLayouts }
/>
);
}

function PatternListView( {
type,
defaultView,
defaultLayouts,
}: {
type: string;
defaultView: View;
defaultLayouts: SupportedLayouts | undefined;
} ) {
const invalidate = useInvalidate();
const navigate = useNavigate();
const searchParams = useSearch( { from: '/patterns/list/$type' } );

const postTypeObject = useSelect(
( select ) => select( coreStore ).getPostType( 'wp_block' ),
( select ) => select( coreStore ).getPostType( PATTERN_POST_TYPE ),
[]
);

Expand All @@ -56,7 +93,7 @@ function PatternList() {
( select ) =>
select( coreStore ).canUser( 'create', {
kind: 'postType',
name: 'wp_block',
name: PATTERN_POST_TYPE,
} ),
[]
);
Expand All @@ -79,9 +116,10 @@ function PatternList() {
// Use the new view persistence hook
const { view, isModified, updateView, resetToDefault } = useView( {
kind: 'postType',
name: 'wp_block',
name: PATTERN_POST_TYPE,
slug: 'default-new',
Comment thread
coderabbitai[bot] marked this conversation as resolved.
defaultView: DEFAULT_VIEW,
defaultView,
defaultLayouts,
queryParams: searchParams,
onChangeQueryParams: handleQueryParamsChange,
} );
Expand Down Expand Up @@ -198,7 +236,7 @@ function PatternList() {
);

const postTypeActions: Action< any >[] = usePostActions( {
postType: 'wp_block',
postType: PATTERN_POST_TYPE,
context: 'list',
onActionPerformed: ( actionId: string, items: NormalizedPattern[] ) => {
// Clean up URL when delete actions are performed
Expand Down Expand Up @@ -306,7 +344,7 @@ function PatternList() {
totalItems,
totalPages,
} }
defaultLayouts={ DEFAULT_LAYOUTS }
defaultLayouts={ defaultLayouts }
selection={ selection }
onReset={ isModified ? onReset : false }
onChangeSelection={ ( items: string[] ) => {
Expand Down
29 changes: 0 additions & 29 deletions routes/pattern-list/view-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,4 @@
import { __ } from '@wordpress/i18n';
import type { SupportedLayouts, View } from '@wordpress/dataviews';

const LAYOUT_GRID = 'grid';
const LAYOUT_TABLE = 'table';

export const DEFAULT_VIEW: View = {
type: LAYOUT_GRID,
perPage: 20,
sort: {
field: 'title',
direction: 'asc',
},
filters: [],
fields: [ 'sync-status' ],
layout: {
badgeFields: [ 'sync-status' ],
},
titleField: 'title',
mediaField: 'preview',
};

export const DEFAULT_VIEWS: {
slug: string;
Expand All @@ -37,12 +17,3 @@ export const DEFAULT_VIEWS: {
label: __( 'Registered' ),
},
];

export const DEFAULT_LAYOUTS: SupportedLayouts = {
[ LAYOUT_TABLE ]: true,
[ LAYOUT_GRID ]: {
layout: {
badgeFields: [ 'sync-status' ],
},
},
};
Loading