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.)
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
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.