Gutenberg Tudo que você precisa saber sobre o editor mais recente do WordPress
Gutenberg é um novo editor para o WordPress que será totalmente substitua o editor atual ativado pelo TinyMCE. É um projeto ambicioso que alterará o WordPress de várias maneiras e afetaria usuários regulares e desenvolvedores, especificamente aqueles que dependem da tela do editor para trabalhar no WordPress. Aqui está como parece.
Gutenberg também introduz um novo paradigma no WordPress chamado “Quadra”.
“Quadra” é o termo abstrato usado para descrever unidades de marcação que são compostos do conteúdo ou layout de uma página da web. A ideia combina conceitos do que no WordPress hoje alcançamos com códigos de acesso, HTML personalizado e incorporação de informações em uma única API consistente e experiência do usuário.
Configurando o Projeto
Sabendo o fato de que Gutenberg é construído sobre o React, alguns desenvolvedores estão preocupados que o barreira é muito alta para desenvolvedores iniciantes no desenvolvimento de Gutenberg.
Configurar o React.js pode ser demorado e confuso se você estiver apenas começando a usá-lo. Você precisará de, pelo menos, transformador JSX, Babel, dependendo do seu código, você pode precisar de alguns plug-ins do Babel e um Bundler como Webpack, Rollup ou Parcel.
Felizmente, algumas pessoas na comunidade do WordPress aumentaram e estão tentando tornar o desenvolvimento de Gutenberg o mais fácil possível para todos seguirem. Hoje, temos uma ferramenta que irá gerar um clichê de Gutenberg podemos começar a escrever o código imediatamente em vez de ficar confuso com as ferramentas e as configurações.
Criar bloco Guten
o criar-bloco-guten é um projeto iniciado por Ahmad Awais. É um kit de ferramentas de configuração zero (# 0CJS) que lhe permitirá desenvolver o bloco de Gutenberg com algumas pilhas modernas predefinidas, incluindo React, Webpack, ESNext, Babel, ESLint e Sass. Siga as instruções para começar a criar o bloco Guten.
Usando o ES5 (ECMAScript 5)
Usando todas essas ferramentas para criar um simples “Olá Mundo” bloco pode parecer demais. Se você gosta de manter suas pilhas magras, você pode realmente desenvolver um bloco de Gutenberg usando um bom e simples ECMAScript 5 com o qual você já esteja familiarizado. Se você tem WP-CLI 1.5.0 instalado no seu computador, você pode simplesmente correr ...
bloco de andaime wp[--título = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--força]</pre> <p>… para <strong>gerar o clichê do bloco de Gutenberg para o seu plugin ou tema</strong>. Esta abordagem é mais sensata, particularmente, para plugins e temas existentes que você desenvolveu antes da era de Gutenberg..</p> <p>Em vez de criar um novo plugin para acomodar os blocos de Gutenberg, você pode querer integrar os blocos aos seus plugins ou temas. E para tornar este tutorial fácil de seguir para todos, <strong>estaremos usando o ECMAScript 5 com o WP-CLI</strong>.</p> <h4>Registrando um novo bloco</h4> <p>O Gutenberg é atualmente desenvolvido como um plugin e será integrado ao WordPress 5.0 sempre que a equipe achar que está pronto. Então, por enquanto, você precisará instalá-lo a partir do <strong>Página de plugins em <code>wp-admin</code></strong>. Depois de instalá-lo e ativá-lo, execute o seguinte comando no Terminal ou no Prompt de Comando, se estiver em uma máquina Windows.</p> <pre name="code"> wp scaffold block series --title = "Série HTML5" - tema</pre> <p>Este comando irá gerar um bloco para o tema atualmente ativo. Nosso bloco consistirá dos seguintes arquivos:</p> <pre name="code"> . UMA¢??  ??¢??  ??¢??? série âà 'à â??  ??¢??  ??¢??? block.js âà 'à â??  ??¢??  ??¢??? editor.css âà 'à â??  ??¢??  ??¢??? style.css â??  ??¢??  ??¢??? series.php </pre> <p>Vamos carregar o arquivo principal dos nossos blocos no <code>funções.php</code> do nosso tema:</p> <pre name="code"> if (function_exists ('register_block_type')) requeria get_template_directory (). '/blocks/series.php'; </pre> <p>Observe que nós incluímos o carregamento do arquivo com um condicional. Isso garante <strong>compatibilidade com a versão anterior do WordPress que o nosso bloco só é carregado quando Gutenberg está presente</strong>. O nosso bloco deve agora estar disponível na interface do Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>É assim que parece quando inserimos o bloco.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>APIs do Gutenberg</h3> <p>O Gutenberg introduz dois conjuntos de APIs para registrar um novo bloco. Se olharmos para o <code>series.php</code>, nós encontraremos o seguinte código que registra nosso novo bloco. Isso também <strong>carrega a folha de estilo e JavaScripts no front-end e o editor</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', matriz ('editor_script' => 'série-bloco-editor', 'editor_style' => 'série-bloco-editor', 'estilo' => 'série-bloco',));</pre> <p>Como podemos ver acima, nosso bloco é nomeado <code>twentyseventeen / series</code>, o nome do bloco deve ser único e ter namespaces para evitar a colisão com os outros blocos trazidos pelos outros plugins.</p> <p>além disso, <strong>O Gutenberg fornece um conjunto de novas APIs JavaScript para interagir com o “Quadra” interface</strong> no editor. Como a API é bastante abundante, vamos nos concentrar em alguns detalhes que eu acho que você deveria saber para obter um bloco de Gutenberg simples, mas funcional..</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Primeiro, estaremos investigando <code>wp.blocks.registerBlockType</code>. Esta função é usada para <strong>registrar um novo “Quadra” ao editor de Gutenberg</strong>. Requer dois argumentos. O primeiro argumento é o nome do bloco que deve seguir o nome registrado no <code>register_block_type</code> função no lado do PHP. O segundo argumento é um <strong>Objeto que define as propriedades do bloco</strong> como título, categoria e algumas funções para renderizar a interface do bloco.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('Série HTML5'), categoria: 'widgets', palavras-chave: ['html'], edit: função (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Esta função permite criar o elemento dentro do “Quadra” no editor de postagem. o <code>wp.element.createElement</code> função é basicamente uma abstração do Reagir <code>createElement ()</code> função, portanto, aceita o mesmo conjunto de argumentos. O primeiro argumento toma o tipo do elemento, por exemplo, um parágrafo, um <code>período</code>, ou um <code>div</code> como mostrado abaixo:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Podemos <strong>alias a função em uma variável</strong> então é mais curto para escrever. Por exemplo:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>Se vocês <strong>prefiro usar a nova sintaxe do ES6</strong>, você também pode fazer assim:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>Nós também podemos <strong>adicione os atributos do elemento</strong> tais como o <code>classe</code> nome ou <code>identidade</code> no segundo parâmetro da seguinte forma:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'série-html5', 'id': 'série-html-post-id-001');</pre> <p>o <code>div</code> que criamos não faria sentido sem o conteúdo. Podemos <strong>adicione o conteúdo no argumento do terceiro parâmetro</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'classe': 'série-html5', 'id': 'série-html-post-id-001', 'Este artigo faz parte da nossa "Série de tutoriais HTML5 / CSS3" - dedicado para ajudar a torná-lo um melhor designer e / ou desenvolvedor Clique aqui para ver mais artigos da mesma série ');</pre> <h4><code>wp.components</code></h4> <p>o <code>wp.components</code> contém uma colecção de, como o nome indica, os componentes de Gutenberg. Esses componentes são tecnicamente componentes personalizados React, que incluem o Button, o Popover, o Spinner, o Tooltip e um monte de outros. Podemos <strong>reutilizar esses componentes em nosso próprio bloco</strong>. No exemplo a seguir, adicionamos um componente de botão.</p> <pre name="code"> var Button = wp.components.Button; el (Button, 'class': 'download-button',, 'Download');</pre> <h4>Atributos</h4> <p>Os Atributos são a maneira de armazenar os dados em nosso Bloco, esses dados podem ser como o conteúdo, as cores, os alinhamentos, a URL, etc. Podemos obter os atributos das Propriedades passadas no <code>editar()</code> função, da seguinte forma:</p> <pre name="code"> edit: função (props) var content = props.attributes.seriesContent; return el ('div', 'classe': 'série-html5', 'id': 'série-html-post-id-001', conteúdo); </pre> <p>Para atualizar os atributos, usamos o <code>setAttributes ()</code> função. Normalmente, alteramos o conteúdo em determinadas ações, como quando um botão é clicado, uma entrada é preenchida, uma opção é selecionada, etc. No exemplo a seguir, usamos para adicionar um <strong>cair pra trás</strong> conteúdo do nosso bloco no caso de algo inesperado aconteceu ao nosso <code>seriesContent</code> Atributo.</p> <pre name="code"> edit: function (props) if (tipo prop.attributes.seriesContent === 'indefinido' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Olá, mundo! Aqui está o conteúdo de fallback.' ) var content = props.attributes.seriesContent; return [el ('div', 'classe': 'série-html5', 'id': 'série-html-post-id-001', conteúdo),]; </pre> <h4>Salvando o Bloco</h4> <p>o <code>Salve ()</code> função funciona de forma semelhante ao <code>editar()</code>, exceto que define o conteúdo do nosso bloco para salvar no banco de dados de postagem. Salvar o conteúdo do bloco é bastante simples, como podemos ver abaixo:</p> <pre name="code"> save: function (props) if (! props ||! props.attributes.seriesContent) retorno; var content = props.attributes.seriesContent; return [el ('div', 'classe': 'série-html5', 'id': 'série-html-post-id-001', conteúdo),]; </pre> <h3>Qual é o próximo?</h3> <p>Gutenberg vai mudar o ecossistema WordPress para melhor (ou possivelmente o pior). Ele permite que os desenvolvedores <strong>adotar uma nova maneira de desenvolver plugins e temas do WordPress</strong>. Gutenberg é só um começo. Logo o “Quadra” O paradigma será expandido para outras áreas do WordPress, como as APIs de configurações e os Widgets.</p> <p>Aprenda JavaScript profundamente; é a única maneira de entrar em Gutenberg e permanecer relevante para o futuro no setor de WordPress. Se você já está familiarizado com o básico do JavaScript, as peculiaridades, as funções, as ferramentas, os produtos e os defeitos, tenho certeza de que você vai se atualizar com o Gutenberg.</p> <p>Como mencionado, o Gutenberg expõe uma abundância de APIs, o suficiente para fazer quase qualquer coisa no seu Block. Você pode escolher se deseja <strong>codifique seu bloco com um JavaScript simples, JavaScript com sintaxe ES6, React ou até Vue</strong>.</p> <h4>Ideias e Inspirações</h4> <p>Eu criei um Bloco Gutenberg muito (muito) simples que você pode encontrar no repositório da nossa conta do Github. Além disso, eu também reúno vários repositórios de onde você pode inspirar na construção de um bloco mais complexo..</p> <ul><li>Gutenblocks - Uma coleção de blocos por Mathieu Viet escrito em JavaScript com sintaxe ES5</li> <li>Jetpack Gutenblocks Project - uma coleção de blocos agrupados em Jetpack</li> <li>Uma lista de exemplos de implementação do Gutenberg incluindo o Vue.js</li> </ul><h3>Referência Adicional</h3> <ul><li>Repositório Oficial de Gutenberg</li> <li>Manual do Gutenberg</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">Hackear uma tabela de falta da IKEA em um rack de componentes</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">Separar um teclado antigo para criar uma interface de controle personalizada</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Guia para o Gerenciador de Tarefas do Windows 10 - Parte II</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artigo seguinte</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">Hackear uma lanterna de US $ 10 em um Premium One Ultra Brilhante</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artigo anterior</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Guia para o Gerenciador de Tarefas do Windows 10 - Parte III</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Informações úteis e dicas de desenvolvimento da web. Programação, web design, CSS, HTML, JAVASCRIPT. Configure e reinstale o WINDOWS. Criação de sites e aplicativos a partir do zero. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>