Skip to content

Commit 5c79bae

Browse files
youknowriadjameskoster
youknowriad
and
jameskoster
authored
Routing: Add template part route (WordPress#73303)
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
1 parent 91f09b3 commit 5c79bae

File tree

21 files changed

+872
-13
lines changed

21 files changed

+872
-13
lines changed

‎lib/experimental/pages/gutenberg-boot.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ function gutenberg_boot_register_default_menu_items() {
2828
register_gutenberg_boot_menu_item( 'styles', __( 'Styles', 'gutenberg' ), '/styles', '' );
2929
register_gutenberg_boot_menu_item( 'navigation', __( 'Navigation', 'gutenberg' ), '/navigation', '' );
3030
register_gutenberg_boot_menu_item( 'pages', __( 'Pages', 'gutenberg' ), '/types/page', '' );
31-
register_gutenberg_boot_menu_item( 'patterns', __( 'Patterns', 'gutenberg' ), '/patterns', '', 'drilldown' );
31+
register_gutenberg_boot_menu_item( 'templateParts', __( 'Template Parts', 'gutenberg' ), '/template-parts', '' );
32+
register_gutenberg_boot_menu_item( 'patterns', __( 'Patterns', 'gutenberg' ), '/patterns', '' );
3233
}
3334
add_action( 'gutenberg-boot_init', 'gutenberg_boot_register_default_menu_items', 5 );

‎package-lock.json‎

Lines changed: 45 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core-data/src/entity-types/wp-template-part.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ declare module './base-entity-records' {
5757
'view' | 'edit',
5858
C
5959
>;
60+
blocks: ContextualField<
61+
Array< Record< string, any > > | undefined,
62+
'edit',
63+
C
64+
>;
6065
/**
6166
* Title of template.
6267
*/

‎packages/edit-site-init/src/index.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { home, styles, navigation, page, symbol } from '@wordpress/icons';
4+
import {
5+
home,
6+
styles,
7+
navigation,
8+
page,
9+
symbol,
10+
symbolFilled,
11+
} from '@wordpress/icons';
512
import { dispatch } from '@wordpress/data';
613
import { store as bootStore } from '@wordpress/boot';
714

@@ -16,6 +23,7 @@ export async function init() {
1623
styles: { icon: styles },
1724
navigation: { icon: navigation },
1825
pages: { icon: page },
26+
templateParts: { icon: symbolFilled },
1927
patterns: { icon: symbol },
2028
};
2129

‎packages/fields/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ A React component that renders a modal for creating a template part. The modal d
3636

3737
_Parameters_
3838

39-
- _props_ `Object`: The component props.
40-
- _props.modalTitle_ `{ modalTitle: string; } & CreateTemplatePartModalContentsProps[ 'modalTitle' ]`:
39+
- _props_ `{ modalTitle?: string; } & CreateTemplatePartModalContentsProps`: The component props.
40+
- _props.modalTitle_ `{ modalTitle?: string; } & CreateTemplatePartModalContentsProps[ 'modalTitle' ]`:
4141

4242
### dateField
4343

‎packages/fields/src/components/create-template-part-modal/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,14 @@ type CreateTemplatePartModalContentsProps = {
5656
/**
5757
* A React component that renders a modal for creating a template part. The modal displays a title and the contents for creating the template part.
5858
* This component should not live in this package, it should be moved to a dedicated package responsible for managing template.
59-
* @param {Object} props The component props.
60-
* @param props.modalTitle
59+
* @param props The component props.
60+
* @param props.modalTitle
6161
*/
6262
export default function CreateTemplatePartModal( {
6363
modalTitle,
6464
...restProps
6565
}: {
66-
modalTitle: string;
66+
modalTitle?: string;
6767
} & CreateTemplatePartModalContentsProps ) {
6868
const defaultModalTitle = useSelect(
6969
( select ) =>

‎packages/lazy-editor/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,16 @@
3939
"types": "build-types",
4040
"dependencies": {
4141
"@wordpress/asset-loader": "file:../asset-loader",
42+
"@wordpress/base-styles": "file:../base-styles",
4243
"@wordpress/block-editor": "file:../block-editor",
44+
"@wordpress/blocks": "file:../blocks",
4345
"@wordpress/components": "file:../components",
4446
"@wordpress/core-data": "file:../core-data",
4547
"@wordpress/data": "file:../data",
4648
"@wordpress/editor": "file:../editor",
4749
"@wordpress/element": "file:../element",
4850
"@wordpress/global-styles-engine": "file:../global-styles-engine",
51+
"@wordpress/i18n": "file:../i18n",
4952
"@wordpress/private-apis": "file:../private-apis"
5053
},
5154
"publishConfig": {

packages/lazy-editor/src/component.tsx renamed to packages/lazy-editor/src/components/editor/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ import { useMemo } from '@wordpress/element';
1515
/**
1616
* Internal dependencies
1717
*/
18-
import { useStylesId } from './hooks/use-styles-id';
19-
import { useEditorSettings } from './hooks/use-editor-settings';
20-
import { useEditorAssets } from './hooks/use-editor-assets';
21-
import { unlock } from './lock-unlock';
18+
import { useStylesId } from '../../hooks/use-styles-id';
19+
import { useEditorSettings } from '../../hooks/use-editor-settings';
20+
import { useEditorAssets } from '../../hooks/use-editor-assets';
21+
import { unlock } from '../../lock-unlock';
2222

2323
const { Editor: PrivateEditor, BackButton } = unlock( editorPrivateApis );
2424

‎packages/lazy-editor/src/components/preview/index.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __ } from '@wordpress/i18n';
5+
import { useId, useMemo } from '@wordpress/element';
6+
// @ts-expect-error Block Editor not fully typed yet.
7+
import { BlockPreview, BlockEditorProvider } from '@wordpress/block-editor';
8+
import { privateApis as editorPrivateApis } from '@wordpress/editor';
9+
// @ts-expect-error Blocks not fully typed yet.
10+
import { parse } from '@wordpress/blocks';
11+
12+
/**
13+
* Internal dependencies
14+
*/
15+
import './style.scss';
16+
import { unlock } from '../../lock-unlock';
17+
import { useEditorAssets } from '../../hooks/use-editor-assets';
18+
import { useEditorSettings } from '../../hooks/use-editor-settings';
19+
import { useStylesId } from '../../hooks/use-styles-id';
20+
21+
const { useStyle } = unlock( editorPrivateApis );
22+
23+
function PreviewContent( {
24+
item,
25+
description,
26+
}: {
27+
item: { blocks?: any[]; content: { raw: string } };
28+
description: string;
29+
} ) {
30+
const descriptionId = useId();
31+
const backgroundColor = useStyle( 'color.background' );
32+
const blocks = useMemo( () => {
33+
return (
34+
item.blocks ??
35+
parse( item.content.raw, {
36+
__unstableSkipMigrationLogs: true,
37+
} )
38+
);
39+
}, [ item?.content?.raw, item.blocks ] );
40+
const isEmpty = ! blocks?.length;
41+
42+
return (
43+
<div
44+
className="lazy-editor-block-preview__container"
45+
style={ { backgroundColor } }
46+
aria-describedby={ !! description ? descriptionId : undefined }
47+
>
48+
{ isEmpty && __( 'Empty template part' ) }
49+
{ ! isEmpty && (
50+
<BlockPreview.Async>
51+
<BlockPreview blocks={ blocks } />
52+
</BlockPreview.Async>
53+
) }
54+
{ !! description && (
55+
<div hidden id={ descriptionId }>
56+
{ description }
57+
</div>
58+
) }
59+
</div>
60+
);
61+
}
62+
63+
export function Preview( {
64+
item,
65+
description,
66+
}: {
67+
item: { blocks?: any[]; content: { raw: string } };
68+
description: string;
69+
} ) {
70+
// Resolve styles ID from template
71+
const stylesId = useStylesId();
72+
73+
// Load editor settings and assets
74+
const { isReady: settingsReady, editorSettings } = useEditorSettings( {
75+
stylesId,
76+
} );
77+
const { isReady: assetsReady } = useEditorAssets();
78+
const finalSettings = useMemo(
79+
() => ( {
80+
...editorSettings,
81+
isPreviewMode: true,
82+
} ),
83+
[ editorSettings ]
84+
);
85+
if ( ! settingsReady || ! assetsReady ) {
86+
return null;
87+
}
88+
return (
89+
<BlockEditorProvider settings={ finalSettings }>
90+
<PreviewContent item={ item } description={ description } />
91+
</BlockEditorProvider>
92+
);
93+
}

‎packages/lazy-editor/src/components/preview/style.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@use "@wordpress/base-styles/variables" as *;
2+
3+
.lazy-editor-block-preview__container {
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
flex-direction: column;
8+
height: 100%;
9+
border-radius: $radius-medium;
10+
11+
.dataviews-view-grid & {
12+
.block-editor-block-preview__container {
13+
height: 100%;
14+
}
15+
}
16+
17+
.dataviews-view-table & {
18+
width: 96px;
19+
flex-grow: 0;
20+
text-wrap: balance; // Fallback for Safari.
21+
text-wrap: pretty;
22+
}
23+
}

0 commit comments

Comments
 (0)