Como usar o novo editor Gutenberg do Wordpress \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 04 Horas 52 Min 31 Seg Tempo restante da oferta: 04 52 31 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Como usar o novo editor Gutenberg do Wordpress [ CMS's e E-commerce ](https://www.treinaweb.com.br/blog/categoria/cmss-e-e-commerce) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) # Como usar o novo editor Gutenberg do Wordpress Saiba como utilizar o novo editor Gutenberg do Wordpress, que traz o sistema de blocos na criação de conteúdo. [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/Gutenberg-Wordpress.png) Uma das maiores atualizações recentes do [WordPress](https://www.treinaweb.com.br/blog/tag/wordpress/ "WordPress") foi o seu editor, a partir da versão 5.0 o Gutenberg se tornou o editor oficial da plataforma, mas o que isso significa? A novidade é que o editor Gutenberg traz um novo conceito no momento da criação de conteúdo visando facilidade e praticidade para montar seus posts e páginas, priorizando uma estética muito confortável e atual. Toda essa praticidade tem nome, o seu super poder, os blocos! ![Editor Gutenberg WordPress](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/gutenberg.png) [ ![Wordpress - Primeiros Passos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/wordpress.svg) Curso Wordpress - Primeiros Passos Conhecer o curso ](https://www.treinaweb.com.br/curso/wordpress-primeiros-passos) ## Editor Gutenberg: baseado em Blocos O editor Gutenberg é baseado em blocos, isso significa que ao montar sua página ou criar seu post, toda a estrutura é baseada em blocos, desde parágrafos, imagens, áudios, incorporação de serviços externos, enfim, tudo o que você já tinha a possibilidade de criar porém de uma forma prática e totalmente nova. Outra das vantagens também é que a organização dos blocos pode ser feita com o famoso “drag and drop”, você consegue mudar a ordem e localização somente clicando com o mouse e soltando na posição desejada, nada de “control c + v”. ![Resumo Blocos](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/blocos1.png) Existe uma variedade de blocos, vamos entender como eles estão organizados e como serão utilizados. Os principais deles são: - **Blocos de formatação:** código, editor clássico, html personalizado, pré formatado, citação, tabela e verso. - **Blocos de elemento de layout:** quebra de página, botões, colunas, grupo, mídia e texto, leia mais, separador e espaçador. - **Blocos de Widgets:** shortcode, arquivos, agenda, categorias, comentários mais recentes, posts mais recentes, RSS, pesquisar, ícones sociais, nuvem de tags. - **Blocos de códigos incorporados:** twitter, youtube, facebook, instagram, spotify, Soundcloud, vimeo e de muitos mais serviços. Obs: Você pode conferir os serviços que são incorporados pelo WordPresss [neste artigo oficial](https://wordpress.org/support/article/embeds/ "neste artigo oficial") da plataforma. Além dos blocos padrões do WordPress, ao instalar complementos como o [WooCommerce](https://www.treinaweb.com.br/blog/tag/woocommerce/ "WooCommerce") por exemplo, novos blocos são adicionados. ## Utilizando Blocos Primeiramente, podemos adicionar um bloco de duas formas, clicando no botão adicionar blocos na parte superior ou no botão ao lado direito da linha no editor que você queira adicioná-lo, como abaixo: ![Adicionar Bloco](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/adicionar-bloco.png) Ao clicar no botão de adicionar bloco podemos ver as categorias dos blocos e, então, selecionar o bloco desejado que faz sentido para o conteúdo que está sendo criado. ![Selecionando Bloco](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/selecionando-bloco.png) Cada bloco possui configurações e características próprias, onde podemos fazer alterações e personalizações. ![Configurações dos Blocos](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/configuracoes-blocos.png) No próprio bloco existe a barra de configurações na parte superior, no exemplo da imagem acima utilizamos o bloco de imagem, onde podemos: alterar o tipo e estilo do bloco, mudar alinhamento, substituir a imagem, inserir link e por último temos algumas ações em relação ao bloco como duplicar ou remover. Vale ressaltar que após a criação de um bloco qualquer, ao clicar “enter” o cursor irá para a linha seguinte em um bloco de parágrafo. Outra característica nova do editor Gutenberg são as configurações de documento e de bloco, como podemos ver acima na coluna à direita, onde ele exibe o nome do bloco que está sendo utilizado e as configurações referentes a este bloco em específico. Na aba documentos temos as configurações gerais do post ou página que já existia no editor clássico. [ ![Wordpress - Desenvolvimento de blocos para o editor Gutenberg](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/wordpress.svg) Curso Wordpress - Desenvolvimento de blocos para o editor Gutenberg Conhecer o curso ](https://www.treinaweb.com.br/curso/wordpress-desenvolvimento-de-blocos-para-o-editor-gutenberg) ## Configurações Gerais e Opções A disposição de algumas configurações gerais também foram alteradas no editor Gutenberg, onde temos a barra superior de configurações e o menu “mais ferramentas e opções”. ![Configurações Gerais Gutenberg](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/configuracoes-gerais-gutenberg.png) Logo na barra superior temos o símbolo do WordPress, que ao clicar nos leva a página de listagem de posts, em seguida o botão de adicionar novo bloco, desfazer, refazer, estrutura do conteúdo, navegação de blocos e ferramentas. No canto superior direito temos as opções relativas ao post, onde podemos salvar como rascunho, visualizar e publicar, um ícone de engrenagem que exibe ou oculta a barra de configurações e o ícone de mais ferramentas e opções como podemos ver no print acima. Com este breve artigo mostramos como utilizar o novo editor Gutenberg do WordPress, a utilização dos blocos e configurações, temos também um vídeo onde [testamos o editor Gutenberg](https://www.treinaweb.com.br/blog/videos/testando-o-gutenberg-o-novo-editor-do-wordpress/ "testamos o editor Gutenberg") para você entender melhor o funcionamento do editor. Caso você prefira o editor clássico é possível utilizá-lo baixando o plugin “Classic Editor” pelo próprio WordPress. [ ![Administrador Wordpress](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/wordpress.svg) Formação Administrador Wordpress Conhecer a formação ](https://www.treinaweb.com.br/formacao/administrador-wordpress) Por fim, caso queira aprender mais sobre [Wordpress](https://www.treinaweb.com.br/blog/o-que-e-wordpress-e-como-instalar-na-sua-maquina) saiba que aqui na [TreinaWeb](https://treinaweb.com.br/) temos o curso [Wordpress - Desenvolvimento de blocos para o editor Gutenberg](https://www.treinaweb.com.br/curso/wordpress-desenvolvimento-de-blocos-para-o-editor-gutenberg) que possui **03h11 de vídeos** e um total de **12 exercícios**. Conheça também nossos outros cursos de [Wordpress](https://www.treinaweb.com.br/busca?q=wordpress). Veja quais são os tópicos abordados durante o curso de Wordpress - Desenvolvimento de blocos para o editor Gutenberg: - Como o Wordpress reconhece um bloco; - Como trabalhar com atributos; - Usar componentes do Wordpress dentro do seu bloco; - Adicionar configurações na barra de ferramentas; - Adicionar configurações na barra lateral; - Adicionar funções prontas com supports; - Trabalhar com blocos dinâmicos no editor e no site; - Usar a linha de comandos para criar a estrutura dos nossos blocos; - Trabalhar com blocos aninhados. - [ #CMS ](https://www.treinaweb.com.br/blog/tag/cms) - [ #WordPress ](https://www.treinaweb.com.br/blog/tag/wordpress) Autor ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm) ## Wesley Gado Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wesley-gado) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/SEO-WORDPRESS-YOAST-400x280.png) [ CMS's e E-commerce ](https://www.treinaweb.com.br/blog/categoria/cmss-e-e-commerce) 6 anos atrás ## [ Otimizando conteúdo para SEO no Wordpress com Yoast ](https://www.treinaweb.com.br/blog/otimizando-conteudo-para-seo-no-wordpress-com-yoast) Aprenda a otimizar o SEO de suas páginas e posts utilizando o Plugin Yoast SEO para Wordpress e eleve os resultados do seu blog! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/page-builders-para-wordpress-o-que-sao-e-como-podem-nos-ajudar-400x280.png) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 6 anos atrás ## [ Page Builders para WordPress: o que são e como podem nos ajudar? ](https://www.treinaweb.com.br/blog/page-builders-para-wordpress-o-que-sao-e-como-podem-nos-ajudar) Saiba o que são os Page Builders para WordPress e como eles podem te ajudar a criar sites e blogs incríveis! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/TYPESCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Como instalar o TypeScript ](https://www.treinaweb.com.br/blog/como-instalar-o-typescript) Neste artigo veremos como instalar o TypeScript, conhecer o arquivo tsconfig, executar nosso primeiro código no Node.js e no navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/aprenda-como-configurar-o-vs-code-para-debug-de-codigo-php-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 6 anos atrás ## [ Como configurar o VSCode para debug de código PHP ](https://www.treinaweb.com.br/blog/aprenda-como-configurar-o-vs-code-para-debug-de-codigo-php) Aprenda como configurar o Visual Studio Code para trabalhar com debug de código PHP. Veremos como instalar e ativar a extensão Xdebug na prática. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/Como_instalar_e_utilizar_o_Bootstrap_via_npm-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Como instalar e utilizar o Bootstrap via npm ](https://www.treinaweb.com.br/blog/como-instalar-e-utilizar-o-bootstrap-via-npm) Instalar Bootstrap via npm e alterar suas variáveis, é mais simples do que imagina. Hoje iremos juntos fazer o download do Bootstrap 5. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/como-instalar-o-dart-e-executar-seu-primeiro-exemplo-400x280.png) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 6 anos atrás ## [ Como instalar o Dart e executar seu primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-o-dart-e-executar-seu-primeiro-exemplo) Neste artigo veremos como instalar o Dart nos sistemas Windows, Linux e MacOS e executar nosso primeiro programa com a linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/como-instalar-o-java-e-nosso-primeiro-exemplo-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Como instalar o Java e nosso primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-o-java-e-nosso-primeiro-exemplo) Neste artigo veremos como instalar o Java nos sistemas Windows, Linux e MacOS, além disso vamos ver como escrever e executar nosso primeiro programa com a linguagem Java. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/01105921/0-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 7 anos atrás ## [ Como crescer no Front-End? ](https://www.treinaweb.com.br/blog/como-crescer-no-front-end) Veja várias dicas para alavancar a sua carreira como Desenvolvedor Front-End Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como instalar a Golang e executar nosso primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-a-golang-e-executar-nosso-primeiro-exemplo) Neste artigo iremos aprender como instalar a Golang nos sistemas Windows, Linux e macOS e como executar nosso primeiro exemplo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/depura--o-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 10 anos atrás ## [ Depuração de código PHP ](https://www.treinaweb.com.br/blog/depuracao-de-codigo-php) Como fazer a depuração de código PHP? Essa é uma dúvida recorrente do pessoal que está vindo de outras linguagens ou que está começando a escrever projetos um pouco mais complexos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/22111207/FLUTTER-ANDROID-STUDIO-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ Configurando ambiente de desenvolvimento Flutter ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-flutter) Veja neste artigo como configurar o ambiente de desenvolvimento Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/17150123/desenvolvimento-colaborativo-em-tempo-real-com-live-share-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 7 anos atrás ## [ Desenvolvimento colaborativo em tempo real com Live Share ](https://www.treinaweb.com.br/blog/desenvolvimento-colaborativo-em-tempo-real-com-live-share) Aprenda como trabalhar com a ferramenta Live Share da Microsoft, que permite o desenvolvimento colaborativo em tempo real usando Visual Studio Code ou VS. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **04h 52min 31s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58