Edição completa do site WordPress: um guia detalhado (2024)

O WordPress 5.8 primeiro provocou a edição completa do site com o editor de modelos. E agora, a versão mais recente permite que você experimente de forma abrangente todos os aspectos desta grande atualização.

Os recursos de edição visual e recursos fáceis de usar do FSE tornam muito mais fácil trabalhar com diferentes partes do seu site. Mas quanto tempo leva para se familiarizar com essas novas mudanças e aproveitar a experiência de edição perfeita? Continue lendo para descobrir tudo o que você precisa saber sobre a edição completa de sites WordPress neste blog.

Antes de começarmos a aprender as novas mudanças introduzidas com a edição completa do site, vamos aprender um pouco sobre a edição completa do site WordPress.

O que é a edição completa do site WordPress?

A edição completa do site basicamente gira em torno do conceito de blocos. Anteriormente, a área de conteúdo do site podia ser editada através de blocos. Com a edição completa do site, cada parte do seu site será tratada como um bloco.

Esta grande atualização permite que os usuários trabalhem com os elementos globais e de página em uma única interface. Além disso, introduziu novas ferramentas de desenvolvimento e um novo arquivo de configuração de tema.

Depois de atualizar sua versão do WordPress para 5.9, você será solicitado a ativar um tema completo de edição do site, por exemplo, Twenty Twenty-Two. E depois disso, você pode construir um site inteiro usando apenas os blocos de Gutenberg.

Como a edição completa do site beneficia você?

A edição completa do site torna a construção e o design de um site WordPress mais fácil do que nunca. Você pode usar o mesmo editor para definir os elementos globais e fazer alterações na página.

O que são elementos globais?

Elementos globais são os elementos, contêineres e colunas que podem ser implantados em todo o seu site quando atribuídos.

Este novo método economiza tempo, permitindo que você faça alterações no site ou em qualquer página individual. Você vê todas as alterações ao vivo durante a edição, portanto não precisa alternar entre editores para rastrear essas alterações.

Conseqüentemente, o design do seu site melhora à medida que você trabalha simultaneamente nos níveis global e de página.

Como ativar a edição completa do site no WordPress 6.4

A edição completa do site não está ativada na versão WordPress 6.4 por padrão. No entanto, você pode ativar a funcionalidade seguindo as etapas fáceis abaixo:

Observação: se estiver usando qualquer versão do WordPress anterior à 5.9, você terá que atualizar sua versão do WordPress primeiro e, em seguida, ativar um tema FSE para usar o recurso completo de edição do site.

• Vá para o painel do seu site.
• Você verá sua versão e tema atuais do WordPress.

• Como mostra a imagem acima, estamos usando o tema “ Twenty Twenty-One ”, então teremos que atualizá-lo.
• Clique em Aparência > Temas .

• Localize o tema “ Twenty Twenty-Two ” ou qualquer outro tema FSE e clique em Ativar .

• Uma vez ativado, clique em Aparência para ver uma nova opção de “ Editor ”.
• Clique em Editor .

• Pronto, a funcionalidade completa de edição do site foi ativada. Agora comece a brincar com os blocos e crie seu site.

Edição completa do site WordPress: o que há de novo?

A edição completa do site simplificou a construção e o design de sites WordPress, permitindo que os usuários construíssem seus sites do zero, sem linhas de codificação.

Seu editor de site permite criar, visualizar e editar os modelos. Você pode selecionar os estilos padrão por meio da interface de estilos e usar os blocos para construir todo o seu site. E tem mais, então vamos conhecer as novas mudanças introduzidas no editor completo do site.

Criação de sites

Conforme mencionado anteriormente, com a edição completa do site, cada parte de uma página ou modelo é tratada como um bloco. Você pode construir uma página por meio de partes de modelo ou usar modelos únicos.

Além disso, você pode criar, editar e visualizar os modelos e partes do modelo no novo editor do site. Além disso, você pode encontrar a lista de modelos:

Links do menu personalizador e widget

Ao ativar o tema completo de edição do site, o personalizador e os widgets desaparecerão da guia Aparência no painel do WordPress.

