Tag: gutenberg

Sometimes, we need to access the block directory url inside Gutenberg block.js file (see following scenario). Let’s say that inside the block folder you have an images folder containing logo.png image and you want to access that image inside the block.js file. In this blog post we will learn how to access the image inside images folder from block.js file.

In previous blog posts, we have learned how to create custom Gutenberg blocks. In this tutorial we will learn how to create Gutenberg template with pre-defined blocks using inner blocks component.

WordPress provides Format API to add custom buttons in formatting toolbar to apply specific styles to the selected text. When a format is applied to a text selection, the text selection is wrapped with HTML tag. In this tutorial, we will learn how to register a new format, add a button in the toolbar and apply the format when the button is clicked.

Gutenberg block editor have revolutionized the way we add/edit post/page content. The block editor consists of some pre-defined blocks like heading, paragraph, image etc. Other than the default blocks, we can also create custom Gutenberg blocks as well. In this tutorial blog post, we will learn how to add custom category for custom Gutenberg block(s).

In previous tutorial blog post, we have learned how to use Settings Sidebar to add option to change to change the color of Colored Lines block. We have used the PanelColorSettings element with custom color options which lets the user change the color of the Colored Lines. In this tutorial, we will learn about the other type of editable fields (text field, text area field, radio button field etc.) also known as controls for settings sidebar and how to use them inside the edit() function.

In previous blog post we have developed a custom Gutenberg block i.e Colored Lines which adds colored lines in post/page editor. After that we have learned how to use Block Controls (Block Toolbar) to change the alignment of the colored lines. In this tutorial blog post, we will use the Settings Sidebar to add the options to change the color of the Colored Lines Gutenberg block.

In previous post, we have learned how to devlelop a custom Gutenberg block using ES5 syntax. We have developed a custom Gutenberg block which adds colored lines in Post/Page content. That block is not customize-able yet. In this tutorial we will learn how to change the appearance of the colored lines using block controls and attributes.

JavaScript build setup helps to speed-up the development of WordPress blocks and creates the two main files i.e. build/index.js and build/index.asset.php which are used while developing the actual WordPress block inside plugin or functions.php of WordPress installation. The index.js file contain the compiled code (from ESNext and JSX syntaxt to plain JavaScript) for the actual WordPress block and index.asset.php file contains the dependencies and version information (generated from the used packages) to be injected while registering the WordPress block.