Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development WordPress Plugins

Gutenberg Blocks for WordPress and React Developers

Use Your ReactJS and Redux Knowledge to Create Complex Gutenberg Blocks and Plugins from scratch.
Bestseller
Rating: 4.3 out of 54.3 (282 ratings)
1,860 students
Created by Ali Alaa
Last updated 2/2021
English
English
30-Day Money-Back Guarantee

What you'll learn

  • Learn about Gutenberg blocks design guidelines.
  • Discover how Gutenberg saves your post in the database and how the editor UI is constructed.
  • Learn how to use webpack to transpile ES6 and JSX, compile SASS to CSS, bundle and minify your JS and CSS files and more.
  • Integrating ESLint, Prettier and husky in your project to improve your workflow.
  • Create a new custom Gutenberg block from scratch.
  • Customize Gutenberg features in your WordPress theme.
  • Discover every aspect you need to know to create a complex Gutenberg block.
  • Create a nested block (a block that accepts other blocks inside of it).
  • Use third party react libraries to create complex features.
  • Learn about handling deprecated blocks.
  • Learn how to transform your custom block into another block.
  • Create a dynamic block.
  • Explore how to use existing redux stores in your blocks.
  • Learn how to create your own redux stores in order to share data between blocks.
  • Learn different ways to manage meta fields in the gutenberg editor.
  • Learn how to create a custom sidebar in Gutenberg and manage your meta fields inside of it.
  • Learn how to extend the existing Gutenberg sidebar.
Curated for the Udemy for Business collection

Course content

