diff --git a/docs/generators.md b/docs/generators.md index 622185c..c4266d8 100644 --- a/docs/generators.md +++ b/docs/generators.md @@ -65,3 +65,17 @@ The following files will be created based on your input: - `src/php/views/.twig` [Page Template documentation](https://developer.wordpress.org/themes/template-files-section/page-template-files/) + +## Reusable Pattern + +The generator for reusable patterns will prompt you for a name, description, and categories for the pattern, then create a script to register a reusable pattern with metadata based on your inputs and instructions for how to create the markup for the pattern. + +```sh +npm run generate:pattern +``` + +The following file will be created based on your input: + +- `src/php/patterns/.php` + +[Reusable pattern (a.k.a. Block pattern) documentation](https://developer.wordpress.org/themes/advanced-topics/block-patterns/) diff --git a/generators/pattern.js b/generators/pattern.js new file mode 100644 index 0000000..55b4a8a --- /dev/null +++ b/generators/pattern.js @@ -0,0 +1,130 @@ +const { writeFileSync, readFileSync } = require('fs'); +const { join } = require('path'); +const prompts = require('prompts'); + +const getPatternScript = ({ patternSlug, themeSlug, description, categories }) => ` + +

Replace this sample content with markup for a pattern.

+ + + + + +`; + +const getDetails = async () => { + const questions = [ + { + type: 'text', + name: 'name', + message: 'What should the pattern be called? Content editors will search for this name.', + }, + { + type: 'text', + name: 'description', + message: + 'Please describe this pattern. This will help content editors understand what the pattern should be used for.', + }, + { + type: 'multiselect', + name: 'categories', + message: + 'Which pattern categories should this pattern be included in? This will help content editors find the pattern.', + hint: 'Space to select. Return to submit', + instructions: false, + choices: [ + { + title: 'My patterns (recommended)', + value: 'custom', + selected: true, + }, + { + title: 'Featured', + value: 'featured', + selected: false, + }, + { + title: 'Posts', + value: 'posts', + selected: false, + }, + { + title: 'Text', + value: 'text', + selected: false, + }, + { + title: 'Gallery', + value: 'gallery', + selected: false, + }, + { + title: 'Call to Action', + value: 'call-to-action', + selected: false, + }, + { + title: 'Banners', + value: 'banner', + selected: false, + }, + { + title: 'Headers', + value: 'header', + selected: false, + }, + { + title: 'Footers', + value: 'footer', + selected: false, + }, + ], + }, + ]; + + const response = await prompts(questions); + + return response; +}; + +const getFirstGroup = (regexp, str) => + Array.from(str.matchAll(regexp), (match) => match[1])?.[0] ?? 'theme-slug'; + +const getThemeSlug = () => { + const themeDefinitionPath = join(__dirname, '../src/php/style.css'); + const themeDefinition = readFileSync(themeDefinitionPath, { encoding: 'utf-8' }); + + const themeSlug = getFirstGroup(/Theme Name:\s(.*)/gm, themeDefinition); + + return themeSlug.toLowerCase().replace(/\W/g, '-'); +}; + +const generatePattern = async () => { + const themeSlug = getThemeSlug(); + const { name, description, categories } = await getDetails(); + const patternSlug = name.toLowerCase().replace(/\W/g, '-'); + const templateParams = { patternSlug, themeSlug, description, categories }; + + const patternScript = getPatternScript(templateParams); + const patternScriptPath = join(__dirname, '../src/php/patterns', `${patternSlug}.php`); + writeFileSync(patternScriptPath, patternScript, 'utf-8'); + console.log(`Created ${patternScriptPath}`); +}; + +generatePattern(); diff --git a/package.json b/package.json index 79e5ee4..7bcaec9 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "import-db": "./scripts/import-db.sh", "preimport-db": "npm run backup-db", "generate:page-template": "node ./generators/page-template.js", + "generate:pattern": "node ./generators/pattern.js", "generate:post-type": "node ./generators/post-type.js", "generate:shortcode": "node ./generators/shortcode.js", "generate:taxonomy": "node ./generators/taxonomy.js", diff --git a/src/php/patterns/.gitkeep b/src/php/patterns/.gitkeep new file mode 100644 index 0000000..e69de29