Isso acontece porque o tema completo de edição do site é baseado apenas em blocos, portanto as guias do personalizador e dos widgets ficam ocultas. No entanto, você pode fazê-los reaparecer se ativar qualquer plugin que use um personalizador.

Tipografia e cores padrão

O editor do site apresenta um novo painel da barra lateral chamado estilos, localizado no canto superior direito da tela. Clique nele para selecionar a tipografia, cores e layout.

A opção de blocos na aba “estilos” permite personalizar a aparência de blocos específicos e de todo o seu site. Você encontrará opções como parágrafos, imagens, títulos, botões, listas, etc., em blocos.

O que há de novo para autores de temas

Antes do FSE, os desenvolvedores usavam PHP para codificar um tema WordPress. Agora, eles podem se concentrar mais em HTML e bloquear marcação.

Em vez do personalizador, os padrões de bloco e estilos globais têm mais importância no design.

Padrões de bloco

Padrões de bloco são um grupo de componentes/blocos que formam um layout reutilizável. Além disso, o FSE apresenta um explorador de padrões para visualizar padrões e usá-los em seu conteúdo por meio de um inseridor de bloco. Isso permite adicionar várias cópias de um padrão a qualquer página e editá-las também.

Além disso, o explorador de padrões não se limita aos padrões de tema do seu site, mas você pode escolher qualquer padrão da biblioteca de padrões do repositório do WordPress.

Os padrões de bloco são úteis para desenvolvedores de temas, pois as opções de fonte e cor são gerenciadas por meio de “ Estilos ”, facilitando a criação de padrões sem qualquer necessidade de codificação no personalizador.

Como criar e registrar os padrões de bloco

Antes de criar o padrão de bloco, você deve decidir a finalidade do seu bloco. Seria um formulário, seção de recursos ou seção heróica? Depois de decidir, combine os blocos no editor para criar um padrão. Por fim, use a marcação do bloco como valor para registrar o padrão do bloco.

Você pode registrar os padrões de bloco usando uma função PHP Register_block_pattern com um gancho init. Siga os passos abaixo:

• Crie uma pasta no seu tema e nomeie seus padrões.
• Crie o arquivo PHP com o seguinte código dentro:

 função prefix_block_pattern() {
registrar_bloco_pattern(...);
}

add_action('init', 'prefix_block_pattern');

• Inclua este arquivo em seu functions.php.

Você deve usar o conteúdo padrão em padrões de bloco?

Os usuários preferem algum conteúdo de demonstração para substituí-lo pelo seu, facilitando o processo. Adicione imagens de demonstração para “notificar os usuários” para substituí-las. Como as imagens são armazenadas localmente no tema, as imagens de demonstração serão perdidas se um usuário alterar o tema.

Para saber mais sobre como criar padrões, leia a documentação detalhada da equipe de treinamento do WordPress.

Blocos Temáticos

Antes do FSE, o posicionamento dos elementos era feito por meio de templates no editor de blocos. No entanto, você pode adicionar todos esses elementos e definir sua posição por meio de blocos temáticos com o editor completo do site.

Você pode controlar o layout da página por meio de blocos de tema, o que o liberta dos limites definidos pelo seu tema e seus modelos. O FSE leva essa funcionalidade um passo adiante, permitindo que você use vários elementos de tema em páginas diferentes.

Além disso, você também pode combinar o editor de blocos e os blocos temáticos criando modelos personalizados e tendo controle total sobre como os visitantes do seu site acessam o seu conteúdo.

Reativar e atualizar plug-ins

Os plug-ins melhoram a experiência do usuário e facilitam para os desenvolvedores fazer alterações rápidas. Quase todos os sites WordPress responsivos e fáceis de usar contam com alguns plug-ins. No entanto, esses plugins devem ser atualizados a cada atualização do WordPress, pois algumas versões podem não suportá-los.

A prática recomendada é verificar regularmente sua lista de plug-ins e ver quais deles precisam ser atualizados. Com o FSE, você deverá revisitar sua lista de plug-ins e ver se algum deles é incompatível ou precisa de atualização.

Talvez você também precise reativar alguns dos plug-ins desativados anteriormente para uma experiência sem problemas.

