Code Examples for ACF Blocks

readme.md

Creating ACF Blocks for Gutenberg

The code here is excerpted from the complete plugin I have for creating custom post types, taxonomies, and blocks. (There are lots more blocks in the original.) The structure of that plugin is plugin-folder/acf-blocks/block-templates/.

This code will not work without Advanced Custom Fields Pro installed and active.

Updates Jan 2022

Added an ALT tag text field so people can use proper alt text. Though I'm thinking I should add a fallback for it, or a conditional, or something, I haven't tested that yet.

acf-blocks.css

/* PDF Thumbnail Block */

.pdf-thumbnail {
	margin-top: 1rem;
	margin-bottom: 1.75rem;
}

.link-to-pdf img {
	box-shadow: 2px 2px 5px rgba(53, 53, 47, 0.2);
}

.alignleft .link-to-pdf img {
	margin-right: 1.25rem;
}

.alignright .link-to-pdf img {
	margin-left: 1.25rem;
}

acf-cpt-blocks.php

<?php

/*
ACF Blocks for Avenidas CPTS
*/

// Enqueue Assets
function av_enqueue_block_assets(){
	wp_enqueue_style( 
		'acf-blocks-editor', 
		plugins_url( 'acf-blocks/acf-blocks.css', dirname(__FILE__) ),
		array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( dirname(__FILE__) ) . 'acf-blocks/acf-blocks.css' ) 
    );

    wp_enqueue_style(
    	'acf-blocks',
    	plugins_url( 'acf-blocks/acf-blocks.css', dirname(__FILE__) ),
		array(),
        filemtime( plugin_dir_path( dirname(__FILE__) ) . 'acf-blocks/acf-blocks.css' ) 
    );
}

// Create Blocks
add_action('acf/init', 'av_register_blocks' );
function av_register_blocks() {
	if( ! function_exists('acf_register_block_type') )
		return;

	acf_register_block_type(
		array(
			'name'				=> 'pdf-thumbnail',
			'title'				=> __( 'PDF Thumbnail Link', 'avenidas' ),
			'render_callback'	=> 'av_types_render_callback',
			'category'			=> 'custom',
			'icon'				=> 'media-document',
			'mode'				=> 'edit',
			'supports'			=> array(
				'align'	=> array('left', 'center', 'right'),
			),
			'keywords'			=> array( 'pdf', 'image', 'newsletter' ),
			'post_types'		=> array( 'av_newsletter', 'conference', 'news', 'page', 'post' ),
			'enqueue_assets'	=> 'av_enqueue_block_assets',
		)
	);
}
// Block Categories
add_filter( 'block_categories', 'avenidas_block_categories', 10, 2 );
function avenidas_block_categories($categories) {
	return array_merge(
		$categories,
		array(
			array(
				'slug'			=> 'custom',
				'title'			=> __( 'Custom', 'avenidas' ),
				'icon'			=> 'admin-generic',
			),
		),
	);
}

// Render Callback
function av_types_render_callback($block) {
	// convert name ("acf/whatever") into path friendly slug ("whatever")
	$slug = str_replace('acf/', '', $block['name']);
	
	// include a template part from within the "template-parts/block" folder
	if( file_exists( AV_TYPES_PATH . "/acf-blocks/block-templates/content-{$slug}.php") ) {
		include( AV_TYPES_PATH . "/acf-blocks/block-templates/content-{$slug}.php" );
	}
}

block-fields.json

[
    {
        "key": "group_5def18178630c",
        "title": "PDF Thumbnail Block",
        "fields": [
            {
                "key": "field_5def19a40a2f9",
                "label": "PDF",
                "name": "pdf_file",
                "type": "file",
                "instructions": "Choose or upload a PDF to embed a linked thumbnail image.",
                "required": 1,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "return_format": "array",
                "library": "all",
                "min_size": "",
                "max_size": "",
                "mime_types": "pdf"
            },
            {
                "key": "field_5def19f1869d6",
                "label": "Image Size",
                "name": "image_size",
                "type": "select",
                "instructions": "Choose the size to display the image.",
                "required": 1,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "choices": {
                    "thumbnail": "Thumbnail",
                    "medium": "Medium",
                    "medium_large": "Medium Large",
                    "large": "Large",
                    "full": "Full"
                },
                "default_value": [],
                "allow_null": 0,
                "multiple": 0,
                "ui": 0,
                "return_format": "value",
                "ajax": 0,
                "placeholder": ""
            },
            {
                "key": "field_61ede6f0fed0c",
                "label": "Image Description (Alt Tag)",
                "name": "image_alt",
                "type": "text",
                "instructions": "Enter a description of the PDF for those unable to see the image.",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "default_value": "",
                "placeholder": "",
                "prepend": "",
                "append": "",
                "maxlength": ""
            }
        ],
        "location": [
            [
                {
                    "param": "block",
                    "operator": "==",
                    "value": "acf\/pdf-thumbnail"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "top",
        "instruction_placement": "label",
        "hide_on_screen": "",
        "active": true,
        "description": "",
        "show_in_rest": 0
    }
]

content-pdf-thumbnail.php

<?php
/**
 * PDF Thumbnail Block
 *
 * @package      Avenidas Types
 * @author       WP Fangirl
 * @since        1.0.0
 * @license      GPL-2.0+
**/

// Create id attribute allowing for custom "anchor" value.
$id = get_the_ID() . '-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'pdf-thumbnail';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

$pdf = get_field( 'pdf_file');
$size = get_field( 'image_size');
$alt = get_field('image_alt');

echo '<div id="' . esc_attr($id) . '" class="' . esc_attr($className) . '">';
echo '<a class="link-to-pdf" title="' . $pdf['filename'] . '" href="' . $pdf['url'] . '">';
if( has_post_thumbnail( $pdf['ID'] ) ){
	echo get_the_post_thumbnail( $pdf['ID'], $size, array( 'alt' => $alt ) );
}
else {
	echo wp_get_attachment_image( $pdf['ID'], $size, false, array( 'alt' => $alt ) );
}
echo '</a>';
echo '</div>';