Merge pull request #159 from alleyinteractive/typescript

Switching to using Typescript by default

Author: srtfisher

bin/create-block/index.js

@@ -11,14 +11,22 @@ module.exports = {
     description: '',
     dashicon: 'palmtree',
     category: 'widgets',
-    editorScript: 'file:index.js',
+    editorScript: 'file:index.ts',
     editorStyle: 'file:index.css',
     style: ['file:style-index.css'],
-    render: 'file:render.php',
   },
   variants: {
     static: {},
-    dynamic: {},
+    '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'),
+  blockTemplatesPath: path.join(__dirname, 'templates', 'block', 'typescript'),
 };

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

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

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

@@ -0,0 +1,38 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './index.scss';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit() {
+  return (
+    <p {...useBlockProps()}>
+      { __('Block Title – hello from the editor!', 'create-wordpress-plugin') }
+    </p>
+  );
+}

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

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Block Name: {{title}}.
+ *
+ * @package create-wordpress-plugin
+ */
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+	// Register the block by passing the location of block.json.
+	register_block_type(
+		__DIR__
+	);
+
+}
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );