WordPress Gutenberg Block Development with React JS and PHP

Course Curriculum

Chapter 1: Introduction and project setup

Lecture 1: Important! Read this before you start the course! (Github repo etc)

Lecture 2: Introduction

Lecture 3: Udemy ratings and reviews

Lecture 4: Environment and project setup

Lecture 5: IMPORTANT! BREAKING CHANGE!

Lecture 6: Codebase overview

Lecture 7: Update the plugin structure and metadata

Chapter 2: Create the Curvy block

Lecture 1: Start implementing the side panel

Lecture 2: Build out the side panel

Lecture 3: Introduction to block attributes

Lecture 4: Implement the top svg curve

Lecture 5: Enable built-in attributes using "supports"

Lecture 6: Different ways to add default styles

Lecture 7: Fix the curvy block styles

Lecture 8: Implementing the height and width controls

Lecture 9: Use the height and width attributes to manipulate the curve shape

Lecture 10: Implement the flip vertical and horizontal controls

Lecture 11: Use the flip vertical and horizontal attributes to manipulate the curve shape

Lecture 12: Use the ColorPicker to set a color for the svg curve

Lecture 13: Implement the bottom curve settings

Lecture 14: Hook up the bottom curve svg

Lecture 15: Introduction to inner blocks

Lecture 16: Create dynamic front end view for curvy block

Lecture 17: Add extra styles and inner blocks to front end

Lecture 18: Add top curve to curvy block front end

Lecture 19: Finish top curve front end view and add bottom curve

Chapter 3: Extra customizations for the curvy block

Lecture 1: Create a custom WordPress block category

Lecture 2: Add custom svg icon for the curvy block

Lecture 3: Transform paragraph and heading blocks into a curvy block

Lecture 4: Create block variations for the curvy block

Lecture 5: Create block preview for the curvy block

Chapter 4: Create the Clicky blocks

Lecture 1: Clicky blocks demo

Lecture 2: Create the clicky group block

Lecture 3: Create the clicky button block and restrict block types

Lecture 4: Save clicky group inner blocks

Lecture 5: Add styling and attributes to the clicky button block

Lecture 6: Add button label via RichText to the clicky button

Lecture 7: Implement block gap for clicky group

Lecture 8: Implement justify content for clicky group

Lecture 9: Add custom icons for clicky group and clicky button

Lecture 10: Load post type data

Lecture 11: Render post type dropdown in sidebar

Lecture 12: Load and render posts data in sidebar

Lecture 13: Render dynamic view for clicky group

Lecture 14: Render dynamic view for clicky button

Lecture 15: Refactor blockylicious.php

Chapter 5: Create the Piccy blocks

Lecture 1: Create and register the new piccy gallery block

Lecture 2: Implement edit & preview mode toolbar button

Lecture 3: Add styles to edit mode and inner blocks

Lecture 4: Add piccy image block

Lecture 5: Implement piccy image media upload & select

Lecture 6: Saving an image as part of the piccy image

Lecture 7: Finish piccy image edit mode styles

Lecture 8: Implement the piccy gallery preview mode

Lecture 9: Add the thumbnail styles and full preview image

Lecture 10: Finish the piccy gallery preview mode styles

Lecture 11: Add the piccy gallery client facing front end

Lecture 12: Add the piccy gallery full image preview in the front end

Lecture 13: Cater for no image being set for the piccy image block

Chapter 6: Block patterns and default block styles

Lecture 1: Custom block patterns

Lecture 2: Default block styles via theme.json

Chapter 7: Low-highlight text effect for rich text

Lecture 1: Set up the codebase to register new text format

Lecture 2: Register and apply the new text format

Lecture 3: Adding and loading css for the text effect

Lecture 4: Add the color picker

Lecture 5: Save the css styles and attributes for the text effect

Lecture 6: Add the appropriate icons for the low highlight effect

Chapter 8: Extra

Lecture 1: Create a zip file to install on other WordPress sites

Lecture 2: BONUS!