Gutenberg Blocks for WordPress and React Developers

In this lecture we will install and activate a theme that we will use through out the course. You can use your own theme if you like since most of the work will be in a plugin. Additionally we are going to take a look at the gutenberg repository on github. This will be useful incase you ever needed to look at the source code of existing core blocks.

In this lecture we will explore the structure of the new block editor page. We will see what every area in the editor is called and its usage.

In this lecture we will take a look at the structure of the blocks in the new editor. We will explore the UI elements of the block and their purpose. We will also discuss some design guidelines that we should follow when designing a block.

You might be wondering how a post in the block editor is saved in the database? Do we save 2 representations for the post? One for the frontend and one for the editor? In this lecture we will answer this question.

In this lecture we will discover how the visual editor is reconstructed by parsing the post’s HTML content.

In this lecture we will briefly take a look on how data is managed in a redux-like fashion in the block editor.

In this lecture we will revisit the diagram that explains how do we reconstruct the visual editor from the HTML. But we can get a better understanding now that we can see the post state array and other data stored in the redux-like stores.

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.