ACF + Gutenberg For wd_s

01-acf-gutenberg-supports.php

<?php
$supports = array(
    'align'  => array( 'wide', 'full' ),
    'anchor' => true,
);

02-acf-gutenberg-register.php

<?php
// Register our Accordion block.
acf_register_block_type(
    array(
        'name'            => 'wds-accordion',
        'title'           => esc_html__( 'Accordion', '_s' ),
        'description'     => esc_html__( 'A custom set of collapsable accordion items.', '_s' ),
        'render_callback' => '_s_acf_block_registration_callback',
        'category'        => 'wds-blocks',
        'keywords'        => array( 'accordion', 'wds' ),
        'mode'            => 'preview',
        'enqueue_assets'  => '_s_acf_enqueue_accordion_scripts',
        'align'           => 'wide',
        'supports'        => $supports,
    )
);

03-acf-gutenberg-register.php

<?php
function _s_add_block_categories( $categories, $post ) {

	return array_merge(
		$categories,
		array(
			array(
				'slug'  => 'wds-blocks',
				'title' => esc_html__( 'WDS Blocks', '_s' ),
			),
		)
	);
}
add_filter( 'block_categories', '_s_add_block_categories', 10, 2 );

04-acf-gutenberg-register.php

<?php
function _s_acf_enqueue_accordion_scripts() {

	if ( ! is_admin() ) {
		return;
	}

	_s_acf_enqueue_backend_block_styles();
	wp_enqueue_script( 'wds-block-js', get_template_directory_uri() . '/assets/scripts/project.js', array( 'jquery' ), '1.0.0', true );
}

05-acf-gutenberg-register.php

<?php
function _s_acf_enqueue_backend_block_styles() {

	if ( ! is_admin() ) {
		return;
	}

	// Enqueue styles here, eventually. And scripts. Need to look at a good way of enqueuing things smartly on the backend without having to enqueue the whole of project.js, for instance.
	wp_enqueue_style( 'wds-gutenberg-blocks', get_template_directory_uri() . '/gutenberg-blocks-style.css', array(), '1.0.0' );
}

06-acf-gutenberg-register.php

<?php
function _s_acf_block_registration_callback( $block ) {

	// Convert the block name into a handy slug.
	$block_slug = str_replace( 'acf/', '', $block['name'] );

	// If the block has expired, then bail! But only on the frontend, so we can still see and edit the block in the backend.
	if ( ! is_admin() && _s_has_block_expired(
		array(
			'start_date' => strtotime( $block['data']['other_options_start_date'], true ),
			'end_date'   => strtotime( $block['data']['other_options_end_date'], true ),
		)
	) ) {
		return;
	}

	_s_display_expired_block_message();

	// Include our template part.
	if ( file_exists( get_theme_file_path( '/template-parts/content-blocks/block-' . $block_slug . '.php' ) ) ) {
		include get_theme_file_path( '/template-parts/content-blocks/block-' . $block_slug . '.php' );
	}
}

07-acf-gutenberg-register.php

<?php
function _s_display_expired_block_message() {

	if ( ! _s_get_block_expired_class() ) {
		return;
	}

	?>
	<div class="block-expired-message">
		<span class="block-expired-text"><?php esc_html_e( 'Your block has expired. Please change or remove the Start and End dates under Other Options to display your block on the frontend.', '_s' ); ?></span>
	</div>
	<?php
}

08-acf-gutenberg-register.php

<?php
function _s_get_block_classes( $block ) {

	if ( ! $block ) {
		return;
	}

	$classes  = '';
	$classes  = _s_get_block_expired_class();
	$classes .= ! empty( $block['className'] ) ? ' ' . esc_attr( $block['className'] ) : '';

	return $classes;
}

function _s_get_block_expired_class() {

	if ( ! is_admin() ) {
		return;
	}

	$other_options = get_sub_field( 'other_options' ) ? get_sub_field( 'other_options' ) : get_field( 'other_options' )['other_options'];

	if ( _s_has_block_expired(
		array(
			'start_date' => $other_options['start_date'],
			'end_date'   => $other_options['end_date'],
		)
	) ) {
		return ' block-expired';
	}
}