Merge pull request #159 from alleyinteractive/typescript

Switching to using Typescript by default

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'),
 };

bin/create-block/templates/block/save.jsx.mustache → bin/create-block/templates/block/javascript/save.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>
   );
 }

bin/create-block/templates/block/typescript/edit.tsx.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>
+  );
+}

bin/create-block/templates/block/typescript/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' );

bin/create-block/templates/block/typescript/index.scss.mustache

@@ -0,0 +1,13 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * All imported CSS files are bundled into one chunk named after the entry point,
+ * which defaults to index.js, and thus the file created becomes index.css.
+ * This is for styles used only in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-{{namespace}}-{{slug}} {
+  border: 1px dotted #f00;
+}

bin/create-block/templates/block/typescript/index.ts.mustache

@@ -0,0 +1,42 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+{{#isStaticVariant}}
+import save from './save';
+{{/isStaticVariant}}
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(
+  /* @ts-expect-error Provided types are inaccurate to the actual plugin API. */
+  metadata,
+  {
+    apiVersion: 2,
+    edit,
+    {{#isStaticVariant}}
+    save,
+    {{/isStaticVariant}}
+    title: metadata.title,
+  },
+);

bin/create-block/templates/block/typescript/render.php.mustache

@@ -0,0 +1,17 @@
+{{#isDynamicVariant}}
+<?php
+/**
+ * All of the parameters passed to the function where this file is being required are accessible in this scope:
+ *
+ * @param array    $attributes     The array of attributes for this block.
+ * @param string   $content        Rendered block output. ie. <InnerBlocks.Content />.
+ * @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
+ *
+ * @package create-wordpress-plugin
+ */
+
+?>
+<p <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>>
+	<?php esc_html_e( '{{title}} – hello from a dynamic block!', 'create-wordpress-plugin' ); ?>
+</p>
+{{/isDynamicVariant}}

bin/create-block/templates/block/typescript/save.tsx.mustache

@@ -0,0 +1,26 @@
+{{#isStaticVariant}}
+/**
+ * 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';
+
+/**
+ * The save function defines the way in which the different attributes should
+ * be combined into the final markup, which is then serialized by the block
+ * editor into `post_content`.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function save() {
+  return (
+    <p {...useBlockProps.save()}>
+      {'{{title}} – hello from the saved content!'}
+    </p>
+  );
+}
+{{/isStaticVariant}}

bin/create-block/templates/block/typescript/style.scss.mustache

@@ -0,0 +1,18 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Imported style.css file(s) (applies to SASS and SCSS extensions)
+ * get bundled into one style-index.css file that is meant to be
+ * used both on the front-end and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#block-styles
+ */
+
+.wp-block-{{namespace}}-{{slug}} {
+  background-color: #21759b;
+  color: #fff;
+  padding: 2px;
+}

entries/example-slotfills/index.php

@@ -36,7 +36,7 @@ function register_example_slotfills_scripts() {
 	|
 	*/
 	// Automatically load dependencies and version.
-	$asset_file = include plugin_dir_path( __FILE__ ) . 'index.asset.php';
+	$asset_file = include __DIR__ . 'index.asset.php';
 
 	/* phpcs:ignore Squiz.PHP.CommentedOutCode.Found
 	 * wp_register_script(
@@ -46,7 +46,7 @@ function register_example_slotfills_scripts() {
 	 *     $asset_file['version'],
 	 *     true
 	 * );
-	 * wp_set_script_translations( 'create-wordpress-plugin-example_slotfills', 'hollywoodlife-plugin' );
+	 * wp_set_script_translations( 'create-wordpress-plugin-example_slotfills', 'create-wordpress-plugin' );
 	 */
 }
 add_action( 'init', __NAMESPACE__ . '\register_example_slotfills_scripts' );

package.json

@@ -15,8 +15,8 @@
     "build": "wp-scripts build --webpack-copy-php --webpack-src-dir=blocks",
     "dev": "npm run start",
     "create-block": "cd blocks && npx @wordpress/create-block --template ../bin/create-block --no-plugin",
-    "lint:fix": "eslint --ext .jsx --ext .js . --fix",
-    "lint": "eslint --ext .jsx --ext .js .",
+    "lint:fix": "eslint --ext .jsx --ext .js --ext .ts --ext .tsx . --fix",
+    "lint": "eslint --ext .jsx --ext .js --ext .ts --ext .tsx .",
     "postinstall": "rm -rf node_modules/.cache/babel-loader && rm -rf node_modules/.cache/webpack",
     "prebuild": "check-node-version --package",
     "predev": "check-node-version --package",