Gutenberg call to action block using Advanced custom field

calltoaction.css

/*
  This is the preview & front end css this file will go to your child theme template-parts/block/calltoaction/calltoaction.css
*/

.calcium-chs-area a{
    text-decoration: none;
}

.calcium-chs-area {
    border: 1px solid #e2e2e2;
    padding: 25px ;
    border-radius: 10px;
    position: relative;
    display: grid;
    /* grid-template-columns: 1fr 198px; */
    grid-auto-flow: dense;
    grid-gap: 1.2rem;
    align-items: center;
    margin: 2rem 0;
}

.calcium-chs-area .batch{
    position: absolute;
    top: -18px;
    left: -10px;
    display: inline-block;
    color: #ffffff;
    z-index: 500;
    padding: 10px 15px;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 700;
    box-shadow: 2px 2px 2px 0 rgb(0 0 0 / 14%);
}

.calcium-chs-area .batch:after{
    position: absolute;
    content: " ";
    display: block;
    left: -10px;
    bottom: -7px;
    border-style: inset solid inset inset;
    border-width: 0 10px 7px;
    filter: brightness(50%);
}

.chs-left-area h3{
    font-size: 2.1rem;
    line-height: 1.25;
    color: #0d1426;
}
.chs-left-area p{
    font-size: 16px;
    margin: 0 0 10px ;
    line-height: 1.5;
}
.boxed-btns-area a{
    display: inline-block;
    font-size:15px;
    padding: 10px 15px ;
    color: #ffffff ;
    margin: 10px 10px 10px 0 ;
    text-align: center ;
    line-height: initial ;
    border-radius: 5px;
    box-shadow: 0 10px 15px 0 rgb(0 0 0 / 20%);
    transition: .2s ease;
}
.boxed-btns-area a:hover{
    box-shadow: none;
}

.chs-disclosure{
    font-size: 12px;
    font-style: italic;
    color: #aaa;
    display: inline;
    line-height: 1.2rem;
    margin: 0;
}
.cch-right-area {text-align: center;}
.cch-right-area a img {
    width: 100%;
    max-width: 15rem;
}

@media (max-width:768px) {
    .calcium-chs-area {
        grid-template-columns: 1fr;
    }
    .chs-left-area {
        grid-column: 1;
        grid-row: 2;
        margin-top:10px;
    }
    .chs-right-area{
        grid-column-start: 1;
        grid-row-start: 1;
    }
}
@media (max-width:530px) {
    .boxed-btns-area a{
        display: block;
    }
    .boxed-btns-area{
        margin-top: 20px  ;
    }
}

