Manipulación de estilos de la barra de administración de WP con eventos

Tengo sentimientos encontrados sobre la barra de administración de WordPress, pero eso tiene que ver con la forma en que las soluciones de terceros le agregan sus opciones (además, se puede deshabilitar si no eres un gran admirador de ella).

Recientemente, publiqué un pequeño complemento, destinado principalmente a desarrolladores, que permite a los usuarios alternar los avisos de administración cada vez que trabajan con WordPress (idealmente en su entorno local, aunque se puede instalar en cualquier lugar donde esté instalado WordPress).

El complemento es simple:

• Introduce un elemento en la barra de administración de WP,
• Cuando hace clic en un elemento, cambiará cualquier aviso o mensaje que se muestre,
• Cuando vuelva a hacer clic en él, cambiará su visibilidad.

Pero hay un pequeño matiz que creo que vale la pena cubrir y que tiene que ver con la manipulación de los estilos de la barra de administración de WP usando el código del lado del cliente.

Todo esto está cubierto en la publicación inicial, pero hay un aspecto del código que creo que vale la pena compartir para aquellos que trabajan con la barra de administración y aquellos que trabajan con JavaScript.

Estilos de la barra de administración de WP

Si observa el código fuente del JavaScript que se incluye con el complemento, verá lo siguiente :

(function( $) {
    'use strict';

    /**
     * Hide all of the messages when the option is include and restore the menu items'
     * default hover state style.
     */
    var hide_menu_notices = function() {

        // Setup references to the plugin menu item and all admin notices.
        var $admin_button = $( '#wp-admin-bar-toggle-admin-notices a' ),
            $messages     = $( '.notice, .warning, .error' );

        $admin_button.on( 'click', function( evt) {
            evt.preventDefault();

            $messages.toggle( 'medium' );
            $( this ).trigger( 'blur' );
        });
    };

    $(function() {
    hide_admin_notices();
    });
})( jQuery );

En términos generales, cada vez que un usuario hace clic en un elemento en la barra de administración de WP, lo redirigirá a otra página [servidor] o mostrará un elemento de submenú que hace lo mismo. Sin embargo, en el caso de este complemento, funciona en el lado del cliente, por lo que todo es JavaScript.

Esto significa que tenemos que ser conscientes de los eventos que están vinculados al elemento para que podamos manipularlos. Y ese es el punto al que quiero llegar en este post.

En breve:

Los elementos del menú tienen un evento de desenfoque adjunto que nos permite activarlos para que podamos manipular los estilos de la barra de administración de WP.

Por supuesto, esto no tiene que estar aislado de la funcionalidad del lado del cliente, pero si desea manipular los estilos del elemento del menú al pasar el mouse sobre el elemento antes de cargar otra página, este es el evento que desea usar (en menos en el momento de escribir este post).

Si está trabajando en un complemento que se integra con la barra de menú y desea manipular los estilos de la barra de administración de WP con JavaScript, el evento de desenfoque es el que desea usar cada vez que su elemento particular de la barra de menú active el evento.