10 sections • 120 lectures • 11h 15m total length

  • Course Source Code
    00:11
  • Preview05:34
  • The Editor Interface
    03:02
  • The Block Interface
    06:37
  • Block Design - Best Practices & Guidelines
    06:44
  • Preview05:14
  • How the Visual Editor is Reconstructed From Plain HTML
    03:51
  • A Brief Introduction to Redux in Gutenberg
    06:27
  • The Post State Array in Action
    07:06

  • Preview06:27
  • Preparing Our Files for Webpack & NPM
    04:14
  • Using Webpack to Bundle Our JS Files
    07:47
  • Using Webpack Loaders to Transpile ES6 into ES5
    09:29
  • Transpiling JSX with Webpack
    04:08
  • React Babel Preset Development Mode
    04:05
  • Exploring Source-mapping Options in Webpack
    05:02
  • Compiling & Loading SASS Files with Webpack
    06:37
  • Adding Autoprefixer to Our CSS
    04:21
  • Moving the CSS Bundle into a Separate File Using Webpack Plugins
    05:44
  • Minifying the CSS Bundle with Webpack
    05:53

  • Preview06:42
  • Block Server Side Registration
    05:18
  • Using React Properly in Gutenberg Blocks
    03:59
  • Changing the Block Icons and Filtering Keywords
    03:16
  • Applying Webpack to our WordPress Plugin
    04:29
  • Enqueuing Our New Bundle & Refactoring PHP Registration
    05:46
  • Preview05:34
  • Styling Our Block in the Editor Page
    06:36
  • Creating a New Webpack Bundle for Editor+Frontend Styles & Scripts
    10:56
  • Understanding & Using the Webpack Externals Feature
    10:34
  • Adding Gulp to the Workflow to Produce a Zipped version of the plugin
    09:23
  • [Optional] Integrating ESLint in Our Project
    06:46
  • Preview04:06
  • [Optional] Adding Prettier to Our Project
    06:44
  • [Optional] Disabling ESLint Rules that Prettier Will Fix
    03:22
  • [Optional] Running Prettier Before Committing to Repository Using Husky Hooks
    08:07

  • Adding align-wide & align-full support
    04:10
  • Creating a Custom Colour Palette
    04:07
  • Making Gutenberg's Embedded Content Responsive
    01:26
  • Adding Editor Styles to Resemble Front-end
    06:21

  • The "wp.editor" & "wp.components" Modules
    07:03
  • Using the RichText Component in the Editor
    05:43
  • Using the RichText Component in the save() Function
    03:28
  • Avoiding Saving Attributes in Block Delimiters and Parsing them from the HTML
    02:01
  • An Overview of the BlockControls Component
    08:52
  • Using the AlignmentToolbar Component
    05:18
  • An Overview of the InspectorControls Component
    04:46
  • Using the PanelColorSettings Component
    05:19
  • Adding Multiple Styles to our Block
    03:43
  • Adding a Custom Category to the Block Library
    02:49
  • Moving the Edit Component into a Separate File
    04:03
  • Porting the Edit Function from a Functional to a Class Component
    06:20
  • Introducing the withColors Higher Order Component
    04:23
  • Using withColors HOC in the Editor
    09:08
  • Using withColors HOC in the Front-end
    08:00
  • Adding a Toggle Shadow Option in the Block Toolbar
    04:42
  • Adding a Shadow Opacity Option Using RangeControl
    06:29
  • Adding Deprecated Versions to your Block to Avoid Validation Errors
    05:29
  • Migrating Old Attributes in Deprecations
    11:16
  • Transforming Other Block Types into Our Block
    06:22
  • Preview02:34

  • Block Overview
    01:55
  • Setting Up Our Block
    04:14
  • Implementing the Edit Function for Editing the Title & the Bio
    06:25
  • Adding the Save Function for the Team Member Block
    02:54
  • Creating the Team Members Block Using InnerBlocks
    08:58
  • Adding a Columns Attribute for the Parent Team Members Block
    05:18
  • Styling the Columns in the Front-end
    07:03
  • Quick Note!
    00:10
  • Quick Note!
    00:08
  • Styling the Columns in the Editor Page
    07:33
  • Removing Unneeded Block Features
    01:43
  • Introducing the MediaPlaceholder Component
    06:26
  • Handling the Image Upload & Media Library Buttons
    08:25
  • Handling Inserting an Image from a URL
    01:46
  • Handling Image Upload Errors
    03:54
  • Displaying a Responsive Image in the Front-end
    02:11
  • Handling Blocks with Unfinished Image Uploads
    04:43
  • Adding Edit Image & Remove Image Buttons and Functionality
    09:37
  • Adding a Textarea in the Sidebar to Edit the Alt Text for the Image
    04:35
  • Adding the Option to Change the Image Size
    06:39
  • Populating the Image Sizes Dropdown from Redux Stores
    10:28
  • Enabling "Align Wide" & "Align Full" in Our Team Members Block
    01:10
  • Adding an Array Type Attribute for the Social Links and Icons
    07:27
  • Adding a Selected Icon State Using React's Component State
    08:04
  • Implementing the Save Function for the Team Member
    05:48
  • Avoiding Saving the Social Array Attribute in the Block Delimiter
    04:28
  • Adding the Markup for the Edit Social Link Form
    04:02
  • Preview07:04
  • Removing Items from the Social Attribute
    03:39
  • Making the Social Icons Sortable Using react-sortable-hoc
    12:24
  • Transforming Galleries and Images into Team Members
    08:48

  • Preview04:48
  • Adding Attributes in a Dynamic Block
    04:27
  • Fetching the Latest Posts Dynamically in the Render Callback Function
    06:05
  • Fetching the Latest Posts in the JS Side using Redux
    04:23
  • Mimicking the PHP Posts Loop Using JS in the Edit Function
    06:31
  • Adding a Sidebar Option for the Number of Posts
    03:30
  • Filtering the Latest Posts by Categories
    10:29

  • Accessing redux data & dispatching actions to redux the WRONG Way!
    07:32
  • Using withSelect & withDispatch together using "wp.compose"
    07:28
  • Let's Create a Redux Store and Use it in Multiple Components!
    03:12
  • Setting Up Our Block and Redux Store Files
    07:25
  • Important Note for Watching the Rest of this Section
    00:15
  • Registering our Own Redux Store
    09:48
  • Populating Our Redux Store using an External API
    06:26
  • Improving our Resolver using Controls and Generator Functions
    05:13
  • Displaying our To Dos from the Redux Store in the To Do List Component
    07:26
  • Adding a new Control to Toggle the To Do Item
    06:11
  • Updating the To Do Items After Getting a Response from the API
    06:06
  • Preview05:54

  • Preview06:34
  • How to Get and Set Metadata using Redux Selectors and Actions
    08:02
  • Updating Metadata Using a Block
    06:40
  • Using Templates to Pre-define blocks in the Editor Page
    07:14
  • Registering a Gutenberg Plugin to Add a Sidebar
    07:08
  • Using Our Plugin to Modify the Existing Gutenberg Sidebar
    04:24
  • Managing Metadata in the New Sidebar
    07:28

  • Conclusion & Next Steps
    02:13
  • Bonus Lecture
    00:13

