Merge pull request #133 from alleyinteractive/assets-create-wordpress…

…-plugin

Replacing mix with create-wordpress-plugin webpack and porting over block generator

.eslintignore

@@ -1,5 +1,3 @@
-webpack
-src/webpack
 build
 vendor
-webpack.mix.js
+webpack.config.js

.eslintrc.json

@@ -1,9 +1,13 @@
 {
-  // Extend the AirBnb lint config
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true,
+    "node": true
+  },
   "extends": ["airbnb", "airbnb-typescript", "airbnb/hooks"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 6,
     "ecmaFeatures": {
       "globalReturn": true,
       "impliedStrict": true,
@@ -12,29 +16,23 @@
     "project": "./tsconfig.json",
     "sourceType": "module"
   },
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true,
-    "jest":  true
-  },
-  "globals": {
-    "wp": true
-  },
-  "settings": {
-    "import/resolver": "webpack"
-  },
-  "plugins": [
-    "react-hooks"
-  ],
   "rules": {
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "import/prefer-default-export": "off",
-    "import/no-unresolved": [0],
-    "import/no-cycle": [0],
-    "import/extensions": [0],
+    "no-restricted-syntax": [
+      "error",
+      {
+        "message": "Ternaries must be used instead of && in JSX expressions to avoid the potential for accidental output. Use, for example, {condition ? <Element /> : null}.",
+        "selector": ":matches(JSXElement, JSXFragment) > JSXExpressionContainer > LogicalExpression[operator='&&']"
+      },
+      {
+        "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"
   }
 }

.github/dependabot.yml

@@ -13,3 +13,13 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
+
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "saturday"
+      time: "09:00"
+      timezone: "America/New_York"
+    ignore:
+      - dependency-name: "@wordpress/*"

.github/workflows/upgrade-wordpress-plugin.yml

@@ -0,0 +1,19 @@
+name: Update WordPress Plugin
+
+on:
+  schedule:
+    - cron: '0 */6 * * *'
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  update-plugin:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: alleyinteractive/[email protected]
+      with:
+        plugin-file: 'plugin.php'
+        upgrade-npm-dependencies: "true"

app/providers/class-asset-service-provider.php

@@ -22,19 +22,35 @@ class Asset_Service_Provider extends Service_Provider {
 	 * @return void
 	 */
 	public function boot() {
+		/*
+		|--------------------------------------------------------------------------
+		| Load the blocks included with the plugin.
+		|--------------------------------------------------------------------------
+		|
+		| This will load the blocks included with the plugin and generated
+		| with `npm run create-block`.
+		|
+		*/
+		$this->load_blocks();
+
 		/*
 		|--------------------------------------------------------------------------
 		| Enqueue Assets
 		|--------------------------------------------------------------------------
 		|
+		| Enqueue an asset directly from the build/ folder (with any dependencies included)
+		|
+		|    asset()->script( '/app.js' )->async();
+		|    asset()->style( '/article.css' )->condition( 'single' );
+		|
 		| Enqueue a raw asset using the asset() helper:
 		|
-		| 	 asset()->script( 'example-entry' )->async()->src( mix( '/app.js' ) );
-		| 	 asset()->style( 'example-entry' )->condition( 'single' )->src( mix( '/app.css' ) );
+		| 	 asset()->script( 'example-entry' )->async()->src( asset_loader( '/app.js' ) );
+		| 	 asset()->style( 'example-entry' )->condition( 'single' )->src( asset_loader( '/app.css' ) );
 		|
 		| Enqueue an asset with dependencies from @wordpress/dependency-extraction-webpack-plugin:
 		|
-		| 	 asset()->script( 'example-block' )->src( mix( '/example-block.js' ) )->dependencies( mix()->dependencies( '/example-block.js' ) );
+		| 	 asset()->script( 'example-block' )->src( asset_loader( '/example-block.js' ) )->dependencies( asset_loader()->dependencies( '/example-block.js' ) );
 		|
 		| Get cookin'!
 		|

bin/create-block/index.js

@@ -0,0 +1,32 @@
+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.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'),
+};

bin/create-block/templates/block/javascript/edit.jsx.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/javascript/index.js.mustache

@@ -0,0 +1,39 @@
+/**
+ * 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(
+  metadata.name,
+  {
+    edit,
+    {{#isStaticVariant}}
+    save,
+    {{/isStaticVariant}}
+  },
+);

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

bin/create-block/templates/block/javascript/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/javascript/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/javascript/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/javascript/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;
+}

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>
+  );
+}