[#129] Adding block pattern and theme slugs

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__ - *Icons are from [WordPress Icons](https://developer.wordpress.org/resource/dashicons/) and you can change the icon 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).

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",

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": {

wp-content/themes/wp-starter/plop-templates/patterns/{{dashCase name}}-inner-blocks.php.hbs

@@ -0,0 +1,9 @@
+<?php
+/**
+ * Title: {{titleCase name}}
+ * Slug: {{dashCase themeslug}}/{{dashCase name}}-inner-blocks
+ * Viewport width: 1400
+ * Inserter: no
+ */
+
+?>

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',
 		}
 	]
 ] %}

wp-content/themes/wp-starter/plopfile.js

@@ -26,10 +26,21 @@ 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',
-				message: 'Pick an WordPress icon for the block',
+				message: 'Pick a WordPress icon for the block',
 				choices: WPIcons,
 			},
 			{
@@ -41,7 +52,7 @@ module.exports = function (plop) {
 				type: 'confirm',
 				name: 'variations',
 				message: 'Do you need block variations?'
-			}
+			},
 		],
 		actions: function(data) {
 			var actions = [
@@ -52,10 +63,17 @@ 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",
-					pattern: /\/\*DO NOT REMOVE Everything below this line is automatically generated\*\//i,
+					pattern: /\/\*DO NOT REMOVE - Everything below this line is automatically generated\*\//i,
 					templateFile: 'plop-templates/parts/css-link.css.hbs'
 				},
 			];