How to Create Custom Gutenberg CTA Blocks in WordPress Using Advanced Custom Fields (ACF)

utilization Advanced Custom Fields(ACF) plugin, you can easily create custom blocks for Gutenberg without having to deeply master the JavaScript and other advanced techniques. In this article, the details of how to create an ACF via Customizing the call to action(CTA) block, add elements to your website that will attract users to click through.

Why Gutenberg and ACF CreationCustomized blocks?

The Gutenberg editor is available through the "blocs" concept makes managing and organizing content easier and more modular. By using the ACF A plugin that allows you to create custom blocks in the Gutenberg editor that exactly fit your needs without having to write complex JavaScript code. ACF provides a clean way for developers and designers to easily customize fields through the WordPress backend to create powerful and unique looking blocks.

move

1. Register custom blocks: In the WordPress theme's functions.php file to register custom blocks.
2. Creates an ACF field group: Create custom fields containing titles, descriptions, buttons, etc.
3. Create a block template: Write a template file using PHP to define the front-end presentation of the block.
4. Add custom styles: Style the block with a CSS file so that it matches the design style of your website.
5. Using blocks in Gutenberg: Insert the created CTA block into a page or post to get started.

Step 1: In the functions.php Register custom blocks in the file

First of all, you need to add the functions.php Register custom blocks in the file (bottom). Customized blocks are registered in the file (bottom) provided by ACF through the acf_register_block_type() function, it can be very easy to register a new block.

function register_custom_cta_block() {
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name' => 'custom_cta',
            'title' => __('Custom CTA Block'),
            'description' => __('A custom call to action block with an image, title, description, and button.'),
            'render_template' => 'template-parts/blocks/custom-cta.php',
            'category' => 'common',
            'icon' => 'megaphone',
            'keywords' => array('cta', 'call to action', 'button'),
            'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/custom-cta.css',
        ));
    }
}
add_action('acf/init', 'register_custom_cta_block');

In this code, the following configuration is done:

• name: Sets the unique identifier of the custom block.
• title: The display name of the block in the Gutenberg editor.
• description: A short description of the function of the block.
• render_template: Specifies the path to the PHP template file that renders the content of the block on the frontend.
• category: Specifies the classification of the block, determining where it will appear in the Gutenberg editor.
• icon: Set up block icons for easy recognition in Gutenberg.
• keywords: Set keywords to make it easy for users to search for the block.
• enqueue_style: Specifies the path to the block's stylesheet for loading styles.

Step 2: Create ACF Field Groups for Blocks

Next, you need to create the ACF field groups by first installing the ACF plugin. This will allow you to fill in the necessary information in the Gutenberg editor, such ascaption,descriptive,Button Text,photographetc.

1. Log in to the WordPress backend and go to ACF > Field GroupsThe

2. strike (on the keyboard) Add new field group, create a file named "Customizing CTA Block Fields" for the field group.

3. Add the following fields to this field group:
   • Title (Text): Adds a field to the CTA block for the title.
   • Description (Text Area): Adds a text area field to the CTA block for description.
   • Image: Adds a picture field to the CTA block.
   • Button Text (Text): Adds a button text field to the CTA block.
   • Button URL (URL): Add a button link field to the CTA block.
   • Background color (Color Picker): Adds a color picker field to the CTA block to set the background color.

4. exist Positioning rules Set the condition in the rule to "Block equals custom CTA block."The ACF Pro version is required here. This way the ACF fields will only show up if this custom block is used.

Step 3: Create a Block Template

Now that the custom block has been registered and the appropriate fields have been created, we next need to create a template file to render the contents of the block.

1. In your theme directory, navigate to template-parts/blocks/ Folder. If the folder does not exist, you need to create one.
2. Create a new file in this folder named custom-cta.phpThe
3. exist custom-cta.php file, use the following code to output the field contents:

<?php
$title = get_field('title');
$description = get_field('description');
$image = get_field('image');
$button_text = get_field('button_text');
$button_url = get_field('button_url');
$background_color = get_field('background_color');
?>

<div class="custom-cta-block" style="background-color: ">
    <?php if ($image): ?>
        <img src="" alt="" class="cta-image" />
    <?php endif; ?>

    

        <?php if ($title): ?>
            

        <?php endif; ?>

        <?php if ($description): ?>
            
</p
        <?php endif; ?>

        <?php if ($button_text && $button_url): ?>
            <a href="" class="cta-button">
                <?php echo esc_html($button_text); ?>
            
        <?php endif; ?>