refactor: streamline custom blocks build/lint process

- move example blocks into subfolders of src directory
- streamline build process for example blocks
- support view scripts in example blocks
- move wp-scripts to top-level package.json
- delete unnecessary dotfiles
- update instructions for using/writing custom blocks
- use same linters for plugins and other JS/SCSS
- remove formatting script of limited use

Author: dustin-jw

.eslintrc

@@ -1,27 +1,22 @@
 {
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true
-  },
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": "latest"
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier"
-  ],
-  "settings": {
-    "react": {
-      "version": "^18.2.0"
-    }
-  },
-  "ignorePatterns": ["src/js/vendor/**/*.js"],
-  "rules": {
-    "react/react-in-jsx-scope": 0,
-    "react/prop-types": 0
-  }
+	"env": {
+		"es6": true,
+		"browser": true,
+		"node": true
+	},
+	"parserOptions": {
+		"sourceType": "module",
+		"ecmaVersion": "latest"
+	},
+	"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "prettier"],
+	"settings": {
+		"react": {
+			"version": "^18.2.0"
+		}
+	},
+	"ignorePatterns": ["src/js/vendor/**/*.js", "src/plugins/**/build"],
+	"rules": {
+		"react/react-in-jsx-scope": 0,
+		"react/prop-types": 0
+	}
 }

.github/workflows/deploy.docker.yml

@@ -26,9 +26,6 @@ jobs:
       - name: Install npm dependencies
         run: npm ci
 
-      - name: Install custom plugin npm dependencies
-        run: npm run plugins:install
-
       - name: Install PHP dependencies with Composer
         uses: php-actions/composer@v6
         with:

.github/workflows/deploy.pantheon.yml

@@ -26,9 +26,6 @@ jobs:
       - name: Install npm dependencies
         run: npm ci
 
-      - name: Install custom plugin npm dependencies
-        run: npm run plugins:install
-
       - name: Install PHP dependencies with Composer
         uses: php-actions/composer@v6
         with:

.github/workflows/validation.yml

@@ -50,9 +50,6 @@ jobs:
       - name: Install npm dependencies
         run: npm ci
 
-      - name: Install custom plugin npm dependencies
-        run: npm run plugins:install
-
       - name: Lint
         run: npm run lint
         env:

.prettierignore

@@ -36,3 +36,5 @@ theme
 uploads
 vendor
 plugins
+!src/plugins
+src/plugins/**/build

CONTRIBUTING.md

@@ -11,7 +11,6 @@ Here's a few things you should know before you submit your PR:
 
 - Clone/Fork the repo
 - Install dependencies: `npm install`
-- Install plugin dependencies `npm run plugins:install`
 - Start the development process `npm start`
 - Ensure linters pass: `npm run lint`
 - Ensure tests pass: `npm test`

README.md

@@ -41,7 +41,6 @@ This project requires [Docker][docker] and [Node.js][node] for local development
 
 1. Duplicate `.env.example` and rename it `.env`, changing variables [as needed](#setting-local-environment-variables)
 1. Run `npm install`
-1. Run `npm run plugins:install` (this is necessary for the plugin for custom blocks)
 1. Either run `npm start` or run `npm run build:dev` and `npm run serve:dev` in separate terminals
 1. Based on whether you have a database to import or not, do one of the following:
    - Visit `https://localhost:8000/wp-admin` and run through the WordPress setup
@@ -403,34 +402,32 @@ This is a non-comprehensive list of plugins that we have found useful on other p
 
 ## Custom Blocks
 
-We have a plugin for custom blocks called `example-blocks`, which lives in `src/plugins`. For the blocks to be available in WordPress, these steps must be taken:
+We have a plugin for custom blocks called `example-blocks`, which lives in `src/plugins`. For the blocks to be available in WordPress, you must activate the "Example Blocks" plugin from the WordPress admin's plugins page.
 
-1. Run `npm run plugins:install` to install the plugin's npm dependencies
-1. Run `npm start` for local development (this runs the plugin's `npm start` command)
-1. Activate the "Example Blocks" plugin from the WordPress menu
-
-For production builds, running `npm run build:prod` will also work, outputting production bundles for the blocks.
+The plugins can be built with `npm run plugins:dev` or `npm run plugins:build`, but that generally shouldn't be necessary, since those scripts are run as part of the standard `npm start` and `npm run build:prod` scripts.
 
 ### Creating a New Custom Block
 
 Follow these steps to create a new custom block and wire it up with the normal development/build processes:
 
-1. Create a new folder at `src/plugins/example-blocks/blocks/<block-name>`
+1. Create a new folder at `src/plugins/example-blocks/src/<block-name>`
 1. Either copy files from another block or manually create these files:
    - `block.json`: configuration/metadata for the block
-   - `src/index.js`: entry point for the JS bundle
-   - `src/edit.js`: the component used while editing
-   - `src/save.js`: the component rendered on the site
-   - `src/editor.scss`: custom styles for the editor view
-   - `src/style.scss`: custom styles for the block when rendered on the site
-1. Configure the custom block by updating `block.json`, namely the `name`, `title`, `icon`, and `description` fields
+   - `index.js`: entry point for the JS bundle
+   - `edit.js`: the component used while editing
+   - `save.js`: the component rendered on the site
+   - `view.js`: any JS that needs to run when the block is rendered on a non-admin page (optional)
+   - `editor.scss`: custom styles for the editor view
+   - `style.scss`: custom styles for the block when rendered on the site
+1. Configure the custom block by updating `block.json`, namely the `name`, `title`, `icon`, and `description` fields. If you don't need a `view.js` file, delete the `viewScript` key.
 1. Implement the edit function, which will usually be form controls corresponding to attributes that you define in `index.js`
 1. Implement the save function, which will consume the attributes defined in `index.js` and render the block's desired markup
 
 ### Useful Resources
 
 - [Create a Block Tutorial](https://developer.wordpress.org/block-editor/getting-started/create-block/)
 - [Component Reference](https://developer.wordpress.org/block-editor/reference-guides/components/)
+- [@wordpress/scripts Reference](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/)
 
 ## Deployment