Merge pull request #186 from alleyinteractive/feature/hmr-editor

Fix static/dynamic block variants, add prompt for block templates, HMR support for blocks.

Author: stevenslack

bin/create-block/defaultValues.js

@@ -0,0 +1,15 @@
+/**
+ * Default variables for scaffolding blocks.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/create-block/docs/external-template.md#defaultvalues
+ */
+module.exports = {
+  namespace: 'create-wordpress-plugin',
+  plugin: false,
+  description: '',
+  dashicon: 'palmtree',
+  category: 'widgets',
+  editorScript: 'file:index.ts',
+  editorStyle: 'file:index.css',
+  style: ['file:style-index.css'],
+};

bin/create-block/index.js

@@ -1,32 +1,72 @@
+#!/usr/bin/env node
+
+const prompts = require('prompts');
 const path = require('path');
+const { sync: spawn } = require('cross-spawn');
+
+const fs = require('fs');
+
+// The directory where the blocks will be created relative to the current working directory.
+const directoryName = 'blocks';
+
+// Create the directory if it doesn't exist.
+if (!fs.existsSync(directoryName)) {
+  fs.mkdirSync(directoryName);
+  // eslint-disable-next-line no-console
+  console.log(`Directory '${directoryName}' created successfully!`);
+  // Navigate to the directory to create the block.
+  process.chdir(directoryName);
+} else {
+  process.chdir(directoryName);
+}
 
 /**
- * Custom Variables and templates for scaffolding blocks.
- * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/create-block/docs/external-template.md#external-project-templates
+ * Prompts the user to select a block language (TypeScript or JavaScript)
+ * and then create a block using the @wordpress/create-block package.
  */
-module.exports = {
-  defaultValues: {
-    namespace: 'create-wordpress-plugin',
-    plugin: false,
-    description: '',
-    dashicon: 'palmtree',
-    category: 'widgets',
-    editorScript: 'file:index.ts',
-    editorStyle: 'file:index.css',
-    style: ['file:style-index.css'],
-  },
-  variants: {
-    static: {},
-    'static-javascript': {
-      blockTemplatesPath: path.join(__dirname, 'templates', 'block', 'javascript'),
-    },
-    dynamic: {
-      render: 'file:render.php',
-    },
-    'dynamic-javascript': {
-      blockTemplatesPath: path.join(__dirname, 'templates', 'block', 'javascript'),
-      render: 'file:render.php',
-    },
-  },
-  blockTemplatesPath: path.join(__dirname, 'templates', 'block', 'typescript'),
-};
+(async () => {
+  const response = await prompts({
+    type: 'select',
+    name: 'blockLanguage',
+    message: 'Create a block in TypeScript or JavaScript?',
+    choices: [
+      { title: 'TypeScript', value: 'typescript' },
+      { title: 'JavaScript', value: 'javascript' },
+    ],
+    initial: 0,
+  });
+
+  const language = response?.blockLanguage || null;
+
+  if (language) {
+    // Set the block language as an environment variable
+    // so it can be used in the selectTemplates.js file.
+    process.env.blockLanguage = language;
+
+    // Create a block using the @wordpress/create-block package.
+    const result = spawn(
+      'npx',
+      [
+        '@wordpress/create-block',
+        /**
+         * This argument specifies an external npm package as a template.
+         * In this case, the selectTemplates.js file is used as a the entry for the template.
+         * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#template
+         */
+        '--template',
+        path.join(__dirname, 'selectTemplates.js'),
+        /**
+         * With this argument, the create-block package runs in
+         * "No plugin mode" which only scaffolds block files into the current directory.
+         * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#no-plugin
+         */
+        '--no-plugin',
+      ],
+      { stdio: 'inherit' },
+    );
+
+    process.exit(result.status);
+  } else {
+    process.exit(1);
+  }
+})();