Modelos

Modelos são layouts contendo padrões de blocos, atributos, etc., e faziam parte dos arquivos de tema do WordPress. Normalmente, eram arquivos PHP contendo algum HTML nas versões anteriores do WordPress.

No entanto, com o FSE, esses arquivos de modelo não são arquivos HTML que contêm a marcação do bloco. Eles agora incluem a área de conteúdo e partes do modelo e também podem ser reutilizados em outros modelos.

Como construir temas usando o editor de site completo

Construir temas com o editor completo do site tornou-se mais fácil do que nunca. Usando diferentes blocos e padrões no editor do site, você pode criar layouts de sua escolha.

Depois de finalizar seu design, você pode exportá-lo como um arquivo .zip.

Siga as etapas abaixo para editar seu tema e exportá-lo.

• Vá para o seu painel do WordPress
• Clique em Aparência > Editor
• Edite o tema de acordo com suas necessidades
• Clique nos três pontos verticais no canto superior direito da tela
• Clique em Exportar para exportar seu tema como um arquivo compactado

Nota: O arquivo compactado contém uma pasta chamada tema e duas subpastas chamadas modelos e peças.

Theme.json — Arquivo de configuração do tema

theme.json é um novo arquivo de configuração de tema que é útil tanto para temas em bloco quanto para temas clássicos. Este arquivo pode ajudá-lo a ativar e desativar diferentes recursos, atribuir valores à interface “ Estilos ” e criar propriedades CSS personalizadas.

Os desenvolvedores de temas usam JSON para definir as propriedades padrão como cores, fontes, preenchimento, largura do conteúdo e muito mais.

O que a comunidade WordPress pensa do FSE?

Esta grande atualização inclui algumas grandes mudanças, como você pode ver. Entramos em contato com vários especialistas em WordPress para saber sua opinião sobre a edição completa do site, e aqui está o que eles têm a dizer:

Robert Jacobi – Diretor, WordPress da Cloudways

Desde o lançamento do Gutenberg, tem havido uma melhoria constante na abstração das complexidades do desenvolvimento web. Mais e mais usuários podem agora acessar facilmente o WordPress para criar e publicar conteúdo incrível. O ponto culminante dessa atenção à experiência do usuário é a Full Site Editing (FSE). Desde a última vez, o FSE foi lançado como parte do núcleo do WordPress.

Tenho experimentado o FSE durante os betas, release candidate e agora o FSE “ final ”. Por que “final” entre aspas, porque este é apenas o primeiro passo que permitirá que provedores de temas e outros plug-ins desenvolvam um ecossistema FSE totalmente novo.

Quanto às minhas experiências iniciais, no geral, o FSE é uma atualização incrível dos blocos com os quais estamos acostumados nos últimos anos. Ser capaz de gerenciar os componentes de um tema sem um construtor de páginas típico tem sido uma experiência libertadora. A troca de temas, na maioria das vezes, funciona conforme o esperado, e seu trabalho com um deles pode ser surpreendentemente bom.

Mas nem sempre, como acontece com muitos recursos que estão em seu primeiro lançamento, há puxões de cabelo e soluços ocasionais. Os espaços de bloco nem sempre são limpos e podem tornar a experiência de edição confusa, mesmo que tudo funcione conforme o esperado no front-end. É claro que esses problemas diminuirão constantemente e surgirão funcionalidades mais robustas.

Embora possa haver preocupações sobre como essa facilidade de uso afetará os desenvolvedores, sinto que a preocupação é exagerada. A tecnologia deve se esforçar para estar mais conectada à forma como a maioria dos humanos trabalha e entende a tecnologia. Esta abstração da funcionalidade básica é esperada e necessária. Fornecedores terceirizados certamente encontrarão maneiras de abraçar e ampliar esta primeira etapa.

Boné Milana – Especialista em XWP

Não tenho certeza se devo ser chamado de especialista, mas sempre tenho uma opinião.

Penso que já é tempo de a comunidade em geral perceber que Gutenberg e a FSE vieram para ficar. Todas as bufadas do mundo não mudarão esse fato nem o ajudarão a atingir seus objetivos.

