Blog Intro (Series Introduction)
Welcome to Building Blocks — a new blog series where I’ll walk through the real-world process of building custom Gutenberg blocks for WordPress. If you’ve ever felt limited by existing block plugins or wanted full control over your editor experience, this series is for you.
Each post will cover not just code, but thought process, architecture decisions, and practical gotchas — so you can apply the same patterns in your own projects.
In this first entry, we’re laying the foundation by defining our tech stack and the block we’re building: a custom Hero Slider that supports both photos and background videos.
What We’re Building
Our first Gutenberg block will be a Hero Section Slider, supporting:
- Full-width layout
- Multiple slides (photo or video background)
- Headline and subheadline per slide
- Optional call-to-action button
- Background media autoplay (video)
- Clean interface with block preview in editor
This kind of block is ideal for landing pages, home pages, or creative portfolios.
Tech Stack
Here’s what we’ll be using to build this block:
Languages & Tools
- JavaScript (ESNext) – Block behavior and UI logic
- React / JSX – For block editing interface
- PHP – Server-side registration and rendering
- SCSS – For scoped styles
- @wordpress/scripts – Build tools and bundling
- Webpack & Babel – Comes via WP Scripts for transpilation
WordPress Packages
- @wordpress/blocks – For block registration
- @wordpress/editor – Block context
- @wordpress/components – UI components (buttons, media uploads, etc.)
- @wordpress/block-editor – For Inspector Controls and block UI
- @wordpress/data, @wordpress/hooks, etc. – As needed
Additional Libraries & Integrations
- ACF (Advanced Custom Fields) – If we want to make a hybrid block
- Slick or Swiper.js – If we want advanced slider behavior without reinventing the wheel
Literature & Reference Materials
Throughout the project, I’ll be referencing and linking to official documentation and trusted guides, including:
- WordPress Block Editor Handbook
- @wordpress/scripts documentation
- Gutenberg GitHub Repository
- ACF Blocks Documentation
- Swiper.js Documentation
- React Documentation
- MDN JavaScript Reference
These resources will help reinforce the “why” behind the decisions I make in each post.
What’s Next?
In the next post, we’ll kick things off by scaffolding our block plugin using @wordpress/create-block, organizing the project folder, and preparing the development environment.
We’ll also talk through some initial UX ideas — like how the slider should behave inside the block editor.
