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
}
}
?>