Building Gutenberg Blocks with ACF

Register Block in functions.php

/**
 * Register Blocks
 * @link https://bcweekes.com
 *
 */
function be_register_blocks() {
	
	if( ! function_exists( 'acf_register_block_type' ) )
		return;

	acf_register_block_type( array(
		'name'			=> 'team-member',
		'title'			=> __( 'Team Member', 'clientname' ),
		'render_template'	=> '/block-team-member.php',
		'category'		=> 'formatting',
		'icon'			=> 'admin-users',
		'mode'			=> 'auto',
		'keywords'		=> array( 'profile', 'user', 'author' )
	));

}
add_action('acf/init', 'be_register_blocks' );

Advanced Custom Field Pro

PHP File

<?php
/**
 * Team Member block
 *
 * @package      TeamMember
 * @author       Brandon Weekes
 * @since        1.0.0
 * @license      GPL-2.0+
**/

$name = get_field( 'name' );
$title = get_field( 'title' );
$photo = get_field( 'photo' );
$description = get_field( 'description' );


echo '<div class="team-member">';
	echo '<div class="team-member--header">';
		echo '<div class="team-member-column-1">';
		if( !empty( $photo ) )
			echo wp_get_attachment_image( $photo['ID'], 'thumbnail', null, array( 'class' => 'team-member--avatar' ) );
				echo '</div>';
		echo '<div class="team-member-column-2">';
		if( !empty( $name ) )
			echo '<h4>' . esc_html( $name ) . '</h4>';
		if( !empty( $title ) )
			echo '<h6 class="alt">' . esc_html( $title ) . '</h6>';
		if( !empty( $description ) )
			echo '<p class="alt">' . esc_html( $description ) . '</p>';
		echo '</div>';
		echo '</div>';
echo '</div>';

Team Member Bio

CSS Code

/* CSS code snippet */

.team-member {
	background-color: #9AB977;
	margin-bottom: 75px;
	padding: 30px;
}

.team-member h4 {
	font-size: 3.2rem;
	margin-top: 0;
	margin-bottom: 10px;
	color: #fff;
}

.team-member h6 {
	color: #fff;
}

.team-member img {
	width: 200px;
}

.team-member--content {
	margin-bottom: 30px;
		font-size: 2.2rem;
		color: #fff;
}

.team-member-column-1 {
	width:25%;
	float: left;
}

.team-member-column-2 {
	width:75%;
	float: left;
}