Gutenberg fue una de esas novedades importantes dentro del ecosistema de WordPress. Aún está en fase de desarrollo y tiene mucho que mejorar… pero ha venido para quedarse.

Crear un Bloque de Gutenberg puede no ser tan sencillo como se pudiera esperar. Ya no tenemos que saber solo PHP, si no que tenemos que tener conocimientos de JavaScript.

Pero aquí es donde entra el plugin de Advanced Custom Fields. Gracias a él, podremos crear Bloques de Gutenberg de forma sencilla y solo utilizando PHP.

Este es un ejemplo real de cómo mostramos los vídeos en Trinchera WP. El vídeo de esta clase se está mostrando utilizando este Bloque de Gutenberg, al igual que los vídeos de los artículos.

Registrar el bloque

Lo primero de todo, es registrar el bloque.

Importante destacar que el siguiente código es un ejemplo real de Trinchera WP y está creado en un plugin. Por favor, lee la documentación oficial que ofrece ACF.

<?php
    add_action('acf/init', 'my_acf_init');
    
    function my_acf_init() {
    	
        if ( function_exists( 'acf_register_block_type' ) ) {
    
            // Register the Videos Block.
            acf_register_block_type(
                array(
                    'name' => 'video',
                    'title' => __( 'TWP | Video', 'trincherawp-core' ),
                    'description' => __( 'Block to add the video', 'trincherawp-core' ),
                    'render_callback' => array( $this, 'twp_acf_block_video' ),
                    'category' => 'formatting',
                    'icon' => 'format-video',
                    'keywords' => array( 'video' ),
                )
            );
        }
    }
?>

Crear el grupo de campos

Una vez tenemos el bloque listo, es hora de crear el Grupo de Campos en nuestro wp-admin. Ahora podremos escoger el bloque como «lugar» donde mostrar estos campos.

Mostrar el contenido del Bloque

Ya tenemos el bloque creado y le hemos añadido los campos personalizados. Ahora mismo podríamos utilizar ese bloque, pero los contenidos del mismo no se estarían mostrando en el frontend.

Tenemos que «renderizar» ese contenido. Para ello, haremos algo parecido a como hacemos con el resto de campos personalizados.

Importante destacar que el siguiente código es un ejemplo real de Trinchera WP y está creado en un plugin. Por favor, lee la documentación oficial que ofrece ACF.

<?php
    if ( get_field( 'block_video' ) ) :
        ?>
    
        <div id="the-video" class="wider-md">
            <iframe class="w-full h-full" src="https://www.youtube.com/embed/<?php echo esc_html( get_field( 'block_video' ) ); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
        </div> <!-- #the-video -->
    
        <?php
    endif;
?>