calltoaction.json

		
 	[
    {
        "_comment1": "this is my comment",
        "key": "group_61d1b24da5b95",
        "title": "Call to Action",
        "fields": [
            {
                "key": "field_61d1c72c351ef",
                "label": "Content",
                "name": "",
                "type": "tab",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "placement": "top",
                "endpoint": 0
            },
            {
                "key": "field_61d1e93e4dd70",
                "label": "Ribbon Text",
                "name": "ribbon_text",
                "type": "text",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "Best Value",
                "placeholder": "",
                "prepend": "",
                "append": "",
                "maxlength": ""
            },
            {
                "key": "field_61d1caf2351f1",
                "label": "Heading",
                "name": "heading",
                "type": "text",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "Everything You Need to Know Before You Drill for Water!",
                "placeholder": "",
                "prepend": "",
                "append": "",
                "maxlength": ""
            },
            {
                "key": "field_61d1cb12351f2",
                "label": "Text",
                "name": "text",
                "type": "textarea",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "For some reason the other day the water from our water well just stopped! We waited for roughly 20 mins and our water well began.",
                "placeholder": "",
                "maxlength": "",
                "rows": 4,
                "new_lines": "br"
            },
            {
                "key": "field_61d2bfb00a3ba",
                "label": "Bottom Text",
                "name": "btm_txt",
                "type": "textarea",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "If you click this link and make a purchase, we earn a commission at no additional cost to you.",
                "placeholder": "",
                "maxlength": "",
                "rows": 4,
                "new_lines": "br"
            },
            {
                "key": "field_61d1cb1d351f3",
                "label": "Image",
                "name": "img",
                "type": "image",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "return_format": "array",
                "preview_size": "medium",
                "library": "all",
                "min_width": "",
                "min_height": "",
                "min_size": "",
                "max_width": "",
                "max_height": "",
                "max_size": "",
                "mime_types": "",
                "default_value": 2719
            },
            {
                "key": "field_61d1cb42351f4",
                "label": "Button One",
                "name": "button_one",
                "type": "link",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "return_format": "array",
                "default_value": {
                    "title": "WaterWellworx.com",
                    "url": "https:\/\/waterwellworx.com\/",
                    "target": "_blank"
                }
            },
            {
                "key": "field_61d1cb8d351f5",
                "label": "Button Two",
                "name": "button_two",
                "type": "link",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "return_format": "array",
                "default_value": {
                    "title": "Buy Now On Amazon ",
                    "url": "#",
                    "target": "_blank"
                }
            },
            {
                "key": "field_61d1cfa9174b9",
                "label": "Design",
                "name": "",
                "type": "tab",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "placement": "top",
                "endpoint": 0
            },
            {
                "key": "field_61d1cfbd174ba",
                "label": "Button One Color",
                "name": "button_one_color",
                "type": "color_picker",
                "instructions": "",
                "required": 0,
                "conditional_logic": [
                    [
                        {
                            "field": "field_61d1cb42351f4",
                            "operator": "!=empty"
                        }
                    ]
                ],
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "#0d1426",
                "enable_opacity": 0,
                "return_format": "string"
            },
            {
                "key": "field_61d1d00a174bb",
                "label": "Button Two Color",
                "name": "button_two_color",
                "type": "color_picker",
                "instructions": "",
                "required": 0,
                "conditional_logic": [
                    [
                        {
                            "field": "field_61d1cb8d351f5",
                            "operator": "!=empty"
                        }
                    ]
                ],
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "#d3000d",
                "enable_opacity": 0,
                "return_format": "string"
            },
            {
                "key": "field_61d1d01d174bc",
                "label": "Ribbon Color",
                "name": "ribbon_color",
                "type": "color_picker",
                "instructions": "",
                "required": 0,
                "conditional_logic": [
                    [
                        {
                            "field": "field_61d1e93e4dd70",
                            "operator": "!=empty"
                        }
                    ]
                ],
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "#1da8c2",
                "enable_opacity": 0,
                "return_format": "string"
            }
        ],
        "location": [
            [
                {
                    "param": "block",
                    "operator": "==",
                    "value": "acf\/calltoaction"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "left",
        "instruction_placement": "label",
        "hide_on_screen": "",
        "active": true,
        "description": "",
        "show_in_rest": 0
    }
]

calltoaction.php

<?php
/** 
 * This file will go to template-parts/block/calltoaction.php
 * calltoaction Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

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

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

/**
 * ***Acf Filed Values ****
 * ribbon_text
 * heading
 * text
 * img
 * button
 * button_one
 * button_two
 * button_one_color
 * button_two_color
 * ribbon_color
 * use_button
 * btm_txt
 */

// Load values and assign defaults.
$ribbon = get_field('ribbon_text');
$heading = get_field('heading');
$txt = get_field('text');
$btm_txt = get_field('btm_txt');
$img = get_field('img');
$button_one = get_field('button_one');
$button_two = get_field('button_two');
$button_one_color = get_field('button_one_color');
$button_two_color = get_field('button_two_color');
$ribbon_color = get_field('ribbon_color');


?>

<section id="<?php echo $id?>-calcium-chs-area" class="calcium-chs-area">
    <?php if(!empty($ribbon)): ?>
    <div class="batch"><?php echo $ribbon; ?> </div>
    <?php endif; ?>
    <div class="chs-left-area">

        <?php if(!empty($heading)): ?>
            <?php if(!empty($button_one)): ?>
            <a href="<?php echo $button_one['url'];  ?>" target="<?php echo $button_one['target'];  ?>">
            <?php endif;  ?>
                <h3><?php echo $heading; ?> </h3>
            <?php if(!empty($button_one)): ?>
            </a>
            <?php endif;  ?>
        <?php endif; ?>

        <?php if(!empty($txt)): ?>
            <p><?php echo $txt; ?></p>
        <?php endif; ?>

        <?php if(!empty($button_one) || !empty($button_two)): ?>
        <div class="boxed-btns-area">
            <?php if(!empty($button_one)): ?>
            <a class='btn-1' href="<?php echo $button_one['url'];  ?>" target="<?php echo $button_one['target'];  ?>"><?php echo $button_one['title'] ?> </a>
            <?php endif; ?>
            <?php if(!empty($button_two)): ?>
                <a class="btn-2" href="<?php echo $button_two['url'];  ?>" target="<?php echo $button_two['target'];  ?>"><?php echo $button_two['title'] ?> </a>
            <?php endif; ?>
        </div>
        <?php endif; ?>

        <?php if(!empty($btm_txt)): ?>
        <div class="chs-disclosure">
            <span><?php echo $btm_txt; ?></span>
        </div>
        <?php endif; ?>
    </div>

    <?php if(!empty($img)): ?>
    <div class="cch-right-area">
        <?php if(!empty($button_one)): ?>
         <a href="<?php echo $button_one['url'];  ?>" target="<?php echo $button_one['target'];  ?>">
        <?php endif;  ?>
            <img src="<?php echo $img['url'] ?>" alt="<?php echo $img['alt'] ?>">
        <?php if(!empty($button_one)): ?>
        </a>
        <?php endif;  ?>
    </div>
    <?php endif;  ?>
</section>

<style type="text/css">
     a.btn-1{
        background-color: <?php echo $button_one_color; ?>;
    }
     a.btn-2{
        background-color: <?php echo $button_two_color;?>;
    }
    .batch{
        background-color: <?php echo $ribbon_color; ?>
    }
    .calcium-chs-area .batch:after{
        border-color: transparent #21405C transparent transparent;
    }
    #<?php echo $id?>-calcium-chs-area {
        grid-template-columns: 1fr <?php echo (!empty($img)) ? '13rem' : '' ; ?>;
    }
</style>

functions.php

<?php

/**
 * ********Big Note*********
 *After adding all files (functions.php[Only code that you need, calltoaction.css, calltoaction.php]), import this jason data in your Advance Custom Field pro. Got to your WordPress admin dashboard->Custom Fields->Tools->import (calltoaction.json) file 
 *then you can go to your guttenburg editor and search for call to action block.
 * ********Big Note**********
 * Register custom block
 * I used get_stylesheet_directory & get_stylesheet_directory_uri becuase I created it inside my child theme. Incase if you 
 * In amy case if you want to use in inside in your parrent theme or in your plugin please change avobe functions
 * 
 * you need to put this code inside functions.php also you can create a new file and call it inside functions.phph
 */
add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // register a testimonial block.
        acf_register_block_type(array(
            'name'              => 'calltoaction',
            'title'             => __('Call to Action'),
            'description'       => __('Add call to action section for the blog'),
            'render_template'   => get_stylesheet_directory().'/template-parts/blocks/calltoaction/calltoaction.php',
            'enqueue_style'     => get_stylesheet_directory_uri() .'/template-parts/blocks/calltoaction/calltoaction.css',
            'category'          => 'Call to Action',
            'icon'              => 'megaphone',
            'keywords'          => array( 'button', 'call', 'action' ),
        ));
    }
}

/**
 * How  to add default image
 */
 // add default image setting to ACF image fields
  // let's you select a defualt image
  // this is simply taking advantage of a field setting that already exists
  
  add_action('acf/render_field_settings/type=image', 'waterwellworx_add_default_value_to_image_field');
  function waterwellworx_add_default_value_to_image_field($field) {
      acf_render_field_setting( $field, array(
          'label'			=> 'Default Image',
          'instructions'		=> 'Appears when creating a new post',
          'type'			=> 'image',
          'name'			=> 'default_value',
      ));
  }

  add_action('acf/render_field_settings/type=link', 'waterwellworx_add_default_value_to_link_field');
  function waterwellworx_add_default_value_to_link_field($field) {
      acf_render_field_setting( $field, array(
          'label'			=> 'Default Link',
          'instructions'		=> 'Appears when creating a new post',
          'type'			=> 'link',
          'name'			=> 'default_value',
      ));
  }

Inside guttenberg editor!

Without image and one column

Without paragraph!

Without ribbon text