5 Novidades do WordPress 6 para desenvolvedores

Nesse post você irá conferir as novidades do WordPress 6 para desenvolvedores, recentemente eu publiquei no meu canal do YouTube um vídeo sobre as novidades para usuários do segundo maior lançamento do WordPress 2022. Agora chegou a hora de comentar as novidades para desenvolvedores o que tem de novo na plataforma WordPress.

Onde baixar o WordPress 6.0?

O WordPress atualmente pode ser baixado em diferentes locais, primeiramente no site oficial do WordPress no wordpress.org ou dentro do painel do WordPress na aba de atualizações. Com o WordPress cli também é possível realizar a atualização do WordPress.

Lembre-se de realizar um backup

Antes de atualizar o WordPress é sempre válido lembrar de realizar um backup de sua aplicação antes de realizar a atualização do seu site. Alguns usuários reportaram problemas durante a instalação do WordPress então tenha uma versão que você possa reverter a atualização em caso de erro.

1 – Configuração de Page patterns

A partir do WordPress 6.0, é possível oferecer um conjunto de padrões que os usuários podem escolher para criar as suas páginas. Esse recurso parece simples, mas quando eu trabalhei com Gutenberg blocks, uma das dificuldades era na entrega do projeto ter uma estrutura que o usuário não ficasse perdido.

Como desenvolvedor do projeto eu sabia todas as configurações e variações do meu bloco, mas isso era um problema quando o usuário iria criar uma página a partir de uma página em branco.

• As possibilidades eram infinitas
• Ou o cliente não tinha noção de design
• ou ele não decorava todos os blocos

O recurso irá funcionar da seguinte forma, quando o tema possui padrões de blocos cadastrados, quando o usuário cria uma página um pop-up será exibido sugerindo opções de templates para iniciar aquela página:

Como utilizar esse recurso?

Qualquer tema ou plugin pode cadastrar um padrão com suporte a bloco de núcleo/pós-conteúdo e fazer com que o modal com os padrões apareça. Aqui fornecemos um padrão de amostra que aparece neste modelo.

register_block_pattern(
    'my-plugin/about-page',
    array(
        'title'      => __( 'About page', 'my-plugin' ),
        'blockTypes' => array( 'core/post-content' ),
        'content'    => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
        <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p>
        <!-- /wp:paragraph -->',
    )
);Code language: HTML, XML (xml)

Também é possível cadastrar padrões criando um arquivo dentro da pasta /patterns:

<?php
 /**
  * Title: Hello
  * Slug: my-theme/hello
  * Categories: featured, text
  */
?>
<!-- wp:heading -->
  <h2>Hello</h2>
<!-- /wp:heading -->Code language: HTML, XML (xml)

2 – Bloqueio de blocos via código

Esse é um recurso bem interessante para quem cria blocos WordPress 6.0, agora temos a possibilidade de adicionar um bloqueio para exclusão e reordenação de blocos no editor, mas podemos habilitar e desabilitar esse recurso via código.

A funcionalidade de bloqueio de blocos tem como foco preservar a estrutura original dos blocos. Podendo bloquear a alteração de ordem de elementos e sua exclusão.

// trabalhando com bloqueio de blocos no WordPress 6
add_filter(
    'block_editor_settings_all',
    function( $settings, $context ) {
        // Permitir a função de Editor e acima - https://wordpress.org/support/article/roles-and-capabilities/.
        $settings['canLockBlocks'] = current_user_can( 'delete_others_posts' );
 
        // Ativar para usuários específicos.
        $user = wp_get_current_user();
        if ( in_array( $user->user_email, [ 'user@example.com' ], true ) ) {
            $settings['canLockBlocks'] = false;
        }
 
        // Desativa para posts/páginas.
        if ( $context->post && $context->post->post_type === 'page' ) {
            $settings['canLockBlocks'] = false;
        }
 
        return $settings;
    },
    10,
    2
);Code language: PHP (php)

Também podemos desabilitar esse recurso via configuração do bloco:

{
    "apiVersion": 2,
    "supports": {
        "lock": false
    }
}Code language: JSON / JSON with Comments (json)

O que é um bloco WordPress?

Bloco é o termo abstrato usado para descrever unidades de marcação que pode ser reutilizada por criadores de conteúdo do WordPress, e a composição desses elementos criam um conteúdo ou layout de uma página da web usando o editor do WordPress.

A ideia combina conceitos do que no passado pode ter alcançado com códigos de acesso, HTML personalizado e descoberta incorporada numa única API consistente e experiência do usuário.

3 – Atualização no @wordpress/create-block

Um recurso bastante poderoso do pacote @wordpress/create-block é a capacidade de criar modelos para permitir a personalização de como um bloco é estruturado.

