Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
9 Hour(s) 15 Minute(s)
Language
English
Taught by
Tom Phillips, WebDevEducation (Tom Phillips)
Rating
1 views
Course Overview
Use ReactJS and PHP to build a custom WordPress Gutenberg block library - with React.js & WordPress Gutenberg (WP 6+)
Master WordPress Gutenberg Block Development with React & PHP by building a completely custom WordPress block library.
In this course we'll be building "Blockylicious" - a completely custom WordPress block library built using React and PHP. We'll be building 5 different custom WordPress blocks in this course:
Introducing the Ultimate Gutenberg Block Library!
Curvy: Break the mold with aesthetically pleasing curvy shape dividers. Elevate your content separation in style.
Piccy Gallery & Piccy Image: Craft interactive image galleries that engage and enthrall your site visitors.
Clicky Group & Clicky Button: Elevate your call-to-action game with dynamic button groups that link directly to specific pages, not just URLs.
What You'll Learn:
React within WordPress: Understand the fusion of React's component-based architecture within the Gutenberg editor for seamless block creation.
Static vs. Dynamic Blocks: Delve deep into the nuances and understand why dynamic blocks often win.
Custom Block Essentials: Explore custom block data, side panels, post data retrieval, custom toolbars, and leveraging innate WordPress toolbars and features.
Block Variations: Craft varied designs like Curvy, Curvy top, and Curvy bottom.
Block Transforms: Master the art of transforming regular text paragraphs into feature-rich Curvy blocks using React components.
Custom Block Metadata: Personalize your blocks with custom icons, categories, and more.
Inner Block Rendering: Dive into the mechanics of rendering inner blocks efficiently with React.
Block Restriction: Learn the art of defining which blocks fit where, such as ensuring Clicky Button blocks exclusively serve as children to Clicky Group blocks.
Interactive Blocks: Harness the power of JavaScript and React to create dynamic blocks that interact and respond.
Block Previews: Get hands-on with block previews by utilizing "example" in block.json.
Styling Techniques: Dive into different strategies for block styling from stylesheets, block.json attributes, to theme.json elements.
Transform your WordPress designs and functionalities using custom built Gutenberg blocks enhanced by React and PHP. Enroll today and shape the future of your websites!
Course Content
- 8 section(s)
- 69 lecture(s)
- Section 1 Introduction and project setup
- Section 2 Create the Curvy block
- Section 3 Extra customizations for the curvy block
- Section 4 Create the Clicky blocks
- Section 5 Create the Piccy blocks
- Section 6 Block patterns and default block styles
- Section 7 Low-highlight text effect for rich text
- Section 8 Extra
What You’ll Learn
- Build a complete custom WordPress block library
- Learn the difference between static and dynamic WordPress blocks
- Create endless WordPress block customizations and features with React
- Learn block variations and transform WordPress blocks into other blocks
- Load WordPress data within blocks
- Learn different styling techniques for WordPress blocks
- Build a dynamic block front-end with PHP and JavaScript
Reviews
-
JJean Kuyk
Tons of valuable information in this class about writing your own plugin that extends the features of the block editor. I understand more about the inner workings of WordPress and the many possibilities for extending and customizing. I didn't give 5 stars because when I took the course, the latest version of WP was not always being demonstrated in the videos. Custom block registration has changed a bit. Tom has done a good job of explaining his code, but not going into extreme detail that would make the course a lot longer. I have some previous experience of custom WP theme and plugin development from other tutorials I also did a lot of reading (WP dev docs) and asking Copilot to explain things. Tom's guidance helps you keep going and not get lost in the process. I do highly recommend this course. I'm excited to try adding my own variations to the blocks and styles we created!
-
GGijs de Lange
Really clear and complete course on Gutenberg blocks. The hands-on building of several blocks helped me to understand concepts, code and the possibilities. Thanks!
-
LLuis Felipe Lino
É um ótimo curso, com exceção do tópico inicial acelerado para aprender React. Recomendo que façam esse curso já tendo uma base de React, pois o curso inicial não é o suficiente. Fora isso, é um ótimo curso.
-
CChristian Coyle
Easy to understand, makes WordPress/React learning less of a headache.
