Gutenberg Block Patterns: Next Awesome Gutenberg Feature

When it comes to the features of the Gutenberg – the new WordPress block editor – the sky’s the limit. The Gutenberg development team is continuing to enhance the editor after each release to bring users more features. One of those features is Gutenberg block patterns, which is a game changer. Before you know it, we’ll be able to create a full site right inside the editor. 

In this article, we’ll cover the Gutenberg block patterns feature and walk you through how we can quickly create our very own custom ones.

Note: To use the block patterns feature, you’ll need to install the latest Gutenberg plugin on your site.

Why block patterns?

If you’re familiar with Elementor, they have a Template feature that allows theme and plugin authors to create reusable combinations of elements/blocks and distribute them for users. This is not only the case for Elementor but nearly every popular page builder has a similar feature. 

This feature was missing in the WordPress new editor and it was proposed in Github. This feature got enough attention and the initial version was released in Gutenberg v7.7 and was stable enough when v8.0 was released.

Creating custom Gutenberg block patterns

This feature starts to shine more when we can create our own block patterns and release them for others to use. Let’s start to create our first pattern. 

It’s worth mentioning that we omitted some technical and other explanations, so you can more easily follow this post’s flow in making your first pattern.

1. Install the Code Snippets plugin

Install and activate the Code Snippets plugin. We’ll use this plugin to add the pattern registration codes in the following sections. You may also use a child theme or plugin to add the codes.

gutenberg block patterns

2. Create a pattern in the editor

Creating a pattern is a fairly easy job. We only need to create a new page and add some blocks in the editor. We used Image, Columns and Paragraph blocks to create the previously shown pattern.

3. Export the pattern codes

For registering a pattern, we need to export the created pattern as explained below.

1. Switch to Code editor and copy the codes.

gutenberg block patterns

2. Escape them by using the Onlinestringtools site.

