Create Custom Gutenberg Block – Part 1: Setting up the Development Environment

Creating package.json npm init -y Next I’ll install WordPress’ scripts that will help us a lot with configuration with this command (which will add the subfolder node_modules and package-lock.json as well): npm install --save-dev --save-exact @wordpress/scripts Open the package.json file in your project folder in an editor and find the scripts property. We replace it with two scripts from the WordPress package we just installed: package.json "scripts": { "build": "wp-scripts build", "start": "wp-scripts start" }, The “build” script will compile my files. But as it has to be run manually every time a change is made, we will rather use the “start” script while we develop. It will then initiate a “watch mode” where it listens to changes made in any of your script files, and recompiles them whenever you save changes.

Comments

Post a Comment

Popular posts from this blog

Create Custom Gutenberg Block – Part 3: Props and WordPress Components

Image
The previous step in this tutorial series went through how to register a custom block, both in Javascript and in PHP. In this step we’ll learn how to use WordPress’ components for adding different kind of fields and settings. In order to utilize WordPress’ components in our block we need to first know about props. Props Props is a major feature in React and is basically a way of passing variables or functions down to other components. If you are unfamiliar with React props, you can read React’s official tutorial about this. WordPress provides some props for the edit and save functions in registerBlockType(). Inside these props we get access to critical things, such as attributes and a method to update our attributes. We’ll go through attributes in detail in the next step! So far in our block we wrote the function for edit and save like so: edit: () => { return :) }, You should get used to adding the parameter props to both edit and save, like so: edit: (props) => { re...
Read more

Create Custom Gutenberg Block – Part 2: Register Block

Image
In this part we will write Javascript to register and configure our custom block. At the end we’ll register the script with PHP and do the necessary PHP code for WordPress to recognize it as a new block. First a quick note about how to access WordPress Gutenberg’s functions and components. The global wp package and destructuring When we’re in a Javascript file enqueued in Gutenberg editor we have access to a global object/package: wp. This is a very, vary large Javascript object and it contains a whole bunch of useful components and functions we will use for creating blocks. When writing Javascript for custom blocks you will refer to wp quite a lot. Therefore it’s common, both in modern Javascript and in React, to destructure what we want to use out of it. Basically it just means that we define local variables out of parts of a bigger structure. For example the first function we’ll use is registerBlockType() that exists within wp.blocks. We could invoke the function like so: wp.blo...
Read more