ACF Team Member Block

style.css

/* CSS HERE */

team-block.php

<?php 
/**
 * Team Member Block — Register Callback example
 */
add_action('acf/init', 'team');
function team() {

    // check function exists
    if( function_exists('acf_register_block') ) {

        // register a hero block
        acf_register_block(array(
            'name'              => 'team',
            'title'             => __('Team Member'),
            'description'       => __('Block to showcase a member of your team'),
            'render_callback'   => 'team_render_callback',
            'category'          => 'formatting',
            'icon'              => 'admin-users',
            'mode'              => 'preview',
            'keywords'          => array( 'team', 'bio', 'employee' ),
        ));
    }
}

/**
 *  This is the callback that displays the team block
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block content (emtpy string).
 * @param   bool $is_preview True during AJAX preview.
 */
function team_render_callback( $block, $content = '', $is_preview = false ) {

    // create id attribute for specific styling
    $id = 'team-' . $block['id'];

    // create align class ("alignwide") from block setting ("wide")
    $align_class = $block['align'] ? 'align' . $block['align'] : '';

    // ACF field variables
	$name = get_field('name');
	$bio = get_field('bio');
    $image = get_field('image');

?>
	<div id="<?php echo $id; ?>" class="team <?php echo $align_class; ?>">
		<?php if ( $name ): ?>
			<h2><?php echo $name; ?></h2>
		<?php endif; ?>
		<?php if ( $bio ): ?>
			<p><?php echo $bio; ?></p>
		<?php endif; ?>
		<?php if ( $image ): ?>
            <img src="<?php echo $image; ?>">
        <?php endif; ?>
        <?php if( have_rows('socials') ): ?>
            <ul class="socials">
            <?php while( have_rows('socials') ): the_row(); 
                // vars
                $icon = get_sub_field('icon');
                $url = get_sub_field('url');
            ?>
                <li class="social-item">
                    <a target="_blank" href="<?php echo $url; ?>"><?php echo $icon; ?></a>
                </li>
            <?php endwhile; ?>
            </ul>
        <?php endif; ?>
	</div>
    <?php
}