<!-- Register the block in functions file or an included file into the functions file. -->

​

<?php

// BLOCKS

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') ) {

​

​

         // Your Block Name

         acf_register_block_type(array(

            'name'              => 'afc_block',

            'title'             => __('ACF Block'),

            'description'       => __('An ACF Block'),

            'render_template'   => 'blocks/acf-block/acf-block.php',

            'enqueue_style'     => get_template_directory_uri() . '/blocks/acf-block/acf-block.css', 

            'enqueue_script'    => get_template_directory_uri() . '/blocks/acf-block/acf-block.js',

            'category'          => 'theme',

            'icon'              => 'media-code',

            'keywords'          => array( 'block', 'acf', 'nice' ),

        ));

​

    }

​

?>

​

<!-- Created a folder in your theme directory, i called mine blocks 'render_template'   => 'blocks/acf-block/acf-block.php', -->

​

<?php

​

/**

 * ACF 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. 

 */

​

​

​

$id = 'your-block-id-' . $block['id'];

$className = 'your-block-classname';

​

if( !empty($block['align']) ) {

    $className .= ' align' . $block['align'];

}

​

// Load values and assign defaults.

$background_color = get_field('background_color') ?: 'transparent';

​

​

?>

​

 <section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo $custom_css_class; ?>">

​

    // Your code here!

​

</section>

​

​

<style type="text/css">

    #<?php echo $id; ?>  {

        background-color: <?php echo $background_color; ?>; 

    }

</style>