Passamos do ponto de “quem me perguntou se estou bem com isso e quem decide sobre o que será adotado e por quê”. Agora é apenas uma questão de sua própria sobrevivência no mundo empresarial WordPress.

Por outro lado, se todos nós tentarmos descobrir como usar o Gutenberg (não é tarde, ainda está em beta) e aprendermos como implementar as vantagens que ele oferece nas configurações apropriadas (porque ainda não é obrigatório usar em todos ocasiões, pelo menos ainda não) haverá vários benefícios:

• Alguns bugs e falhas serão revelados mais cedo e serão corrigidos
• A lista das funcionalidades desejáveis ​​será compilada mais cedo
• O processo de documentação ficará mais rápido
• Cursos de qualidade e outros conteúdos serão lançados mais cedo
• Todos nós estaremos prontos para a transição FSE a tempo
• Não vamos repetir o erro que cometemos com Gutenberg ao não estarmos preparados para o lançamento

Além disso, em retrospecto, Gutenberg foi o primeiro caso na história do código aberto onde PHP e React foram agrupados em um CMS. E um CMS que roda 40% de toda a internet, para ser mais preciso.

Se alguém esperava que uma tarefa tão grande acontecesse sem contratempos, gostaria de lembrá-lo de como sua última tentativa de combinar PHP e Javascript fracassou.

Aleksandar Predic – Consultor Técnico: Blexr | Especialista em WordPress

No passado, me pediram para reescrever todo o código de um grande site. Percebi os seguintes pontos enquanto trabalhava na tarefa:

• Gutenberg é estável o suficiente para ser usado sem desafios significativos
• Encontrei quase tudo que precisava para concluir a tarefa na documentação (bravo para a equipe de documentação) ou pesquisando no código Gutenberg
• Os resultados de desempenho do site foram excelentes, e Gutenberg contribuiu para esse resultado envolvendo menos scripts

Os padrões de blocos são fantásticos. Muito útil. Em vez de desenvolver black by blood a partir da lista que a equipe de conteúdo compilou, salvei os padrões em um arquivo, pronto para ser usado. Isso me economizou toneladas de horas de desenvolvimento e horas de manutenção. Os padrões de bloco são algo mantido pela equipe principal, não pelos desenvolvedores.

Além disso, os padrões permitem desenvolver designs complexos em módulos, que você pode posteriormente montar com padrões de blocos. Isto é particularmente importante porque simplifica os módulos (blocos individuais) e reduz o número de possíveis bugs, facilitando assim o teste e a manutenção dos módulos.

Também trabalhei em um design híbrido para uma página de modelo de revisão. Os requisitos foram configurados de forma que fossem necessárias 4 seções diferentes no backend para adicionar o conteúdo planejado. O layout incluía 4 guias de conteúdo diferentes com tipos de conteúdo totalmente diferentes.

Pesquisei possíveis formas de implementar o FSE na execução das tarefas. Porém, não consegui executar minha ideia porque, naquele momento, a infraestrutura não estava preparada para o FSE e a documentação não estava concluída.

O FSE seria uma solução ideal para esse caso específico. Sem o FSE, tive que construir uma solução híbrida usando blocos em uma seção de conteúdo administrativo. Gutenberg ajudou muito porque, no final, consegui um fluxo de trabalho onde o usuário poderia preencher a página inteira com os dados que a API REST havia coletado, tudo com um clique.

Como desenvolvedor, vejo casos em que o FSE não seria ideal. Muitas empresas não ficam entusiasmadas com o fato de um usuário (um editor de conteúdo, por exemplo) poder clicar no site e editar cada componente, anulando assim muito trabalho realizado pela equipe de design e desenvolvimento.

Empresas com assistentes virtuais que não possuem formação técnica estão especialmente expostas aos problemas de “alguns clientes até que a catástrofe aconteça”. Essas empresas preferem ter a maior parte do site codificada e não no banco de dados do site.

Um rápido resumo: FSE é incrível. Isso torna o trabalho mais fácil. O conceito atual do tema wp está mudando diante de nossos olhos. Os clientes estão ganhando mais liberdade. Mas a necessidade do desenvolvimento à moda antiga estará sempre presente porque a FSE não é para todos.

