WordPress Gutenberg Block Development with React JS and PHP
- Description
- Curriculum
- FAQ
- Reviews
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!
-
8
Start implementing the side panel -
9
Build out the side panel
-
10
Introduction to block attributes
-
11
Implement the top svg curve
-
12
Enable built-in attributes using "supports"
-
13
Different ways to add default styles
-
14
Fix the curvy block styles
-
15
Implementing the height and width controls
-
16
Use the height and width attributes to manipulate the curve shape
-
17
Implement the flip vertical and horizontal controls
-
18
Use the flip vertical and horizontal attributes to manipulate the curve shape
-
19
Use the ColorPicker to set a color for the svg curve
-
20
Implement the bottom curve settings
-
21
Hook up the bottom curve svg
-
22
Introduction to inner blocks
-
23
Create dynamic front end view for curvy block
-
24
Add extra styles and inner blocks to front end
-
25
Add top curve to curvy block front end
-
26
Finish top curve front end view and add bottom curve
-
32
Clicky blocks demo
-
33
Create the clicky group block
-
34
Create the clicky button block and restrict block types
-
35
Save clicky group inner blocks
-
36
Add styling and attributes to the clicky button block
-
37
Add button label via RichText to the clicky button
-
38
Implement block gap for clicky group
-
39
Implement justify content for clicky group
-
40
Add custom icons for clicky group and clicky button
-
41
Load post type data
-
42
Render post type dropdown in sidebar
-
43
Load and render posts data in sidebar
-
44
Render dynamic view for clicky group
-
45
Render dynamic view for clicky button
-
46
Refactor blockylicious.php
-
47
Create and register the new piccy gallery block
-
48
Implement edit & preview mode toolbar button
-
49
Add styles to edit mode and inner blocks
-
50
Add piccy image block
-
51
Implement piccy image media upload & select
-
52
Saving an image as part of the piccy image
-
53
Finish piccy image edit mode styles
-
54
Implement the piccy gallery preview mode
-
55
Add the thumbnail styles and full preview image
-
56
Finish the piccy gallery preview mode styles
-
57
Add the piccy gallery client facing front end
-
58
Add the piccy gallery full image preview in the front end
-
59
Cater for no image being set for the piccy image block
