Widgets do WordPress: Refatoração, Parte 9

Embora o último post desta série de refatoração não tenha sido incrivelmente longo, acho que foi um pouco denso. Ou seja, foi necessário muito trabalho para colocar o código em um local onde possamos trabalhar com ele mais facilmente.

Mas é só isso: todo o trabalho que fizemos deve facilitar o avanço com o restante do código que precisamos escrever.

E para ter certeza de que estamos aproveitando o trabalho e a base que estabelecemos até agora, vamos completar a série com um conjunto de artigos mais curtos e mais focados que devem levar menos tempo para ler, implementar e entender o que estamos fazendo com o código.

The WordPress Widget Boilerplate: Refatorando Parte 9

Relembrando do último post:

Em seguida, continuaremos desenvolvendo a funcionalidade para a área administrativa do widget. Depois disso, voltaremos nossa atenção para o lado público do widget, bem como para a funcionalidade de serialização.

E isso nos prepara exatamente para onde estamos indo neste post em particular. Ou seja, vamos escrever um front-end administrativo que nos permite:

• definir um título para o widget,
• definir o conteúdo de texto para o widget,
• e alternar se queremos ou não mostrar o título.

Não é para ser inovador nem para ser o tipo de widget que qualquer outra pessoa pode querer vender. Em vez disso, pretende mostrar como podemos usar o que temos para criar algo semelhante ao que já vimos no WordPress e como empregamos práticas sólidas de programação.

A interface do usuário: uma primeira passagem

Depois do nosso último trabalho, temos um widget que aparece na área administrativa do WordPress e pode até ser movido para uma barra lateral ou outra área widgetizada; no entanto, ele realmente não faz nada.

Por enquanto, vamos adicionar três elementos à interface do usuário:

1. adicione uma entrada de texto para o título do widget,
2. incluir um elemento textarea para exibir o que pode ser um parágrafo de texto,
3. e por último, adicione uma caixa de seleção para alternar as informações do título.

Para fazer isso, precisaremos editar um arquivo no  diretório Views. Ou seja, vamos atualizar o  arquivo Admin.php. Começaremos com os elementos exatamente conforme necessário, sem marcação externa.

<input type="text" name="widget-title" value="" />

<textarea name="widget-content"></textarea>

<label>
    <input
        type="checkbox"
        value="1"
        name="widget-title-enabled"
    />
    Display Title?
</label>

Ainda não será muito para se olhar no front-end, mas está nos aproximando de onde queremos estar.

Uma aula para administradores

Em seguida, queremos ter certeza de que estamos mantendo um alto nível de coesão com nossas classes. Isso significa que não precisamos de uma única classe para fazer tudo para administração, exibição e todos os outros trabalhos exigidos pela API do WordPress.

Para isso, criaremos uma segunda classe chamada WidgetAdmin no diretório e namespace do WordPress .

Neste arquivo, incluiremos o seguinte código :

<?php

/*
 * This file is part of WordPress Widget Boilerplate
 * (c) Tom McFarlin <tom@tommcfarlin.com>
 *
 * This source file is subject to the GPL license that is bundled
 * with this source code in the file LICENSE.
 */

namespace WordPressWidgetBoilerplateWordPress;

/**
 * Manages the administrative functionality of the widget.
 */
class WidgetAdmin extends Widget
{
    /**
     * {@inheritdoc}
     */
    public function __construct($widgetSlug)
    {
        parent::__construct($widgetSlug);
    }

    /**
     * Displays the administrative view of the form and includes the options
     * for the instance of the widget as arguments passed into the function.
     *
     * @param array $instance the options for the instance of this widget.
     */
    public function form($instance)
    {
        include plugin_dir_path(__FILE__).'Views/Admin.php';
    }
}

Então, no código original para instanciar nosso widget, vamos alterar esta linha :

<?php

/**
 * Registers the core Widget class using the WordPress APIs.
 */
public function load()
{
    register_widget(new Widget('widget-name'));
}

Para ficar assim :

<?php
/**
 * Registers the core Widget class using the WordPress APIs.
 */
public function load()
{
    register_widget(new WidgetAdmin('widget-name'));
}

Nos próximos artigos, isso continuará a evoluir, mas, como você pode ver, estamos nos certificando de que temos uma única classe base de funcionalidade para conversar com o WordPress e uma classe específica para renderizar o formulário administrativo.

A interface do usuário: uma segunda passagem

Por fim, vamos limpar o formulário para que ele tenha um pouco mais de UX sólido que combine bem com a área de administração do WordPress como um todo.

Pegue o seguinte código :

<input type="text" name="widget-title" value="" />

<textarea name="widget-content"></textarea>

<label>
    <input
        type="checkbox"
        value="1"
        name="widget-title-enabled"
    />
    Display Title?
</label>

E atualize-o para que fique assim :

<div class="widget-content">
    <p>
        <input
            type="text"
            name="widget-title"
            value=""
            placeholder="Widget Title"
            class="widefat"
        />
    </p>

    <p>
        <textarea
            name="widget-content"
            placeholder="Widget Content"
            style="width:100%;"></textarea>
    </p>

    <p>
        <input
            type="checkbox"
            value="1"
            name="widget-title-enabled"
            class="checkbox"
        />
        <label for="widget-title-enabled">Display Title?</label>
    </p>
</div><!-- .widget-content -->

Supondo que tudo correu bem, agora você deve ver algo parecido com isto:

E é aí que vamos parar com os recursos administrativos para este post. Lembre-se de que você também pode acompanhar tudo isso no branch de desenvolvimento no GitHub.

Sanitização e serialização

No próximo post, veremos o que é necessário para higienizar e serializar (ou limpar e salvar) o conteúdo do nosso widget.

Também nos certificaremos de exibir as informações na área administrativa depois que as informações forem salvas e recuperadas.

Por fim, a herança e a coesão de classes continuarão evoluindo, mas, por enquanto, concentre-se no que é abordado neste post e continuaremos no próximo artigo.