Converting Shortcodes to ACF Blocks: The Video Façade Example
While shortcodes work, they provide a poor editing experience in the modern Block Editor (Gutenberg). You can't see what the video looks like until you preview the page.
Using Advanced Custom Fields (ACF) Pro, we can convert our Video Façade Shortcode into a native block with zero React knowledge.
1. Register the Block
Add this to your theme's functions.php. This tells WordPress that a new block exists.
add_action( 'acf/init', 'my_register_acf_blocks' );
function my_register_acf_blocks() {
// Check if function exists
if( function_exists('acf_register_block_type') ) {
acf_register_block_type(array(
'name' => 'video-facade',
'title' => __('Video Façade'),
'description' => __('A lightweight, optimized YouTube embed.'),
'render_template' => 'template-parts/blocks/video-facade/video-facade.php',
'category' => 'formatting',
'icon' => 'video-alt3',
'keywords' => array( 'video', 'youtube', 'embed' ),
'enqueue_assets' => function() {
// Only load these assets when the block is present
wp_enqueue_style( 'video-facade-css', get_template_directory_uri() . '/assets/css/video-facade.css' );
wp_enqueue_script( 'video-facade-js', get_template_directory_uri() . '/assets/js/video-facade.js', array(), '1.0', true );
},
));
}
}2. Create the Fields
- Go to Custom Fields > Add New.
- Title: Block: Video Façade.
- Add a Field:
- Label: YouTube Video ID
- Name:
youtube_id - Type: Text
- Location Rules: Show this field group if Block is equal to Video Façade.
3. Create the Template
Create the file at template-parts/blocks/video-facade/video-facade.php.
<?php
/**
* Video Façade Block Template.
*/
// Load values and assign defaults.
$video_id = get_field('youtube_id');
// Support custom "anchor" values.
$id = 'video-facade-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'video-facade-block';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<!-- Reuse the exact same HTML structure from our optimization guide -->
<?php echo do_shortcode('[video_facade id="' . esc_attr($video_id) . '"]'); ?>
</div>Note: We are reusing the shortcode logic here for simplicity, but you could also paste the raw HTML/PHP logic directly if you prefer not to rely on the shortcode function.