Packaging & Publishing Blocks

Distribution Options

Building for Production

# Development (watch mode)
npm start

# Production build
npm run build

# Create plugin zip
npm run plugin-zip

The build/ folder contains optimized, minified assets.

Plugin Structure

my-blocks-plugin/
├── build/
│   ├── blocks/
│   │   ├── testimonial/
│   │   │   ├── block.json
│   │   │   ├── index.js
│   │   │   ├── style-index.css
│   │   │   └── render.php
│   │   └── pricing-table/
│   │       └── ...
│   └── index.js
├── src/
│   └── blocks/
│       ├── testimonial/
│       └── pricing-table/
├── my-blocks-plugin.php
├── package.json
├── readme.txt
└── webpack.config.js

Main Plugin File

<?php
/**
 * Plugin Name: My Blocks Collection
 * Description: Custom Gutenberg blocks.
 * Version: 1.0.0
 * Requires at least: 6.3
 * Requires PHP: 8.0
 * Author: Your Name
 * License: GPL-2.0-or-later
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function my_blocks_register() {
    // Register all blocks in the build folder
    $blocks_dir = __DIR__ . '/build/blocks/';
    
    if ( ! is_dir( $blocks_dir ) ) {
        return;
    }
    
    $block_folders = array_diff( scandir( $blocks_dir ), array( '.', '..' ) );
    
    foreach ( $block_folders as $block ) {
        $block_path = $blocks_dir . $block;
        if ( is_dir( $block_path ) && file_exists( $block_path . '/block.json' ) ) {
            register_block_type( $block_path );
        }
    }
}
add_action( 'init', 'my_blocks_register' );

// Register custom block category
function my_blocks_categories( $categories ) {
    return array_merge(
        array(
            array(
                'slug'  => 'my-blocks',
                'title' => __( 'My Blocks', 'my-blocks' ),
            ),
        ),
        $categories
    );
}
add_filter( 'block_categories_all', 'my_blocks_categories' );

Multiple Blocks Setup

For multiple blocks, configure webpack:

// webpack.config.js
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );

module.exports = {
    ...defaultConfig,
    entry: {
        'blocks/testimonial/index': './src/blocks/testimonial/index.js',
        'blocks/pricing-table/index': './src/blocks/pricing-table/index.js',
        'blocks/posts-grid/index': './src/blocks/posts-grid/index.js',
    },
    output: {
        path: path.resolve( __dirname, 'build' ),
        filename: '[name].js',
    },
};

Sharing Styles with theme.json

Blocks can integrate with theme.json:

// In your theme's theme.json
{
    "settings": {
        "custom": {
            "testimonial": {
                "backgroundColor": "#f8f9fa",
                "borderRadius": "8px"
            }
        }
    }
}

// In block styles
.wp-block-theme-testimonial {
    background: var(--wp--custom--testimonial--background-color);
    border-radius: var(--wp--custom--testimonial--border-radius);
}

Publishing to npm

For sharing with developers:

// package.json
{
    "name": "@yourname/wordpress-blocks",
    "version": "1.0.0",
    "main": "build/index.js",
    "files": [
        "build/",
        "src/"
    ],
    "publishConfig": {
        "access": "public"
    }
}

npm login
npm publish --access public

Block Directory Submission

For single-purpose blocks on WordPress.org Block Directory:

1. Follow WordPress.org plugin guidelines
2. Include only ONE block per submission
3. Must work without configuration
4. Submit at wordpress.org/plugins/developers/add/

readme.txt for WordPress.org

=== My Testimonial Block ===
Contributors: yourwpusername
Tags: block, testimonial, reviews, gutenberg
Requires at least: 6.3
Tested up to: 6.4
Stable tag: 1.0.0
License: GPLv2 or later

A customizable testimonial block with ratings and avatars.

== Description ==

Create beautiful testimonials with:
* Star ratings (1-5)
* Customer avatars
* Multiple layout styles

== Installation ==

1. Upload the plugin files to `/wp-content/plugins/my-testimonial-block`
2. Activate the plugin
3. Use the block in the editor!

== Changelog ==

= 1.0.0 =
* Initial release

Blocks in Themes

Include blocks directly in your theme:

// In functions.php
function theme_register_blocks() {
    register_block_type( get_template_directory() . '/blocks/hero/block.json' );
}
add_action( 'init', 'theme_register_blocks' );

Congratulations!

You've completed the Custom Gutenberg Blocks tutorial!

What You've Learned

• ✅ Block architecture and development setup
• ✅ Building Edit components with React
• ✅ Save components and serialization
• ✅ Inspector Controls and Block Toolbar
• ✅ Dynamic blocks with PHP rendering
• ✅ Block variations and transforms
• ✅ Frontend interactivity
• ✅ Packaging and distribution

Next Steps

1. Build a complete block plugin with 3-5 blocks
2. Explore InnerBlocks for nested content
3. Learn the Query Loop block patterns
4. Contribute to WordPress core blocks