A evolução do WordPress levou tempo para amadurecer, mas ele deixou de ser uma simples plataforma de blog para se tornar um sistema de gerenciamento de conteúdo (CMS) robusto que praticamente administra a web. Os maiores avanços ocorreram na criação de designs de sites. A Edição Completa de Sites (FSE, Full Site Editing) do WordPress é uma maneira ambiciosa de colocar ferramentas complexas nas mãos de todos.
Este guia abrangente explorará a história e a funcionalidade da edição completa de sites no WordPress. O objetivo final é mostrar como o FSE funciona e permitir que você desenvolva seus próprios designs de site como os profissionais.
Um breve histórico da criação de design e layout no WordPress
Conhecer a evolução do design de sites e layouts no WordPress é essencial para compreender a importância do FSE. A principal ferramenta, central para o ponto em que estamos agora, é o Editor Clássico.
É claro que esse editor nem sempre foi considerado “clássico”. Ele sempre foi o Editor TinyMCE — o padrão desde a primeira versão do WordPress até por volta de 2018. É um editor de texto simples do tipo O Que Você Vê É O Que Você Obtém (WYSIWYG) que permite inserir conteúdo e HTML básico, juntamente com alguns estilos de formatação. Na verdade, você ainda pode obter o Editor TinyMCE, pois ele é uma ferramenta comercial:
As principais desvantagens do Editor TinyMCE são a falta de opções de visualização de frontend e menos flexibilidade do que você gostaria. Os frameworks de temas se tornaram uma alternativa viável e poderosa. Obviamente, o Genesis Framework do StudioPress ainda está conosco, mas havia alguns outros, como o Thesis.
Aqui você pode ver como passamos da edição de texto para web design visual. O framework oferece opções no backend do WordPress, o que permite alterar aspectos do frontend. Além disso, você obtém mais funcionalidades “bare metal” para fazer outras alterações, como hooks e filtros, suporte a templates, e outras.
No entanto, isso ainda não era muito acessível para o usuário padrão, e foi aí que plugins de construtores de páginas se tornaram populares. Você os usaria junto com o TinyMCE/Editor Classico para obter um sistema drag and drop para projetar seu site. Esses plugins são praticamente os mesmos que eram em 2011. O Divi e o Beaver Builder ainda dominam, embora o Elementor também seja um gigante:
Você vai gostar de ler a próxima seção para entender por que temos alternativas ao Editor TinyMCE e a plugins de construtores de páginas.
O Editor de Blocos e a edição completa de sites no WordPress
O WordPress é o número um em popularidade, mas, para chegar lá, teve que defender seu título. Ao longo dos anos, muitas outras plataformas saturaram o mercado.
Squarespace, Wix, Medium e muitas outras querem os mesmos público e base de usuários do WordPress, e, até o Editor de Blocos, todas tinham uma experiência de edição muito melhor.
Essa era uma grande preocupação para a administração do WordPress, visto que outras plataformas na época estavam ganhando tração mais visível. A concorrência também tinha interfaces modernas, visuais e de alto desempenho, mesmo para controle simples de layout.
O Editor de Blocos é uma maneira modular de criar artigos e páginas do seu site, embora também tenha desvantagens. Para começar, seu escopo limitado significa que usá-lo provavelmente requer um plugin de construtor de páginas se você quiser fazer alterações mais “detalhadas”. Você também precisaria de conhecimento de desenvolvimento para criar um site completo, o que é uma barreira criativa para a qual a equipe do WordPress tem uma solução.
O que é a edição completa de sites no WordPress (FSE)
A edição completa de sites no WordPress representa a última e mais avançada fronteira para o desenvolvimento do seu site. Ela se baseia no uso de Blocos para montar seu design e abrange mais do que artigos e páginas individuais. Em essência, o FSE permite gerenciar todos os aspectos do design do seu site WordPress usando uma interface unificada e intuitiva.
Essa agora é a maneira “oficial” de editar seu site. Ele coloca todos os aspectos do seu site sob sua alçada:
- Edição de navegação. O método antigo, que usava a tela de construção Aparência > Menus agora está integrado ao Editor de Sites.
- Estilos globais. Você tem maior controle sobre a aparência de todo o seu site. Isso inclui cores, tipografia, espaçamento e muito mais.
- Edição de templates. Antes você precisava de conhecimentos de desenvolvimento e codificação, como PHP, HTML e CSS. Agora, você pode usar o Editor de Sites para criar e modificar templates para as diferentes partes do seu site sem necessidade de código.
- Padrões de Blocos. Considere-os como elementos de design reutilizáveis usando coleções de Blocos que você pode inserir em seus layouts.
Dada a evolução do editor, algumas funcionalidades também estão desaparecendo. Por exemplo, você não precisa mais de áreas de widgets, embora o WordPress ainda as use como funcionalidade legada para temas que não sejam de Blocos.
Mais tarde voltaremos a falar sobre o que a edição completa de sites no WordPress o ajuda a obter. Antes disso, vamos explicar melhor por que você precisa do FSE.
Por que o FSE está no WordPress
A equipe do WordPress tem alguns motivos para introduzir o FSE. Alguns deles são considerações técnicas. Por exemplo, o Editor de Blocos não nos permite editar todos os aspectos do site quando a funcionalidade deveria estar lá em primeiro lugar.
É difícil entender por que demorou tanto tempo para que pudéssemos trabalhar com estilos de templates sem a necessidade de código. Entre o Editor Clássico, frameworks, plugins de construtores de páginas e o Editor de Blocos, nunca tivemos essa oportunidade. O FSE corrige isso de forma nativa no WordPress.
Essa simplificação unifica a experiência de edição e a coloca sob o controle da equipe principal do WordPress, em vez de desenvolvedores terceiros. Isso também significa que a curva de aprendizado é consistente. Entre conteúdo, layout e design, você tem uma experiência familiar de uma tela para a outra.
Essa experiência também traz longevidade. A edição completa de sites no WordPress não desaparecerá; ela simplesmente evoluirá com o tempo. Isso dá à plataforma uma base para se adaptar a qualquer coisa que a equipe de desenvolvimento central deseje trazer para o WordPress.
De modo geral, essa capacitação se estende dos desenvolvedores aos usuários finais. A edição completa de sites no WordPress oferece a todos maior controle sobre as alterações de design que desejam fazer sem depender de desenvolvedores, personalizações complexas ou conhecimento de codificação.
As alternativas ao FSE
Para a equipe do WordPress, o FSE não é apenas o presente; é o futuro da plataforma. No entanto, você precisará de um tema compatível para usá-la (mais sobre isso depois). Além disso, outras empresas relacionadas ao WordPress podem não concordar, especialmente aquelas com produtos concorrentes.
Por exemplo, os desenvolvedores web do WordPress argumentariam que confiar o design do seu tema a alguém com experiência é uma boa ideia. Concordamos em muitos casos, especialmente se você tiver necessidades complexas, o orçamento certo, e tempo.
É claro que o Editor de Blocos ainda é viável para a maior parte da criação e personalização de conteúdo. O salto deste para a edição completa de sites será apenas um pequeno passo, e você provavelmente já o utiliza:
Muitos usuários recorrerão ao Editor de Blocos na maior parte do tempo, e então usarão outra solução. Adicionar um plugin de construção de páginas proverá algumas das funcionalidades que faltam ao Editor de Blocos. Divi, Elementor, Beaver Builder, Brizy e muitos outros têm ótimos conjuntos de recursos e permitem personalizações e desenvolvimento mais profundos:
Para ter uma experiência totalmente oposta à edição completa de sites no WordPress e voltar ao ponto de partida, você pode optar por um CMS totalmente novo: ClassicPress.
A filosofia do projeto é que a evolução do WordPress é uma ótima ideia, com exceção do Editor de Blocos e, por extensão, do FSE. Assim, a bifurcação do ClassicPress não o inclui. Em vez disso, você criará sites usando o Editor Clássico ou o TinyMCE, exatamente como no passado.
Trata-se essencialmente de uma solução voltada para a imaturidade do Editor de Blocos em seu primeiro lançamento. Na época, o conceito fazia sentido teórico. No entanto, considerando a atual experiência de edição no WordPress, há poucos motivos para optar pelo ClassicPress.
Como funciona a edição completa de sites no WordPress
Em poucas palavras, a edição completa de sites no WordPress estende a funcionalidade do Editor de Blocos a todo o site. Para usar o FSE, você precisa de um “tema de Bloco” ou “tema de FSE” compatível com ele. Falaremos mais sobre isso depois.
Uma visão mais ampla de como o FSE funciona é simples:
- O FSE usa Blocos. Assim como na iteração atual do editor do WordPress, todo o seu site usa Blocos para cada componente. Aqui, tanto os elementos de conteúdo individual quanto os componentes estruturais maiores (como cabeçalhos e rodapés) usarão Blocos.
- Você pode editar templates de página no WordPress. Não é mais necessário conhecimento de PHP para alterar arquivos de template. Em vez disso, você pode criá-los e editá-los no Editor de Sites.
- Existe acesso a ferramentas de design para todo o site. Veremos o painel Estilos Globais mais adiante, mas ele permite controlar elementos de design que afetam todo o seu site. Em muitos casos, você não precisará de CSS personalizado para implementar sua visão.
- Padrões de Blocos permitem que você crie rapidamente. Assim como no Editor de Blocos, há layouts para seções comuns do site que você pode inserir e personalizar sem restrições.
- O arquivo theme.json é central para o FSE. Esse arquivo de configuração definirá os estilos e ajustes fundamentais para o seu tema. Serve como ponto de partida para personalizar ainda mais o seu site, mas também pode ser o “hub” para o seu desenvolvimento.
A maioria dos usuários não executará uma versão do WordPress anterior à 5.9, mas, se você a tiver, precisará fazer a atualização para aproveitar o FSE. Como já mencionamos, também precisará de um tema compatível. Vamos discutir isso rapidamente.
Escolha de um tema FSE adequado
Felizmente, escolher um tema de Bloco requer o mesmo nível de cuidado que qualquer outro tipo de tema. Você precisará analisar algumas facetas objetivas para garantir o download de uma solução sólida:
- Verifique se há atualizações regulares da base de código do tema.
- Descubra o que outros usuários pensam sobre o tema por meio de classificações e avaliações.
- Certifique-se de que o desenvolvedor ofereça o nível certo de suporte para as suas necessidades.
Como a edição completa de sites no WordPress é uma novidade na plataforma, há menos opções de temas disponíveis pra você. No entanto, isso não significa que seja difícil encontrar qualidade. Muitos desenvolvedores de grande porte têm suas versões de temas de FSE/Blocos. Uma das primeiras foi a versão FSE do Neve, da ThemeIsle:
A versão “tradicional” ou “clássica” do tema usa o antigo Personalizador da tela Aparência. Essa versão integra o Editor de Sites por completo e oferece melhor desempenho subjetivo.
Há outros temas de Blocos para conferir, como o Portfolio WP e o Mugistore. Contudo, o Ollie é provavelmente o melhor de todos:
Ele se compromete sem hesitar com a edição completa de sites do WordPress. Possui um assistente de integração muito intuitivo e até mesmo uma versão premium que inclui muitos elementos da Biblioteca de Padrões e templates.
Até mesmo o tema padrão Twenty Twenty-Four é uma opção viável para o seu site agora:
A capacidade e a profundidade do Editor de Sites nos permitem construir sobre (e ampliar) temas que geralmente exigem muito código e recursos. Ele democratiza a capacidade de criar e desenvolver temas, e a interface principal é o primeiro ponto de contato para isso.
Visitando a interface principal do FSE
Para encontrar o Editor de Sites, navegue até Aparência > Editor no WordPress:
Essa tela é bem simples. No lado direito, você verá a visualização do layout. Você pode clicar nele para abrir a interface do Editor de Sites para sua página inicial. À esquerda está um conjunto de links para outras páginas de edição para tarefas específicas. Em breve examinaremos essas telas em detalhes.
Antes de entrarmos em cada uma das cinco telas do FSE, observe que você pode sair do Editor de Sites usando a marca do WordPress no canto superior esquerdo da tela. Como alternativa, você pode clicar na seta de “voltar” da página principal Design:
Com isso esclarecido, vamos começar a usar o FSE.
Os 5 pilares da edição completa de sites no WordPress
Agora, examinaremos cada tela do editor de sites na ordem em que aparece em sua navegação. Na verdade, isso vai nos levar a discutir essa própria tela!
1. Navegação
A página Navegação substitui a tela Aparência > Menus. Após entrar nela, você verá uma lista de artigos e páginas do seu site:
Se esse for um novo site, você verá todos os seus posts e páginas aqui. Isso pode ser confuso, porque representa seu menu de navegação principal. Perto do cabeçalho Navegação, abra o menu Ações. Isso lhe dará opções para editar o menu, alterar o nome, excluí-lo ou duplicá-lo:
Se você clicar em Editar, será aberta uma versão do Editor de Blocos que contém o menu como um Bloco de Navegação:
Na barra lateral, você tem opções para mover cada entrada pra cima ou pra baixo, removê-la do menu ou criar um submenu a partir dela:
Cada entrada no menu usa um Bloco Link de Página, que virá com suas próprias opções. Você tem ajustes de formatação em linha, juntamente com configurações de estilo da barra lateral:
Observe que você pode adicionar aqui imagens integradas, submenus, e muito mais. Isso é mais flexível do que a maneira clássica de criar navegação. Para simplesmente adicionar um item ao menu, clique no ícone de Mais e selecione seu artigo ou página:
Após salvar as alterações, você verá que a navegação refletirá seus ajustes. Para criar outros menus, você pode usar o link Ações > Duplicar na página Navegação.
2. Estilos
A tela Estilos é como você controla a aparência global do seu site. A barra lateral oferece algumas paletas diferentes e configurações de tipografia para diferentes designs:
Ao clicar em qualquer um deles, você verá o design em vigor no seu site. No entanto, há um ícone de “lápis” de edição na parte superior da barra lateral para fazer alterações adicionais no Editor de Sites:
Cada uma das opções da barra lateral aqui abrange cores, layouts, tipografia, e até mesmo configurações de sombra. Por exemplo, você pode selecionar fontes para todo o site e aplicá-las a vários elementos do seu design:
Aprofundando-se mais nos menus, muitas vezes haverá opções adicionais para brincar, como espaçamento, cores e outras. A seção Layout permite personalizar as dimensões da sua área de conteúdo principal, bem como o preenchimento e o espaçamento entre Blocos:
Se quiser ver como essas alterações ficam sem navegar pelo site, você pode usar o ícone do “olho” para abrir o Livro de Estilo. Essa é uma ferramenta de visualização útil que os designers vão adorar:
Por fim, embora não vamos nos concentrar nisso aqui, você também pode personalizar a aparência de cada Bloco do seu site. Por exemplo, você pode usar o estilo global de um Bloco de Parágrafo. Novamente, quando terminar, você poderá salvar as alterações, e elas serão aplicadas ao seu site.
Como usar o arquivo theme.json com a edição completa de sites no WordPress
Antes de passar para a próxima tela do FSE, você deve conhecer o arquivo theme.json. Basicamente, essa é a versão para desenvolvedores das telas Estilos.
Ele permite que você defina os estilos padrão para o seu site e seus Blocos, e você o usará como um arquivo de configuração. Além disso, usa o formato JSON, portanto, oferece uma experiência menos pesada em termos de código do que no passado.
Por fim, saiba que tudo o que você pode fazer no theme.json também pode ser feito no Editor de Sites.
3. Páginas
A tela Páginas duplica a funcionalidade das telas clássicas de Artigos e Páginas no painel WordPress. Por exemplo, você verá uma lista de status que filtram suas páginas em Publicadas, Programadas, Rascunhos e outras:
Cada página tem ações adicionais, como Editar, Exibir, Renomear e Excluir. Você também pode editar uma página usando o ícone de “lápis”. Na parte superior da lista há um botão Adicionar nova página que faz o óbvio.
Se você já usa o Editor de Blocos, essas telas lhe parecerão mais familiares. No entanto, embora aqui você tenha a mesma funcionalidade de sempre, o Editor de Sites oferece alguns Blocos de Tema adicionais para ajudá-lo a criar seu site. Eles abrangem casos de uso típicos, como a adição de uma logo do site, navegação, autores, comentários e mais:
Um deles, o Bloco Query Loop, pode ajudar a realizar tarefas que normalmente precisariam de PHP para realizar. Por exemplo, como ele permite exibir artigos com base em parâmetros específicos, você pode exibir seus artigos mais recentes ou até mesmo criar um portfólio. No entanto, nada disso pode ser feito sem as duas últimas telas do Editor de Sites.
4. Templates
Templates são um elemento básico do desenvolvimento WordPress. São layouts reutilizáveis que ajudam a definir a estrutura das várias partes do seu site. Normalmente é necessário ter conhecimento de PHP, mas você pode personalizar todos eles (e criar novos) sem código no Editor de Sites.
O trabalho com templates segue a mesma abordagem dos artigos e páginas: você usará o Editor de Sites para adicionar Blocos ao template, e daí salvará as alterações. Obviamente, essas alterações serão aplicadas a todas as páginas que usam o template em questão.
Para criar um novo template, clique no botão Adicionar novo template:
Isso fará com que você passe por um assistente rápido para selecionar o tipo de template que deseja criar e um Padrão de Bloco adequado para iniciar o design. Esses padrões são o foco da nossa última seção.
5. Padrões
Os Padrões de Bloco são coleções relacionadas de Blocos que desempenham funções específicas em seu site. Por exemplo, você pode inserir um padrão de cabeçalho completo com logo, navegação e título do site:
Criá-los é simples, embora, sem o editor de sites, você precisaria registrar esses padrões usando PHP. Agora, porém, você pode usar a página Padrões:
No lado esquerdo, você verá todos os padrões disponíveis divididos em pastas chamadas “tipos”. Esses padrões são uma ótima maneira de criar rapidamente o design de um site, e muitas vezes têm uma aparência fantástica.
O botão Adicionar novo padrão abre o editor e permite que você mesmo crie essas seções. Isso permite criar elementos reutilizáveis para o seu site, o que representa uma maneira sustentável e autônoma de desenvolver sites para você e qualquer outra pessoa com quem trabalhe.
Dicas sobre como usar a edição completa de sites no WordPress para criar designs
Há muito a ser dito quando se trata da edição completa de sites no WordPress, e não podemos cobrir tudo o que você pode fazer com ela. No entanto, podemos lhe dar algumas dicas para aproveitar ao máximo o FSE.
Por exemplo, você pode exportar seus templates e estilos para reutilizá-los em outros sites. Para fazer isso, acesse o editor de sites para qualquer artigo ou página e clique no menu Opções na barra de ferramentas superior. No menu suspenso, escolha Exportar:
Isso lhe fornecerá um arquivo ZIP do seu tema, e, se você precisar importá-lo, poderá fazê-lo usando o plugin WordPress Importer.
O ícone Pesquisar nas telas do editor de sites e a barra de pesquisa na barra de ferramentas do Editor de Blocos dão a você acesso à Paleta de Comandos ou à Central de Comandos do WordPress. Se você usa editores de código, entenderá como isso funciona. É uma maneira de chegar a praticamente qualquer lugar dentro do Editor de Sites usando uma consulta de pesquisa contextual e até mesmo executar comandos:
Esse recurso pode acelerar o seu desenvolvimento e reduzir o número de ações que você precisa executar com teclado e mouse. Você pode adicionar, excluir e editar todos os tipos de elementos do site a partir daqui, além de alternar entre diferentes visualizações e trabalhar com padrões.
Resumo
A edição completa de sites no WordPress representa a maneira atual de projetar seu site sem código. É um avanço significativo em relação às iterações anteriores de edição de conteúdo, oferecendo-lhe um conjunto abrangente de opções para brincar.
Gostamos da sua flexibilidade: os proprietários de sites comuns não precisam tocar em uma linha de código e podem trabalhar nas telas do Editor de Sites. Os desenvolvedores têm acesso ao arquivo theme.json, que abordaremos em um artigo futuro. Independentemente disso, agora temos o auge da criação de um site WordPress que atenda com exatidão às suas preferências.
Quer começar a usar a edição completa de sites em seus projetos no WordPress? Diga-nos o que pensa na seção de comentários abaixo!
Deixe um comentário