Login

**BaDshaH** · 08-18-2023, 06:59 PM

[Image: 44f847bce4e7adaf44500f765da8a19b.jpg]

Published 8/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 3.66 GB | Duration: 7h 48m

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

[b]What you'll learn[/b]
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

[b]Requirements[/b]
Some familiarity with the WordPress block editor would be beneficial. Everything else is covered in the course!

[b]Description[/b]
Master WordPress Gutenberg Block Development with ReactUnlock the secrets to creating captivating, custom Gutenberg blocks powered by React. Elevate your WordPress websites with unmatched functionality, interactivity, and design.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.Why Choose This Course?Deep Dive into React: Gain a profound understanding of React within the context of the WordPress block editor.Practicality: Comprehensive hands-on exercises, real-world examples, and projects.Updated Content: Stay ahead with the latest Gutenberg block development trends, React best practices, and integrative techniques.Expert-led: Learn from seasoned WordPress and React developers with years of experience.Transform your WordPress designs and functionalities using Gutenberg blocks enhanced by React. Enroll today and shape the future of your websites!

Overview
Section 1: Introduction and project setup
Lecture 1 Introduction
Lecture 2 Udemy ratings and reviews
Lecture 3 Environment and project setup
Lecture 4 Codebase overview
Lecture 5 Update the plugin structure and metadata
Section 2: Create the Curvy block
Lecture 6 Start implementing the side panel
Lecture 7 Build out the side panel
Lecture 8 Introduction to block attributes
Lecture 9 Implement the top svg curve
Lecture 10 Enable built-in attributes using "supports"
Lecture 11 Different ways to add default styles
Lecture 12 Fix the curvy block styles
Lecture 13 Implementing the height and width controls
Lecture 14 Use the height and width attributes to manipulate the curve shape
Lecture 15 Implement the flip vertical and horizontal controls
Lecture 16 Use the flip vertical and horizontal attributes to manipulate the curve shape
Lecture 17 Use the ColorPicker to set a color for the svg curve
Lecture 18 Implement the bottom curve settings
Lecture 19 Hook up the bottom curve svg
Lecture 20 Introduction to inner blocks
Lecture 21 Create dynamic front end view for curvy block
Lecture 22 Add extra styles and inner blocks to front end
Lecture 23 Add top curve to curvy block front end
Lecture 24 Finish top curve front end view and add bottom curve
Section 3: Extra customizations for the curvy block
Lecture 25 Create a custom WordPress block category
Lecture 26 Add custom svg icon for the curvy block
Lecture 27 Transform paragraph and heading blocks into a curvy block
Lecture 28 Create block variations for the curvy block
Lecture 29 Create block preview for the curvy block
Section 4: Create the Clicky blocks
Lecture 30 Clicky blocks demo
Lecture 31 Create the clicky group block
Lecture 32 Create the clicky button block and restrict block types
Lecture 33 Save clicky group inner blocks
Lecture 34 Add styling and attributes to the clicky button block
Lecture 35 Add button label via RichText to the clicky button
Lecture 36 Implement block gap for clicky group
Lecture 37 Implement justify content for clicky group
Lecture 38 Add custom icons for clicky group and clicky button
Lecture 39 Load post type data
Lecture 40 Render post type dropdown in sidebar
Lecture 41 Load and render posts data in sidebar
Lecture 42 Render dynamic view for clicky group
Lecture 43 Render dynamic view for clicky button
Lecture 44 Refactor blockylicious.php
Section 5: Create the Piccy blocks
Lecture 45 Create and register the new piccy gallery block
Lecture 46 Implement edit & preview mode toolbar button
Lecture 47 Add styles to edit mode and inner blocks
Lecture 48 Add piccy image block
Lecture 49 Implement piccy image media upload & select
Lecture 50 Saving an image as part of the piccy image
Lecture 51 Finish piccy image edit mode styles
Lecture 52 Implement the piccy gallery preview mode
Lecture 53 Add the thumbnail styles and full preview image
Lecture 54 Finish the piccy gallery preview mode styles
Lecture 55 Add the piccy gallery client facing front end
Lecture 56 Add the piccy gallery full image preview in the front end
Web developers who want to learn how to create fully custom blocks for WordPress using the new WordPress Gutenberg block editor

Homepage