Add support for @wordpress/scripts, block.json and create block

.editorconfig

@@ -8,7 +8,7 @@ insert_final_newline = true
 indent_style = tab
 indent_size = 4
 
-[*.{js,jsx,scss,css,json,yaml,yml,feature,xml}]
+[*.{ts,tsx,js,jsx,scss,css,json,yaml,yml,feature,xml}]
 indent_style = space
 indent_size = 2
 

.eslintrc.json

@@ -5,14 +5,15 @@
     "jest": true,
     "node": true
   },
-  "extends": ["airbnb", "airbnb/hooks"],
-  "parser": "@babel/eslint-parser",
+  "extends": ["airbnb", "airbnb-typescript", "airbnb/hooks"],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "globalReturn": true,
       "impliedStrict": true,
       "jsx": true
     },
+    "project": "./tsconfig.json",
     "sourceType": "module"
   },
   "rules": {
@@ -26,7 +27,10 @@
         "message": "Ternaries must be used instead of || in JSX expressions to avoid the potential for accidental output. Use, for example, {thing1 ? thing1 : thing2}.",
         "selector": ":matches(JSXElement, JSXFragment) > JSXExpressionContainer > LogicalExpression[operator='||']"
       }
-    ]
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": "off"
   },
   "settings": {
     "import/resolver": "webpack"

.stylelintrc.json

@@ -1,24 +1,3 @@
 {
-  "extends": "stylelint-config-sass-guidelines",
-  "rules": {
-    "max-nesting-depth": [
-      3,
-      {
-        "ignoreAtRules": [
-          "each",
-          "media",
-          "supports",
-          "include"
-        ]
-      }
-    ],
-    "selector-class-pattern": [
-      "^[a-z0-9\\-_]+$",
-      {
-        "message":
-        "Selector should be written in lowercase with hyphens and/or underscores (selector-class-pattern)"
-      }
-    ],
-    "selector-no-qualifying-type": null
-  }
-}
+	"extends": "@alleyinteractive/stylelint-config"
+}

README.md

@@ -74,24 +74,32 @@ Run `npm run lint` to run ESLint against all JavaScript files. Linting will also
 happen when running development or production builds.
 
 Run `composer test` to run tests against PHPUnit and the PHP code in the plugin.
-## Updating Dependencies
 
-To update `@wordpress` dependencies, simply execute:
+### Updating WP Dependencies
+
+Updates the [WordPress dependency packages](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#packages-update) used in the project to their latest version.
+
+To update `@wordpress` dependencies to their latest version use the packages-update command:
+
+```sh
+npm run packages-update
+```
+
+This script provides the following custom options:
+
+-   `--dist-tag` – allows specifying a custom dist-tag when updating npm packages. Defaults to `latest`. This is especially useful when using [`@wordpress/dependency-extraction-webpack-plugin`](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin). It lets installing the npm dependencies at versions used by the given WordPress major version for local testing, etc. Example:
 
 ```sh
-npm run update-dependencies WPVERSION
+npm run packages-update --dist-tag=wp-WPVERSION`
 ```
 
 Where `WPVERSION` is the version of WordPress you are targeting. The version
-must include both the major and patch version (e.g., `5.9.3`). For example:
+must include both the major and minor version (e.g., `6.1`). For example:
 
 ```sh
-npm run update-dependencies 5.9.3
+npm run packages-update --dist-tag=wp-6.1`
 ```
 
-The versions are drawn from tags on
-[wordpress-develop](https://github.com/WordPress/wordpress-develop/tags).
-<!--/front-end-->
 ## Changelog
 
 Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

babel.config.js

@@ -0,0 +1,14 @@
+/**
+ * This babel config is used by Jest to ensure that tests
+ * will run correctly in Typescript and JavaScript files.
+ *
+ * Jest supports TypeScript, via Babel.
+ *
+ * @see https://jestjs.io/docs/getting-started#using-typescript
+ */
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@wordpress/babel-preset-default',
+  ],
+};

bin/create-block/index.js

@@ -0,0 +1,24 @@
+const path = require('path');
+
+/**
+ * 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
+ */
+module.exports = {
+  defaultValues: {
+    namespace: 'create-wordpress-plugin',
+    plugin: false,
+    description: '',
+    dashicon: 'palmtree',
+    category: 'widgets',
+    editorScript: 'file:index.js',
+    editorStyle: 'file:index.css',
+    style: ['file:style-index.css'],
+    render: 'file:render.php',
+  },
+  variants: {
+    static: {},
+    dynamic: {},
+  },
+  blockTemplatesPath: path.join(__dirname, 'templates', 'block'),
+};

bin/create-block/templates/block/edit.jsx.mustache

@@ -0,0 +1,39 @@
+/**
+ * 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 (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <p {...useBlockProps()}>
+      { __('Block Title – hello from the editor!', 'create-wordpress-plugin') }
+    </p>
+  );
+}

bin/create-block/templates/block/index.js.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';
+{{#isAnotherVariant}}
+console.log('it worked');
+{{/isAnotherVariant}}
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(
+  metadata.name,
+  {
+    edit,
+    {{#isStaticVariant}}
+    save,
+    {{/isStaticVariant}}
+  },
+);

bin/create-block/templates/block/index.php.mustache

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Block Name: {{title}}.
+ *
+ * @package package_name
+ */
+
+/**
+ * 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/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/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 package_name
+ */
+
+?>
+<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/save.jsx.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/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;
+}

blocks/README.md

@@ -0,0 +1,56 @@
+# Blocks Directory
+
+Custom blocks in this directory can be created by running the `create-block` script.
+
+### Scaffold a block
+
+1. In the root directory run `npm run create-block`
+2. Follow the prompts to create a custom block.
+
+There are 2 variants of blocks which you can create:
+
+1. `static` - scaffolds a [basic block](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/) with edit.js and save.js functions.
+2. `dynamic` - scaffolds a [dynamic block](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/) with a `render.php` file for server side output on the front end.
+
+The create-block script will create the block files in a directory using the `slug` field entered from the prompts when scaffolding the block.
+
+The script uses the [@wordpress/create-block](https://github.com/WordPress/gutenberg/tree/trunk/packages/create-block#create-block) script with the `--no-plugin` flag for scaffolding block files only, and the `--template` flag setting the block template files to be scaffolded. See the create-block script in `package.json`.
+
+You can also scaffold a quick block by navigating to the blocks directory in your terminal and run the following command by passing in a slug for quick static block scaffolding:
+```
+npx @wordpress/create-block my-slug --template ../bin/create-block --no-plugin
+```
+
+For **static blocks** the following files will be generated:
+
+```
+blocks/
+└───static-block-slug
+    │   block.json
+    │   edit.jsx
+    |   editor.scss
+    |   index.js
+    |   index.php
+    |   save.jsx
+    |   styles.scss
+```
+
+For **dynmanic blocks** the following files will be generated:
+
+```
+blocks/
+└───dynamic-block-slug
+    │   block.json
+    │   edit.jsx
+    |   editor.scss
+    |   index.js
+    |   index.php
+    |   styles.scss
+    |   render.php
+```
+
+The `index.php` contains the PHP block registration and will be autoloaded once the block has been built by running `npm run build`.
+
+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 `wp-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.