Block

For example, if we have a Pricing section and we want to create a Pricing block, we add the Block action to the top pricing section element.

Block id

Every block type needs a unique id, such us pricing. 

Block id can contain only letters, numbers and the - character.

Pinegrow will prepend the namespace (project’s slug) to the block id during export. Thanks to using the namespace, block id has to be unique only within the project, not globally.

This means:

• We can not define two blocks with the same id in the same theme or plugin.
• We can use same ids in different projects. 

Note, block ids can not contain the _ character. Any occurrences of _ in the theme / plugin slug are automatically replaced by - during Pinegrow export.

Title

Title is a human readable block name that will be shown in the block editor library.

Description

Description can provide additional information about the block.

Icon

Icon can be the name of one of WordPress built-in icons or inline SVG code. Click on the Browse icons button to open the gallery of WordPress dashicons icons or Bootstrap and Remix icons.

To use WordPress dashicons, copy the icon name without the prefix dashicon-. For example, enter awards instead of dashicon-awards.

To use SVG icons, copy the complete SVG code into the Icon field. 

Category

Select the category for the block. Use Custom to enter a custom category name.

The custom category has to be registered on one of the blocks.

To register the category, check Register category and fill in the information.

Open the More options section to fine tune the block.

Block type

Select how the block is implemented:

• Auto will use the global project setting, set in Theme / Plugin settings.
• Regular JavaScript block will generate a native WordPress block that renders with JavaScrip in the browser at the time you edit the post. Only Block Attributes and Block Inner Content actions are allowed in such blocks. 
• Dynamic PHP block will generate a native WordPress block that renders with PHP every time it is displayed. The block can use display posts and use all WordPress actions.
• ACF PRO will generate an ACF PRO block. This option requires the ACF PRO plugin.

Note, if type is set to Regular JavaScript but the block contains non-block WordPress actions, the block will be exported as Dynamic PHP block instead.

Learn more about the difference between Regular, Dynamic and ACF blocks.

Folder

The folder within the theme or plugin where the block files will be exported.

Default value is blocks/<block id>.

Keywords

A comma separated list of keywords that help users find the block in WordPress block editor library.

Post types

Only for ACF Pro blocks. Select post types that can use the block.

Style

Include a CSS stylesheet that contains block styling. The stylesheet will be included both on the backend in the block editor and on the front end. Do not include stylesheets that are already included in the theme, such as framework stylesheets.

Learn more about block styles.

Editor style

Include a CSS stylesheet that contains any special block styling that should be only included when editing the site in the block editor.

Script

Include a script file that runs the dynamic Javascript code for the block on the front-end. Note, for ACF blocks the script will also be included in the block editor.

Learn more about including block scripts.

Parents

Allowed parent block types, comma or new line separated. Useful if the block should be listed only for specific parent blocks when adding an inner block. You can omit namespace for blocks from this project. 

Example:

aboutme
showcase
core/heading
mytheme/project
mytheme/experience

Supports

Enable support of common WordPress block controls.

Learn more about common controls.

Load edited post

Only for Dynamic PHP blocks, does not affect block rendering on the front-end.

Load the current edited post during editor rendering so that actions such as Post Title and Post Featured Image display the information of the edited post.

Using WordPress actions on Dynamic PHP blocks

You can freely use all WordPress actions to add dynamic functions to your block, for example displaying the Site name or using Show Posts to display posts from the database.

There is one limitation, though:

Non-block WordPress actions can not be placed on the element that has the Block action. If you do that you will get a warning message during the export. The reason is that such configuration often results in unexpected results.

For example, the following is not allowed because Block and Show Posts actions are used on the same <section> element:

section | Block, Show Posts
  h1 | Post Title

The solution is to create a wrapper element and move the Block action there:

div | Block
  section | Show Posts
    h1 | Post Title