How to Create Gutenberg Block With ACF Plugin

WordPress 5.0 officially launched its own editor “Gutenberg” on November 27, 2018. It changes the way of creating pages and posts and everything on your blog or website. But creating a custom Gutenberg block from scratch needs extra skills like Webpack, React, Babel, ESNext or ES5, and much more. Thanks to Advanced Custom Fields (ACF), now you can create your own block with little knowledge of code. This feature is included in paid ACF since version 5.8. In this topic, we’ll discuss how it works and how to do it step-by-step.

Let’s get started.

How does the Gutenberg Block work with ACF?

First of all, you need to register a block in PHP instead of React. It’s good news for WordPress Developers. Then you can create parts of your block from the WP Admin Panel.

Benefits of Gutenberg Block with ACF

• Less code
• Easy to create

Step-By-Step Guide

1. Install ACF Pro

As this feature is in pro version of advanced custom fields so ensure to install and activate ACF Pro.

2. Block Registration

Register custom blocks like registering post types. acf_register_block_type() function allows you to register custom block types from your functions.php file.

<?php
add_action('acf/init', 'riz_acf_blocks');
function riz_acf_blocks() {
    acf_register_block_type( array (
        'name'              => 'cc_proposition',
        'title'             => ('Proposition'),
        'description'       => (''),
        'render_template'   => 'inc/proposition.php',
        'category'          => 'design',
        'icon'              => 'admin-post',
        'keywords'          => array( 'proposition' ),
    ) );
}
?>

In the above code, we are initializing our function using “acf/init” hook. And then registering our Proposition block using “acf_register_block_type()” function. After setting up the function pass the array and set parameters for your block. Make sure “name” should be unique for each block.

3. Create Custom Fields

Now, create custom fields from WP Admin panel and make sure to select the fields group “Block” and the option for which you are registering that block in given example that is “Proposition”.

4. Block Rendering

Create a file in your “inc” folder or anywhere you want. Just make sure to give the right path of your template in the Block Registration function. As for this tutorial, your file path is inc/proposition.php. Paste the following code in your template:

<?php $id = 'proposition-' . $block['id']; ?>

<?php if ( have_rows( 'single_repeater_proposition_gb' ) ) : ?>
<section id="<?php echo esc_attr($id); ?>" class="section proposition-section">
<div class="container">
    <div class="particle-overflow">
        <h2><?php the_field( 'heading_proposition_gb' ); ?></h2>
        <?php while ( have_rows( 'single_repeater_proposition_gb' ) ) : the_row(); ?>
            <div class="single line-box">
                <div class="line-circle"></div>
                <p>
                    <strong><?php the_sub_field( 'title' ); ?></strong><br/> 
                    <?php the_sub_field( 'description' ); ?>
                </p>
            </div>
        <?php endwhile; ?>
    </div>
</div>
</section>
<?php endif; ?>

5. Add Style

Add style in your theme/plugin css files.

<style>
.proposition-section {
    margin: 50px 0;
}
.proposition-section .container {
    background: #021B59;
    padding: 107px 120px 50px;
    overflow: hidden;
    position: relative;
}
.particle-overflow {
    position: relative;
    z-index: 9;
}
.section h2 {
    font-family: 'Proxima-Nova-Black';
    font-size: 48px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 70px;
}
.section p {
    font-family: 'Proxima-Nova-Medium';
    font-size: 18px;
    font-weight: 500;
    line-height: 40px;
    color: #ffffff;
}
.line-box {
    padding-left: 30px;
    margin-bottom: 50px;
    position: relative;
}
.line-circle {
    width: 2px;
    background-color: #ffffff;
    height: 88px;
    position: absolute;
    left: 0;
    top: 10px;
}
.line-circle::before,
.line-circle::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #ffffff;
    position: absolute;
    border-radius: 100%;
    top: -5px;
    left: -2px;
}
.line-circle::after {
    top: 100%;
}
.line-box p strong {
    font-family: 'Proxima-Nova-Bold';
    border-bottom: 1px solid #ffffff;
    text-transform: uppercase;
}
</style>

Final Result