Requirements

  • You should be familiar with HTML, CSS (SASS), Javascript and PHP basics.
  • You should be familiar with WordPress development.
  • You should be familiar with JavaScript, ReactJS & Redux.
  • Any code editor you are comfortable with, I will use VS Code in this code.
  • A local server like MAMP, WAMP, XAMPP, Laragon or any other software you are familiar with. I will use MAMP through out this course.
  • NodeJS and NPM or Yarn installed on your machine.

Description

Recently WordPress decided to change their old WYSIWYG editor into a new ReactJS based editor called 'Gutenberg'. Gutenberg also known as the block editor is based on blocks. So your post will be composed of some blocks and each block will have a purpose. You can have a block that displays a button or an image or some text and so on. 

In this course you will learn everything you need to know in order to create custom blocks for Gutenberg. We will start by a simple block and then we will create some more complex blocks.

In order to gain the most out of this course you need to have WordPress theme/plugin development knowledge. Javascript knowledge is required for this course. You should be familiar with basic JavaScript concepts and preferably the recent ES6+ versions. ReactJS knowledge is also required for this course. So concepts like component state, lifecycle method and basic react concepts should not be new to you. Also advanced concepts like higher order component knowledge would be ideal however it will be discussed briefly in the course. Redux knowledge is also ideal. Not all blocks will require using redux, however in some blocks we will use redux heavily. So it would be ideal if you are familiar with redux concepts like stores, actions, reducers and so on.

The course content will go as follows:

  • First and before any coding we will discuss some design guidelines that you should follow when designing a block.

  • We will take a look on how your Gutenberg post is saved in your database and what happens behind the scenes in order to construct your ReactJS based UI from the content saved in the database.

  • In section 2, we will have a webpack tutorial. This section will not deal with any of the WordPress stuff. It will be purely webpack. webpack is the tool that we will use in order to transpile and bundle out Javascript and CSS files.

  • In Section 3, we will create a WordPress plugin. Inside this plugin we will register out first Gutenberg block. We will also use out webpack knowledge in order to process JS and CSS files in this plugin.

  • In section 3 we will also have some bonus content. In this content we will learn how to integrate ESLint, prettier and husky for an improved workflow.

  • In section 4, we will take a quick look on some stuff that you can do in your WordPress theme that will allow you to modify/add some features in the Gutenberg editor.

  • In section 5 we will create a simple block. However in this simple block we will learn a lot about what we can do in a block.

  • In section 6 we will use our knowledge to create a more complex block with some advanced features. These features include how to add blocks inside of other blocks, how to handle images and many more.

  • Section 7 will be about creating dynamic blocks. So blocks can be static or in other words only generate some static HTML. But also they can be dynamic for example they can fetch something from the database.

  • Section 8 will discover more about redux in Gutenberg. We will see how to use the existing redux stores and also create our own store.

  • Finally in section 9 we will see different ways that we can follow in order to manage metadata in Gutenberg. We will manage metadata using a block. And we will also learn how to create a custom sidebar plugin and manage metadata in this sidebar.


Who this course is for:

  • WordPress theme/plugin developers who are familiar with ReactJS and want to create Gutenberg blocks from scratch.
  • Anybody with some WordPress and ReactJS experience who wants to know everything about the Gutenberg editor.

Instructor

Ali Alaa
Front-end Web Developer
Ali Alaa
  • 4.4 Instructor Rating
  • 1,175 Reviews
  • 7,740 Students
  • 4 Courses

Hey there! I am Ali Alaa, a front-end web developer. Years ago I discovered my interest in web development, especially the front-end side. I started exploring the field from HTML/CSS/JS to WordPress theming and JS frameworks. I have been working as a front-end developer for about 7 years. After all these years, I decided to start creating on udemy and share my knowledge with you.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.