WordPress Gutenberg Block Development with React JS and PHP

WordPress Gutenberg Block Development with React JS and PHP, available at $84.99, has an average rating of 4.83, with 70 lectures, based on 145 reviews, and has 940 subscribers.

You will learn about 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 This course is ideal for individuals who are Web developers who want to learn how to create fully custom blocks for WordPress using the new WordPress Gutenberg block editor It is particularly useful for Web developers who want to learn how to create fully custom blocks for WordPress using the new WordPress Gutenberg block editor.

Enroll now: WordPress Gutenberg Block Development with React JS and PHP

Summary

Title: WordPress Gutenberg Block Development with React JS and PHP

Price: $84.99

Average Rating: 4.83

Number of Lectures: 70

Number of Published Lectures: 69

Number of Curriculum Items: 70

Number of Published Curriculum Objects: 69

Original Price: $24.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Web developers who want to learn how to create fully custom blocks for WordPress using the new WordPress Gutenberg block editor

Target Audiences

Web developers who want to learn how to create fully custom blocks for WordPress using the new WordPress Gutenberg block editor

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 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!

Instructors

Tom Phillips
Fast-paced information-dense courses for busy web developers

WebDevEducation (Tom Phillips)
Fast-paced information-dense courses for busy web developers

Rating Distribution

1 stars: 2 votes

2 stars: 3 votes

3 stars: 3 votes

4 stars: 32 votes

5 stars: 105 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!