bin/create-block/selectTemplates.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const defaultValues = require('./defaultValues');
+
+const { blockLanguage } = process.env;
+
+/**
+ * Custom variants for scaffolding blocks.
+ *
+ * Currently there are only two variants:
+ * - static:  A block that scaffolds a save.js file
+ *            that saves the content and markup directly in the post content.
+ * - dynamic: A block that scaffolds a render.php template
+ *            which can be used to render the block on the front-end.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/create-block/docs/external-template.md#external-project-templates
+ */
+module.exports = {
+  defaultValues,
+  variants: {
+    static: {
+      blockTemplatesPath: path.join(__dirname, 'templates', blockLanguage),
+    },
+    dynamic: {
+      blockTemplatesPath: path.join(__dirname, 'templates', blockLanguage),
+      render: 'file:render.php',
+    },
+  },
+  blockTemplatesPath: path.join(__dirname, 'templates', blockLanguage),
+};

bin/create-block/templates/block/javascript/edit.jsx.mustache renamed to bin/create-block/templates/javascript/edit.jsx.mustache

@@ -12,6 +12,6 @@
 
 ?>
 <p <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>>
-	<?php esc_html_e( '{{title}} – hello from a dynamic block!', 'create-wordpress-plugin' ); ?>
+	<?php esc_html_e( '{{title}} - hello from a dynamic block!', 'create-wordpress-plugin' ); ?>
 </p>
 {{/isDynamicVariant}}

bin/create-block/templates/block/javascript/index.js.mustache renamed to bin/create-block/templates/javascript/index.js.mustache

@@ -19,7 +19,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 export default function save() {
   return (
     <p {...useBlockProps.save()}>
-      {'{{title}} – hello from the saved content!'}
+      {'{{title}} - hello from the saved content!'}
     </p>
   );
 }

bin/create-block/templates/block/javascript/index.php.mustache renamed to bin/create-block/templates/javascript/index.php.mustache

@@ -32,7 +32,7 @@ import './index.scss';
 export default function Edit() {
   return (
     <p {...useBlockProps()}>
-      { __('Block Title – hello from the editor!', 'create-wordpress-plugin') }
+      { __('Block Title - hello from the editor!', 'create-wordpress-plugin') }
     </p>
   );
 }

bin/create-block/templates/block/javascript/index.scss.mustache renamed to bin/create-block/templates/javascript/index.scss.mustache

@@ -12,6 +12,6 @@
 
 ?>
 <p <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>>
-	<?php esc_html_e( '{{title}} – hello from a dynamic block!', 'create-wordpress-plugin' ); ?>
+	<?php esc_html_e( '{{title}} - hello from a dynamic block!', 'create-wordpress-plugin' ); ?>
 </p>
 {{/isDynamicVariant}}

bin/create-block/templates/block/javascript/render.php.mustache renamed to bin/create-block/templates/javascript/render.php.mustache

@@ -19,7 +19,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 export default function save() {
   return (
     <p {...useBlockProps.save()}>
-      {'{{title}} – hello from the saved content!'}
+      {'{{title}} - hello from the saved content!'}
     </p>
   );
 }

bin/create-block/templates/block/javascript/save.jsx.mustache renamed to bin/create-block/templates/javascript/save.jsx.mustache

@@ -5,7 +5,8 @@ Custom blocks in this directory can be created by running the `create-block` scr
 ## Scaffold a block with `create-block`
 
 1. In the root directory run `npm run create-block`
-2. Follow the prompts to create a custom block.
+2. Choose whether to create a block in TypeScript or JavaScript.
+3. Follow the prompts to create a custom block.
 
 There are 2 variants of blocks which you can create:
 
@@ -53,7 +54,7 @@ The `index.php` contains the PHP block registration and will be autoloaded with
 
 Block attributes should be defined in the `block.json` file. [Learn more about block.json in the block editor handbook.](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/)
 
-Running `npm run build` will compile the JavaScript and copy the PHP files to a directory in the `build` folder using `@wordpress/scripts`. The blocks will be enqueued via `block.json` after block registration. The block `index.php` file will be read by the `load_scripts()` function found in the `function.php` file.
+Running `npm run build` will compile the JavaScript and copy the PHP files to a directory in the `build` folder using `@wordpress/scripts`. The blocks will be enqueued via `block.json` after block registration. The block `index.php` file will be read by the `load_scripts()` function found in the `src/assets.php` file.
 
 ## Customize the block scaffolding templates