This example demonstrates how to create a modern WordPress block using ESNext (modern JavaScript) and JSX syntax. It showcases the fundamental setup required for block development with a build process powered by @wordpress/scripts, which handles all the necessary tooling configuration.

Key concepts covered:

• Modern JavaScript (ESNext) and JSX syntax usage
• Build process setup with @wordpress/scripts
• Basic block registration and rendering
• Static block implementation
• NPM scripts for development and production builds

Example	Description	Tags	Download .zip	Live Demo
Basic ESNext	Demonstrates how to create a basic block using modern JavaScript (ESNext) and JSX syntax with a build process powered by @wordpress/scripts.	minimal	📦

1. Development Mode

   • Uses npm start for development
   • Provides hot reloading
   • Generates source maps for debugging
   • Watches for file changes

2. Production Build

   • Uses npm run build for production
   • Optimizes and minifies code
   • Generates production-ready assets
   • Performs tree shaking

1. Block Registration

   • Block metadata defined in block.json
   • Registered using registerBlockType
   • Uses modern ESNext syntax for cleaner code

2. Rendering

   • Static block implementation in save.js
   • Uses JSX for template rendering
   • Implements useBlockProps for block attributes

src/
├── edit.js      # Block editor component
├── save.js      # Saved content component
├── style.scss   # Frontend & editor styles
├── editor.scss  # Editor-only styles
├── block.json   # Block metadata
└── index.js     # Block registration

• Block Editor Handbook - Getting Started
• ESNext Standard
• Block Registration API
• @wordpress/scripts Package
• Static vs Dynamic Blocks
• Block Metadata

Note Check the Start Guide for local development with the examples