Gutenberg is the new visual editor coming with WordPress 5.0 soon. This changes completely the way you have been using or developing for WordPress. If you are willing to learn Gutenberg, I have curated the top Gutenberg courses for everyone.
Gutenberg Courses for Users
As Gutenberg is a completely new way to write your content using a Visual Block Editor coming in WordPress 5.0, you may need to learn it now. This is a completely different interface you have been using in WordPress earlier to version 5.0. Here are a few top courses I was able to find for you.
An Introduction to Gutenberg – By Joe Casabona
A course for absolute beginners. You will learn how to create your very own rich layouts with Gutenberg, what the new terminology is, and how you can get involved in the project.
Who is this course for?
This course is for all WordPress users. Gutenberg is rolling out in the first half of 2018, so it will be important to understand what it is and how it works. But this course will be especially good for:
- WordPress Users who want a more powerful native content editor
- Freelancers and Agencies*, who need to know how Gutenberg works for their clients
- WordPress Educators who train users on how to use the Dashboard
What will you learn?
In this course, you will learn how to create your very own rich layouts with Gutenberg, what the new terminology is, and how you can get involved in the project. And since Gutenberg is still under development, this course will get updated frequently!
Course Outline
- Introduction (FREE LESSON)
- The Current State of the WordPress Editor
- What is Gutenberg?
- Creating Page Layouts
- Making a Regular Blog Post
- Creating a Rich Page Layout
- Columns / Nested Blocks
- Reusable Blocks
- Building a Site with Gutenberg
- Finding the Right Theme (Atomic Blocks)
- The Site’s Content & Concept
- Creating a Home Page
- About Page
- Portfolio
- Contact Page
- Blog Post
- Gutenberg in Production
- Your Upgrade Plan
- Site Testing Plan
- Talking to Your Clients / Team
- The Classic Editor Plugin
- The Future of Gutenberg
- Gutenberg Resources
- Bonus Lessons
- Converting a Live Site
- The Gravity Forms Add-On
- Using Beaver Builder with Gutenberg
- Advanced Custom Fields
Gutenberg Course for Freelancers – By Joe Casabona
Do you make WordPress sites for your clients? This course is for you.
You’ll need to navigate the changes of the new editor, train your clients, and get ready to upgrade websites for your clients. If you do it right, it will provide your clients with immense value and a better experience with little to no downtime.
Who is this course for?
Specially targeted to the freelancers and Agencies who make websites for clients. This course is both for you and for your clients.
You and your clients have questions, this course has answers.
“What happens to my current content?” “Can I still use a page builder?” “Do I HAVE to upgrade?” You have all of these questions and more…and when WordPress 5.0 comes out, so will your clients. This course will answer them for you AND help you answer them for your clients in a clear way.
You’ll get the lowdown on how Gutenberg works, as well as upgrade blueprints and communication plans. When your clients have questions, you will have the answers.
What will you learn?
In this course, you will learn how the new editor works, what the new terminology is, and how to build a site from scratch. You will also get checklists and resources for how to communicate the changes with your clients and your best plan of action for getting them safely on WordPress 5.0. Finally, you see examples of real upgrades and lots of demos. This course will fully prepare you for the impending updates in November.
Course Outline
- Introduction
- The Current State of the WordPress Editor
- What is Gutenberg?
- Creating Page Layouts
- Making a Regular Blog Post
- Creating a Rich Page Layout
- Using Columns
- Reusable Blocks
- Building a Website with Gutenberg
- Finding the Right Theme
- Our Site’s Content
- Creating the Home Page
- About Page
- A Portfolio
- Contact Page
- The Blog
- Gutenberg in Production
- Your Upgrade Plan
- Site Test Plan
- Talking to Your Clients / Team
- The Classic Editor Plugin
- The Future of Gutenberg
- Gutenberg Resources
- Bonus Lessons
- Converting a Live Site
- The Gravity Forms Add-on
- Beaver Builder with Gutenberg
- Advanced Custom Fields (coming soon!)
Create Content With WordPress Gutenberg – By Andrew Blackman
In this course, you’ll learn how Gutenberg lets you create and edit content in ways that you might not have been able to previously.
Who is this course for?
This course is targeted to the WordPress users and content creators generally. If you are willing to learn the new Gutenberg WordPress editor, this course if for you.
What you will learn?
In this course, you’ll learn how to use the Gutenberg editor and blocks. You’ll learn how Gutenberg lets you create and edit content in ways that you might not have been able to previously. You’ll learn how to create different kinds of built-in blocks, including image galleries and text boxes. I’ll also share some tips and tricks for configuring and organizing your blocks.
Course Outline
- Introduction
- Working With Gutenberg Blocks
- Adding Text Blocks
- Adding Image Blocks
- Going Further With Blocks
- Advanced Block Editing
- Creating and Using Shared Blocks
- Conclusion
Those are the few courses I found best for users available for now. I will make sure to update this post in the future if a new valuable course comes out. Please inform via the comments about any new course to add here.
Also, make sure you follow the Gutenberg User Guide on GutenbergHub for all the latest user tutorials for Gutenberg.
Gutenberg Courses for Developers
Perhaps you have heard? Gutenberg is JavaScript-driven, uses React under the hood, and provides an interactive single page interface for editing content as blocks. This adds new abilities, libraries, toolsets, and ways of developing within WordPress. Either you wish to make your WordPress plugins compatible with the Gutenberg WordPress editor, or you need to start developing for Gutenberg. Here are a few top developer courses I was able to find for you.
Gutenberg Development Course – By Zac
In this course, you will gain a solid foundation of how to start developing with the new WordPress editor.
Who is This Course For?
Though Gutenberg will affect different developers in different ways, this course will specifically help the following:
- Plugin Developers building shortcodes, widgets or custom fields.
- Theme Developers looking to style Gutenberg and set default block templates.
- Agencies who need to stay up to date on major changes coming to WordPress.
What Will You Learn?
In this course, you will gain a solid foundation of how to start developing with the new WordPress editor.
- How Gutenberg Core works under the hood
- Important JavaScript libraries that ship with Gutenberg
- How to create custom blocks with core and custom components
- Options for Theme Developers to extend and customize Gutenberg
- The Modern JS Approach of using ES6+, JSX, React, webpack and more
Since Gutenberg is still in development, the course will receive updates as Gutenberg evolves.
Course Outline
- Core Gutenberg Architecture
- A Walk Through of Core Gutenberg FilesMain Gutenberg Plugin FileElement LibraryThe Blocks LibraryThe Components LibraryThe Editor LibraryData LibraryDate LibraryClient Side Internationalization LibraryDocs LibraryTooling and Configuration Files
- A High Level Overview of Blocks
- Important JavaScript Libraries that Ship with GutenbergDo Custom Blocks Belong in Plugins or Themes?The Modern JS vs ES5 ApproachBasic Block ArchitectureEnqueuing Block JS and CSS
- Working with registerBlockType
- An Overview of registerBlockTypeTitle SettingCategory SettingIcon SettingKeywords SettingSupports SettingAttribute SettingsEdit SettingSave Setting
- Example Block Walkthroughs
- Getting Setup with the Example Plugin FilesStatic BlockRichText BlockText Alignment ToolbarBlock Alignment ToolbarCustom Toolbars in BlocksInspector ControlsInspector Control FieldsBlock Form FieldsMedia Upload ButtonURL InputDynamic BlockMeta Box
- Addendums
- Block TemplatesCustom Block Color Schemes
Theming with Gutenberg Course – By Zac & Joe
Learn everything you need to make WordPress 5.0 and future compatible theme from the experts.
Who is this course for?
Certainly, as the course name suggests, this course is targeted to help WordPress theme developers. If you have a WordPress theme you need to make sure to take the necessary steps to make your WordPress theme compatible with the new Gutenberg WordPress editor.
As a theme developer this is honestly not optional to ignore this. You have to make sure your themes works with the new WordPress editor and takes care of all the Gutenberg blocks styling.
What will you learn?
Simply everything! Learn everything you need to make your WordPress themes compatible with WordPress 5.0.
The new block editor for WordPress should work out of the box with all themes. However, some steps are needed in order to take full advantage of Gutenberg with your theme.
Course Outline
- An Introduction to Theming with Gutenberg
- Gutenberg Compatible Themes
- Intro to “Gutenberg Compatible” Themes
- Enqueuing CSS & JavaScript in Gutenberg Compatible Themes
- Wide and Full Align Support
- Making an Existing Template Gutenberg Compatible
- Making an Existing Theme Gutenberg Compatible
- The Gutenberg Starter Theme
- An Introduction to The Gutenberg Starter Theme
- An Overview of the Gutenberg Starter Theme Source Code
- The functions.php File and Theme Support
- Overview of Basic Template Markup
- Gutenberg Starter Theme Stylesheets
- Beginning to Customize the GB Starter Theme
- Styling Default Blocks
- Styling Gutenberg Blocks
- Default Block Styles
- Finding Block Classes
- Setting Up Our Theme Code
- Example: Quote Blocks
- Example: Cover Image Block
- Example: Button Block
- Example: Embed Blocks
- Styling Columns
- Custom Color Palettes
- An Introduction to Color Palettes
- How to Create Your Own Color Palettes
- Locking Down Your Color Palettes
- Block Templates
- An Introduction to Block Templates
- Adding Block Templates to a Theme
- Adding Column to Block Templates
- Locking Block Templates
- Custom Post Type Block Template
- Course Review
Gutenberg Blocks for Beginners Course – By Lee Shadle
Learn how to code blocks from scratch for Gutenberg, the new WordPress editor.
Who is this course for?
This course is for anyone who wants to learn how to build Gutenberg blocks from scratch. Are you a WordPress theme developer? Are you a WordPress plugin developer? Do you build WordPress websites? Then you really need to check this course out.
- Anyone who wants to learn how to build blocks from scratch, for the new Gutenberg editor for WordPress.
- Anyone beginning block development for the new Gutenberg editor for WordPress.
- Anyone who wants to learn how to build a WordPress plugin.
- Anyone who wants to get more familiar with using React and WordPress.
- Anyone who wants to get more comfortable with using the command line, the NPM package ecosystem, and webpack.
What you will learn?
This course walk you through every step of creating a block, from setting up your local development environment to installing WordPress, building your first block in development, and finally preparing your your block plugin for production with lots of opportunities to get really comfortable with the command line and other modern javascript dependencies such as webpack and the Node.js package manager NPM.
- You’ll be able to build blocks from scratch for Gutenberg, the new WordPress editor.
- You’ll be able to set up your development environment for building Gutenberg blocks.
- You’ll feel very comfortable using the command line to copy, create, delete, and move files and directories.
- You’ll be able to build a WordPress plugin from scratch.
- You’ll know how to create an easy to maintain, scalable architecture for your Gutenberg blocks.
- You’ll know how to use your blocks in both plugin and production environments.
Course Outline
- Introduction and Setup
- Introduction
- Setting up Mamp
- Setting up and using the Command Line
- Installing Node.js
- Getting a Text Editor
- Installing WordPress
- Installing Gutenberg
- Creating a WordPress plugin
- Creating Your First Block
- Enqueuing Scripts
- Registering your Block
- Setting up package.json
- Setting up Webpack
- Using your First Block
- Applying Styles with Stylesheets
- Enqueuing Scripts
- Registering your Block
- Setting up package.json
- Setting up Webpack
- Using your Stylesheets Block
- Creating a Block with the RichText Component
- Enqueuing Scripts
- Registering your Block
- Setting up package.json
- Setting up Webpack
- Using your Editable Block
- Creating a Block with a Toolbar
- Enqueuing Scripts
- Registering your Block
- Setting up package.json
- Setting up Webpack
- Using your Block with a Toolbar
- Creating a Block with a Media Uploader
- Enqueuing Scripts
- Registering your Block
- Setting up package.json
- Setting up Webpack
- Using your Block with a Media Uploader
- BONUS: Creating a Scalable Architecture for your Blocks
- Creating the File Structure
- Adding your Blocks
- Enqueuing Scripts
- Setting up package.json
- Setting up Webpack
- Internationalizing your Blocks
- Using All Your Blocks
- Using Source Maps
- Where do I go from here?
- Using Blocks in Production and Next Steps
Coding Blocks for WordPress Gutenberg – By Jeremy McPeak
In this course, you’ll learn how to create your own blocks to extend the functionality of the Gutenberg editor.
Who is this course for?
This course is also targeted to the WordPress developers. learn the new WordPress editor Gutenberg’s API and start creating your custom blocks right away.
What you will learn?
In this step-by-step video course, Jeremy McPeak at Tuts Plus will show you exactly how blocks work in WordPress Gutenberg and how to write your own.
Among other things, you’ll learn how to:
- define attributes to maintain state
- build and refine the user interface for your block
- store data
- add rich text capabilities
Course Outline
- Introduction
- Introduction
- Setting Up Your Environment
- How Blocks Work
- An Overview of Gutenberg Blocks
- Defining Attributes to Maintain State
- Examining Attribute Sources
- Writing Blocks
- Building the Block UI With WordPress Components
- Defining Attributes and Storing Data
- Adding Rich Text Capabilities
- Polishing the Editor UI
- Conclusion
Those are the few courses I found best for developers available for now. I will make sure to update this post in future if a new valuable course comes out. Please inform via the comments about any new course to add here.
Also, make sure you follow the Gutenberg Developer Guide on GutenbergHub for all the latest developer tutorials for Gutenberg.
Leave a Reply