Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication 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 Certifications Network & Security Hardware Operating Systems & Servers 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 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 Paid 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 & Gardening 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 & Diet Yoga Mental Health Martial Arts & 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 Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js Typescript HTML5 PHP
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA CompTIA Security+ Microsoft AZ-900
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Data Analysis Data Warehouse Blockchain Business Intelligence
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Mobile Game Development
Google Flutter iOS Development Android Development Swift React Native Dart (programming language) Kotlin SwiftUI Mobile App Development
Graphic Design Photoshop Adobe Illustrator Drawing Canva Digital Painting InDesign Design Theory Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Sound Therapy Emotional Intelligence Coaching
Business Fundamentals Entrepreneurship Fundamentals Freelancing Business Strategy Online Business Startup Business Plan Blogging Amazon Kindle Direct Publishing (KDP)
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Copywriting Google Analytics Email Marketing Startup Advertising Strategy

DevelopmentWeb DevelopmentWordPress Plugins

Gutenberg Blocks for WordPress and React Developers [2022]

Use Your ReactJS and Redux Knowledge to Create Complex Gutenberg Blocks and Plugins from scratch.
Bestseller
Rating: 4.8 out of 54.8 (546 ratings)
3,562 students
Created by Ali Alaa
Last updated 1/2022
English
English

What you'll learn

  • Learn about the block editor design guidelines.
  • Discover how the block editor saves your post in the database and how the editor UI is constructed.
  • Learn how to use wp-scripts to transpile ES6 and JSX, compile SASS to CSS, bundle and minify your JS and CSS files and more.
  • Integrate ESLint, Prettier, Stylelint and Husky in your project to improve your workflow.
  • Create a new custom Gutenberg block from scratch.
  • Customize the block editor 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 the existing data stores in your blocks.
  • Learn how to create your own data stores stores in order to share data between blocks.
  • Learn different ways to manage meta fields in the block editor.
  • Learn how to create a custom sidebar in the block editor and manage your meta fields inside of it.
  • Learn how to extend the existing block editor's sidebar.
  • Learn about features like patterns, context, formatting API and templates.
  • Modify existing block's behavior with JavaScript & PHP filters.
  • Internationalize blocks by generating and loading translation files.

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 ReactJS Basic Concepts.
  • Redux Knowledge is Preferable
  • 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 block editor known as '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 the block editor. 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, hooks 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 create a WordPress plugin. Inside this plugin we will register out first Gutenberg block. We will also use a tool provided by WordPress called wp-scripts in order to process JS and CSS files in this plugin. We will also integrate tools like ESLint, Prettier, Stylelint and Husky for an improved development workflow.

  • In section 3, 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 block editor.

  • In section 4 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 5 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 6 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 7 will discover more about the redux-like data stores in the block editor. We will see how to use the existing data stores and also create our own store.

  • Section 8 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.

  • In the final section we are going to discuss various topics like: context, patterns, templates, formatting API, filters and internationalization.


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.6 Instructor Rating
  • 3,263 Reviews
  • 21,947 Students
  • 5 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 more than 8 years. After all these years, I decided to start creating on udemy and share my knowledge with you.

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Terms
  • Privacy policy
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.