Modern WordPress Block Development

Become a WordPress Pro by learning modern WordPress block development and FSE. You don't need to know the whole block editor ecosystem to start building amazing websites for your clients

The truth is, you don’t need to know rocket science or be a React master to build modern WordPress websites with blocks. All you need is the fundamentals of WordPress, FSE, and some basic coding knowledge.

Your journey from 0 to Pro WordPress Dev

👋 1. Introduction

• Welcome! Few words about me
• Classic vs Block editor
• What is modern WordPress development
• Who is this course for
• AI tools: Cursor, Claude, GitHub Copilot

🛠️ 2. Development Environment

• Code editor setup
• Local development environment
• Node.js and NPM
• WordPress scripts package
• The Create Block tool

📚 3. The Fundamentals

• Plugin structure
• Overview of block.json
• Loading block assets
• WordPress components
• Block editor overview
• Editor vs. front-end
• Block attributes
• Static vs. Dynamic blocks (render.php)

🧱 4. Building our first block

• Your first nested block overview
• When do you need a custom block
• Creating a file structure
• Adding icon and attributes
• Editor Inspector Controls
• Creating an inner block
• Adding template for inner blocks
• Rendering with save.js
• Front-end view.js logic
• Adding styles
• Block supports, adding color, and align

⚡ 5. Building a dynamic block

• Dynamic Term Query block overview
• What are the benefits of a dynamic block
• Registering a Custom Post Type (CPT)
• Adding a term image meta using AI
• Creating a block file structure
• Adding attributes in block.json
• Editor and the ServerSideRender Component
• Using attributes in PHP
• Using WP_Term_Query in render.php
• Adding HTML markup in render.php
• Adding block grid with gaps
• Finishing styling of your block

🎨 6. Creating an FSE theme

• Basics of Full Site Editing
• Templates and template parts
• The theme.json - a single source of truth
• Building an FSE theme - Header and Footer
• Building an FSE theme - Hero and Featured Properties
• Block bindings API
• Block patterns and synced patterns
• Building an FSE theme - Finishing Homepage
• Building an FSE theme - Single Property template