Skip to content
pinegrow.com
Docs menuWordPress
WordPress

Build custom Gutenberg blocks for WordPress

Updated

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

On this page

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.

Block action settings for the About Me section, with Unique Id, Title, Description, Icon and Category fields still empty.

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.

Image element selected in the About Me block, with Block Attribute 1 set to attribute id image and Use as Image.

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.

Row of stat counters in Pinegrow under the About Me heading, with Block Inner Content set to allow only counter blocks.

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.

WordPress block editor on the I Love Surfing Huge Waves page with the About me block selected and its image and title controls in the sidebar.

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.

Show Posts - Smart panel with Loop type set to custom query, Order by Created date and Posts per page set to 3.

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.

In this section