code-snippets / js / components / ManageMenu / BlueprintsDemo / demoBlueprint.ts

demoBlueprint.ts in Code Snippets 4.0.0-beta.2, at js/components/ManageMenu/BlueprintsDemo/demoBlueprint.ts

132 lines 4.0 KB

Raw Download Zip

1	import { __ } from '@wordpress/i18n'
2	import type { DemoSection } from './types'
3
4	export const BLUEPRINT_TITLE = __('Create a Shortcode', 'code-snippets')
5
6	export const BLUEPRINT_DESCRIPTION = __('Create a custom shortcode to display dynamic content using a simple tag.', 'code-snippets')
7
8	const SHORTCODE_OUTPUT = `// Build the card markup from the shortcode attributes.
9	return sprintf(
10	'<div class="staff-profile"><h3>%s</h3><p>%s</p></div>',
11	esc_html( $atts['name'] ),
12	esc_html( $atts['role'] )
13	);`
14
15	/**
16	* The blueprint as the walkthrough presents it: a worked example rather than
17	* the empty defaults, so the fields read as a job someone would actually do.
18	*/
19	export const DEMO_SECTIONS: DemoSection[] = [
20	{
21	id: 'general',
22	title: __('General', 'code-snippets'),
23	fields: [
24	{
25	name: 'functionName',
26	label: __('Function Name', 'code-snippets'),
27	type: 'text',
28	value: 'render_staff_profile',
29	required: true,
30	description: __('The callback function name for your shortcode.', 'code-snippets')
31	},
32	{
33	name: 'shortcodeTag',
34	label: __('Shortcode Tag', 'code-snippets'),
35	type: 'text',
36	value: 'staff_profile',
37	required: true,
38	description: __('The shortcode tag used in content (e.g., [my_shortcode]). Lowercase, no spaces.', 'code-snippets')
39	},
40	{
41	name: 'shortcodeDescription',
42	label: __('Description', 'code-snippets'),
43	type: 'text',
44	value: __('Displays a staff member card with a name and role.', 'code-snippets'),
45	description: __('Optional description for documentation purposes.', 'code-snippets')
46	},
47	{
48	name: 'textDomain',
49	label: __('Text Domain', 'code-snippets'),
50	type: 'text',
51	value: 'code-snippets-blueprints',
52	description: __('Translation text domain. Optional.', 'code-snippets')
53	},
54	{
55	name: 'isEnclosing',
56	label: __('Enclosing Shortcode', 'code-snippets'),
57	type: 'select',
58	value: __('No (self-closing)', 'code-snippets'),
59	required: true,
60	description: __('Enclosing shortcodes wrap content: [shortcode]content[/shortcode]', 'code-snippets')
61	},
62	{
63	name: 'supportsNestedShortcodes',
64	label: __('Support Nested Shortcodes', 'code-snippets'),
65	type: 'select',
66	value: __('No', 'code-snippets'),
67	required: true,
68	description: __('Process shortcodes within the content using do_shortcode().', 'code-snippets')
69	}
70	]
71	},
72	{
73	id: 'attributes',
74	title: __('Attributes', 'code-snippets'),
75	description: __('Add shortcode attributes (name and default value). Use $atts in your output code to read them.', 'code-snippets'),
76	fields: [],
77	repeater: {
78	label: __('Shortcode attributes', 'code-snippets'),
79	addLabel: __('Add attribute', 'code-snippets'),
80	columns: [
81	{
82	name: 'name',
83	label: __('Attribute name', 'code-snippets'),
84	type: 'text',
85	value: ''
86	},
87	{
88	name: 'default',
89	label: __('Default value', 'code-snippets'),
90	type: 'text',
91	value: ''
92	},
93	{
94	name: 'type',
95	label: __('Attribute type', 'code-snippets'),
96	type: 'select',
97	value: ''
98	}
99	],
100	rows: [
101	{ id: 'name', values: ['name', 'Jane Doe', __('Text', 'code-snippets')] },
102	{ id: 'role', values: ['role', 'Director', __('Text', 'code-snippets')] }
103	]
104	}
105	},
106	{
107	id: 'output',
108	title: __('Output', 'code-snippets'),
109	fields: [
110	{
111	name: 'useOutputBuffering',
112	label: __('Use Output Buffering', 'code-snippets'),
113	type: 'select',
114	value: __('No (use return statement)', 'code-snippets'),
115	required: true,
116	description: __('Enable output buffering to capture echoed content instead of returning.', 'code-snippets')
117	},
118	{
119	name: 'shortcodeCode',
120	label: __('Shortcode Code', 'code-snippets'),
121	type: 'textarea',
122	value: SHORTCODE_OUTPUT,
123	required: true,
124	description: __('The PHP code that generates the shortcode output. Use $atts for attributes and $content for enclosed content.', 'code-snippets')
125	}
126	]
127	}
128	]
129
130	export const getSection = (id: string): DemoSection =>
131	DEMO_SECTIONS.find(section => section.id === id) ?? DEMO_SECTIONS[0]
132