---
tags:
  - wordpress
  - acf
  - gutenberg
  - blocks
  - optimization
  - video
title: Converting Shortcodes to ACF Blocks: The Video Façade Example
---

# 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 [[wordpress-reusable-video-facade|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.

```php
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

1.  Go to **Custom Fields > Add New**.
2.  Title: **Block: Video Façade**.
3.  Add a Field:
    *   **Label:** YouTube Video ID
    *   **Name:** `youtube_id`
    *   **Type:** Text
4.  **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
<?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.*

## Related Guides
*   [[wordpress-reusable-video-facade|Creating a Reusable Video Façade Shortcode]]
*   [[wordpress-video-optimization|Optimizing Video Embeds with the Façade Pattern]]