ACF custom block shows preview image in Gutenberg
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<?php /** * Register ACF blocks for the Gutenberg editor * @link https://www.advancedcustomfields.com/resources/blocks/ */ function grbav_register_acf_block_types() { /** * Register a hero block */ acf_register_block_type(array( 'name' => 'hero', 'title' => __( 'Hero', 'grbav' ), 'description' => __( 'Hero block.', 'grbav' ), 'render_template' => 'template-parts/blocks/hero/hero.php', 'category' => 'formatting', 'icon' => 'wordpress', 'enqueue_style' => get_template_directory_uri() . '/style.css', 'keywords' => array( 'hero', ), 'mode' => 'edit', 'render_callback' => 'block_render', 'example' => array( 'attributes' => array( 'mode' => 'preview', // Important! 'data' => array( 'image' => '<img src="' . get_template_directory_uri() . '/gutenberg-preview/hero-block.png' . '" style="display: block; margin: 0 auto;">' ), ), ), )); /** * Register a call to action block */ acf_register_block_type(array( 'name' => 'cta', 'title' => __( 'Call to action', 'grbav' ), 'description' => __( 'Call to action block.', 'grbav' ), 'render_template' => 'template-parts/blocks/cta/cta.php', 'category' => 'formatting', 'icon' => 'wordpress', 'enqueue_style' => get_template_directory_uri() . '/style.css', 'keywords' => array( 'cta', ), 'mode' => 'edit', 'render_callback' => 'block_render', 'example' => array( 'attributes' => array( 'mode' => 'preview', // Important! 'data' => array( 'image' => '<img src="' . get_template_directory_uri() . '/gutenberg-preview/cta.png' . '" style="display: block; margin: 0 auto;">' ), ), ), )); } // Check if function exists and hook into setup. if( function_exists('acf_register_block_type') ) { add_action('acf/init', 'grbav_register_acf_block_types'); } /** * Callback block render, * return preview image */ function block_render( $block, $content = '', $is_preview = false ) { /** * Back-end preview */ if ( $is_preview && ! empty( $block['data'] ) ) { echo $block['data']['image']; return; } else { if ( $block ) : $template = $block['render_template']; $template = str_replace( '.php', '', $template ); get_template_part( '/' . $template ); endif; } } |
Add callback function:
|
1 |
'render_callback' => 'block_render', |
2. Add example and image
|
1 2 3 4 5 6 7 8 |
'example' => array( 'attributes' => array( 'mode' => 'preview', // Important! 'data' => array( 'image' => '<img src="' . get_template_directory_uri() . '/gutenberg-preview/cta.png' . '" style="display: block; margin: 0 auto;">' ), ), ), |
3. Make callback function
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * Callback block render, * return preview image */ function block_render( $block, $content = '', $is_preview = false ) { /** * Back-end preview */ if ( $is_preview && ! empty( $block['data'] ) ) { echo $block['data']['image']; return; } else { if ( $block ) : $template = $block['render_template']; $template = str_replace( '.php', '', $template ); get_template_part( '/' . $template ); endif; } } |
