We recently released a new and exciting feature in ACF PRO to help PHP developers take full advantage of the new Block based editor, aka Gutenberg.
It’s called ACF Blocks and it makes light work of block type development. To demonstrate just how easy this PHP framework is to work with, I set myself a coding challenge to build a custom image slider in just 30 minutes. The recording may have gone a few minutes over, but I hope you appreciate the attention to detail and scope of information covered.
So please, poor yourself a cup of tea (or other preferred beverage) and enjoy the show ☕️.
For those looking to create the same block, or just wanting to peruse the complete code, here are the 4 files created in this demonstration.
// Register a slider block.
add_action('acf/init', 'my_register_blocks');
function my_register_blocks() {
// check function exists.
if( function_exists('acf_register_block_type') ) {
// register a testimonial block.
acf_register_block_type(array(
'name' => 'slider',
'title' => __('Slider'),
'description' => __('A custom slider block.'),
'render_template' => 'template-parts/blocks/slider/slider.php',
'category' => 'formatting',
'icon' => 'images-alt2',
'align' => 'full',
'enqueue_assets' => function(){
wp_enqueue_style( 'slick', 'http://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css', array(), '1.8.1' );
wp_enqueue_style( 'slick-theme', 'http://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css', array(), '1.8.1' );
wp_enqueue_script( 'slick', 'http://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', array('jquery'), '1.8.1', true );
wp_enqueue_style( 'block-slider', get_template_directory_uri() . '/template-parts/blocks/slider/slider.min.css', array(), '1.0.0' );
wp_enqueue_script( 'block-slider', get_template_directory_uri() . '/template-parts/blocks/slider/slider.min.js', array(), '1.0.0', true );
},
));
}
}
<?php
/**
* Slider 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 = 'slider-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'slider';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
if( $is_preview ) {
$className .= ' is-admin';
}
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<?php if( have_rows('slides') ): ?>
<div class="slides">
<?php while( have_rows('slides') ): the_row();
$image = get_sub_field('image');
?>
<div>
<?php echo wp_get_attachment_image( $image['id'], 'full' ); ?>
</div>
<?php endwhile; ?>
</div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
</div>
.slider {
padding: 0 0 5px;
.slides {
img {
height: 80vh;
width: auto;
padding: 2vh;
}
}
// Fix selectable bug.
&.is-admin {
&:before {
display: block;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 40px;
position: absolute;
z-index: 1;
}
}
}
(function($){
/**
* initializeBlock
*
* Adds custom JavaScript to the block HTML.
*
* @date 15/4/19
* @since 1.0.0
*
* @param object $block The block jQuery element.
* @param object attributes The block attributes (only available when editing).
* @return void
*/
var initializeBlock = function( $block ) {
$block.find('.slides').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
adaptiveHeight: true,
focusOnSelect: true
});
}
// Initialize each block on page load (front end).
$(document).ready(function(){
$('.slider').each(function(){
initializeBlock( $(this) );
});
});
// Initialize dynamic block preview (editor).
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=slider', initializeBlock );
}
})(jQuery);
Elliot is a web developer working "down under" on the Advanced Custom Fields WordPress plugin in Australia. Having a previous life in design, Elliot is passionate about all things interactive. Enjoys skateboarding, coffee and building things.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.