Stop struggling
and master custom block development
A masterclass for WordPress professionals that want to master custom block development
🚀 Community Update: This course is now 100% free
To support the WordPress developer community, we have removed the paywall. You can now access the full curriculum completely free on our partner platform.
Custom block development requires a distinct technical shift.
Transitioning to modern WordPress blocks means moving away from legacy server-side rendering concepts and adapting to standard JavaScript and React-based architectures.
This framework was built from early-adoption data. Developing custom blocks for enterprise, high-traffic production environments prior to the block editor’s inclusion in WordPress Core provided a clear understanding of the architectural friction points developers face.
Since then, this exact training methodology has been used to successfully transition over 30 web professionals into modern block development through structured execution.
Mastering this stack does not require a foundational background in advanced JavaScript. It simply requires a systematic approach to learning the core API configurations, dependency management, and data flows that govern the modern editor.
The Block Academy provides that exact blueprint—cutting out the trial and error so you can ship stable, production-ready blocks efficiently.
What You’ll Learn
Classic and Block Editor Differences
- Comparing the Technical Foundations
- Database Interactions
- Data Storage
- Customization Options
Development Tools Set Up
- WordPress Set Up
- Browser Set Up
- Installing Node.js
- Discovering NPM
- Code Editor and Terminal
Scaffolding the Block Plugin
- Creating our First Block
- Overview of Block.json
- Overview of Src and Build Directories
- Overview of Package.json
Block Development Foundations
- How to Create Builds
- Overview of the Development Helpers
- Introduction to Debugging Blocks
- Debugging Block Not Supported Errors
- Debugging JavaScript Errors
- Debugging Invalid Content Errors
Creating the Editing Experience
- Changing the block namespace
- Changing the Block Category
- Changing the block icon
- Building with Components
- Using the RichText Component
Storing Data with Blocks
- What you’ll learn in this section
- How Data is Handled With Blocks
- Registering an Attribute
- Using Attributes in the Edit function
- Storing Attributes in the Database
Styling Blocks
- Block Styling Setup Explained
- Improving the Block HTML
- Challenges of Styling Blocks
- Improving the Block Styles
- The Future of Styling Blocks
Adding Customization Options
- Overview of Block Supports
- Controlling Block Supports
- Adding Wide Alignment Support
- Adding Experimental Layout Support
- Adding Color Support With Default Controls
- Adding Spacing and Border Support
Introduction to Data Handling
- React Is Not A Framework
- Introduction to Redux
- Introduction to the Data Module
- Introduction to Select
- Introduction to Dispatch
- Going Further: Fundamentals of Redux Course Start
Data Handling in Blocks
- Getting Data from the Store
- Getting Data from the Database
- Store-only Data vs. Data from the Database
- Changing Data in the Store
- Combining Getting and Updating Data
Dealing with Post Meta
- Getting Post Meta in a Block
- Understanding Meta Handling in the Block Editor
- Making Post Meta Accessible the Block Editor
- Updating Post Meta in a Block
- Meta in the Store vs. Meta in the Database
- Displaying Meta on the Frontend
Creating Dynamic Blocks
- Creating a Dynamic Block
- Block Supports in Dynamic Blocks
- Using the Frontend Render in the Edit Function
- Adding Controls in the Sidebar
Who is behind this?
Hi, I’m Fränk Klein. I fast-track your path to advanced web and WordPress development.
In 2011, I made a calculated career pivot into software engineering. As a self-taught developer, I had to cut through a heap of fragmented information to build the skills necessary to get access to senior engineering roles.
My approach was and still is focussed on pragmatic, consistent execution. This allowed me to enter the web industry without the traditional computer science degree:
- Automattic: Designed and built themes for millions of users on WordPress.com.
- WordPress VIP: Provided code review and consulting for some of the largest, highest-traffic WordPress site on the internet.
- Principal Enterprise Engineer: Spent nearly a decade operating at the Principal level, leading complex technical strategies and shipping enterprise-grade code for global brands.
I’ve taken all the lessons I learned over this long career, and put them into this training.