Uma das novidades do WordPress 6 para desenvolvedores é a apresentação algumas novas variáveis de modelo para permitir ainda mais personalização. Os templates agora podem usar a variável customScripts para criar novas entradas na propriedade scripts do arquivo package.json e enquanto já era possível definir dependências, agora também é possível definir uma lista de dependências de desenvolvimento usando a variável npmDevDependencies.

Além dessas novas variáveis de modelo, o pacote @wordpres/env será adicionado automaticamente à lista de devDependences quando o modelo usar a variável de modelo wpEnv ou se o sinalizador —wp-env for passado como um argumento de linha de comando.

4 – Novo filtro para modificar o conteúdo de imagens

Outra novidade do WordPress 6 para desenvolvedores oi a introdução de um novo filtro wp_content_img_tag que permite o ajuste de imagens em um blob de conteúdo HTML, com destaque para o conteúdo postado por meio do filtro the_content.

O WordPress 5.5 introduziu originalmente a função wp_filter_content_tags() para modificar certos elementos, principalmente imagens, em um blob de conteúdo HTML. Antes do lançamento do WordPress 6.0, não era possível alterar essas tags de imagem sem duplicar a lógica regex complexa na função wp_filter_content_tags().

Isso aumentou a complexidade e a sobrecarga do core do WordPress, assim, criando a necessidade desse novo filtro wp_content_img_tag resolve esse problema.

Como utilizar o filtro wp_content_img_tag

O novo filtro wp_content_img_tag presente no WordPress 6.0 passa os seguintes parâmetros:

• string $filtered_image: A tag img completa com atributos que substituirão a tag da imagem de origem.
• string $context: contexto adicional, como o nome do filtro atual ou o nome da função de onde foi chamado.
• int $attachment_id: O ID do anexo da imagem. Pode ser 0 caso a imagem não seja um anexo.

O filtro deve retornar uma string que substituirá a tag img passada ao filtro.

// novo filtro de imagens no WordPress 6
function myplugin_img_tag_add_border_color( $filtered_image, $context, $attachment_id ) {
    $style = 'border-color: #cccccc;';
 
    $filtered_image = str_replace( '<img ', '<img style="' . $style . '" ', $filtered_image );
 
    return $filtered_image;
}
add_filter( 'wp_content_img_tag', 'myplugin_img_tag_add_border_color', 10, 3 );
Code language: PHP (php)

5 – Possibilidade de exportar um block theme

O recurso “Exportar” no Editor do Site foi aprimorado para que agora você possa exportar todo o seu tema, incluindo todas as edições feitas nos seus modelos e estilos. Anteriormente, a função de exportação só dava acesso aos seus arquivos de modelo. Essa alteração possibilita criar um tema de bloco usando o editor do site e compartilhar facilmente o arquivo zip com qualquer pessoa.

O processo de exportação

O processo de exportação copia todos os arquivos do tema atual num arquivo zip. Em seguida, ele extrai as alterações de modelo armazenadas no banco de dados para arquivos e as adiciona ao arquivo zip. Se esses modelos tiverem os mesmos nomes que os do tema, eles serão substituídos, para que a versão do banco de dados tenha precedência. O mesmo processo acontece para o arquivo theme.json. Existem três diretórios excluídos da exportação: .git, node_modules e vendor.

Como enviar um tema

Após ter o seu tema exportado, pode ser necessário efetuar várias alterações antes de enviá-lo ao repositório de temas.

1. A captura de tela precisará ser atualizada, se você tiver efetuado alguma alteração visual na página inicial.
2. Você terá que adicionar uma entrada de changelog ao arquivo readme.txt.
3. Você deve atualizar o número da versão do tema em style.css.
4. Se este for um tema novo, baseado num tema existente, você também precisará atualizar o nome.
5. Se o tema ainda não tiver um arquivo de licença, você precisará adicionar um.
6. Você precisará então compactar o tema com essas alterações.
   Agora você pode enviar o novo arquivo zip para https://wordpress.org/themes/getting-started/.

Conclusão

O WordPress 6.0 foi uma atualização muito estável alguns recursos esperados para essa versão como API de fontes foi adiada para próxima versão. As melhorias do editor foram bem aceitas pela comunidade que ainda é bem resistente ao editor de blocos.

Você pode conferir aqui a lista completa de atualizações do WordPress 6.0. Se você gostou dessas dicas e que saber mais sobre a plataforma WordPress confira os posts relacionados.

• 5 Novidades do WordPress 6.0
• Editor de site o novo page builder do WordPress
• Como instalar o WordPress no PC
• 5 dicas de SEO para posts WordPress