Gutenberg Blocks for WordPress and React Developers

In this lecture we will just create a simple WordPress plugin in order to start working on our first block.

In this lecture we will see how to register a new block in the block editor. We will see how to define all the necessary information and also define the edit and save functions.

Let's now instead of returning a simple string; return a react component in the edit and save functions.

In this lecture we are going to migrate our code from ES5 to ESNext. And then we are going to use w-scripts; which is a tool provided by WordPress in order to compile our code back to ES5 so that it can run on any browser.

In this lecture we will learn how to properly load CSS or SASS files for our blocks

Let's in this lecture discover an easier way to create blocks. And that way is command line tool called @wordpress/create-block.

In this lecture we are going to configure ESLint and Prettier so that they work consistently with the wp-scripts commands.

Let's now displaying linter errors in VS Code and also modify the format script so that it fixes SCSS Files as well.

Let's now add a pre-commit hook so that we can check that our code does not contain any JavaScript or SCSS problems before committing files to Git.

In this lecture we will discover how can we apply styles to our editor page in order to make it look similar to the actual front-end.

Let's implement another block editor feature in our theme. And this one adds extra alignment types to our blocks; align wide and align full.

In this lecture we will learn how to customize the colour pallets that appear in the block editor for customizing colours in some blocks.

In this lecture we will learn how to add custom font sizes in the block editor.

In this lecture we are going to unlock two more features in the block editor; custom sizing and custom units.

Let's clone the boilerplate that we created earlier in order to create a new bock. This will be a simple process however there are a few things that we need to consider.

Let's now adjust our boilerplate's metadata to show information about the text box block.

Let's see how can we customize the icon by adding an SVG instead of a dashicon and also changing the colours.

Le't now make our text editable by using the RichText component.

In this lecture we are going to see how the BlockControls component is used in order to add buttons and menus in the block toolbar.

In this lecture we are going to add alignment options to our block. But instead of adding a toolbar with three buttons ourselves, we will use a ready to use component provided by WordPress.

Let's see how can we add options in the editor's sidebar. And also discover some of the input components that WordPress provides us.

Let's see how can we use the ColorPallet input to change the background color of our block. We will also introduce a new component called PanelColorSettings that offers more features when it comes to editing colours.

Let's take a look at a higher order component called withColors. This HOC can be used to provide us more information about the chosen colors so that we can avoid using inline styling as much as we can.

In this lecture we are going to redo what we have done in the previous couple of lectures but in a much simpler way.

In this lecture we will take a look at the BoxControl component and how to add spacing support in our block. We will also see how can we visualize our spacing in the editor.

In this lecture we are going to add a new option where we can turn on and off box shadow in out text box. We will also add an additional option to control the opacity of the shadow.

In this lecture we will take a look at a built-in feature that allows you to have multiple styles for your block.

Let's see how can we add a preview example for our blocks. And also take a quick look on a feature called variation that allows us to add multiple variations of the block with the same code.

Let's take a look on how to transform our block into another block. And also how to transform other blocks into our block.

Let's see how can we handle the case where we would like to update something in our code; and at the same time avoid breaking the blocks for our users.

Let's try another example of deprecated blocks. In this one we are going to see how to handle the case were we need to update an attribute name.

Let's have a quick overview on what we are going to be creating in this section.

Let's do our block initialization by cloning our boilerplate repository.

Let's change the boilerplate metadata so that it matches our new team members block.

In this lecture we are going to see how the InnerBlocks component can be used to create nested blocks.

Let's register a new block "Team Member" that will be used as a child to our team members block.

Let's start our block with a simple part. In this lecture we are going to create the edit and save functions and add the functionality to edit and save the title and the bio attributes.

Let's see how can we add a template that will be used by default whenever a new team members block is inserted.

Let's add a new attribute that will be used to control the number of columns and add an input in the sidebar to control it.

Let's now use our columns attribute and style our block to reflect the number of columns in the front-end.

Let's now work on styling our columns i the editor page.

Let's take a look at the ImagePlaceholder component that we will use in order to upload images.

Let's now add some attributes to store the image that we get from the MediaPlaceholder component and then display this image in our block.

Now that we are able to upload images, let's see how to handle inserting external URL images.

Let's now handle displaying image related errors by using a higher order component called withNotices.

Now that we are adding and manipulating our image in the editor page, let's work on displaying the image in the front-end.

