Source Code for Custom Gutenberg Blocks w/ Advanced Custom Fields Blocks Feature

acf_blocks.php

<?php

/* ACF Blocks requires ACF Pro Ver. 5.8 or higher */
/* save this file to /lib/ directory in your child theme folder */
/* if the directory doesn't exist, create it */
function vfcg_register_blocks() {
	if( ! function_exists('acf_register_block') )
		return;

	acf_register_block( array(
		'name'			=> 'boat-captain',
		'title'			=> __( 'Captain', 'captainname' ),
		'render_template'	=> get_stylesheet_directory() . '/lib/blocks/block-boat-captain.php',
		'category'		=> 'formatting',
		'icon'			=> 'admin-users',
		'mode'			=> 'edit',
		'keywords'		=> array( 'profile', 'captain', 'acf' )	));
}
add_action('acf/init', 'vfcg_register_blocks' );

block-boat-captain-css-grid-layout.php

<?php
/**
 * Boat Captain block
 *
 * @package      CaptainName
 * @author       Victor M. Font Jr.
 * @since        1.0.0 (CSS Grid layout)
 * @license      GPL-2.0+
**/

// retrieve the field content from the database
$name = get_field( 'captain_name' );
$website_name = get_field( 'website_name' );
$website_url  = get_field( 'website_url' );
$photo = get_field( 'photo' );
$description = get_field( 'description' );


// display the HTML
echo '<div class="captain-separator">&nbsp;</div>';
echo '<div class="captain">';
echo '    <div class="captain-photo">';
if( !empty( $photo ) )
    echo wp_get_attachment_image( $photo['ID'], 'medium', null, array( 'class' => 'aligncenter' ) );
echo '</a>';
echo '    </div>';
echo '    <div class="captain-details">';
if( !empty( $name ) )
echo '<h2>' . esc_html( $name ) . '</h2>';
if( !empty( $website_name ) )
			echo '<p><a rel="noreferrer noopener" href="' . $website_url . '" target="_blank">' . esc_html( $website_name ) . '</a></p>';
echo '<div class="captain-description"><p>' . apply_filters( 'vfcg_the_content', $description ) . '</p></div>';
echo '    </div>';
echo '</div>';

block-boat-captain-genesis-column-classes.php

<?php
/**
 * Boat Captain block
 *
 * @package      CaptainName
 * @author       Victor M. Font Jr.
 * @since        1.0.0 (Genesis Column Classes layout)
 * @license      GPL-2.0+
**/

// retrieve the field content from the database
$name = get_field( 'name' );
$website_name = get_field( 'website_name' );
$website_url  = get_field( 'website_url' );
$photo = get_field( 'photo' );
$description = get_field( 'description' );

// display the HTML
echo '<div class="captain-separator">&nbsp;</div>';
echo '<div class="captain">';
echo '    <div class="one-third first">';
// if no photo, insert non-breaking space
if( !empty( $photo ) ) {
    echo wp_get_attachment_image( $photo['ID'], 'medium', null, array( 'class' => 'captain-photo aligncenter' ) );
} else {
    echo '<div>&nbsp;</div>';
}
echo '</a>';
echo '    </div>';
echo '    <div class="two-thirds">';
if( !empty( $name ) )
echo '<h2>' . esc_html( $name ) . '</h2>';
if( !empty( $website_name ) )
			echo '<p><a rel="noreferrer noopener" href="' . $website_url . '" target="_blank">' . esc_html( $website_name ) . '</a></p>';
echo '<div class="captain-description"><p>' . apply_filters( 'vfcg_the_content', $description ) . '</p></div>';
echo '    </div>';
echo '</div>';

css-grid-styles-mobile-first.css

.captain {
    display: grid;
    grid-template-columns: '1fr';
    grid-template-areas: "captain-photo" "captain-details";
}

.captain-photo {
    grid-area: captain-photo;
}

.captain-details {
    grid-area: captain-details;
}

@media only screen and (min-width: 960px) {

    .captain {
        grid-template-columns: '1fr 2fr';
        grid-template-areas: "captain-photo captain-details";
        grid-gap: 30px;
    }
}

functions.php

<?php

// add this line of code to functions.php to load the above file.

//load acf gutenberg blocks
require_once get_stylesheet_directory() . '/lib/acf_blocks.php';