import { __ } from '@wordpress/i18n'
import type { DemoSection } from './types'
export const BLUEPRINT_TITLE = __('Create a Shortcode', 'code-snippets')
export const BLUEPRINT_DESCRIPTION = __('Create a custom shortcode to display dynamic content using a simple tag.', 'code-snippets')
const SHORTCODE_OUTPUT = `// Build the card markup from the shortcode attributes.
return sprintf(
'
',
esc_html( $atts['name'] ),
esc_html( $atts['role'] )
);`
/**
* The blueprint as the walkthrough presents it: a worked example rather than
* the empty defaults, so the fields read as a job someone would actually do.
*/
export const DEMO_SECTIONS: DemoSection[] = [
{
id: 'general',
title: __('General', 'code-snippets'),
fields: [
{
name: 'functionName',
label: __('Function Name', 'code-snippets'),
type: 'text',
value: 'render_staff_profile',
required: true,
description: __('The callback function name for your shortcode.', 'code-snippets')
},
{
name: 'shortcodeTag',
label: __('Shortcode Tag', 'code-snippets'),
type: 'text',
value: 'staff_profile',
required: true,
description: __('The shortcode tag used in content (e.g., [my_shortcode]). Lowercase, no spaces.', 'code-snippets')
},
{
name: 'shortcodeDescription',
label: __('Description', 'code-snippets'),
type: 'text',
value: __('Displays a staff member card with a name and role.', 'code-snippets'),
description: __('Optional description for documentation purposes.', 'code-snippets')
},
{
name: 'textDomain',
label: __('Text Domain', 'code-snippets'),
type: 'text',
value: 'code-snippets-blueprints',
description: __('Translation text domain. Optional.', 'code-snippets')
},
{
name: 'isEnclosing',
label: __('Enclosing Shortcode', 'code-snippets'),
type: 'select',
value: __('No (self-closing)', 'code-snippets'),
required: true,
description: __('Enclosing shortcodes wrap content: [shortcode]content[/shortcode]', 'code-snippets')
},
{
name: 'supportsNestedShortcodes',
label: __('Support Nested Shortcodes', 'code-snippets'),
type: 'select',
value: __('No', 'code-snippets'),
required: true,
description: __('Process shortcodes within the content using do_shortcode().', 'code-snippets')
}
]
},
{
id: 'attributes',
title: __('Attributes', 'code-snippets'),
description: __('Add shortcode attributes (name and default value). Use $atts in your output code to read them.', 'code-snippets'),
fields: [],
repeater: {
label: __('Shortcode attributes', 'code-snippets'),
addLabel: __('Add attribute', 'code-snippets'),
columns: [
{
name: 'name',
label: __('Attribute name', 'code-snippets'),
type: 'text',
value: ''
},
{
name: 'default',
label: __('Default value', 'code-snippets'),
type: 'text',
value: ''
},
{
name: 'type',
label: __('Attribute type', 'code-snippets'),
type: 'select',
value: ''
}
],
rows: [
{ id: 'name', values: ['name', 'Jane Doe', __('Text', 'code-snippets')] },
{ id: 'role', values: ['role', 'Director', __('Text', 'code-snippets')] }
]
}
},
{
id: 'output',
title: __('Output', 'code-snippets'),
fields: [
{
name: 'useOutputBuffering',
label: __('Use Output Buffering', 'code-snippets'),
type: 'select',
value: __('No (use return statement)', 'code-snippets'),
required: true,
description: __('Enable output buffering to capture echoed content instead of returning.', 'code-snippets')
},
{
name: 'shortcodeCode',
label: __('Shortcode Code', 'code-snippets'),
type: 'textarea',
value: SHORTCODE_OUTPUT,
required: true,
description: __('The PHP code that generates the shortcode output. Use $atts for attributes and $content for enclosed content.', 'code-snippets')
}
]
}
]
export const getSection = (id: string): DemoSection =>
DEMO_SECTIONS.find(section => section.id === id) ?? DEMO_SECTIONS[0]