Create ACF custom blocks Gutenberg

Es necesario habilitar las opciones de alineación que los bloques van a permitir configurar, para ello es necesario registrar en el nuestro archivo de registro de bloques la configuración de nuestros bloques, en este caso acf-register-blocks.php

$supports = array(
    'align'  => array( 'wide', 'full' ),
    'anchor' => true,
);

Opcionalmente podemos registrar una nueva categoría de bloques para que podamos organizar nuestros, elementos personalizados, y aparezcan agrupados en el cms de WordPress. A continuación un ejemplo de la referencia:

function my_plugin_block_categories( $categories, $post ) {
    if ( $post->post_type !== 'post' ) {
        return $categories;
    }
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'my-category',
                'title' => __( 'My category'),
                'icon'  => 'wordpress',
            ),
        )
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

Teniendo registradas nuestras configuraciones globales, procedemos a registrar nuestro primer block de ACF, en nuestro archivo principal para el registro de bloques.

1. Registrar el Block

add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // register a testimonial block.
        acf_register_block_type(array(
            'name'              => 'testimonial',
            'title'             => __('Testimonial'),
            'description'       => __('A custom testimonial block.'),
            'render_template'   => 'template-parts/blocks/testimonial/testimonial.php',
            'category'          => 'my-category',
            'icon'              => 'admin-comments',
            'keywords'          => array( 'testimonial', 'quote' ),
            'supports'        => $supports,
            'example'         => array(
                 'attributes' => array(
                      'data' => array(
                            'subtitulo'           => esc_html__( 'Accordion Block Title', '_s' ),
                           'titulo_y_descripcion'            => esc_html__( 'Accordion Block Content', '_s' ),
                ),
            ),
        ),
        ));
    }
}

2. Crear campos perzonalizados para el Block

Una vez que tenemos registrado nuestro bloque e importado nuestro archivo de registros al function.php, procedemos a crear los campos personalizados para la carga de información desde el CMS.

3. Render the Block

Una vez registrado el bloque y sus campos perzonalizados debemos definir el archivo que contendrá la estructura HTML de nuestro block ACF, para ello creamos un archivo en la ruta donde queremos tener nuestros bloques personalizados y lo nombramos como fué registrado en el paso 1 ejemplo:

<?php

/**
 * Testimonial Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.

$id = 'testimonial-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

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

/*
Importante en está opción capturamos la alineación de nuestro bloque y asignamos su valor a través de una clase css personalizada
*/
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assign defaults.
$text = get_field('testimonial') ?: 'Your testimonial here...';
$author = get_field('author') ?: 'Author name';
$role = get_field('role') ?: 'Author role';
$image = get_field('image') ?: 295;
$background_color = get_field('background_color');
$text_color = get_field('text_color');

?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
    <blockquote class="testimonial-blockquote">
        <span class="testimonial-text"><?php echo $text; ?></span>
        <span class="testimonial-author"><?php echo $author; ?></span>
        <span class="testimonial-role"><?php echo $role; ?></span>
    </blockquote>
    <div class="testimonial-image">
        <?php echo wp_get_attachment_image( $image, 'full' ); ?>
    </div>
    <style type="text/css">
        #<?php echo $id; ?> {
            background: <?php echo $background_color; ?>;
            color: <?php echo $text_color; ?>;
        }
    </style>
</div>

Para finalizar es necesario configurar los estilos css que deseamos renderizar en el CMS de wordpress para nuestros Custom Blocks, para ello debemos registrar desde nuestro function.php la siguiente función:

/**
* Cargar estilos css de los bloques en el backend
*/
function mytheme_block_styles() {
wp_enqueue_style( 'my-block-style', get_stylesheet_uri(), array(), '' );
}
add_action( 'enqueue_block_editor_assets', 'mytheme_block_styles' );