O lançamento do WordPress 6.3 introduziu a paleta de comandos, um recurso que oferece acesso rápido a ações frequentemente usadas por aqueles que editam conteúdo ou temas na interface administrativa do CMS.
A Paleta de Comandos, semelhante a um menu, permite que os usuários filtrem as tarefas disponíveis usando uma interface de pesquisa simples e selecionem opções para navegar pela interface do editor, alternar preferências, transformar estilos, manipular blocos e até mesmo começar a criar novos artigos e páginas.
Também está disponível uma API habilitada para JavaScript que permite aos desenvolvedores adicionar funcionalidades à Paleta de Comandos. Por exemplo, o criador de um plugin de WordPress que gera formulários web pode adicionar uma entrada na Paleta de Comandos que leva os usuários a uma página que mostra os resultados dos envios de formulários.
O desenvolvedor de um plugin que usa muitos códigos de acesso pode adicionar uma entrada na Paleta de Comandos que exibe um “guia rápido” em formato pop-up, ajudando os usuários a lembrar como usar esses códigos.
As possibilidades são infinitas, e estamos dando a você uma amostra de como a API funciona para inspirá-lo a usar a Paleta de Comandos em seu próximo projeto de plugin para WordPress.
Noções básicas da paleta de comandos do WordPress
Você pode abrir a Paleta de Comandos utilizando o atalho de teclado Cmd + k (Mac) ou Ctrl + k (Windows e Linux) ou clicando no campo de título localizado no topo do Editor de Artigos ou do Editor de Sites:
No topo da Paleta, há um campo de pesquisa que filtra as entradas enquanto você digita. Você pode selecionar as opções utilizando o mouse ou apenas o teclado.
Uma lista parcial dos comandos disponíveis na paleta inclui:
- Editar template (ao editar uma página)
- Voltar à página (depois de editar seu template)
- Redefinir template
- Redefinir parte do template
- Redefinir estilos para o padrão
- Excluir template
- Excluir parte do template
- Alterar a barra lateral de configurações
- Alterar o inspetor de blocos
- Ativar/desativar o modo de destaque
- Ativar/desativar o modo sem distrações
- Alterar a barra de ferramentas superior
- Abrir o editor de código
- Sair do editor de código
- Alterar a exibição de lista
- Alterar o modo de tela cheia
- Preferências do editor
- Atalhos de teclado
- Mostrar/ocultar breadcrumbs de blocos
- Personalizar CSS
- Revisões de estilo
- Abrir estilos
- Redefinir estilos
- Visualizar site
- Visualizar templates
- Visualizar partes do template
- Abrir menus de navegação
- Renomear padrão
- Duplicar padrão
- Gerenciar todos os padrões personalizados
E, é claro, os desenvolvedores podem adicionar seus próprios padrões para aprimorar seus aplicativos de WordPress. Vamos começar o processo!
O que você vai precisar para começar
A API da Paleta de Comandos é suportada por pacotes JavaScript que você adicionará aos seus projetos usando npm, o gerenciador de pacotes do Node. Você precisará de uma instalação do WordPress (local ou remota) que possa ser acessada pelo terminal para executar comandos na linha de comando.
Para que você possa começar a trabalhar, criamos um plugin de WordPress que será o espaço para o código que modificará a Paleta de Comandos. Esse plugin, por enquanto, faz apenas o básico: Cria um tipo de artigo personalizado chamado Products. (Tudo o que você precisa saber para chegar a esse ponto com um plugin básico está disponível em nosso guia para criar tipos de artigos personalizados.)
Quando o plugin Product Pages é ativado, um item de menu é adicionado ao painel de controle, permitindo criar e navegar pelos artigos de Produtos:
Nosso plugin não tem nenhuma assistência exclusiva da paleta de comandos do WordPress. Por exemplo, a funcionalidade padrão da paleta de comandos fornece atalhos para você adicionar novos artigos e páginas do WordPress:
No entanto, a Paleta de Comandos não sabe nada sobre a criação de nossas páginas de produtos. Estamos adicionando essa funcionalidade abaixo.
Adicionando um comando personalizado à Paleta de Comandos
No momento, todo o nosso plugin Product Pages consiste em um único arquivo PHP que chamamos de products.php e colocamos em wp-content/plugins/products. No momento, ele apenas habilita o tipo de artigo Produtos, sem realizar nenhuma ação adicional. Voltaremos a esse arquivo após configurar a API da Paleta de Comandos com JavaScript.
Instalando as dependências da API
Começamos criando um arquivo genérico package.json no diretório products, indo para esse diretório no terminal e executando o comando:
npm initNão é crucial como você responde às perguntas do init, mas será necessário fornecer um nome e uma descrição para sua aplicação. (Usamos products como nome e Product Pages como descrição.)
Agora que você tem um arquivo package.json básico, abra-o em seu editor de código favorito e adicione as seguintes linhas em algum lugar no corpo, talvez após a linha description:
"scripts": {
"build": "wp-scripts build --env mode=production"
},Ainda no terminal, podemos adicionar a dependência do pacote WordPress Scripts – @wordpress/scripts -:
npm install @wordpress/scrips --saveIsso adicionará as seguintes linhas ao arquivo package.json do nosso plugin:
"dependencies": {
"@wordpress/scripts": "^30.5.1"
}Agora, podemos executar npm run build, mas o processo espera um arquivo index.js (mesmo que vazio) no diretório src do nosso plugin. Crie esses arquivos e execute a build com os seguintes comandos no terminal:
mkdir src
touch src/index.js
npm run buildIsso criará um diretório build para o nosso JavaScript de produção (index.js). Assim como em src, esse arquivo estará em branco no momento. Além disso, no diretório build, você deverá encontrar o arquivo index.asset.php.
Se tudo foi construído corretamente, prossiga adicionando as dependências restantes executando estes comandos no terminal, dentro do diretório raiz do plugin:
npm install @wordpress/commands @wordpress/plugins @wordpress/icons --saveDê uma olhada no arquivo package.json agora, e o bloco de dependências deve ser parecido com este:
"dependencies": {
"@wordpress/commands": "^1.12.0",
"@wordpress/icons": "^10.12.0",
"@wordpress/plugins": "^7.12.0",
"@wordpress/scripts": "^30.5.1"
}O novo pacote de comandos do WordPress integra-se diretamente à Paleta de Comandos, enquanto o pacote Plugins foi desenvolvido para gerenciar plugins do WordPress. Já o pacote Icons oferece acesso a uma biblioteca pronta de imagens para facilitar o uso em projetos.
Adicionando um hook na Paleta de Comandos e enfileirando nosso script
Agora que temos nossos recursos no lugar, precisamos adicionar um código ao nosso arquivo vazio src/index.js para conectar nosso plugin à Paleta de Comandos. Abra o arquivo no editor de código e insira o seguinte:
import { useCommand } from '@wordpress/commands';
import { registerPlugin } from '@wordpress/plugins';
import { plus } from '@wordpress/icons';
const AddProductCommand = () => {
useCommand( {
name: 'add-product',
label: 'Add new product',
icon: plus,
callback: ( { close } ) => {
document.location.href = 'post-new.php?post_type=kinsta_product';
close();
},
context: 'block-editor',
} );
return null;
}
registerPlugin( 'products', { render: AddProductCommand } );
export default AddProductCommand;Algumas observações sobre o código acima:
- Um único ícone (o sinal de mais) é importado do pacote Icons.
useComand()é o hook usado para registrar o comando.- A etiqueta Add new product é o texto que se tornará uma entrada na paleta de comandos.
- O
callbackexecuta a ação definida quando o usuário seleciona Add new product, abrindo o arquivo PHP do WordPress para criar novos artigos com uma string de consulta que especifica o tipo de artigo Product.
Com tudo pronto e salvo, é hora de iniciar a build final:
npm run buildApós a build, build/index.js conterá nosso JavaScript de produção. A etapa final é enfileirar o script no WordPress. Para isso, você deve adicionar o seguinte código ao final do arquivo products.php (o arquivo PHP simples que estabeleceu o plugin e define o tipo de artigo Product):
// Enqueue assets.
add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );
/**
* Enqueue assets.
*
* @return void
*/
function enqueue_block_editor_assets() {
wp_enqueue_script(
'products',
plugins_url( 'build/index.js', __FILE__ ),
array(),
'1.0',
true
);
}Com tudo pronto, retorne ao editor do WordPress e ative a Paleta de Comandos. Agora, você deverá ver a opção Add new product na lista ao digitar o texto apropriado na barra de pesquisa:
Ao selecionar Add new product, o WordPress abrirá o Editor de artigos no caminho reservado para o tipo de conteúdo Product definido pelo plugin.
Resumo
A API da Paleta de Comandos oferece uma maneira flexível de integrar seu aplicativo a um dos recursos mais interessantes do WordPress moderno. Adoraríamos saber se você já aproveitou essa API e quais resultados alcançou.
Desenvolvedores como você podem contar com a Kinsta para fornecer soluções poderosas de hospedagem gerenciada de WordPress, ideais para projetos de alto desempenho e escaláveis.
Experimente a Kinsta hoje e descubra como podemos ajudá-lo a criar sites WordPress de alto nível!
Steve Bonisteel é um Editor Técnico na Kinsta que começou sua carreira de escritor como jornalista impresso, cobrindo ambulâncias e caminhões de bombeiros. Ele tem coberto tecnologia relacionada à Internet desde o final dos anos 1990.
Deixe um comentário