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 will download the gutenberg repository from github in order to use it as a reference later.

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 block. We will explore the UI elements of the block and what should they do.

In this lecture we will talk about some best practices and guidelines that you should follow when designing your blocks.

You might ask how our gutenberg post 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 HTML content.

In this lecture we will briefly take a look on how redux is used to store centralized data in gutenberg.

In this lecture we will revisit the diagram that explains how do we reconstruct the visual editor from the HTML. But know we can inspect the post state array using redux.

In this lecture we will code a very simple react component without any JSX.

Before using webpack, let's initialize npm in order to install our dependencies.

Let's now see how can use webpack to produce a JS bundle. We will also see how can we instruct Webpack to minify our bundle for production.

In this lecture we will install babel-loader. A loader in Webpack is what is used in order to do a transformation to bundled files. Babel is a library used to transpile new ES versions into ES5.

Now that we transpile ES6 features to ES5, we still have to also transpile JSX. Let's do that in this lecture.

In this lecture we will see the benifit of the 'development' option in @babel/react-preset

In this lecture we will take a look at different sourcemaps that you can use in Webpack.

We will now use webpack loaders in order to compile SASS files into CSS and load them into our website.

Before moving our CSS into a separate file. Let's add autoprefixing to our CSS using the postcss loader.

In this lecture we will explore webpack plugins and use a plugin in order to generate a separate CSS bundle.

Our final step is to minify the CSS file that we generated.

We will start by creating a WordPress plugin. In this plugin we will write some ES5 JS in order to register our first block. We will also learn about wp.i18n in this lecture.

In addition to registering a block in the client (JS). We also have to register the block on the server (PHP). This will allow us to specify the styles and scripts that we need to enqueue with the block.

In this lecture we will see how to use react properly for gutenberg blocks.

In this lecture we will just take a look at a couple of options that we can add to our block registration. These options will allow us to customize the block's icon and the filtering keywords.

Now that we know how to register a block. And we also know how to use Webpack. Let's use both togather!

In the previous lecture we created a bundle that will host all the JS code for blocks' registration. Let's enqueue this bundle in this lecture.

After using webpack in our plugin. In this lecture we will finally register a block using JSX and ES6.

Let's make use of the class that WordPress generates for our block in order to add some styling.

To be able to add styles and scripts that will be enqueued in the editor page and also in the frontend, we need to create another webpack bundle. In this lecture we will discuss how that could be done.

In this lecture we will explore a feature in WordPress called 'externals'. This will allow us to use bundles from the node_modules folder during development which we don't want to include in our bundle.

In this lecture we will use gulp in order to generate a production ZIP file for our plugin. This zip file will only contain the necessary files needed for the plugin to run on WordPress.

In this lecture we will integrate the famous ESLint library in our project. By doing this we will have a much better way to detect JS errors.

In this lecture we will integrate ESLint in our build command in order to check for JS errors before building. We will also explore a new way to get JS messages in the console.

In this lecture we will install prettier and take a look on how it works.

Instead of getting ESLint errors for syntax errors that prettier will fix anyway. Let's figure out a way to disable these errors.

In this lecture we will use husky in order to hook into git and run prettier before committing any files.

In this lecture we will see how to support align-wide and align-full in your theme.

In gutenberg, we have a colour palette for blocks that have colour options. Let's see how to customize this palette.

iframes are usually not responsive by default. In this lecture we will enable a feature that will make gutenberg's embedded content responsive.

You will probably have to add some styles to the editor page in order to make it look like the front-end as much as possible. In this lecture we will have a quick look on how to add styles for the editor page properly.

In this lecture we will see what are the wp.editor and wp.components provided by WordPress. And also we will do some adjustments to our eslint config.

Let's now use the RichText Component in order to make the text in out block editable.

Now that we are able to manipulate our content attribute using the RichText component in the editor. Ler's see how to display the result in the front-end.

Let's see how to instruct WordPress to parse our attributes from the HTML instead of adding them in the block delimiter object.

In this lecture we will talk a comprehensive look at the BlockControls component. This component is used to add icons in your block toolbar.

In this lecture we will 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 now see how to add options in the block's sidebar using the InspectorControls component.

In this lecture we will use a new component that will help us manipulate the background and text colours for our block.

Let's see how to add multiple styles to our component in gutenberg.

Let's see how to create our own gutenberg blocks category and add our block in it.

Let's see why would we need to move our edit component into a new file and start our first steps to do it.

Now that we created a dummy class component. Let's move our edit component into it.

Let's explore one of the HOCs that WordPress provides which is withColors. This HOC will allow us to make use of the CSS styles that we wrote in our theme to style our colour palette colours.

Now that we know what withColors is, let's now try to use it in our editor.

Now that we can edit our colours in the editor. Let's now modify our save function in order to adapt to these latest changes.

Let's use the knowledge that we gained so far in order to add a new option in out block. This option will toggle a shadow in our text box.

Let's add a new option but this time it will be in the settings sidebar. This option will control the opacity for the shadow that we added in the previous lecture.

As you noticed, every-time we update our block, we get some validation errors and we won't be able to edit our block anymore. Let's solve this problem by adding deprecations to our block definition.

For attributes that are not extracted from the HTML, we need to provide a way in order to tell gutenberg how to update the old attributes.

Let's see how to add transformations to our block. This way we will be able to transform our block type into other types or vice versa.

Now that we know how to transform block types into our block type. Let's now do the opposite of this operation.

Let's start by just creating the necessary files and defining our block and its attributes.

Let's start creating our edit function. We will start simple by implementing the editing of the title and the bio.

Let's finalize the title and the bio part by adding the save function.

In order to create nested blocks, we will make use of powerful component provided by gutenberg. So Let's explore the InnerBlocks component in this lecture.

Let's add an attribute for our parent component in order to control the number of columns in our grid.