Let's take a look at a case that our users could run into while uploading an image. We will also do some memory optimization to avoid memory leaks that blob URL's could cause.

Let's add a button in the block toolbar to replace the selected image.

Let's add a button in the block toolbar to remove the selected image.

Let's allow for modifying the alt text of the image by adding a textarea in the sidebar.

Let's now see how to access our data stroe in our block component in order to display image size options.

Let's add a small yet useful feature. In this lecture we are going to see how can we focus on the team member name input after selecting an image.

In this quick lecture we are going to discover how to support the align wide and align full options in our block.

Let's see how can add a new type of attributes in order to store our social media links. And then let's also display this new attribute in the edit function.

Now that we have added our markup, let's do some styling!

Let's add a way to store our currently selected link and also add some styling to indicate our selected link.

Let's work on the functionality for adding new items to our social links array.

Let's now work on the markup for the front-end part of the social media links.

In this lecture we are going to improve our block's output size by extracting the social links array from the HTML markup instead of storing it in the block delimiter.

Let's now work on editing the social links. And let's start by adding the markup for our edit form.

Now that we have our edit link form markup, let's work on the functionality for this form.

Now that we are able to add and edit social links, let's finally add a function that will remove the currently selected link.

Let's now do our final task. Let's use a plugin that will allow us to make our social media links sortable so that we can re-order them.

Now that we have successfully created a dummy sortable list. Let's now move our old static list to use the sortable list features.

Let's add an example to our block so that a preview will be available in the editor.

Let's add a useful feature to our block. In this lecture we are going to allow galleries and images blocks to be transformed into our Team Members block.

Let's take a quick overview on what are dynamic blocks and when do we need them.

Let's do our block initialization by cloning our boilerplate repository.

Let's change the boilerplate metadata so that it matches our latest posts block.

Let's now use the render callback php function in order to display dynamic content in our front-end.

Let's now write our PHP loop in order to display our block's front-end content dynamically.

Let's now see how can we access our data stores in order to fetch the latest posts using JavaScript

Let's now replicate our PHP loop but this time using JS and React.

Let's add some simple styling to our block.

Let's add a couple of options in the sidebar for controlling the number of posts and displaying the featured image.

Let's add one more option that will enable us to control the order and orderby options for our posts.

Let's add our final feature which is filtering the posts by multiple categories.

Let's create a new template for a plugin and add JS and CSS files that are only enqueued in the block editor.

Let's install wp-scripts in our boilerplate so that we can compile and minify our assets and more.

Let's take a quick look on the data stores that we get by default and what each of them does.

Let's see how to properly retrieve data and dispatch actions inside our blocks.

Let's take an overview on what we are going to be creating in this section. And also create a plugin to register our custom store.

Let's now see how are we going to register our custom store that will store our todos.

Let's now discover the proper way of sending API requests in your store using resolvers and controls.

Let's use the core/notices store to display possible API errors that could happen in out store.

Let's move now from the plugin to our todo list block so that we can display the todos that we stored in our store.

Now that we have our todos displayed; let's add an add new todo form.

Instead of adding a dummy item to our todo list. Let's modify our addTodo action creator so that it sends a request to the API.

Let's do our final task for the todo list block which is using the API to toggle the todos.

Let's finally create another block that shares the same data with the todo list block.

Let's take a loot at how metadata used to be managed in the classic editor and why do we need a new way to handle them.

Let's see how meta fields can be retrieved and edited using the data stores. By knowing that, we will be able to manipulate our data in a block.

Let's see how can we manipulate our metadata using blocks. And also how to add templates for our posts so that we won't have to add our block manually.

Let's now discover how we can add custom sidebars to the block editor by registering a new plugin.

Let's see how can we use our plugin to customize the existing sidebars and other UI elements.

Let's finally use our custom sidebar to add a component that will manipulate the metadata.

Let's see how the context feature can be used to pass attributes from a parent block to a child block.

Let's see how we can predefine templates with attributes for certain post types.

Patterns is a vary useful feature where you can insert a group of predefined blocks with predefined content into your post. Let's see how can we create patterns.

Let's see how we can extend the existing text formats and add our own custom formats.

Let's take a look at how we can use php filters to modify the behaviour of the registered blocks.

Let's take a look at how we can use JS filters to modify the behaviour of the registered blocks.

Through out the course we've been wrapping our strings with translation functions. Let's now see how to generate and load translation files for these strings.