{"id":69193,"date":"2019-01-21T09:00:04","date_gmt":"2019-01-21T15:00:04","guid":{"rendered":"https:\/\/wpengine.com\/?p=69193"},"modified":"2019-01-17T16:31:34","modified_gmt":"2019-01-17T22:31:34","slug":"steps-and-tips-for-building-your-first-gutenberg-block-plugin","status":"publish","type":"post","link":"https:\/\/wpengine.com\/resources\/steps-and-tips-for-building-your-first-gutenberg-block-plugin\/","title":{"rendered":"Steps and Tips for Building Your First Gutenberg Block Plugin"},"content":{"rendered":"

The new editing experience, Gutenberg, provides users with a fresh and exciting writing experience via rich content and intuitive capabilities. While the old editor required shortcodes, HTML, and custom post types to make a vision take form, the new editor works more like puzzle-strategic, block-like elements are built individually and come together to create the final markup. There are blocks for almost everything: paragraphs, lists, buttons, etc. Additionally, users have the ability to create templates within the editor via reusable blocks. Since its release last month, the editor has enhanced the appeal WordPress for content creators and future-proofed the CMS for years to come.<\/span><\/p>\n

As Gutenberg continues to become more sophisticated and more bugs are expelled, more WordPress users will begin to use the new editor and the possibilities with development will expand. Leaders of the project have reiterated that the editor is just the beginning, the goal was always to expand Gutenberg to widgets, menus, and beyond. If they haven\u2019t already, developers will need to become familiar with JavaScript and React. The aim of this article is to provide tips to developers for the creation of their first block.<\/span><\/p>\n

Getting to Know JavaScript<\/strong><\/h2>\n

With the exception of bringing the files in via PHP, Gutenberg blocks are built almost entirely in JavaScript. An abstraction layer is built over React using Javascript, limiting the direct interaction with the <\/span>React JavaScript Library<\/span><\/a>.<\/span><\/p>\n

Choose a Version <\/strong><\/h3>\n

JavaScript has been through a bit of its own evolution-you\u2019ll need to decide what version you want to work with (ECMAScript 5 or newer). Keep in mind that more recent versions will require extra effort to ensure compatibility with all browsers. ES% is universally supported by all browsers, ES6 came out in 2015 and since then new iterations have come out every year.<\/span><\/p>\n

JSX<\/strong><\/h3>\n

JSX, another component in building Gutenberg blocks, \u00a0is a preprocessor step that adds XML syntax to JavaScript and looks and feels very similar to writing XML or HTML tags. You\u2019ll need a package manager like <\/span>Node<\/span><\/a> or <\/span>Webpack<\/span><\/a> for compilation purposes. Because JavaScript will continue to evolve, it\u2019s important to understand React and JSX.<\/span><\/p>\n

Get Comfortable with Existing Components <\/strong><\/h3>\n

There are existing components for almost anything you want to do in JSX. If you\u2019re hard-coding an input, there\u2019s probably an easier way to do it. A handy link to documentation on the available components can be found <\/span>here<\/span><\/a>.<\/span><\/p>\n

Getting Started with Building a Gutenberg Block Plugin<\/strong><\/h2>\n

After you\u2019ve become familiarized with JavaScript and you\u2019ve downloaded Node or Webpack, you can begin experimenting with building a block plugin. Anything that creates content, like a block, will need to be developed in the form of a plugin in order for it to stay active as you change themes and experiment with new components on your site.<\/span><\/p>\n

Install Create-Guten-Block<\/strong><\/h3>\n

An excellent resource for creating your block is the Create-Guten-Block toolkit built by Ahmad Awais. <\/span>Create-Guten-Block<\/span><\/a> is a zero-configuration developer toolkit for building Gutenberg block contained in plugins. This is an initial shortcut step that will allow you to bypass the need for a deep understanding of the technology behind block development; it takes away a lot of the stress of a build process and allows you to focus on the functionality you wish to build. The code is widely documented so it is encouraged to explore the files read through the inline comments to gain an understanding of the code.<\/span><\/p>\n

Creating a Plugin that Registers a Block<\/b><\/h3>\n

Begin by setting up a local installation on your machine. You can use <\/span>VVV<\/span><\/a>. Navigate to the plugins directory and run npx create-guten-block plus the name of your block (your choice). After that, start it up. This will take a couple of minutes to install. <\/span><\/p>\n

npx create-guten-block
\ncd my-block
\nnpm start\u00a0<\/code><\/p>\n

Important Files to Know<\/h2>\n

After firing it up, you’ll find code detailing aspects of create-guten-block files that you might not be familiar with. It’s important to be a little familiar with the plugin structure.<\/p>\n

plugin.php<\/strong><\/p>\n

Use this to define and name your plugin. Along with changing the renaming the file to match your plugin, you’ll want to list yourself as the author and update your plugin’s description information.<\/p>\n

README.md<\/strong><\/p>\n

This file contains basic info about create-guten-block. Use this as a guide to configuring your local development workflow.<\/span><\/p>\n

block\/block.js<\/strong> <\/span><\/p>\n

The details all the JavaScript for a block. <\/span><\/p>\n

src\/blocks.js <\/strong><\/p>\n

Lists all blocks related JavaScript files. <\/span><\/p>\n

block\/editor.scss <\/strong><\/p>\n

Sass partial for styles that are specific to the editor itself. <\/span><\/p>\n

block\/style.scss <\/strong><\/p>\n

Sass partial for styles specific to the front end.<\/span><\/p>\n

More Resources for Getting Started with React <\/span><\/h2>\n

React is the go-to strategy for creating scalable, real-world applications. Thankfully, there are a plethora of resources for getting started and using that knowledge in WordPress development: <\/span><\/p>\n