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

45,900 تومان

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

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

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

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