O WordPress 5.0 está chegando e muitos de nós nos sentimos animados e preocupados ao mesmo tempo. O Gutenberg traz uma grande mudança na forma como usamos o WordPress e há definitivamente alguma preocupação com relação ao que acontecerá com nossos sites se precisarmos atualizar nossas instalações sem testá-lo previamente. Mas não se preocupe, temos uma postagem sobre como desativar o Editor para o WordPress Gutenberg (mesmo que temporariamente) para impedir que temas e plug-ins não suportados invadam nossos sites.
Você pode se surpreender ao saber que já estamos usando o WordPress 5.0. De fato, estamos! Como Matt afirmou no blog Make WordPress:
Se mantivermos a versão 5.0 estritamente para o Gutenberg 4.9.8 +, teremos um lançamento ao mesmo tempo grande e um não-evento em termos de código novo. É tudo testado através do uso. De certa forma, o 5.0 já está de fato por aí, com alguns hosts mais avançados já instalando e ativando o Gutenberg para novas instalações.
Isso significa que já temos o WordPress 5.0 em execução nos nossos servidores: é apenas o WordPress 4.9.8, com o Gutenberg no centro. Na verdade, isso não é tudo, porque o WordPress 5.0 vem com uma entrada adicional, que é o novíssimo tema padrão Twenty Nineteen.
Então vamos mergulhar e ver o que há de novo.
- Sobre o Gutenberg e o Twenty Nineteen
- Instalando o Twenty Nineteen
- A Aparência e Funcionamento do Twenty Nineteen
- Temas para Gutenberg: Uma Abordagem de Desenvolvedor
Sobre o Gutenberg e o Twenty Nineteen
Alguns de vocês podem não gostar do Gutenberg. Além disso, o debate sobre o novo editor está longe de terminar, mas considere o campo de aplicação do Gutenberg:
Esses blocos personalizados mudam a maneira como usuários, desenvolvedores e hosts interagem com o WordPress para criar um conteúdo da Web mais fácil e intuitivo, democratizando a publicação e o trabalho para todos, independentemente da capacidade técnica.
É isso que o Gutenberg pretende fazer, e o Twenty Nineteen dá um passo à frente, sendo construído com o Gutenberg e para o Gutenberg. Trata-se de um tema de blog minimalista, baseado em tipografia, com um layout de coluna única e pode ser usado para criar uma ampla gama de sites, desde blogs pessoais a sites de pequenas empresas.
Escrever sobre o Twenty Nineteen significa principalmente que estamos escrevendo sobre Gutenberg. No Twenty Nineteen, o Gutenberg permite que os usuários não apenas criem conteúdo, mas até construam seus sites inteiros no editor. De acordo com Allan Cole no blog Make WordPress,
O Gutenberg concede aos usuários um nível sem precedentes de liberdade para personalizar o layout e o design de seus sites. Para atingir plenamente sua visão, os usuários precisarão de uma nova geração de temas flexíveis, criados para aproveitar a liberdade criativa que o Gutenberg oferece.
Com isso em mente, o WordPress 5.0 será lançado com um novo tema padrão: o Twenty Nineteen
No tema Twenty Nineteen, o Gutenberg é mais do que um criador de conteúdo, é um criador de sites e os usuários do WordPress poderão construir seus sites inteiros aproveitando os blocos. E se o Gutenberg ainda não te interessa, a maioria dos plug-ins populares de criação de páginas também está adicionando suporte ao Gutenberg.
(Sugestão de leitura: Uma Introdução ao Tema Twenty Twenty)
Instalando o Twenty Nineteen
O tema Twenty Nineteen deve seguir o plano de lançamento da nova versão principal do WordPress. No entanto, o WordPress 5.0 deve ser lançado em 19 de novembro e é possível que uma versão funcional do Twenty Nineteen não esteja pronta até essa data. Veja todas as possíveis datas de lançamento para o WordPress 5.0. De qualquer forma, o tema está disponível para download no Github e vai ficar lá até que ele seja incluído definitivamente.
O Twenty Nineteen é baseado no _s e no gutenberg-starter-theme e vem com Sass dentro. Depois de obter o pacote .zip, extraia o tema e envie/mova a pasta de temas para o diretório /wp-content/themes da sua instalação de teste. Você também pode enviá-lo a partir do seu painel do WordPress.
Os clientes da Kinsta podem instalá-lo em seus ambientes de preparação. Se você não está com a Kinsta, ainda pode instalá lo em sua máquina local.
A Aparência do Twenty Nineteen
O layout de coluna única enfatiza o conteúdo e se adapta melhor a blocos de largura total ou blocos largos. O tema não suporta barras laterais e inclui apenas dois menus de navegação: o menu Principal e o Menu de Links Sociais, ambos posicionados no cabeçalho da página e o Menu Rodapé, localizado no rodapé.
A página do blog se parece com uma página normal de blog e imagens em destaque são habilitadas. Postagens únicas e páginas mostram melhor o potencial da versão atual do Gutenberg como um construtor de sites.
Já que é totalmente baseado no Gutenberg, as características do Twenty Nineteen dependem principalmente do ciclo de desenvolvimento do Gutenberg e da disponibilidade de blocos. Podemos adicionar blocos de widgets, blocos de códigos curtos, galerias, código HTML e assim por diante. No entanto, todos esses blocos estão longe de cobrir todas as nossas necessidades. Mas felizmente temos vários plugins que nos permitem adicionar novos blocos ao Gutenberg, como Atomic Blocks, Advanced Gutenberg e Stackable. Existem até projetos como o Gutenberg Cloud que surgiram.
Se você acha que o tema parece muito minimalista, considere que o Twenty Nineteen ainda é um trabalho em andamento. Não temos certeza se ele será incluído definitivamente até o lançamento do WordPress 5.0 e podemos esperar várias adições e resoluções de problemas no futuro próximo. Além disso, há muitos problemas ainda não resolvidos e recursos que precisam ser implementados. Por exemplo, no momento em que este artigo foi escrito, o Twenty Nineteen não oferece suporte a submenus, Cabeçalhos Personalizados e Cabeçalhos de Vídeo, mas esperamos que esses recursos sejam adicionados em um período de tempo razoável.
Se você tiver interesse no status do tema, confira a lista completa de problemas no Github.
Temas para Gutenberg: Uma Abordagem Para Desenvolvedores
Pronto para o uso, o Gutenberg fornece suporte básico para estilos de bloco em temas, e os desenvolvedores de temas são livres para substituir os estilos padrão do Gutenberg com seus estilos personalizados. Mas os desenvolvedores também podem omitir completamente estilos personalizados e decidir confiar exclusivamente no Gutenberg para customizar blocos na frente do site.
Ter um editor que se parece com o conteúdo final melhora a experiência de escrita do autor e permite que todos se sintam à vontade com a interface do usuário.
De qualquer forma, alguns estilos e recursos de apresentação do Gutenberg exigem que os temas ativamente adicionem suporte a eles e isso pode ser feito selecionando add_theme_support no arquivo functions.php quando a ação after_setup_theme é acionada. Aqui está um exemplo de uma implementação de recurso:
function mytheme_setup() {
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Abaixo está listada uma seleção destes recursos do Gutenberg, algumas das quais também são suportadas pelo Twenty Nineteen. Você encontrará a lista completa de recursos no Manual do Gutenberg.
Adicionando Suporte para Estilos de Apresentação de Bloco do Gutenberg
Um dos objetivos da equipe por trás do Gutenberg era construir um sistema flexível de customização dentro dos temas e chegar o mais próximo possível “da paridade visual entre o site acabado e o editor”. O objetivo é fornecer ao usuário uma visualização precisa do conteúdo, da mesma forma que ele será exibido no site pronto.
Para atingir esse objetivo, a equipe teve que separar estilos de apresentação e estilos estruturais. Por padrão, os estilos de apresentação não são carregados no site pronto, para evitar afetar a aparência do site. De qualquer forma, novos temas podem tirar proveito dos estilos de apresentação do Gutenberg simplesmente habilitando-os com o seguinte registro (veja o Manual para mais detalhes):
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );Como você pode esperar, o Twenty Nineteen tem suporte para os estilos de blocos do Gutenberg. No site acabado, a página de postagem única é muito parecida com a página de edição de postagem, com a única diferença da imagem em destaque, que é exibida em uma área de trabalho como uma imagem de plano de fundo cobrindo toda a janela de exibição. A imagem abaixo mostra o Gutenberg em ação na página de edição.
E aqui está o mesmo post no site acabado.
Alinhamentos Largos e de Largura Totais
O Gutenberg também oferece duas opções de alinhamento adicionais: alinhamento largo e de largura total, mas você pode selecionar o alinhamento Largo ou de Largura total apenas se o seu tema tiver suporte para eles. Em caso afirmativo, o Gutenberg mostra dois ícones adicionais de alinhamento.
A imagem abaixo mostra as imagens Align center, Wide width e Full-width em Twenty Nineteen.
Depois que adicionamos suporte a alinhamentos Largos e Largura total, devemos fornecer as declarações CSS para duas classes CSS adicionais:
// Add support for full and wide align images
add_theme_support( 'align-wide' );Depois que adicionamos suporte a alinhamentos Largos e Largura total, devemos fornecer as declarações CSS para duas classes CSS adicionais: alignfulle alignwide. Twenty Nineteen fornece os seguintes estilos:
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}
.entry-content .wp-block-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}Nota: Tenha cuidado ao usar esta opção, porque pode causar problemas se você mudar de tema (leia mais sobre este tópico no Github).
Estilo do Editor
O Estilo do Editor é um recurso introduzido com o WordPress 3.0, permitindo que os desenvolvedores de temas adicionem estilos personalizados ao editor do TinyMCE. O Gutenberg também oferece suporte para esse recurso, mas ele funciona de maneira diferente do Editor Clássico, que carrega estilos diretamente no iframe do editor. O Gutenberg adiciona seletores CSS específicos, pois não usa um iframe.
Podemos adicionar suporte para estilos de editor da seguinte forma:
// Add support for editor styles
add_theme_support( 'editor-styles' );
// Enqueue editor styles
add_editor_style( 'style-editor.css' );Esse recurso também é suportado pelo Twenty Nineteen. Você pode aprofundar seu conhecimento sobre este tópico no Estilo do Editor no Gutenberg.
Paletas de Cores do Bloco
O Gutenberg fornece um seletor de cores genérico no painel Configurações de Cor do editor. Os desenvolvedores de temas podem aprimorar essa ferramenta adicionando paletas de cores personalizadas, permitindo que os usuários capturem rapidamente a cor certa para blocos de fundo e texto. Este é um processo de duas etapas:
Primeiro, temos que fornecer uma matriz de cores:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'hot pink', 'themeLangDomain' ),
'slug' => 'hot-pink',
'color' => '#f865b0',
),
array(
'name' => __( 'classic rose', 'themeLangDomain' ),
'slug' => 'classic-rose',
'color' => '#fbcaef',
),
) );Então temos que declarar os estilos correspondentes na folha de estilo do tema:
.has-hot-pink-background-color {
background-color: #f865b0;
}
.has-hot-pink-color {
color: #f865b0;
}Os nomes de classes começam com has-, seguidos pelo slug de cor em kebab e terminam com o contexto, que pode ser color ou background-color. Atualmente, o Twenty Nineteen não suporta paletas de cores de blocos, mas podemos facilmente mudar isso com um tema filho.
Em vez disso, se você quiser desativar uma paleta de cores personalizada, adicione a seguinte linha ao arquivo de funções do seu tema ou do tema filho:
add_theme_support( 'disable-custom-colors' );Bloquear tamanhos de fonte
Um tema também pode substituir o conjunto padrão de tamanhos de fonte do Gutenberg. Aqui está um exemplo do código que você deve adicionar ao arquivo de funções:
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'extra-small', 'themeLangDomain' ),
'shortName' => __( 'XS', 'themeLangDomain' ),
'size' => 10,
'slug' => 'extra-small'
),
array(
'name' => __( 'small', 'themeLangDomain' ),
'shortName' => __( 'S', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'themeLangDomain' ),
'shortName' => __( 'M', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'themeLangDomain' ),
'shortName' => __( 'L', 'themeLangDomain' ),
'size' => 26,
'slug' => 'large'
),
array(
'name' => __( 'larger', 'themeLangDomain' ),
'shortName' => __( 'XL', 'themeLangDomain' ),
'size' => 36,
'slug' => 'larger'
),
array(
'name' => __( 'huge', 'themeLangDomain' ),
'shortName' => __( 'XXL', 'themeLangDomain' ),
'size' => 56,
'slug' => 'huge'
)
) );Os novos tamanhos de fonte serão adicionados ao seletor de tamanho de fonte nas Configurações de Texto do Gutenberg.
Em seguida, temos que declarar os estilos correspondentes na folha de estilo do tema. O nome da classe deve começar com has-, seguido pelo nome do tamanho da fonte em kebab e terminar com -font-size.
.has-huge-font-size {
font-size: 56px;
}O Twenty Nineteen não fornece tamanhos de fonte específicos e depende dos padrões do Gutenberg.
Nota: Lembre-se de que, para fazer todo esse código funcionar, você deve conectá-lo à ação after_setup_theme.
Resumo
O Twenty Nineteen poderia funcionar bem para blogs pessoais e você poderia pensar nisso mais como uma tela branca do que um tema WordPress totalmente funcional. Uma abordagem tão minimalista pode ser um pouco limitante quando se trata de criar sites para negócios e comércio eletrônico, mas não se preocupe: novos recursos devem ser implementados em breve e logo poderemos ver uma versão mais poderosa do Twenty Nineteen.
Enquanto isso, você também pode dar uma olhada em alguns temas que já estão oferecendo suporte para o Gutenberg. Atomic Blocks, GeneratePress, Gutentype e Divi, para citar alguns, mas muitos outros devem vir em breve. Com o WordPress 5.0 se aproximando tão rápido, oferecer suporte para o Gutenberg não é uma escolha e os desenvolvedores de temas devem abraçar o novo editor do WordPress o mais rápido possível para se manter à frente da concorrência.
Você já instalou o Twenty Nineteen ou qualquer tema que ofereça suporte ao Gutenberg? Gostaríamos de saber sua opinião nos comentários abaixo.
Carlo é um apaixonado por webdesign e desenvolvimento frontend. Ele tem mais de 10 anos de experiência com WordPress e colaborou com diversas universidades e instituições educacionais na Itália e na Europa. Carlo já publicou inúmeros artigos e guias sobre WordPress, tanto em sites italianos quanto internacionais, além de revistas impressas. Você pode seguir ele no LinkedIn e no X.
Deixe um comentário