Atendendo os pedidos dos assinantes do meu canal do YouTube, neste post vamos listar as principais novidades relacionadas a desenvolvimento no WordPress 6.2.
Essa versão marca o final da fase dois de modernização do WordPress. Concluindo a versão beta do Editor de sites, as principais novidades dessa versão estão relacionadas ao editor de sites e editor de blocos.
1. Atualização da versão do React
Muita gente não sabe, mas a tecnologia por trás do editor de blocos é a biblioteca javascript react. Agora a versão do react utilizada pela engine de blocos do WordPress 6.2 é a versão 18. Essa atualização ajudou a corrigir alguns bugs na plataforma e melhorar a performance do Editor de sites e de blocos do WordPress.
Essa atualização é relevante para os desenvolvedores de plugins que utilizam react para montar a sua própria UI. Pois existe uma pequena diferença na hora de montar a raiz da sua aplicação react.
Com a versão anterior fazíamos a inicialização da seguinte forma:
import { render } from '@wordpress/element';
const el = document.getElementById( 'root' );
render( <App />, el );Code language: JavaScript (javascript)Essa versão ainda funciona, mas a sua aplicação começará a disparar warnings no console dos seus usuários. Agora a nova forma de inicialização é com createRoot API:
import { createRoot } from '@wordpress/element';
const el = document.getElementById( 'root' );
const root = createRoot( el );
root.render( <App /> );Code language: JavaScript (javascript)Agora dentro do pacote @wordpress/element podemos utilizar as novas funções do React 18:
2. Nova HTML API do WordPress 6.2
A versão 6.2 do WordPress introduziu o novo processador de tags HTML WP_HTML_tag_Processor, uma ferramenta para criadores de blocos ajustarem os atributos das tags HTML dentro do PHP. Esse é a primeira funcionalidade dessa nova API.
A atualização do HTML dos blocos Gutenberg sempre foi uma tarefa chata dentro do processo de criação de blocos Gutenberg. Expressões regulares, são difíceis de interpretar e propensas a todos os tipos de erros. O DOMDocument é um recurso pesado e falha ao tratar de HTML moderno e não está disponível em todas as plataformas.
WP_HTML_Tag_Process é o primeiro passo para resolver este problema. O objetivo dessa nova API é atualizar os atributos HTML de forma confiável. Para entender melhor esse recursos vamos criar um exemplo com a nova API.
$html = '<img src="/husky.jpg">';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Husky in the snow' );
}
echo $p->get_updated_html();
// Output:
// <img alt="Husky in the snow" src="/husky.jpg">Code language: PHP (php)O next_tag()método move para a próxima tag disponível no HTML, mas também aceita um nome de tag, uma classe CSS ou ambos para encontrar tags específicas. De acordo com a especificação HTML, a pesquisa de nomes de tags e atributos não diferencia maiúsculas de minúsculas, mas os nomes de classe CSS sim.
if ( $p->next_tag( array( 'tag_name' => 'DIV', 'class_name' => 'block-GROUP' ) ) ) {
$p->remove_class( 'block-group' );
$p->add_class( 'wp-block-group' );
}Code language: PHP (php)As operações são seguras por padrão:
- remover um atributo sem primeiro verificar se ele existe,
- adicione uma classe CSS que já pode estar lá,
- defina um valor de atributo sem garantir que não esteja duplicando um existente.
Mais informações em: https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/
3. CSS personalizado para estilos globais e por bloco
Uma das funcionalidades do editor de sites é a possibilidade de inclusão de estilos personalizados via editor de sites o recurso estava disponível anteriormente o painel de personalização do WordPress, mas não tinha suporte em temas de blocos. Junto com a funcionalidade, novas propriedades no theme.json foram incluídas para permitir a inclusão de CSS personalizado.
O ideal que esse recurso funcione como a última opção para inclusão de estilos num tema WordPress. Ele foi implementada para atender alguns casos bem específicos. O principal problema dessa funcionalidade é granularização de CSS no tema.
Você pode adicionar CSS personalizado em theme.json no WordPress 6.2 seguinte forma:
"styles": {
"blocks": {
"core/button": {
"css": "background: purple"
}
}
}Code language: JavaScript (javascript)Além disso, &há suporte para o uso de elementos aninhados e pseudo-seletores, tanto no arquivo theme.json quanto na entrada CSS personalizada em estilos globais.
"styles": {
"blocks": {
"core/group": {
"css": "background:var(--wp--preset--color--base); & .cta { background:#fafafa; padding:var(--wp--preset--spacing--40); } & .wp-element-button { background-color:purple; color: white; } & .wp-element-button:hover { opacity: 0.9; }"
}
}
}Code language: JavaScript (javascript)4. Definição de altura mínima para blocos
Agora no WordPress 6.2 é possível definir a altura mínima dos seus blocos de conteúdo. Para habilitar esse recurso incluímos a propriedade minHeight no nosso theme.json.
Esse recurso permite que os usuários definam uma altura mínima dos blocos de conteúdo semelhante aos blocos de capa. Ele é útil em casos onde queremos forçar o posicionamento do nosso footer ao final do scroll da nossa página.
Essa propriedade também pode ser combina com outras propriedades de alinhamento vertical. Para habilitar o recurso globalmente no nosso theme.json trabalhamos da seguinte forma:
{
"settings": {
"dimensions": {
"minHeight": trueCode language: JSON / JSON with Comments (json)Assim o usuário terá acesso a interface de controle de altura mínima dentro do editor de blocos. Mas outra opção é fazer a definição por bloco:
{
"styles": {
"blocks": {
"core/post-content": {
"dimensions": {
"minHeight": "70vh"
}Code language: JSON / JSON with Comments (json)Para adicionar a funcionalidade em blocos personalizados devemos incluir os valores no block.json o arquivo de configuração do bloco, adicione a supports.dimensions.minHeightpropriedade e defina-a true para habilitar o controle de altura mínima. Para blocos estáticos, a regra min-height CSS será salva como um estilo embutido para postar conteúdo.
Para blocos dinâmicos, a min-height regra será injetada no style atributo retornado como parte de uma chamada para get_block_wrapper_attributes. Para obter mais informações sobre suporte de bloco de saída em blocos dinâmicos, leia a entrada no Manual do Desenvolvedor.
5. Nova função move_dir() no WordPress 6.2
Essa funcionalidade é útil para desenvolvedores de temas, anteriormente na versão 2.5 do WordPress, foi introduzida a função copy_dir() para copiar diretórios de uma pasta para outra.
Essa função apresentava problemas de recursividade em alguns cenários. Especialmente quando a ação desejada era mover um diretório. Isso necessitava a cópia e exclusão de arquivos. Mover os arquivos devem ser uma tarefa simples, por isso foi criada a função move_dir() para resolver este problema.
Como utilizamos a move_dir? Temos duas opções mover sobrescrevendo ou não os arquivos.
$result = move_dir( $from, $to, $overwrite );
if ( is_wp_error( $result ) ) {
return $result;
}Code language: PHP (php)6. Função get_page_by_title() descontinuada
No WordPress 6.2 a função get_page_by_title() será descontinuada em favor do uso da WP_Query(). A get_page_by_title() tinha um problema que era executada antes do carregamento de plugins. Além disso, apresentava problemas na consulta dos dados. A WP_Query() apresenta mais consistência na apresentação dos dados por isso o seu uso é o recomendado.
$query = new WP_Query(
array(
'post_type' => 'page',
'title' => 'Sample Page',
'post_status' => 'all',
'posts_per_page' => 1,
'no_found_rows' => true,
'ignore_sticky_posts' => true,
'update_post_term_cache' => false,
'update_post_meta_cache' => false,
'orderby' => 'post_date ID',
'order' => 'ASC',
)
);
if ( ! empty( $query->post ) ) {
$page_got_by_title = $query->post;
} else {
$page_got_by_title = null;
}Code language: PHP (php)O mesmo resultado pode ser obtido com a função get_posts() que é um wrapper da função WP_query(). Nesse caso, podemos usar o seguinte código:
$posts = get_posts(
array(
'post_type' => 'page',
'title' => 'Sample Page',
'post_status' => 'all',
'numberposts' => 1,
'update_post_term_cache' => false,
'update_post_meta_cache' => false,
'orderby' => 'post_date ID',
'order' => 'ASC',
)
);
if ( ! empty( $posts ) ) {
$page_got_by_title = $posts[0];
} else {
$page_got_by_title = null;
}Code language: PHP (php)Performance
Com as melhorias feitas na versão WordPress 6.2 os temas de blocos apresentaram melhorias nos resultados do core web vitals o tempo de resposta do primeiro byte(TTFB) no tema de blocos melhorou em torno de 20% e o carregamento do LCP 14% para páginas com imagens hero a melhoria foi em torno de 19%.
Isso graças a melhorias referentes a caching and lazy-loading de informações do WordPress.
Essa é minha lista de atualizações favoritas, mas tem muito mais atualizações nessa versão do WordPress 6.2. Para mais posts sobre WordPress confiram os últimos posts do blog:
Deixe um comentário