Gutenberg está chegando em breve ao WordPress. Sua site da Web ele está pronto? Embora ainda não saibamos exatamente qual será a forma, esse novo sistema de conteúdo será adicionado ao WordPress no futuro. Vamos dar uma olhada nos possíveis impactos que isso pode ter em seu site e nas maneiras de identificar e corrigir áreas problemáticas com antecedência.
O que é Gutenberg?
Gutenberg é um projeto WordPress que visa dar aos usuários mais flexibilidade na concepção de seu conteúdo. Essencialmente, o projeto visa substituir o editor atual, que funciona principalmente como processador de texto, por uma interface mais visual e estruturada. Atualmente, o Gutenberg é um plugin e oferece aos usuários a capacidade de editar seu conteúdo da mesma maneira que Visual Composer ou outros editores de arrastar e soltar (Drag & Drop), mas de forma simplificada e muito intuitiva.
Para saber mais sobre Gutenberg, cliquez ici.
As partes do seu site
Gutenberg é uma empresa enorme e provavelmente atingirá muitos endpoints em seu site da Web. Estas são as três áreas que exploraremos para possíveis problemas:
- Seu tema: Gutenberg vem com seu próprio conjunto de estilos para o conteúdo. O seu tema é compatível? Qual será a aparência de Gutenberg quando estiver ativo?
- Seus plugins: É possível que Gutenberg interaja com seus outros plug-ins de maneiras inesperadas. Veremos o que pode ser e o que fazer para corrigir quaisquer problemas que surjam.
- Seu conteúdo: Gutenberg afetará a maneira como seu conteúdo é exibido. Veremos como isso pode mudar a aparência de suas páginas e examinaremos algumas soluções em potencial se você estiver tendo problemas.
Configurando uma área de teste
Antes de começar, é uma boa ideia configurar uma área de teste onde você possa experimentar o Gutenberg sem colocar seu site principal em risco. Idealmente, você deve criar sua própria área de teste ou criar uma cópia local do seu site. Para obter mais informações sobre como realizar qualquer uma dessas tarefas, consulte o seguinte tutorial: Como instalar o WordPress localmente.
Se isso não for possível, você pode realizar os testes diretamente no seu site. Observe que isso pode ser arriscado, pois estaremos ativando e desativando várias partes do seu site. Se você estiver realizando o teste ao vivo, certifique-se de criar um backup do seu site antes de começar.
Depois de saber onde vai testar, vá para o diretório de plug-ins e encontre Gutenberg. Depois de instalado e ativado, continue lendo.
Teste o seu tema
Agora que você instalou o Gutenberg, vamos dar uma olhada na primeira seção do seu site que pode ser afetada: o seu tema. Se já houver problemas importantes neste ponto, como erros de banco de dados ou problemas com o painel do WordPress, vá para a seção O que fazer quando há muitos problemas.
Como Gutenberg interage principalmente com o conteúdo do site, é o suficiente para testar algumas coisas - felizmente para nós.
A primeira é que Gutenberg vem com sua própria folha de estilo e um conjunto de estilos. Verifique cada um dos diferentes tipos de páginas e modelos usados em seu site para ter certeza de que eles ainda aparecem corretamente. O objetivo principal aqui é focar nos elementos da área de conteúdo principal de suas páginas, especialmente nos blocos de conteúdo e imagem. Se você encontrar algum problema, é provável que os estilos de Gutenberg tenham precedência sobre os do seu site.
Para corrigir isso, você precisará identificar a origem do problema. Normalmente, este será um seletor CSS focado em um elemento HTML ou prioridade de estilos de Gutenberg sobre suas próprias classes. De qualquer forma, tente identificar onde o erro está ocorrendo. A seguir, descubra por que os estilos de Gutenberg estão substituindo os seus e corrija seu código para permitir que ele tenha precedência.
Tente fazer correções em seu próprio tema (ou melhor ainda, em um tema filho ou área especificada para CSS no seu tema), em vez de modificar Gutenberg. Se você editar diretamente qualquer um dos arquivos no Gutenberg, é provável que seja substituído quando o plugin for atualizado.
Da mesma forma, você deseja executar os mesmos testes em seu painel de uma vez por todas. As opções de tema e outras seções personalizadas geradas por seu tema parecem ser os maiores culpados até agora. Depois de identificar os problemas de estilo nessas áreas, geralmente você pode corrigi-los alterando ou criando um tema filho e ajustando o CSS nele.
Seus plugins funcionam?
Depois de testar seu tema, os plug-ins para seu site são os seguintes. Especificamente, fique atento aos plug-ins que fornecem códigos de acesso que você usa em seu conteúdo (por exemplo, Gravity Forms), plug-ins que afetam a aparência do seu conteúdo (por exemplo, plug-ins de acessibilidade que afetam o tamanho do texto) e plug-ins que inserem elementos diretamente em sua página (como campos personalizados avançados).
Explore os códigos de acesso
Para auditar esta área, comece reunindo uma lista de todos os códigos de acesso que você está usando, bem como as páginas nas quais eles existem. Com sua lista em mãos, visite cada uma dessas páginas para ver se funcionam conforme o esperado. Se você está tendo problemas de estilo, é provável que esteja enfrentando o mesmo problema de antes e precise reajustar seus estilos.
No entanto, se o shortcode for exibido e não o conteúdo esperado (ou seja, sua página exibe o [shortcode]em vez de fazer a coisa certa), há outra solução. Neste caso, você pode olhar para o bloco onde o shortcode está localizado e confirmar que não é considerado texto (localize e remova rótulos indesejados ao redor do shortcode). Se o problema persistir, mover o shortcode para um tipo de bloco mais apropriado deve reiniciar tudo.
Aparecimento do conteúdo
Este problema decorre do mesmo problema que já cobrimos: substituições de estilo. Identifique os elementos afetados e corrija o CSS.
Criação de elemento
A área final que examinaremos para problemas conflitantes é sobre a criação de itens. Qualquer plug-in que insere elementos HTML em uma página sem usar códigos de acesso é suspeito aqui, por exemplo, quando o PHP extrai campos personalizados do plug-in Campos personalizados avançados.
O deslize mais comum na criação de elementos gira em torno de blocos incompatíveis. Visto que Gutenberg fornece seus próprios estilos, é possível que, se seus itens forem criados dentro de um bloco não intencional, eles não sejam exibidos corretamente. A correção para isso é garantir que seu código adicione itens ao bloco onde você deseja que eles estejam.
Seu conteúdo aparece conforme necessário?
Não é tão urgente quanto os outros problemas que discutimos, mas pode haver algumas complicações na forma como seu conteúdo é exibido. A maioria desses problemas vem de pequenas mudanças de estilo ou do blocos. Para corrigir isso, você terá que brincar com o sistema de blocos até obter sua página do jeito que deseja.
O que fazer quando há muitos problemas
Você encontrou um problema que não conseguiu resolver com as sugestões deste tutorial? Não entrar em pânico ! Ainda falta algum tempo antes que Gutenberg seja integrado ao núcleo do WordPress.
Primeiro, escreva qual é o erro e quais etapas levaram a ele. Quanto mais informações você coletar, melhor. Passe todas essas informações para a equipe de Gutenberg. Com sorte, eles serão capazes de determinar o problema e corrigi-lo em uma versão futura.
Se você estava trabalhando em um site de teste, neste ponto isso é tudo que você pode fazer por enquanto. Continue verificando as notas de versão para ver se o problema foi resolvido ou, possivelmente, trabalhe para corrigi-lo sozinho.
Se você estava trabalhando em seu site ao vivo, desativar Gutenberg deve colocar tudo de volta ao normal. Se não, é hora de voltar ao backup que você fez no início do tutorial!
Boa sorte na sua instalação!
Gutenberg pretende ser uma grande mudança no ambiente WordPress, que busca mudar o conteúdo para melhor. Antes de atingir o branch principal, certifique-se de verificar se seu site funcionará com as novas mudanças. Se você tiver outros problemas além dos listados aqui, melhores soluções ou correções para qualquer coisa neste tutorial, deixe um comentário abaixo.