<!-- wp:image {\"id\":158,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"http://tutorial.test/wp-content/uploads/2020/05/steve-huntington-XT1BJhMkHy4-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-158\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Rapidiously optimize B2B opportunities for interoperable benefits. Intrinsicly underwhelm world-class leadership skills before sticky imperatives.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Phosfluorescently architect equity invested convergence through integrated markets. Enthusiastically incentivize professional systems after quality channels.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->

4. Register your pattern

To display our pattern in the list of patterns, we need to register it via the register_pattern PHP function. This function, as described in the WordPress handbook, receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument.

Add a new snippet from Snippets > Add New then fill in the settings as shown below. Make sure to click on the Save Changes and Activate button.

gutenberg block patterns
if ( ! function_exists( 'register_pattern' ) ) {
	return;
}

register_pattern(
    'my-custom-patterns/pattern-1',
    [
        'title'   => __( 'Pattern 1' ),
        'content' => "<!-- wp:image {\"id\":158,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"http://tutorial.test/wp-content/uploads/2020/05/steve-huntington-XT1BJhMkHy4-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-158\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Rapidiously optimize B2B opportunities for interoperable benefits. Intrinsicly underwhelm world-class leadership skills before sticky imperatives.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Phosfluorescently architect equity invested convergence through integrated markets. Enthusiastically incentivize professional systems after quality channels.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
    ]
);

Finally, you should be able to see the pattern at the end of the Patterns section.

gutenberg block patterns

Conclusion

By now, it’s probably dawned on you the significance of Gutenberg block patterns and how to create a custom pattern in WordPress. We recommend that you keep up-to-date with the Gutenberg Github project to stay informed about developments regarding the feature. 

We’d love to hear about your experiences with the Gutenberg block patterns feature, so please share your patterns with us in the comment section below.

How to Create a Custom Gutenberg Block with the Block Lab Plugin

With the rising popularity of Gutenberg, building tailored Gutenberg blocks is becoming an essential skill for every developer. Throughout time, the WordPress community has made some great contributions to Gutenberg. Today, let’s take a look at the Block Lab plugin. Creating a custom Gutenberg block with the Block Lab plugin is much easier than standard custom block creation via the native Gutenberg API.

In this article, let’s see how we can create a custom Gutenberg block with the Block Lab plugin. But before going forward, you might want to check out the following articles we posted about Gutenberg if you haven’t done so already.

Before diving into codes

First thing’s first. Let’s get familiar with the Block Lab plugin and then we can start creating an example block with this plugin to explore its features.

Features:

  • WordPress- and Gutenberg-friendly UI.
  • 19 available field types.
  • Highly flexible in creating different types of blocks from easy to complex ones.
  • Developer-friendly functions.
  • Good documentation and tutorials.

Creating a custom Gutenberg block with the Block Lab plugin

To demonstrate how this plugin works, let’s create a posts loop block in a few steps. Almost all websites need to use these types of blocks to show posts, portfolios, news and other types of content. Now imagine that you can create any type of posts loop block by yourself using this plugin.

For this article, we are going to create the following posts loop block called Modern Posts. It allows you to fetch posts from different post types and to specify the number of the posts.

custom Gutenberg block with Block Lab

1. Install a child theme

We need to use a child theme for our PHP and JavaScript codes. For the purposes of this article, we’re going to use the Jupiter X Child theme.

custom Gutenberg block with Block Lab

2. Plugin installation

Go to Plugins > Add New, search for the block lab, then install and activate the plugin.

custom Gutenberg block with Block Lab

3. Configuring the block

To configure the essential settings for the Modern Posts block, go to Block Lab > Add New then fill in the Title and Icon settings as shown below. You may change other settings based on your needs.

custom Gutenberg block with Block Lab

4. Add the block fields

Fields allow us to set different settings for each block. Almost all blocks benefit from the flexibility the fields offer. We suggest that you read the Fields documentation.

To create the Modern Posts block’s fields based on the initial design (as shown above), we need the following Post Type and Number of Posts fields. You may add more controls based on your needs. Let’s create them.

1. Click on the Add Field button to add the fields.
2. Add the Post Type field as shown below.

custom Gutenberg block with Block Lab

3. Add the Number of Posts field as shown below.

custom Gutenberg block with Block Lab

4. Click on the Publish button. Afterward, you’ll see the following message which tells you where to create your PHP file in the child theme.

5. Write the block code

Now it’s time to create the PHP and CSS files to make the block show the posts loop. 
1. Create the block-modern-posts.php file in blocks folder in the child theme as shown below.

  • block_value() function gets the value from the fields that we created in the previous section.
  • We used a custom WP_Query to create a custom loop.
<div class="block-modern-posts <?php block_field( 'className') ?>">

	<?php
	// Variables
	$post_type  = block_value( 'post-type' );
	$post_count = block_value( 'number-of-posts' );

	// WP_Query arguments
	$args = array(
		'post_type'      => $post_type,
		'posts_per_page' => $post_count,
	);

	// The Query
	$modern_post_query = new WP_Query( $args );

	// The Loop
	while ( $modern_post_query->have_posts() ) {
		$modern_post_query->the_post();
		?>

		<div class="block-modern-posts--post">
			<img class="block-modern-posts--post-thumbnail" src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>">
			<div class="block-modern-posts--post-content">
				<h4 class="block-modern-posts--post-title"><?php the_title(); ?></h4>
				<div class="block-modern-posts--post-excerpt"><?php the_excerpt(); ?></div>
				<a class="block-modern-posts--post-more" href="<?php the_permalink(); ?>">Read More</a>
			</div>
		</div>

		<?php
	}

	// Restore original Post Data
	wp_reset_postdata();
	?>

</div>

2. Create the block-modern-posts.css file in the blocks folder in the child theme as shown below.

.block-modern-posts--post {
	display: flex;
	margin-bottom: 40px;
	align-items: center;
}

.block-modern-posts--post-thumbnail {
	width: 28%;
	height: 400px !important;
	object-fit: cover;
	border-radius: 30px;
}

.block-modern-posts--post .block-modern-posts--post-content {
	font-family: "Helvetica Neue";
	background: #fff;
	padding: 50px 40px;
	margin-left: -60px;
	box-shadow: 0 0 20px #0000001c;
	border-radius: 30px;
}

.block-modern-posts--post .block-modern-posts--post-title {
	font-family: "Helvetica Neue";
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.block-modern-posts--post .block-modern-posts--post-excerpt {
	margin-top: 20px;
	margin-bottom: 45px;
	color: #999;
	line-height: 1.8;
}

.block-modern-posts--post-more {
	background-color: #7882ff;
	border-radius: 50px;
	padding: 12px 22px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

/* Featured */
.block-modern-posts--post:first-child {
	display: block;
	margin-bottom: 60px;
}

.block-modern-posts--post:first-child .block-modern-posts--post-thumbnail {
	width: 100%;
	height: 550px !important;
}

.block-modern-posts--post:first-child .block-modern-posts--post-content {
	margin: -70px 50px 0;
	position: relative;
}

3. After adding the files, you can now play with the block in the WordPress editor.

Wrapping up

As outlined in this post, we walked you through how you can build a custom Gutenberg block with Block Lab, which is much easier than creating the blocks with the native Gutenberg API. In other words, the Block Lab plugin is a huge timesaver when it comes to creating custom blocks. 

We’d love to hear about your experiences with the Block Lab plugin, so please share your custom blocks with us in the comment section below.

How to Create a Custom Gutenberg Block with Lazy Blocks Plugin

custom Gutenberg block with Lazy Blocks - featured

Every day, we’re seeing more and more plugins extending Gutenberg in different directions. This is great news for Gutenberg lovers since they can enjoy using it even more. One of those handy plugins that we’re going to cover today is called Lazy Blocks. 
In this article, we’ll look at how we can create a custom Gutenberg block with Lazy Blocks. It’s worth mentioning that we also published similar articles.

Before diving into writing codes

The user-friendly architecture of this plugin will help us to easily create custom Gutenberg blocks. The following sums up the plugin’s key features:

  • User and Gutenberg friendly UI.
  • Various controls (checkbox, email, file, gallery, image, repeater, …).
  • Usage of Handlebars, which makes writing PHP codes a breeze.
  • Separate editor and frontend code blocks to help us write different outputs.
  • Custom templates for your posts.
  • Many hooks for PHP and JS codes.
  • Good documentation.

We recommend that you check out the following resources to become more familiar with this plugin:

Create a custom Gutenberg block with Lazy Blocks

The mentality behind this plugin is to spend your time and energy on the result, not on learning how to create blocks. This mentality will allow you to unleash your potential in creating custom Gutenberg blocks.

In this article, we omitted some technical and extra explanations, so you can more easily follow this post’s flow in making your first block. To learn even more about the process, you might want to read the plugin documentation.

So let’s dive into it and create an attention-grabbing Gutenberg Blockquote block in a few simple steps.

custom Gutenberg block with Lazy Blocks

1. Plugin installation

Go to Plugins > Add New, search for lazy blocks. Then install and activate the plugin.

custom Gutenberg block with Lazy Blocks

1. Configuring the block

To configure the essential settings for the Blockquote block, go to Lazy Blocks > Add New then fill the Title and Icon settings as shown below. You may change other settings based on your needs.

custom Gutenberg block with Lazy Blocks

2. Add the block controls

Controls allow us to specify dynamic settings for a block, and it’s almost necessary for all the blocks to have controls. They offer flexibility for the blocks. We suggest that you read the Controls documentation.

To create the Blockquote block’s controls based on the initial design (as shown above), we need the following Icon Background, Avatar, Text and Author controls. You may add more controls based on your needs. Let’s create them.

1. Under the Controls section, go to the Content tab and click on the + icon to add the controls.

2. Add the controls one by one as shown below.

custom Gutenberg block with Lazy Blocks

3. At the end, your controls should look like below.

3. Write the block code

Now we need to write the actual codes based on the design to make the Blockquote block work. In this section, we also use the created controls in the block to make it dynamic based on the settings.

1. Under the Controls section, go to the Frontend tab and add the following codes. The controls names have been wrapped in curly brackets {{control-name}} then added inside the following code. We recommend that you read the Codes documentation.

<blockquote class="lazyblocks-blockquote">
    <span class="dashicons dashicons-format-quote" style="background-color:{{icon-background}};"></span>
    <p class="lazyblocks-blockquote-text">{{text}}</p>
    <footer class="lazyblocks-blockquote-footer">
        <img class="lazyblocks-blockquote-avatar" src="{{avatar.url}}" alt="{{author}} quote" />
        <span>{{author}}</span>
    </footer>
</blockquote>

2. Update the block and go to a page to see how the block works. You may add different texts, names, avatars and icon backgrounds to the block. All this can also be added in different layouts like columns.

Conclusion

In this blog post, we easily created a custom Gutenberg block with Lazy Blocks without the hassle of creating a separate plugin, child theme or other development obstacle. This Lazy Blocks plugin will definitely help actualize your ideas about custom Gutenberg blocks in no time. 

We’d love to hear from you, so please share your custom blocks with us in the comment section below.

A Beginner’s Guide to Create a Custom Block for WordPress Gutenberg

Gutenburg, the new WordPress editor, is the future of WordPress. In no time, it’s going to bring a full-site editing experience for users. That said, learning how to create a custom block for WordPress Gutenberg is a fantastic investment. These days, more and more themes (such as the Twenty Twenty theme) are taking advantage of what Gutenberg has to offer.

This post will go over a general introduction of Gutenburg blocks and will then explain how to create a custom block for WordPress Gutenberg.

What are Gutenberg blocks?

Blocks are the core building functionality of the new editor. The idea is that you can add blocks anywhere you want. Blocks are created mostly in JavaScript (sad news for PHP lovers).

Learning a few concepts is necessary before diving into writing codes.

Block registration

First things first – we need to register a block. To register, we need to use the registerBlockType function. 

// Registering my block with a unique name
registerBlockType( 'mcb/call-to-action', {} );

Edit and Save

After registering a block, the next step is to tell the editor how to show the block in the editor and how to save it in the database.

Having a proper understanding of the edit and save functions is essential to create a custom block for WordPress Gutenberg.
The edit function is responsible for making the block editable in the editor, and the save function is responsible for saving the block in the database for showing it in the frontend. 

// A static div
edit: function() {
    return wp.element.createElement(
        'div',
        null,
        'My custom block.'
    );
}

save: function() {
    return wp.element.createElement(
        'div',
        null,
        'My custom block.'
    );
}

Attributes

Almost all blocks need to have attributes. Think of them as a way to talk to the block to change the color, text or spacing for instance. 

{
    url: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
    }
}
// { "url": "https://lorempixel.com/1200/800/" }

Are you a PHP lover?

If so, sorry to tell you that Gutenburg is a React.js based editor. The JavaScript frameworks have taken a leap in popularity among developers. Nowadays, JavaScript is an essential skill to have under your belt.

Take every opportunity to really beef up your JavaScript chops.
– Matt Mullenweg, Creator of WordPress

Available built-in blocks

Following are the list of built-in Gutenberg blocks in WordPress. If you need more blocks, you can read this article about free blocks.

Common blocks

This includes Paragraph, Image, Heading, Gallery, List, Quote, Audio, Cover, File, Video blocks.

custom block for WordPress Gutenberg

Formatting

This includes Code, Classic, Custom HTML, Preformated, Pullquote, Table, Verse blocks.

Layout elements

This includes Buttons, Columns, Group, Media & Text, More, Page Break, Separator, Spacer blocks.

custom block for WordPress Gutenberg

Widgets

This includes Shortcode, Archives, Calendar, Categories, Latest Comments, Latest Posts, RSS, Search, Tag Cloud blocks.

Embeds

This includes Embed, Twitter, YouTube and 29+ blocks.

custom block for WordPress Gutenberg

How to create a custom block for WordPress Gutenberg

Enough is enough – let’s get our hands dirty and start coding! There are different techniques for creating a custom block for WordPress Gutenberg. For the purpose of this article, let’s use one of the most straightforward techniques to build a tailored Call to Action block.

Note: It’s worth mentioning that many detailed explanations have been intentionally omitted to help you follow the flow of the article easily. The intention is to help you create your first block without being weighed down in the minutiae of block creation.

1. Prepare a base plugin

Before doing anything else, we need a plugin to place our codes. Depending on your preferences, you can use a child theme instead of a plugin.
1. Go to your plugins folder on your site, then create a my-custom-blocks folder.

custom block for WordPress Gutenberg

2. Create a plugin.php file as shown below.

3. Activate the plugin from WordPress admin.

custom block for WordPress Gutenberg

2. Enqueue block script and style

Using the register_block_type function, we can enqueue the block’s script and style it with the Guttenberg.

1. Add the following function in the plugin.php file to enqueue the style and script.

function mcb_register_blocks() {

	// Check if Gutenberg is active.
	if ( ! function_exists( 'register_block_type' ) ) {
		return;
	}

	// Add block script.
	wp_register_script(
		'call-to-action',
		plugins_url( 'blocks/call-to-action/call-to-action.js', __FILE__ ),
		[ 'wp-blocks', 'wp-element', 'wp-editor' ],
		filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.js' )
	);

	// Add block style.
	wp_register_style(
		'call-to-action',
		plugins_url( 'blocks/call-to-action/call-to-action.css', __FILE__ ),
		[],
		filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.css' )
	);

	// Register block script and style.
	register_block_type( 'mcb/call-to-action', [
		'style' => 'call-to-action', // Loads both on editor and frontend.
		'editor_script' => 'call-to-action', // Loads only on editor.
	] );
}

add_action( 'init', 'mcb_register_blocks' );

2. Create the following files in the plugin folder to hold the style and script. 

blocks/call-to-action/call-to-action.css
blocks/call-to-action/call-to-action.js

3. Register the block

After preparing the base, it’s now time to create the actual block.

1. In the call-to-action.js file, add the following function to register an empty block. 

( function( blocks, editor, element ) {
	var el = element.createElement;

	blocks.registerBlockType( 'mcb/call-to-action', {
		title: 'MCB: Call to Action', // The title of block in editor.
		icon: 'admin-comments', // The icon of block in editor.
		category: 'common', // The category of block in editor.
		attributes: {},
		edit: function( props ) {
			return null;
		},
		save: function( props ) {
			return null;
		},
	} );
} )( window.wp.blocks, window.wp.editor, window.wp.element );
custom block for WordPress Gutenberg

2. For this block, we need both the content and button attributes. Add them as shown below. 

attributes: {
	content: {
		type: 'string',
		default: 'Collaboratively customize web-enabled supply chains and turnkey collaboration and idea-sharing Assertively cultivate.'
	},
	button: {
		type: 'string',
		default: 'Join Today'
	}
},

3. In the edit function, we’re going to use the RichText component to create a div to hold the content and a span to hold the button. Basically, this component allows to create an editable text area.

The onChange function is responsible for updating the attributes when you change the block content. 

edit: function( props ) {
	return (
		el( 'div', { className: props.className },
			el(
				editor.RichText,
				{
					tagName: 'div',
					className: 'mcb-call-to-action-content',
					value: props.attributes.content,
					onChange: function( content ) {
						props.setAttributes( { content: content } );
					}
				}
			),
			el(
				editor.RichText,
				{
					tagName: 'span',
					className: 'mcb-call-to-action-button',
					value: props.attributes.button,
					onChange: function( content ) {
						props.setAttributes( { button: content } );
					}
				}
			),
		)
	);
},
custom block for WordPress Gutenberg

4. In the edit function, we’re going to use the RichText component to generate the content and a HTML button to generate the button. 

save: function( props ) {
	return (
		el( 'div', { className: props.className },
			el( editor.RichText.Content, {
				tagName: 'p',
				className: 'mcb-call-to-action-content',
				value: props.attributes.content,
			} ),
			el( 'button', { className: 'mcb-call-to-action-button' },
				props.attributes.button
			)
		)
	);
},

4. In the call-to-action.css, add the following codes to add some visual styling to the block. 

.wp-block-mcb-call-to-action {
	background: #3f39ff;
	padding: 45px;
	text-align: center;
	border-radius: 10px;
}

.mcb-call-to-action-content {
	font-family: serif;
	font-size: 24px;
	color: #fff;
	padding-bottom: 30px;
	margin-bottom: 0;
}

.mcb-call-to-action-button {
	background: #000;
	border: 0px;
	border-radius: 5px;
	padding: 12px 35px;
	color: #fff;
	font-family: sans-serif;
}
custom block for WordPress Gutenberg

5. Now, you should be able to play with the block in the editor.

Wrapping Up

This post provided a basic introduction of what Gutenburg is and how we can create a custom block for WordPress Gutenberg. In other words, think about this article as the very first step in entering the Gutenberg world.

We recommend that you read the WordPress official handbook in order to gain a deeper understanding of the Gutenberg editor.

We’d love it if you would share your custom block with us in the comment section below!

How to Create a Custom Gutenberg Block Using the ACF Plugin

Due to its popularity – as well as its popularity in the WordPress community – the Advanced Custom Fields (ACF) plugin needs no introduction. In a nutshell, ACF has made the developer’s job a breeze for adding custom fields anywhere in WordPress, now it’s time to help them create a custom Gutenberg block using ACF.

Not surprisingly, Elliot Condon (the creator of ACF) hasn’t stopped there. He introduced a groundbreaking feature called ACF Blocks for Gutenberg in the ACF PRO version 5.8, which is a game changer for ACF and Gutenberg players.

In this article, let’s see how we can implement this in real life and create a custom Gutenberg block using ACF.

Note: This article requires the ACF PRO plugin version 5.8.0 and above. If you’re a Jupiter X user, you can activate the plugin from Control Panel > Plugins.

Before diving into writing codes

ACF is a simple yet advanced plugin. If you’re unfamiliar with the ACF plugin, we recommend that you read the following articles to build a good foundation before proceeding any further.

Create a custom Gutenberg block using ACF

Creating native custom Gutenberg blocks requires decent knowledge of JavaScript, which is not ideal for many users. The ACF Blocks feature is here to save time and help you to unlock your potential for creating custom Gutenberg blocks.

Let’s create a Blockquote block in a few simple steps.

custom Gutenberg block using the ACF

1. Prepare a base plugin

Let’s create a base plugin to hold the block codes. Depending on your preferences, you can use a child theme instead of a plugin.

1. Go to your plugins folder on your site, then create a my-acf-blocks folder.

custom Gutenberg block using the ACF

2. Create a plugin.php file as shown below.

custom Gutenberg block using the ACF

3. Activate the plugin from WordPress admin.

custom Gutenberg block using the ACF

2. Register a block

Using the acf_register_block_type() function, we can add a new block in Guttenberg with PHP. 

1. Add the following function in the plugin.php file to define the block properties.

function mab_register_acf_block_types() {
    acf_register_block_type( [
        'name'            => 'blockquote',
        'title'           => __( 'Blockquote' ),
        'description'     => __( 'My blockquote block.' ),
        'render_template' => dirname( __file__ ) . '/blocks/blockquote/blockquote.php',
        'category'        => 'formatting',
        'icon'            => 'format-quote',
    ] );
}

2. Hook into acf/init action to register the block.

if ( function_exists( 'acf_register_block_type' ) ) {
    add_action( 'acf/init', 'mab_register_acf_block_types' );
}
custom Gutenberg block using the ACF

3. Now you should be able to see the block in the Gutenberg editor. As you see, the block is empty and has no settings. In the next step, we’ll add some settings.

custom Gutenberg block using the ACF

3. Create a field group

To create the block settings, you need to register your settings in a field group.

1. Add a field group called Block: Blockquote in Custom Fields > Fields Group, then add the following fields (settings). There’s no limitation to add the fields but it’s recommended to keep it as few as possible.

2. In the Location, set the Block to Blockquote. By doing so, ACF will show the created fields (settings) for the Blockquote block.

3. Now, you should be able to see the settings in the Gutenberg editor. If you change the settings, nothing will happen. In the next step, we’ll implement the settings.

4. Render the block

Finally, we need to tell ACF how to render the block. This is just a standard process to get the settings and generate the HTML properly.

1. Create blockquote.php in the blocks/blockquote folder in your plugin, then add the following codes. The codes are based on standard ACF docs.

<?php

// Create id attribute allowing for custom "anchor" value.
$id = 'blockquote-' . $block['id'];
if ( ! empty( $block['anchor'] ) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'blockquote';
if ( ! empty( $block['className'] ) ) {
    $className .= ' ' . $block['className'];
}
if ( ! empty( $block['align'] ) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assign defaults.
$color = get_field( 'color' );
$quote = get_field( 'quote' ) ?: 'Your blockquote here...';
$author = get_field( 'author' ) ?: 'Author name';

?>
<div id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $className ); ?>">
    <blockquote class="mab-blockquote">
        <span class="mab-blockquote-text"><?php echo $quote; ?></span>
        <span class="mab-blockquote-author"><?php echo $author; ?></span>
    </blockquote>
</div>

2. Now you should be able to see the block in the Gutenberg editor. By default, it has some default values, which you can change by altering the Quote and Author settings.

3. Now, let’s spice it up by adding some styling. Add blockquote.css in the blocks/blockquote folder in your plugin, then add the following codes.

.mab-blockquote {
    padding: 50px 30px;
    text-align: center;
    border: 8px solid #ff3131;
}

.mab-blockquote-text {
    display: block;
    padding-bottom: 30px;
    font-size: 26px;
    font-family: serif;
}

.mab-blockquote-author {
    color: #777;
    font-family: sans-serif;
    font-size: 18px;
}

4. ACF can’t automatically detect the styling files. In other words, we need to tell it where to find the file. Add the enqueue_style param in the plugin.php file.

'enqueue_style'   => plugin_dir_url( __FILE__ ) . '/blocks/blockquote/blockquote.css',

5. Now, you should be able to see the block in the Gutenberg editor as shown below.

6. Now, let’s take another step and make the border color dynamic based on the Color setting. Open the blockquote.php file then do the following modifications.

<blockquote class="mab-blockquote" style="border-color:<?php echo $color; ?>;">

7. Now you should be able to set a different border color from the block settings.

Conclusion

Now that you have enough knowledge to create a custom Gutenberg block using ACF, you can create any type of custom blocks for Gutenberg.

We’d love to hear from you, so please share your custom blocks with us in the comment section below.

Extend Gutenberg with Free Blocks

Released in late 2018, the WordPress Gutenberg editor is getting more and more popular by the day. By default, it has some blocks for you to kickstart creating a website, but they are far from enough to create a professional website. To do this, you’ll need to install some add-ons to access advanced blocks.In this article, we’ve included some popular, free plugins to help you extend Gutenberg with free blocks. Now let’s briefly name and introduce the plugins.

Note: It’s worth mentioning that the following statistics are relevant to when this article was written. These figures might have changed by the time you read this article.

Page Builder Gutenberg Blocks – CoBlocks

extend Gutenberg with free blocks - coblocks

CoBlocks contains an amazing archive of page building blocks to be used with the Gutenberg WordPress block editor.

One of the best features of CoBlocks is that the page builder is robust but lightweight, which means that you’ll be able to get maximum functionality without compromising on performance.

Read more about CoBlocks on WordPress.org

Specifications

Gutenberg Blocks – Ultimate Addons for Gutenberg

This add-on simplifies that website building process. It provides you with several  unique and creative blocks for Gutenberg that help you create pages or posts without writing a single line of code.

Read more about Gutenberg Blocks on WordPress.org

Specifications

  • 200,000+ active installations
  • 20 blocks
  • Frequent updates
  • 5 star rating
  • Translated to 6 languages
  • Compatible with free popular Gutenberg ready themes
  • Pre-built templates
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.
  • Developed by Brainstorm Force.

Kadence Blocks – Gutenberg Page Builder Toolkit

extend Gutenberg with free blocks - kadence

This plugin adds custom blocks and options to extend Gutenberg’s editing capabilities so you can create custom layouts and more engaging content.

This plugin is meant to be a toolkit that makes the WordPress block editor capable of creating content usually only possible through popular page builder plugins.

Read more about Kadence Blocks on WordPress.org

Specifications

  • 50,000+ active installations
  • 12 blocks (interactive demo).
  • Frequent updates
  • 5 stars rating.
  • Translated to 3 languages.
  • Compatible with free popular Gutenberg ready themes.
  • Block management to help you enable/disable the blocks.
  • Documentation and support friendly.
  • Developed by Kadence WP.

Atomic Blocks – Gutenberg Blocks Collection

extend Gutenberg with free blocks - atomic blocks

Atomic Blocks is a collection of page building blocks for the new Gutenberg block editor.

On top of the handy, time-saving blocks already found in Atomic Blocks, this plugin has a new Section and Layout block! This block comes with a library of pre-designed sections and layouts to help you quickly and easily build a beautiful site with the new block editor.

Read more about Atomic Blocks on WordPress.org

Specifications

  • 40,000+ active installations
  • 15 blocks
  • Frequent updates
  • 4.5 stars rating.
  • Translated to 7 languages.
  • Default theme and compatible with free popular Gutenberg ready themes.
  • Pre-designed sections and layouts.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Stackable – Gutenberg Blocks

extend Gutenberg with free blocks - stackable

Stackable is one of the first and most expansive block libraries made specifically for the new WordPress Block Editor (Gutenberg).

It adds essential custom blocks to Gutenberg’s arsenal to achieve a smooth page building experience.

Read more about Stackable on WordPress.org

Specifications

  • 20,000+ active installations
  • 23 blocks (interactive demo)
  • Frequent updates
  • 5 stars rating.
  • Translated to 5 languages
  • Default theme and compatible with free popular Gutenberg ready themes.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Advanced Gutenberg

advanced gutenberg

Advanced Gutenberg adds the missing blocks and configuration you need to build professional websites.

This plugin helps you to take control of the new Gutenberg editor with a user edition profile configuration.

Read more about Advanced Gutenberg on WordPress.org

Specifications

  • 20,000+ active installations
  • 27 blocks
  • Frequent updates
  • 4.5 stars rating.
  • Translated to 3 languages
  • Compatible with free popular Gutenberg ready themes.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Conclusion

In this article, we did our homework and briefly presented some helpful plugins to extend Gutenberg with free blocks. Gutenberg is becoming more and more popular in the WordPress community, which will lead to the development of more add-ons.

Feel free to share your favorite Gutenberg add-on with us in the comments.