[#129] Adding styles and variations

vigetlabs · Jul 24, 2024 · 2444cc5 · 2444cc5
1 parent d2f1ff6
commit 2444cc5
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 8 deletions.
diff --git a/wp-content/themes/wp-starter/plop-templates/block.json.hbs b/wp-content/themes/wp-starter/plop-templates/block.json.hbs
@@ -6,11 +6,35 @@
   "category": "components",
   "textdomain": "wp-starter",
   "keywords": ["{{dashCase name}}"],
+  "attributes": {
+    "align": {
+      "type": "string",
+      "default": "full"
+    },
+    "style": {
+      "type": "object",
+      "default": {
+        "spacing": {
+          "padding": {
+            "top": "var:preset|spacing|20",
+            "bottom": "var:preset|spacing|20",
+            "left": "var:preset|spacing|20",
+            "right": "var:preset|spacing|20"
+         }
+        }
+      }
+    }
+  },
   "supports": {
     "jsx": true,
     "mode": false,
-    "alignWide": true
+    "alignWide": true,
+    "color": {
+      "background": true
+    }
   },
+  -- PREPEND STYLES HERE --
+  -- PREPEND VARIATIONS HERE --
   "acf": {
     "mode": "preview"
   }

diff --git a/wp-content/themes/wp-starter/plop-templates/parts/styles.json.hbs b/wp-content/themes/wp-starter/plop-templates/parts/styles.json.hbs
@@ -0,0 +1,7 @@
+"styles": [
+    {
+      "name": "default",
+      "label": "Default",
+      "isDefault": true
+    }
+  ],
diff --git a/wp-content/themes/wp-starter/plop-templates/parts/variations.json.hbs b/wp-content/themes/wp-starter/plop-templates/parts/variations.json.hbs
@@ -0,0 +1,9 @@
+"variations": [
+    {
+      "name": "{{dashCase name}}-variation",
+      "icon": "schedule",
+      "title": "{{titleCase name}} Variation",
+      "scope": ["transform"],
+      "isDefault": true
+    }
+  ],
diff --git a/wp-content/themes/wp-starter/plopfile.js b/wp-content/themes/wp-starter/plopfile.js
@@ -6,14 +6,68 @@ module.exports = function (plop) {
 			{
 				type: 'input',
 				name: 'name',
-				message: 'What is the block name?'
+				message: 'What is the block name?',
+				validate: function (value) {
+					if (/.+/.test(value)) {
+					  return true;
+					}
+					return "Name is required";
+				  },
 			},
+			{
+				type: 'confirm',
+				name: 'styles',
+				message: 'Do you want block styles?'
+			},
+			{
+				type: 'confirm',
+				name: 'variations',
+				message: 'Do you want block variations?'
+			}
 		],
-		actions: [{
-			type: 'addMany',
-			destination: 'blocks/{{name}}/',
-			base: 'plop-templates',
-			templateFiles: 'plop-templates/*.hbs'
-		}]
+		actions: function(data) {
+			var actions = [{
+				type: 'addMany',
+				destination: 'blocks/{{dashCase name}}/',
+				base: 'plop-templates',
+				templateFiles: 'plop-templates/*.hbs',
+				abortOnFail: true,
+			}];
+
+			// add styles
+			if (data.styles) {
+				actions.push({
+					type: 'modify',
+					path: 'blocks/{{dashCase name}}/block.json',
+					pattern: /-- PREPEND STYLES HERE --/gi,
+					templateFile: 'plop-templates/parts/styles.json.hbs'
+				});
+			} else {
+				actions.push({
+					type: 'modify',
+					path: 'blocks/{{dashCase name}}/block.json',
+					pattern: /-- PREPEND STYLES HERE --/gi
+				});
+			}
+
+			// add styles
+			if (data.styles) {
+				actions.push({
+					type: 'modify',
+					path: 'blocks/{{dashCase name}}/block.json',
+					pattern: /-- PREPEND VARIATIONS HERE --/gi,
+					templateFile: 'plop-templates/parts/variations.json.hbs'
+				});
+			} else {
+				actions.push({
+					type: 'modify',
+					path: 'blocks/{{dashCase name}}/block.json',
+					pattern: /-- PREPEND VARIATIONS HERE --/gi
+				});
+			}
+
+
+            return actions;
+        }
 	});
 };