Tips that you should keep in mind if you are going to develop blocks for Gutenberg

Although I am not a big fan of how the implementation of Gutenberg has been decided, actually I am very interested in the development of the new WordPress editor itself.

That is why, since I am in flour for to prepare myself for what is to come I am going to share with you some of the things that I have been learning at the time from develop blocks for the new Gutenberg editor of WordPress as well as the adaptation of the themes to Gutenberg .

Just to remind you that I am neither a career programmer nor an expert in Gutenberg ( still), I'm just learning to create blocks for the editor.

The following tricks are things that I have been learning about entangling and investigating resources like the same plugin Gutenberg ] the basic theme for Gutenberg [1945900] 4] Gutenberg Best Practices and this gem called Create Guten Block .

Do we wear it?

Where do I include the blocks, in the theme or in plugins? [19659008] We've already mentioned it before, when we were talking about if it's better to edit the functions.php or use a plugin and the base rule is that if something affects the visualization thinks about the subject, and if you add features, use a plugin .

So when we think about blocks we apply the same principle, and since most of the blocks add functionalities to WordPress as a whole, in a key and base utility as is the editor, I think makes more sense as plugins .

What's more, think for a moment … If I change the subject, will I lose the functionality that the block does in my content? The answer will almost always be yes. WordPress will no longer know what to do with the block information, stored in the database, but associated with an active topic that is no longer.

On the contrary, if your block is in a plugin, or you deactivate it, or it will be agnostic of the active theme, it will work with all.

File structure of a block

Although it will always vary from developer to developer, and there is no standard file structure, there are patterns when it comes to develop blocks for Gutenberg .

A typical block plugin consists of a file my-plugin-of-blocks.php used to enqueue the blocks, and a directory / blocks in which to host all your blocks.

Within the directory / blocks you can make sub-folders for specific blocks, such as / custom-block . And inside the directory / block-custom would be your files index.js editor-styles.css and styles.css of your block.

Seen the above, to see it more clearly, we talk about a structure of this style:

Naming the blocks / namespace

When you register a block, the name you have to structure it as namespace / block-name and in block-name you can only use lowercase, numbers, and simple hyphens, plus you should always start with a letter .

On the other hand, namespace is the name of your plugin. Then in the previous example namespace / block-name it should actually be something like my-plugin-blocks / custom-block .

Translations

Yes you have already published a plugin or theme in WordPress.org you should already know how to prepare them for translation .

When working with blocks it is practically the same even though the blocks are create mainly with JavaScript. Basically keep in mind that you should always make your blocks translatable, just like your plugins and themes, and it's also easy to do.

Beware of the issues

The main thing to remember is that blocks can include their own styles necessary for them to work properly. But the themes can overwrite the styles of the blocks as in the example we saw a few days ago .

There are few things in Gutenberg that require compatibility with the themes, mainly because to the nature of how Gutenberg is programmed, and to the difficulty of the blocks to facilitate the proper styles.

The new wide and complete alignments

In this respect the most important thing to keep in mind is the new options of alignment of images alignfull and alignwide . They can be used for images, and also for blocks.

The problem when adding them to blocks is that they may not work on some topics, especially those with sidebars.

Add to the active topic the Compatibility with the new alignments is as easy as calling the function add_theme_support ('align-wide'); in the functions.php file of your theme, like this:

Then do not forget to add styles to the new alignments on the sheet of styles of your theme.

Color palettes of the blocks

One of the coolest things about Gutenberg is the color selector, which offers the developer of themes total control over what colors the color can change user so offer a consistent color palette when creating the content .

To incorporate compatibility of your theme with this functionality, you can add it, with your personalized color palette to the active theme by adding something like this to the functions.php file:

And you can even go further and disable the custom color picker from Gutenb erg to only show the default options. To do this, add this to your functions.php file:

Warning: If you add all these options you can do so in the same function. Do not define 3 times helpwp_setup_theme_supported_features or you'll have an ugly PHP error.

Summarizing

I know it's not much I've told you, but I hope you learned something new about Gutenberg and how to create your We will be seeing more guides and tricks for Gutenberg, and of course you can always leave your own tips and tricks for Gutenberg in the comments.

Loading …

Maybe you too help: