WordPress Gutenberg Block Development with React JS and PHP

Focused View

Tom Phillips,WebDevEducation Support

7:48:57

86 View

1 - Introduction and project setup

1 - Introduction.mp4

04:28

2 - Udemy ratings and reviews.mp4

00:38

3 - Environment and project setup.mp4

10:13

4 - Codebase overview.mp4

10:01

5 - Update the plugin structure and metadata.mp4

07:57

2 - Create the Curvy block

6 - Start implementing the side panel.mp4

08:58

7 - Build out the side panel.mp4

09:10

8 - Introduction to block attributes.mp4

07:49

9 - Implement the top svg curve.mp4

11:03

9 - path.txt

10 - Enable builtin attributes using supports.mp4

08:30

11 - Different ways to add default styles.mp4

07:02

12 - Fix the curvy block styles.mp4

07:19

13 - Implementing the height and width controls.mp4

11:27

14 - Use the height and width attributes to manipulate the curve shape.mp4

05:14

15 - Implement the flip vertical and horizontal controls.mp4

04:11

16 - Use the flip vertical and horizontal attributes to manipulate the curve shape.mp4

08:25

16 - invertedPath.txt

17 - Use the ColorPicker to set a color for the svg curve.mp4

08:19

18 - Implement the bottom curve settings.mp4

10:44

19 - Hook up the bottom curve svg.mp4

05:23

20 - Introduction to inner blocks.mp4

12:48

21 - Create dynamic front end view for curvy block.mp4

12:00

22 - Add extra styles and inner blocks to front end.mp4

04:50

23 - Add top curve to curvy block front end.mp4

10:30

24 - Finish top curve front end view and add bottom curve.mp4

12:04

3 - Extra customizations for the curvy block

25 - Create a custom WordPress block category.mp4

06:10

26 - Add custom svg icon for the curvy block.mp4

04:58

26 - icon.zip

27 - Transform paragraph and heading blocks into a curvy block.mp4

06:15

28 - Create block variations for the curvy block.mp4

05:42

29 - Create block preview for the curvy block.mp4

03:41

4 - Create the Clicky blocks

30 - Clicky blocks demo.mp4

03:15

31 - Create the clicky group block.mp4

07:39

32 - Create the clicky button block and restrict block types.mp4

09:25

33 - Save clicky group inner blocks.mp4

05:02

34 - Add styling and attributes to the clicky button block.mp4

04:41

35 - Add button label via RichText to the clicky button.mp4

06:09

36 - Implement block gap for clicky group.mp4

10:22

37 - Implement justify content for clicky group.mp4

05:55

38 - Add custom icons for clicky group and clicky button.mp4

02:16

38 - clicky.zip

38 - clickygroup.zip

39 - Load post type data.mp4

10:01

40 - Render post type dropdown in sidebar.mp4

06:56

41 - Load and render posts data in sidebar.mp4

10:25

42 - Render dynamic view for clicky group.mp4

16:27

42 - convert-custom-properties.txt

43 - Render dynamic view for clicky button.mp4

13:40

44 - Refactor blockyliciousphp.mp4

13:02

5 - Create the Piccy blocks

45 - Create and register the new piccy gallery block.mp4

05:33

46 - Implement edit preview mode toolbar button.mp4

13:00

47 - Add styles to edit mode and inner blocks.mp4

08:13

48 - Add piccy image block.mp4

07:58

49 - Implement piccy image media upload select.mp4

11:15

50 - Saving an image as part of the piccy image.mp4

08:35

51 - Finish piccy image edit mode styles.mp4

08:59

52 - Implement the piccy gallery preview mode.mp4

14:38

53 - Add the thumbnail styles and full preview image.mp4

09:29

54 - Finish the piccy gallery preview mode styles.mp4

06:19

55 - Add the piccy gallery client facing front end.mp4

16:11

56 - Add the piccy gallery full image preview in the front end.mp4

07:43

Description

Use ReactJS and PHP to build a custom WordPress Gutenberg block library - with React.js & WordPress Gutenberg (WP 6+)

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

Who is this for?

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

What You Need to Know?

Some familiarity with the WordPress block editor would be beneficial. Everything else is covered in the course!

More details

Description
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!
Who this course is for:
Web developers who want to learn how to create fully custom blocks for WordPress using the new WordPress Gutenberg block editor

User Reviews

Rating

average 0

Total votes0

Focused display

Tom Phillips has been developing front end web and mobile apps in the United Kingdom for numerous years. In that time he has had to prepare and teach multiple courses on the latest cutting edge front end web frameworks to junior developers, as well as mentor them during their early days as junior developers. Through doing this, Tom found efficient methods to teach and break down common complex problems that many developers face when trying to get started with new frameworks, especially in such a rapidly changing field as front end web development. Now he's applying those methods to his Udemy courses!Way back when Tom himself was a junior developer, he was fortunate enough to have been mentored by experts in the field. This allowed him to rapidly progress in his career and understand and architect multiple large projects in his time as an expert front end developer. Now Tom is passing on the buck and sharing his knowledge. Get the same mentoring that Tom received by enrolling on one of his courses and fast-track your understanding and knowledge in front end web development.

WebDevEducation Support

Instructor's Courses

Tom has been a web developer for over a decade. He created WebDevEducation to provide courses that provide you with the skills to increase your value as a front end developer by improving your web development skills. Learn popular web development libraries and frameworks with Tom to get ahead of the competition!(TOMPHILL LTD - 09531652)

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.