From f8f9a1b100f0335cdafa2d8935b3c536ee8a7597 Mon Sep 17 00:00:00 2001 From: Nathan Schmidt <91974372+nathan-schmidt-viget@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:30:53 -0600 Subject: [PATCH] [#129] Adding block pattern and theme slug --- wp-content/themes/wp-starter/README.md | 15 ++++++++++++++ wp-content/themes/wp-starter/package.json | 2 +- .../wp-starter/plop-templates/block.json.hbs | 2 +- .../{{dashCase name}}-inner-blocks.php.hbs | 9 +++++++++ .../wp-starter/plop-templates/render.twig.hbs | 2 +- wp-content/themes/wp-starter/plopfile.js | 20 ++++++++++++++++++- 6 files changed, 46 insertions(+), 4 deletions(-) create mode 100644 wp-content/themes/wp-starter/plop-templates/patterns/{{dashCase name}}-inner-blocks.php.hbs diff --git a/wp-content/themes/wp-starter/README.md b/wp-content/themes/wp-starter/README.md index 501d35dc..b3bee550 100644 --- a/wp-content/themes/wp-starter/README.md +++ b/wp-content/themes/wp-starter/README.md @@ -24,6 +24,21 @@ Blocks are build using ACF and core WordPress blocks. Styles for the blocks are * Text Image * Video Embed +### Creating New Blocks +The theme is set up with [plop](https://plopjs.com/) which will auto generate a new block based on the options you input. +In order build a new block run: + +``` +ddev npm run plop block +``` + +It will ask you a few question: +* __What is the block name?__ - *This can be whatever you want.* +* __What is the slug for your theme?__ - *This would your theme slug. If you are unsure of what that is, you can look at `textdomain:` in side of any `block.json` files.* +* __Pick a WordPress icon for the block__ - *These are from [WordPress Icons](https://developer.wordpress.org/resource/dashicons/) and you can update the icons if you don't see one you want.* +* __Do you need block styles?__ - *Adds the option for adding a class to the block’s wrapper - [Block Styles](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/)* +* __Do you need block variations?__ - *Adds the option for a block variant - [Block Variations](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/)* + ## Customizing Theme 🎨 ### Fonts Fonts are pulled in by [typography.js](/src/theme-json/settings/typography.js). Update the `src` to pull in the font files in `/src/fonts`. For more info on setting up WordPress fonts check out [fullsiteediting](https://fullsiteediting.com/lessons/creating-theme-json/#h-typography). diff --git a/wp-content/themes/wp-starter/package.json b/wp-content/themes/wp-starter/package.json index 9a580a33..bbfbbd02 100644 --- a/wp-content/themes/wp-starter/package.json +++ b/wp-content/themes/wp-starter/package.json @@ -11,7 +11,7 @@ "build": "vite build", "format": "prettier \"./src/**/*.{css,ts,tsx,js}\" --check", "format:fix": "prettier \"./src/**/*.{css,ts,tsx,js}\" --write", - "new:block": "plop" + "plop": "plop" }, "devDependencies": { "autoprefixer": "^10.4.19", diff --git a/wp-content/themes/wp-starter/plop-templates/block.json.hbs b/wp-content/themes/wp-starter/plop-templates/block.json.hbs index 260cbd91..d654fbef 100644 --- a/wp-content/themes/wp-starter/plop-templates/block.json.hbs +++ b/wp-content/themes/wp-starter/plop-templates/block.json.hbs @@ -4,7 +4,7 @@ "description": "Displays the {{titleCase name}}", "icon": "{{icon}}", "category": "components", - "textdomain": "wp-starter", + "textdomain": "{{dashCase themeslug}}", "keywords": ["{{dashCase name}}"], "attributes": { "align": { diff --git a/wp-content/themes/wp-starter/plop-templates/patterns/{{dashCase name}}-inner-blocks.php.hbs b/wp-content/themes/wp-starter/plop-templates/patterns/{{dashCase name}}-inner-blocks.php.hbs new file mode 100644 index 00000000..1dd55fd5 --- /dev/null +++ b/wp-content/themes/wp-starter/plop-templates/patterns/{{dashCase name}}-inner-blocks.php.hbs @@ -0,0 +1,9 @@ + diff --git a/wp-content/themes/wp-starter/plop-templates/render.twig.hbs b/wp-content/themes/wp-starter/plop-templates/render.twig.hbs index 4599d9f1..04cd7c8f 100644 --- a/wp-content/themes/wp-starter/plop-templates/render.twig.hbs +++ b/wp-content/themes/wp-starter/plop-templates/render.twig.hbs @@ -6,7 +6,7 @@ [ 'core/pattern', { - 'slug': 'wp-starter/{{dashCase name}}-inner-blocks', + 'slug': '{{dashCase themeslug}}/{{dashCase name}}-inner-blocks', } ] ] %} diff --git a/wp-content/themes/wp-starter/plopfile.js b/wp-content/themes/wp-starter/plopfile.js index 62fe8c95..36bf13a5 100644 --- a/wp-content/themes/wp-starter/plopfile.js +++ b/wp-content/themes/wp-starter/plopfile.js @@ -26,6 +26,17 @@ module.exports = function (plop) { return "Name is required"; }, }, + { + type: 'input', + name: 'themeslug', + message: 'What is the slug for your theme?', + validate: function (value) { + if (/.+/.test(value)) { + return true; + } + return "Theme slug is required"; + }, + }, { type: 'list', name: 'icon', @@ -41,7 +52,7 @@ module.exports = function (plop) { type: 'confirm', name: 'variations', message: 'Do you need block variations?' - } + }, ], actions: function(data) { var actions = [ @@ -52,6 +63,13 @@ module.exports = function (plop) { templateFiles: 'plop-templates/*.hbs', abortOnFail: true, }, + { + type: 'addMany', + destination: 'blocks/{{dashCase name}}/', + base: 'plop-templates', + templateFiles: 'plop-templates/patterns/*.hbs', + abortOnFail: true, + }, { type: "append", path: "src/styles/main.css",