Gutenberg Blocks for WordPress and React Developers

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.

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.

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 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.

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.