Curso Grátis Editor Gutenberg Wordpress (Material de Curso)
•
1 gostou•78 visualizações
Este documento fornece uma introdução ao Editor Gutenberg no WordPress, descrevendo seus principais recursos e blocos. Em três frases: Apresenta os conceitos básicos por trás do Editor Gutenberg e descreve suas principais seções, interface e tipos de blocos, incluindo blocos comuns, de formatação, layouts e widgets. Fornece detalhes e exemplos de uso para cada um dos principais blocos disponíveis no Editor Gutenberg.
Recomendados
Mais conteúdo relacionado
Semelhante a Curso Grátis Editor Gutenberg Wordpress (Material de Curso)
Semelhante a Curso Grátis Editor Gutenberg Wordpress (Material de Curso) (20)
Curso Grátis Editor Gutenberg Wordpress (Material de Curso)
- 1. v1
- 2. Curso Editor Gutenberg https://academia.junior.pro Copyright © 2019 Junior Cammel. Todos os direitos reservados.
- 4. O QUE É EDITOR GUTENBERG? [DES]INSTALAR O GE [DES]VANTAGENS DO GE ? JohannesG.|LessCode|TargetAudience|Site|Ex. >=V5.0ou<V5.0 GoodorBad? 2 3 4
- 5. INTERFACE DO EG GE X CE [CLASSIC EDITOR] SeçõesPrincipais Existeummelhor? 5 6
- 7. BLOCOS COMUNS BLOCOS DE FORMATAÇÃO BLOCOS DE LAYOUT BLOCOS DE WIDGETS BLOCOS DE INCORPORAÇÃO BLOCOS MAIS USADOS BLOCOS DE ELEMENTOS EM LINHA
- 8. OK! WHAT NOW? Naprática! 8 BLOCOS GE 5grupos 7
- 10. INTRODUÇÃO
- 11. 11 Curso Gutenberg Editor academia.junior.pro Introdução Considerações. Status. Versão de teste: WordPress 5.1.1.
- 12. O QUE É EDITOR GUTENBERG? v2
- 13. 13 Curso Gutenberg Editor academia.junior.pro Editor Gutenberg Homenagem a Johannes Gutenberg(1), Inventor da prensa móvel durante a idade média. Less Code ("Menos Código"). Beginners (Voltado para iniciantes). Mas... pode agradar outros perfis! Polêmica! Site Oficial: https://gogutenberg.com/. Exemplos: http://moc.co/sandbox/example-post/. (1) https://pt.wikipedia.org/wiki/Johannes_Gutenberg
- 15. 15 Curso Gutenberg Editor academia.junior.pro Como instalar o Editor Gutenberg? WordPress > = 5: Editor Gutenberg vem instalado por padrão. WordPress < 5: Baixar o plugin no repositório da WordPress. Link de download: https://wordpress.org/plugins/gutenberg/ Como (des)instalar o Editor Gutenberg? Link de download: https://wordpress.org/plugins/classic-editor/
- 17. 17 Curso Gutenberg Editor academia.junior.pro Vantagens do Editor Gutenberg Reduz a dependência do TinyMCE Experiência "mais leve“. Mais espaço na tela. Os blocos são fáceis de usar. Quase divertidos! Responsivos. Mais fácil para iniciantes. Integração futura com Google Docs, Word, etc.
- 18. 18 Curso Gutenberg Editor academia.junior.pro [Des]Vantagens do Editor Gutenberg Integrações que dependem do TinyMCE. ACF. Custom Post Types. É novo e o novo assusta! Ainda não sabemos o futuro...
- 20. 20 Curso Gutenberg Editor academia.junior.pro Interface do Editor Gutenberg Barra de Edição (Editing Toolbar) [1]. Área de Conteúdo (Content Área) [2]. Configurações Avançadas (Advanced Settings) [3]. 3 áreas importantes:
- 21. 21 Curso Gutenberg Editor academia.junior.pro CONTENT AREA [2] ADVANCED SETTINGS [3] EDITING TOOLBAR [1]
- 23. 23 Curso Gutenberg Editor academia.junior.pro Opções Avançadas Top Toolbar: Access all block and document tools in a single place (Usa apenas uma barra de edição). Spotlight Mode: Focus on one block at a time (Foco em um bloco por vez). Fullscreen Mode: Work without distraction (Tela Cheia). View Visual Editor (Editor Visual). Code Editor (Editor de Código). Editor
- 24. 24 Curso Gutenberg Editor academia.junior.pro Opções Avançadas Manage All Reusable Blocks: https://gutenberg.local/wp-admin/edit.php?post_type=wp_block Gerenciador de blocos reutilizados. (Cuidado! - Vai te tirar da página sem avisar). Keyboard Shortcuts (Atalhos de teclado). Copy All Content (Copiar todo o conteúdo). Tools Abre Configurações da área de trabalho do Gutenberg: Metabox, Meta-Boxes, Advanced Fields, Tips, Enable Pre-publish Checks (Confere se determinadas condições foram satisfeitas antes de publicar). Options
- 25. GE X CE [CLASSIC EDITOR] v6
- 27. BLOCOS GE v7
- 29. 29 Curso Gutenberg Editor academia.junior.pro Common Blocks 7.1.1 - Paragraph 7.1.2 - List 7.1.3 - Heading 7.1.4 - Image 7.1.5 - Gallery 7.1.6 - Quote 7.1.7 - Audio 7.1.8 - Video 7.1.9 - Cover 7.1.10 - File Formatting 7.2.1 - Code 7.2.2 - Classic Editor 7.2.3 - Custom HTML 7.2.4 - Preformatted 7.2.5 - Verse 7.2.6 - Pullquote 7.2.7 - Table Layouts Elements 7.3.1 - Button 7.3.2 - Columns 7.3.3 - Media & Text 7.3.4 - More 7.3.5 - Page Break 7.3.6 - Separator 7.3.7 - Spacer 7.1 7.2 7.3 BlocosComuns Formatação ElementosdeLayouts
- 30. 30 Curso Gutenberg Editor academia.junior.pro Widgets 7.4.1 - Shortcode 7.4.2 - Archives 7.4.3 - Categories 7.4.4 - Latest Comments 7.4.5 - Latest Posts Embeds Embed Inline Elements Inline Image 7.4 7.5 7.7 Widgets Incorporados Elementosemlinha Most Used Paragraph Heading … 7.6 Maisusados
- 32. 32 Curso Gutenberg Editor academia.junior.pro Blocos Comuns (Common Blocks) 7.1.1 - Paragraph 7.1.2 - List 7.1.3 - Heading 7.1.4 - Image 7.1.5 - Gallery 7.1.6 - Quote 7.1.7 - Audio 7.1.8 - Video 7.1.9 - Cover 7.1.10 - File
- 34. 34 Curso Gutenberg Editor academia.junior.pro Bloco Parágrafo (Paragraph) “Oblocodeparágrafoéumblocodetextosimplesapenasparaadicionar umúnicoparágrafodeconteúdo.Amaiorpartedoconteúdogeralque vocêadicionaaoseusiteusaráessebloco”.
- 37. 37 Curso Gutenberg Editor academia.junior.pro Bloco Lista (list) “Oblocodelistaéumblocosimples,somentetexto,paraadicionarlistas commarcadoresounumeradas.Seuúnicoobjetivoéexibiroconteúdo emumformatodelistasimples”.
- 40. 40 Curso Gutenberg Editor academia.junior.pro Bloco Título (Heading) “Useoblocodecabeçalhoparadividirasuapáginaemseções.Cada cabeçalhodeveindicaroiníciodeumnovotópico”. “TodasastagsdecabeçalhoHTML(<h1>a<h6>)podemserusadas”.
- 43. 43 Curso Gutenberg Editor academia.junior.pro Bloco de Imagem (Image) “Oblocodeimageméomaisbásicodetodososblocosdotipodemídia. Use-oparainserirumaúnicaimagememalgumlugardasuapágina/ postagem.OnovoblocodeimagensdeGutenbergfuncionaquaseda mesmamaneiraqueobotão"Adicionarmídia"doeditorclássico.Alinhar suaimagemparaaesquerda,direitaoucentro,fornecerumalegenda, link,textoalternativo,etc.”.
- 46. 46 Curso Gutenberg Editor academia.junior.pro Bloco de Galeria de imagens (Image Gallery) “Oblocodegaleriaémuitoparecidocomofuncionamentodasgalerias deimagensnoeditorclássicodoWordPress. Adicioneváriasimagensaumagaleria(Opcional).Dêàsimagensuma legendaeescolhaonúmerodecolunas.Aofinal,insirasuagaleriana página”.
- 49. 49 Curso Gutenberg Editor academia.junior.pro Bloco de Citações (Quote) “Oblocodecitaçãoéumblocodetextosimplesapenasparadestacar umacitaçãoeincluirumareferência(deondeacitaçãoseoriginou)”.
- 52. 52 Curso Gutenberg Editor academia.junior.pro Bloco de Áudio (Audio) “Oblocodeáudioéparafazerouploaddeseusprópriosarquivosde áudio(maiscomumente,arquivos.mp3)paraoseusite”.
- 55. 55 Curso Gutenberg Editor academia.junior.pro Bloco de Vídeo (Video) “Oblocodevídeoéparafazerouploaddeseusprópriosarquivosde vídeoparaoseusite.Namaioriadoscasos,nãoérecomentadohospedar seusprópriosarquivosdevídeo”.
- 58. 58 Curso Gutenberg Editor academia.junior.pro Bloco de Imagem de capa (Cover Image) “Oblocodeimagensdacapafuncionamaiscomoumtítulodoqueuma imagem.Elepermitequevocêexibaalgumtextocurto(geralmente,um cabeçalho)sobreaimagemdefundo. Aimagemdefundopodeterumasobreposiçãoparatornarotextomais legível.Épossívelutilizarposicionamentofixo(efeitoparallax)paracriar umefeitoderolagemcomaimagemfixadanofundo”.
- 61. 61 Curso Gutenberg Editor academia.junior.pro Bloco de Arquivo (File) “Oblocodearquivopermiteinserirarquivosparadownloaddiretamente dofrontendoWordPress”.
- 64. 64 Curso Gutenberg Editor academia.junior.pro Blocos de Formatação (Formatting) 7.2.1 - Code 7.2.2 - Classic Editor 7.2.3 - Custom HTML 7.2.4 - Preformatted 7.2.5 – Verse 7.2.6 - Pullquote 7.2.7 - Table
- 66. 66 Curso Gutenberg Editor academia.junior.pro Bloco de Códigos (Code) “Blocoutilizadoparamostrartrechosdecódigo.Oblocodecódigo permiteinserirHTML,CSS,JavaScript,PHP,entreoutros.Écomumente utilizadoparaapresentarlinhasdecódigos”.
- 69. 69 Curso Gutenberg Editor academia.junior.pro Bloco Clássico (Classic Block) “Oblococlássicotrazdevoltaosantigosrecursosdeediçãodoeditor clássicodoWordPress,tambémconhecidocomoTinyMCE”.
- 72. 72 Curso Gutenberg Editor academia.junior.pro Bloco de HTML Personalizado (Custom HTML) “ComoblocoHTMLpersonalizado,vocêpodeadicionarqualquercódigo HTMLpersonalizadoeverumaprévianoeditor”.
- 75. 75 Curso Gutenberg Editor academia.junior.pro Bloco Pré-formatado (Preformatted) “Oblocopré-formatadoémuitosemelhanteaoblocodecódigos,com algumaspequenasdiferenças. Osblocospré-formatadosmantêmtodososespaçosequebrasdelinha intactoseexibemotextoexatamentecomovocêodigita.Noentanto, elesnãousamoelementoHTML<code>evêmcommaisalgumasopções deestilo”.
- 78. 78 Curso Gutenberg Editor academia.junior.pro Bloco de Verso (Verse) “Oblocodoversoéparaescreverpoesiaeoutrasexpressõesliterárias. Aocontráriodotextodeparágrafotradicional,eledeixatodososespaços equebrasdelinhaintocados,exibindo-osexatamentequandovocêos insere”.
- 81. 81 Curso Gutenberg Editor academia.junior.pro Bloco de Pullquote “Umabrevecitaçãodeatençãotiradadotextoprincipaldeumartigoe usadacomosubtítuloouelementográfico. Oblocopullquotepegaumapartedotextoexistentedoconteúdo principaldoseuartigoechamaaatençãoparaeledemaneiragráfica”.
- 84. 84 Curso Gutenberg Editor academia.junior.pro Bloco Tabela (Table) “Oblocodetabeladeveserusadoparaexibirnúmeros,comparaçõesou qualqueroutrotipodedadostabularesnoformatodetabela”.
- 86. 7.3ELEMENTOS DE LAYOUT (LAYOUTS ELEMENTS) v26
- 87. 87 Curso Gutenberg Editor academia.junior.pro Blocos de Layouts (Layouts Elements) 7.3.1 - Button 7.3.2 - Columns 7.3.3 - Media & Text 7.3.4 - More 7.3.5 - Page Break 7.3.6 - Separator 7.3.7 - Spacer
- 89. 89 Curso Gutenberg Editor academia.junior.pro Bloco Botão (Button) “Oblocodebotõesfazexatamenteoquevocêesperaria.Criaumbotão dentrodoseuconteúdocomumlinkumaURLqualquer”.
- 92. 92 Curso Gutenberg Editor academia.junior.pro Bloco de Colunas (Columns) “Oblocodecolunaspermitecriarlayoutscomváriascolunasemsuaárea deconteúdoeincluiroutrosblocosdentrodecadacoluna. Aprincípio sãocriadasduascolunas. NOTA:Oblocodecolunasaindaéexperimentaleprovavelmentevaiser alteradoaolongodaspróximasversõesdoGE”.
- 94. 7.3.3 MÍDIA & TEXTO (MEDIA & TEXT) v28
- 95. 95 Curso Gutenberg Editor academia.junior.pro Bloco de Mídia & Texto (Media & Text) “Oblocodemídiaetextopermitecolocartextoeimagempróximosna áreadeconteúdodoWordPress”.
- 98. 98 Curso Gutenberg Editor academia.junior.pro Bloco Saiba Mais (Read More) “Obloco‘readmore’éusadoquandovocêdesejaincluirumapequena introduçãonapáginainicialdoseublogenaspáginasdoarquivo,edepois convidaroleitorparairatéorestantedoartigonapáginadepost”.
- 100. 7.3.5 QUEBRA DE PÁGINA (PAGE BREAK) v30
- 101. 101 Curso Gutenberg Editor academia.junior.pro Bloco Quebra de Página (Page Break) “Oblocoquebraoconteúdodapáginaemduaspartes.Assim,doponto emqueeleéinserido,aparteanteriorficanapáginaatualeparte posteriorvaiparaapróximapágina”. NOTA:oblocoinsereumasequêncianuméricadepáginas.
- 104. 104 Curso Gutenberg Editor academia.junior.pro Bloco Separador (Separator) “Oblocoseparadoradicionaumalinhahorizontal(<hr>),normalmente indicandoumaalteraçãotemáticanoseuconteúdo”.
- 107. 107 Curso Gutenberg Editor academia.junior.pro Bloco Espaçador (Spacer) “Oblocoespaçadoradicionaespaçosnoconteúdo”. NOTA:osespaçossãomedidosem“pixels”.
- 109. 7.4WIDGETS v33
- 110. 110 Curso Gutenberg Editor academia.junior.pro Blocos de Widgets 7.4.1 - Shortcode 7.4.2 - Archives 7.4.3 - Categories 7.4.4 - Latest Comments 7.4.5 - Latest Posts
- 111. 7.4.1SHORTCODES
- 112. 112 Curso Gutenberg Editor academia.junior.pro Bloco de Códigos Curtos (Shortcodes) “Oblocoshortcodeforneceamaneiramaissimplesdeinserirum shortcodeemumapáginaoupostdoWordPress”.
- 115. 115 Curso Gutenberg Editor academia.junior.pro Bloco de Widget Arquivos (Archives) “Oblocopermitecarregarosospostspublicadosaolongodotempono WordPress”.
- 118. 118 Curso Gutenberg Editor academia.junior.pro Bloco de Widget Categorias (Categories) “Oblocoshortcodecarregaralistadecategoriasdepostsexistentesno WordPress”.
- 121. 121 Curso Gutenberg Editor academia.junior.pro Bloco de Widget Últimos Comentários (Latest Comments) “Oblocopermitecarregarowidgetquelistaosúltimoscomentários realizadosnospostsdoWordPress”.
- 124. 124 Curso Gutenberg Editor academia.junior.pro Bloco de Widget Últimos Posts (Latest Posts) “Oblocoshortcodeforneceamaneiramaissimplesdeinserirum shortcodeemumapáginaoupostdoWordPress”.
- 127. 127 Curso Gutenberg Editor academia.junior.pro Blocos de Incorporação (Embeds) Embed
- 129. 129 Curso Gutenberg Editor academia.junior.pro Bloco Incorporados (Embeds) “Blocosincorporadospermitemquevocêinsiraconteúdodeterceiros (vídeo,áudio,imagens,tweets,etc.)emseusiteWordPress.OGutenberg possuiumblocodeincorporaçãogenéricoediversosincorporadores específicosquepermiteutilizarserviçospopulareseconhecidoscomo Youtube,Vimeo,SoundCloud,Instagram,entreoutrostantos”.
- 132. 132 Curso Gutenberg Editor academia.junior.pro Blocos mais Usados (Most used) Paragraph Heading …
- 134. 134 Curso Gutenberg Editor academia.junior.pro Blocos mais Usados (Most Used) “Oconjuntoapresentablocosusadoscommaiorfrequência.Aintençãoé criarumaatalhoparaagilizarousodeblocosmaiscomumenteutilizados duranteaedição”.
- 135. 7.7ELEMENTOS EM LINHA (INLINE ELEMENTS) v41
- 136. 136 Curso Gutenberg Editor academia.junior.pro Blocos Elementos em Linha (In Line Elements) Inline Image
- 137. 7.5ELEMENTOS EM LINHA (INLINE ELEMENTS)
- 138. 138 Curso Gutenberg Editor academia.junior.pro Blocos elementos em linha (In Line Elements) “Permiteinserirelementosemlinha.Aprincípio,pareceserumbloco experimental.Naversãotestadaépossívelinserirapenasimagens”.
- 143. 9.1USABILIDADE DE TECLADO E MOUSE
- 144. 144 Curso Gutenberg Editor academia.junior.pro Usabilidade de Teclado/ Mouse Copiar e colar textos vai te surpreender algumas vezes. Cada parágrafo é um bloco separado. Novo modelo mental: usar a tecla “Enter” cria novos parágrafos. Selecionar Tudo (Select All) usando o atalho “CTRL + A” não funciona. É algo que incomoda bem. Usa-se mais o mouse. Recurso “Copiar Tudo (Copy All)” permite copiar todo o conteúdo. Por exemplo, de post para página. O sistema não avisa que houve a cópia (ponto negativo).
- 146. 146 Curso Gutenberg Editor academia.junior.pro Usabilidade dos blocos Na medida em que a página vai se enchendo de conteúdo, o trabalho vai ficando “espremido” no final da tela. O que é desconfortável e obriga o “olhar” a descer o tempo todo. Os blocos que ficam dentro das caixas de tipos de blocos se alteram de posição. Ao que parece isto ocorre de acordo com o uso. É pouco produtivo. Ao criar botões não é possível definir que os links abram em nova aba. Durante a criação de um botão, o texto continua visível e é preciso escrever sobre ele. “Pretty weird!”. O bloco “Media & Art” quebra o Layout e fica “wide”, fora do espaço esperado. Alguns blocos podem não ficar disponíveis em certas circunstâncias (caso do bloco more). O símbolo de “+” localizado na parte superior dos blocos, poderia também ficar na parte inferior. Em alguns casos, é preciso usar o bloco “Editor Clássico” para carregar recursos de plugins e temas.
- 147. 9.2PLUGINS v44
- 148. 148 Curso Gutenberg Editor academia.junior.pro Plugins Elementor Pro. Easy Blocks – Gutenberg Blocks Page Builder (1). Gutenberg Blocks – Ultimate Addons for Gutenberg (2). Blocks – Ultimate Page Building Blocks for Gutenberg (3). WooCommerce Blocks (4). Atomic Blocks – Gutenberg Blocks Collection (5). Gutenberg Manager (6). (2) https://br.wordpress.org/plugins/ultimate-addons-for-gutenberg/ (1) https://wordpress.org/plugins/ultimate-blocks-for-gutenberg/ (3) https://wordpress.org/plugins/blocks-builder/ (5) https://wordpress.org/plugins/atomic-blocks/ (4) https://wordpress.org/plugins/woo-gutenberg-products-block/ (6) https://wordpress.org/plugins/manager-for-gutenberg/
- 150. Curso Editor Gutenberg https://academia.junior.pro Copyright © 2019 Junior Cammel. Todos os direitos reservados. AVISO DE DIREITOS AUTORAIS Todo o conteúdo desse documento (incluídos textos e imagens) estão protegidos por direitos autorais de seu criador, sendo proibida toda e qualquer forma de plágio, cópia, reprodução ou qualquer outra forma de uso, não autorizada expressamente, seja ela onerosa ou não, sujeitando-se o transgressor, as penalidades previstas civil e criminalmente.