Um pequeno aviso no final: esta é apenas a minha opinião atual, baseada em algumas vezes que joguei com FSE.

Nikola Štulic – Desenvolvedor Especialista Certificado em WordPress na Codeable

O tão esperado recurso de edição completa do site finalmente chegou. Isso abre muitas novas oportunidades porque agora seremos capazes de fornecer uma melhor experiência de edição para proprietários de sites que gostam de publicar coisas novas ou editar coisas existentes sem nossa ajuda.

Muitos desenvolvedores (inclusive eu) são sempre céticos em relação a mudanças “radicais”, principalmente quando os clientes podem arruinar algo que construímos durante dias, semanas ou até meses.

O FSE permite que os editores controlem estilos, cabeçalho, rodapé ou barras laterais. Ainda precisamos ver o resultado final, mas no momento o FSE é mais do que um bom recurso.

Isso abre uma maneira totalmente nova de seguir em frente. Acredito firmemente que o WordPress crescerá com esse novo recurso porque novos usuários virão, aqueles que amam a abordagem DIY.

Nick Diego – Defensor do Desenvolvedor | Motor WP

Admito que sou tendencioso, mas Full Site Editing (FSE) é a coisa mais interessante que surgiu no WordPress na última década, além do próprio Block Editor. FSE promete uma solução praticamente sem código com o poder e a flexibilidade do WordPress. Com um pouco de treinamento, um usuário sem conhecimento de desenvolvimento web pode escolher um tema baseado em blocos e configurar todo o seu site a partir de uma única interface. Simplesmente mágico!

Agora é importante lembrar que FSE é uma coleção de recursos, incluindo Editor de Site, blocos de tema, edição de modelos, estilos globais e muito mais. WordPress 5.9 foi apenas a estreia deste conjunto de recursos. Muitas iterações estão planejadas com melhorias adicionais e ajustes ainda a serem feitos.

Neste momento, encorajo todos os desenvolvedores de WordPress a começarem a explorar temas baseados em blocos e bloquear o desenvolvimento, caso ainda não o tenham feito. Use o plugin Gutenberg junto com quaisquer novos projetos porque ele inclui todos os recursos mais recentes do FSE e é uma prévia do WordPress 6.0. Você pode encontrar problemas e bugs. Você pode até encontrar decisões de desenvolvimento das quais discorda. Isso está ok!

Uma das belezas do WordPress é a sua flexibilidade. Muitos recursos do FSE são opcionais, mas não todos. Este tem sido um ponto de discórdia, especialmente para as agências, e estão planeados mais controlos para o futuro. Também houve preocupações da comunidade em relação à acessibilidade, permissões de usuário e muito mais. Essas preocupações são válidas e precisam ser abordadas. Devemos ser sinceros sobre quaisquer deficiências para que possam ser feitas melhorias.

Se você encontrar problemas, imploro que abra um problema no GitHub ou entre em contato comigo e com outro Developer Advocates no espaço WordPress. Somos apaixonados por tornar o WordPress o melhor possível para todos os usuários.

Acredito firmemente que o FSE é o futuro do WordPress, mas apenas começamos esta emocionante jornada. Se você quiser saber mais, confira WordPress Social Learning para sessões educacionais semanais, muitas das quais centradas em tópicos de FSE. Espero vê-lo.

Pensamentos finais

O FSE representa uma revolução na experiência de criação de páginas que dá ao usuário final mais controle do que nunca. A edição completa do site evita que você lide com complexidades de codificação, pois tudo é gerenciado por meio de blocos. No entanto, ainda existem enormes lacunas que podem ser preenchidas em futuros lançamentos de versões do WordPress.

Alguns temem que a FSE acabe com os empregos de designers e desenvolvedores. Embora o FSE certamente dê controle total ao usuário, um designer e desenvolvedor de site ainda pode personalizá-lo para funcionar ao máximo.

Para citar Milana Cap, “FSE veio para ficar”. É hora de abraçarmos a nova mudança e usá-la plenamente em nosso benefício.