Skip to content

Instantly share code, notes, and snippets.

@tessak22
Last active February 20, 2020 10:58
Show Gist options
  • Save tessak22/797fae407d1b2bbb2b8a02de0d24e13f to your computer and use it in GitHub Desktop.
Save tessak22/797fae407d1b2bbb2b8a02de0d24e13f to your computer and use it in GitHub Desktop.
ACF Testimonial Block
/**
* Testimonial Block
*/
function register_acf_block_types() {
// register a testimonial block.
acf_register_block_type(array(
'name' => 'testimonial',
'title' => __('Testimonial'),
'description' => __('A custom testimonial block.'),
'render_template' => 'template-parts/blocks/testimonial/testimonial.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array( 'testimonial', 'quote' ),
));
}
// Check if function exists and hook into setup.
if( function_exists('acf_register_block_type') ) {
add_action('acf/init', 'register_acf_block_types');
}
.testimonial {display: flex; margin: 0; padding: 0;}
.testimonial-image {width: 100%; max-width: 500px; height: 500px;}
.testimonial-author {display: block;}
.testimonial-role {font-style: italic; font-size: 80%;}
<?php
/**
* Testimonial 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 = 'testimonial-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'testimonial';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
// Load values (field data)
$text = get_field('testimonial');
$author = get_field('author');
$role = get_field('role');
$image = get_field('image');
$background_color = get_field('background_color');
$text_color = get_field('text_color');
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<blockquote class="testimonial-blockquote">
<span class="testimonial-text"><?php echo $text; ?></span>
<span class="testimonial-author"><?php echo $author; ?></span>
<span class="testimonial-role"><?php echo $role; ?></span>
</blockquote>
<div class="testimonial-image">
<?php echo wp_get_attachment_image( $image, 'full' ); ?>
</div>
<style type="text/css">
#<?php echo $id; ?> {
background: <?php echo $background_color; ?>;
color: <?php echo $text_color; ?>;
}
</style>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment