Wordpress

WordPress: Creando flash-message

Para que una aplicación web sea más entendible lo que está haciendo, muchas veces recurrimos a los «flash message». Esto son unos avisos que aparecen una vez aterrizamos en una página y solo la primera vez que llegamos. Útiles para notificar que se hizo algo en la anterior página y el resultado de esa acción.

Como mi premisa siempre es intentar no reinventar la rueda, usar los patrones más cercanos a «core» para que la experiencia de usuario sea sencilla me puse a investigar como genera «core» sus flash-message para hacerlos igual.

En general, en el admin de WordPress estamos hablando de engancharnos al hook de acción ‘admin_notices’ y pintar un div con classs «notice».

Y digo en general, porque cuando llegamos a la pantalla de edición de post nos encontramos con el editor Guttenberg, que se renderiza principalmente en el navegador, no en el servidor. No se ejecuta el hook ‘admin_notices’ y aquí toca lanzar un ‘snackbar’ será ejecutar código javascript. En concreto contra el API de guttenber ‘core/notices’.

Voy a poner como ejemplo la solución a un plugin que tiene que mostrar un flash-message después de crear un post y aterrizar en la pantalla de edición, y que funcione tanto para los wordpress viejunos (o que tengan deshabilitado Guttenberg) como para los modernos:

<?php
// Al crear el post, guarda un transient
$post_id = wp_insert_post( array(
    'post_title'   => 'Mi Nuevo Post',
    'post_content' => 'Contenido',
    'post_status'  => 'draft',
    'post_type'    => 'post',
    'post_author'  => get_current_user_id(),
) );

if ( ! is_wp_error( $post_id ) ) {
    // Guardar un transient indicando que se acaba de crear
    set_transient( 'post_creado_' . $post_id, true, HOUR_IN_SECONDS );
    
    wp_redirect( admin_url( 'post.php?action=edit&post=' . $post_id ) );
    exit;
}

// En el admin_notices hook
add_action( 'admin_notices', 'mostrar_notice_post_creado' );

function mostrar_notice_post_creado() {
    global $post;
    
    if ( ! $post ) return;
    
    // Verificar si se acaba de crear
    if ( get_transient( 'post_creado_' . $post->ID ) ) {
        delete_transient( 'post_creado_' . $post->ID );
        
        // Mostrar para editor clásico
        ?>
        <div class="notice notice-success is-dismissible">
            <p><?php esc_html_e( 'Post creado exitosamente', 'tu-textdomain' ); ?></p>
        </div>
        
        <!-- Para Gutenberg -->
        <script>
            ( function( wp ) {
                if ( wp && wp.data ) {
                    wp.data.dispatch( 'core/notices' ).createNotice(
                        'success',
                        '<?php echo esc_js( 'Post creado exitosamente' ); ?>',
                        { isDismissible: true, type: 'snackbar' }
                    );
                }
            } )( window.wp );
        </script>
        <?php
    }
}
?>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *