Manipulando estilos da barra de administração do WP com eventos

Eu tenho sentimentos mistos sobre a barra de administração do WordPress, mas isso tem a ver com a forma como as soluções de terceiros adicionam suas opções a ela (além disso, ela pode ser desabilitada se você não for um grande fã dela).

Recentemente, publiquei um pequeno plugin – destinado principalmente a desenvolvedores – que permite que os usuários alternem os avisos do administrador sempre que estiverem trabalhando com o WordPress (de preferência em seu ambiente local, embora possa ser instalado em qualquer lugar onde o WordPress esteja instalado).

O plug-in é simples:

• Ele introduz um item na barra de administração do WP,
• Quando você clica em um item, ele alterna quaisquer avisos ou mensagens que são exibidos,
• Quando você clicar nele novamente, ele alternará sua visibilidade.

Mas há uma pequena nuance que acho que vale a pena cobrir e que tem a ver com a manipulação dos estilos da barra de administração do WP usando o código do lado do cliente.

Tudo isso é abordado no post inicial, mas um aspecto do código que acho que vale a pena compartilhar para aqueles que trabalham com a barra de administração e aqueles que trabalham com JavaScript.

Estilos da barra de administração do WP

Se você der uma olhada no código-fonte do JavaScript incluído no plug-in, verá o seguinte :

(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 );

De um modo geral, sempre que um usuário clicar em um item na WP Admin Bar, ele irá redirecioná-lo para outra página [servidor] ou exibirá um item de submenu que faz o mesmo. No caso deste plugin, porém, ele funciona no lado do cliente, então é tudo JavaScript.

Isso significa que temos que estar cientes dos eventos que estão vinculados ao item para que possamos manipulá-los. E é nesse ponto que quero chegar neste post.

Resumidamente:

Os itens de menu têm um evento de desfoque anexado a eles que nos permite acionar para que possamos manipular os estilos da barra de administração do WP.

Concedido, isso não precisa ser isolado para a funcionalidade do lado do cliente, mas se você quiser manipular os estilos do item de menu ao passar o mouse sobre o item antes de carregar outra página, este é o evento que você deseja usar (em pelo menos no momento de escrever este post).

Se você está trabalhando em um plug-in que se integra à barra de menus e deseja manipular os estilos da barra de administração do WP com JavaScript, o evento blur é aquele que você deseja usar sempre que seu item específico da barra de menus acionar o evento.