WordPress Gutenberg Block Development with React JS and PHP

سرفصل های دوره

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

1 - Introduction and project setup

1 - Introduction

2 - Udemy ratings and reviews

3 - Environment and project setup

4 - Codebase overview

5 - Update the plugin structure and metadata

2 - Create the Curvy block

6 - Start implementing the side panel

7 - Build out the side panel

8 - Introduction to block attributes

9 - Implement the top svg curve

9 - path.txt

10 - Enable builtin attributes using supports

11 - Different ways to add default styles

12 - Fix the curvy block styles

13 - Implementing the height and width controls

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

15 - Implement the flip vertical and horizontal controls

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

16 - invertedPath.txt

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

18 - Implement the bottom curve settings

19 - Hook up the bottom curve svg

20 - Introduction to inner blocks

21 - Create dynamic front end view for curvy block

22 - Add extra styles and inner blocks to front end

23 - Add top curve to curvy block front end

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

3 - Extra customizations for the curvy block

25 - Create a custom WordPress block category

26 - Add custom svg icon for the curvy block

26 - icon.zip

27 - Transform paragraph and heading blocks into a curvy block

28 - Create block variations for the curvy block

29 - Create block preview for the curvy block

4 - Create the Clicky blocks

30 - Clicky blocks demo

31 - Create the clicky group block

32 - Create the clicky button block and restrict block types

33 - Save clicky group inner blocks

34 - Add styling and attributes to the clicky button block

35 - Add button label via RichText to the clicky button

36 - Implement block gap for clicky group

37 - Implement justify content for clicky group

38 - Add custom icons for clicky group and clicky button

38 - clicky.zip

38 - clickygroup.zip

39 - Load post type data

40 - Render post type dropdown in sidebar

41 - Load and render posts data in sidebar

42 - Render dynamic view for clicky group

42 - convert-custom-properties.txt

43 - Render dynamic view for clicky button

44 - Refactor blockyliciousphp

5 - Create the Piccy blocks

45 - Create and register the new piccy gallery block

46 - Implement edit preview mode toolbar button

47 - Add styles to edit mode and inner blocks

48 - Add piccy image block

49 - Implement piccy image media upload select

50 - Saving an image as part of the piccy image

51 - Finish piccy image edit mode styles

52 - Implement the piccy gallery preview mode

53 - Add the thumbnail styles and full preview image

54 - Finish the piccy gallery preview mode styles

55 - Add the piccy gallery client facing front end

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

139,000 تومان

افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy