The Easiest Way to Build Custom Gutenberg WordPress Blocks

Create custom Gutenberg blocks visually, without coding and without plugins.

New in Pinegrow 6.2 – Create native React and PHP WordPress blocks without coding.

Creating native custom WordPress blocks requires significant skills and effort.

Pinegrow lets you visually create custom native WordPress blocks that don’t require any plugins. (Pinegrow is not a WordPress plugin. It is a desktop app that works with files on your computer.)

There is no compilation and no build process. No development environment, no need to write a single line of JavaScript or PHP code. No need to manually create a theme or a plugin.

Creating WordPress blocks doesn’t get easier than this:

Step 1 – Open or create a HTML project in Pinegrow Web Editor

Open your existing HTML project in Pinegrow, or use Pinegrow’s powerful editing tools to create a static HTML design for your blocks or the whole theme.

Step 2 – Define the block

Select the HTML element that represents the block and add the Block action from the WordPress panel.

Step 3 – Make the block editable

Add the Block Attributes action to elements and select what parts of the element should be editable, including content, links, classes, attributes and more.

Step 4 – Add or define nested blocks

If needed, add the Block Inner Content action to create an area where other blocks can be inserted. Use the Block action to define sub-blocks that perfectly fit into your custom block.

Step 5 – Export and use the block

Export the project as a theme or a plugin, directly into your local WordPress site, and use the block in the block editor. Once you are happy with the result, upload the theme or plugin to your production site.

Create regular, dynamic and ACF blocks

Both regular JavaScript (React) blocks and dynamic PHP blocks are supported. With dynamic blocks you can use more than 200 WordPress actions to show posts, run custom queries, define custom post types and more. You can also create Advanced Custom Fields PRO blocks.

Getting started

Follow the step by step guide on creating custom WordPress blocks with Pinegrow.

What are Regular, Dynamic and ACF blocks? When to use what?

Explore examples and tutorials.

Implement simple full site editing with custom blocks.

Check out the reference for Block, Block Attributes and Block Inner Content actions.

Don’t have Pinegrow yet? Download Pinegrow Web Editor. Free trial is included.

If you are running into any compatibility issues with other plugins, see the Plugin compatibility issues.

Last updated on April 7, 2022 at 1:10 am

Print this article