WordPress

How to Create Gutenberg Block Templates in WordPress

Gutenberg block templates

WordPress Gutenberg editor supports customize block templates that help WordPress user to add custom block to their CMS.

Register Gutenberg Blocks

This method involves custom block templates that is used to build pre-populated blocks. Add the following code to functions.php file

add_action( 'init', function() {
$args = array(
'public' => true,
'label' => 'News',
'show_in_rest' => true,
'template_lock' => 'all',
'template' => array(
array( 'core/paragraph', array(
'placeholder' => 'Breaking News',
) ),
array( 'core/image', array(
'align' => 'right',
) ),
),
);
register_post_type( 'news', $args );
} );

This is how the custom template for Gutenberg block appear.

WordPress Gutenberg Block Templates

In this code the array parameter ‘core/paragraph’ is used for the content of the block and the ‘core/image’ allows you to upload images in three ways:

  1. Direct upload
  2. Uploading from Media Library
  3. Embedding using a URL.

The ‘template_lock’ argument, when set to ‘all’, then it locks the custom blocks from being added to the template.

When it comes to adding custom block to this template, use the ‘template’ sub-array. For instance, consider the following snippet:

If you want to add a custom block to this template then use the ‘template’ sub-array. Add the following code snippet:

'template' => array(
array( 'core/heading', array( 'level' => '4', 'content' => 'Heading' ) ),
array( 'core/paragraph' ),
}

Related posts

How to fix the error when establishing a connection to the database in WordPress

WPITECH

How to Protect Your WordPress Site from Rest API Attacks

WPITECH

20 Best Membership Plugins for WordPress in 2019

WPITECH