How to Scaffold a WordPress Plugin or Block (The Right Way)

Creating your own Gutenberg blocks is powerful — but structuring them well is what makes them maintainable. In this post, I’ll show you how I scaffold custom plugins that house one or many blocks using a clean directory structure like myplugin/blocks/.

🗂 Folder Structure Overview

myplugin/
├── blocks/
│   ├── block-one/
│   │   ├── block.json
│   │   ├── edit.js
│   │   ├── save.js
│   │   ├── style.scss
│   ├── block-two/
│   │   ├── block.json
│   │   ├── edit.js
│   │   ├── save.js
│   │   ├── style.scss
├── build/
├── plugin.php
├── package.json
├── webpack.config.js

This layout is ideal for grouping multiple reusable blocks in a single plugin. Each block is modular, portable, and easy to debug.

🔧 Register Each Block

In your plugin.php file, loop through each block and register it:

function myplugin_register_blocks() {
  $blocks = glob( plugin_dir_path( __FILE__ ) . 'blocks/*' );
  foreach ( $blocks as $block_dir ) {
    if ( is_dir( $block_dir ) && file_exists( $block_dir . '/block.json' ) ) {
      register_block_type( $block_dir );
    }
  }
}
add_action( 'init', 'myplugin_register_blocks' );

⚙️ Building Your Blocks

I use Webpack (or Vite) to build all blocks in a single pass, outputting assets to a shared build/ folder.

entry: {
  'block-one': './blocks/block-one/index.js',
  'block-two': './blocks/block-two/index.js',
},

In each index.js, simply import your components and styles:

import './block.json';
import './edit.js';
import './save.js';
import './style.scss';

🧪 Why This Structure Works

• Modular: Each block lives in its own folder
• Scalable: Add or remove blocks without clutter
• Dev-friendly: Consistent, readable paths
• Compatible: Easily published to the WP plugin repo or bundled in themes

📦 Bonus: Shared Helpers

Want to reuse code across blocks? Add a utils/ folder with things like:

utils/
├── colors.js
├── media-upload.js
├── icons.js

Then import those into your blocks as needed.

🚀 Wrapping Up

This block architecture is what I use for real-world projects — from my Gravity Forms AI plugin to the Coffee Shop Directory. It keeps your code tidy, version-controlled, and easy to ship or scale.

If you want a starter repo based on this structure, let me know and I’ll post it up!