Gutenberg Vše, co potřebujete vědět o WordPress 'Poslední Editor
Gutenberg je nový editor pro WordPress, který bude zcela nahradit aktuální TinyMCE-poháněl editor. Jedná se o ambiciózní projekt, který pravděpodobně změní WordPress v mnoha ohledech a ovlivní jak běžné koncové uživatele, tak vývojáře, konkrétně ty, kteří jsou závislí na obrazovce editoru pro práci na WordPressu. Zde je, jak to vypadá.
Gutenberg také zavádí nové paradigma ve WordPressu “Blok”.
“Blok” je abstraktní termín používaný k popisu jednotky značek které jsou tvořeny obsahem nebo rozvržením webové stránky. Myšlenka kombinuje koncepty toho, čeho dnes ve WordPressu dosáhneme zkrácené kódy, vlastní HTML a vložit zjišťování do jednoho konzistentního API a zkušeností uživatelů.
Nastavení projektu
S vědomím skutečnosti, že Gutenberg je postaven na vrcholu React, se někteří vývojáři obávají, že bariéra je příliš vysoká pro základní vývojáře pro vývoj Gutenbergu.
Nastavení programu React.js by mohlo být časově náročné a matoucí, pokud s ním právě začínáte. Budete potřebovat alespoň JSX transformátor, Babel, v závislosti na vašem kódu budete potřebovat nějaké Babel pluginy a Bundler jako Webpack, Rollup nebo Parcel.
naštěstí, někteří lidé v komunitě WordPress posílili a snaží se, aby rozvoj Gutenbergu byl co nejjednodušší, aby ho všichni mohli sledovat. Dnes máme nástroj, který bude generovat Gutenbergovu desku můžeme začít psát kód hned namísto toho, aby se hnaly s nástroji a konfiguracemi.
Vytvořte Gutenův blok
create-guten-block je iniciačním projektem Ahmada Awaisa. To je sada nástrojů s nulovou konfigurací (# 0CJS), který vám umožní vyvinout blok Gutenberg s některými moderními zásobníky, včetně React, Webpack, ESNext, Babel, ESLint a Sass. Postupujte podle instrukcí a začněte s Create Guten Block.
Použití ES5 (ECMAScript 5)
Použití všech těchto nástrojů k vytvoření jednoduchého “Ahoj světe” může zdát příliš mnoho. Pokud chcete, aby se vaše zásobníky štíhlé, můžete skutečně vytvořit blok Gutenberg pomocí prostého dobrého ol 'ECMAScript 5, které jste již možná obeznámeni s. Pokud máte WP-CLI 1.5.0 nainstalován na vašem počítači, můžete jednoduše spustit ...
wp lešení blok[--title = ] [--dashicon =<dashicon>] [- kategorie =<category>] [--theme] [--plugin =<plugin>] [--platnost]</pre> <p>… Až <strong>vygenerujte Gutenbergův blok kotle k vašemu pluginu nebo tématu</strong>. Tento přístup je rozumnější, zejména pro existující pluginy a témata, která jste vyvinuli před Gutenbergovou érou.</p> <p>Namísto vytvoření nového pluginu, který by vyhovoval blokům Gutenberg, budete možná chtít integrovat bloky do pluginů nebo témat. A aby tento návod snadno sledoval každý, <strong>budeme používat ECMAScript 5 s WP-CLI</strong>.</p> <h4>Registrace nového bloku</h4> <p>Gutenberg je v současné době vyvíjen jako plugin a bude sloučen do WordPress 5.0 vždy, když se tým bude cítit připraven. Takže, prozatím budete muset nainstalovat z <strong>Stránka pluginů v jazyce <code>wp-admin</code></strong>. Po instalaci a aktivaci spusťte v terminálu nebo v příkazovém řádku následující příkaz, pokud používáte počítač se systémem Windows.</p> <pre name="code"> wp scaffold blok série --title = "HTML5 Series" - téma</pre> <p>Tento příkaz vygeneruje blok k aktuálně aktivnímu tématu. Náš blok bude sestávat z následujících souborů:</p> <pre name="code"> . A¢AA?¢AA?¢Â ?? série âA?¢AA?¢AA?¢Â ?? block.js âA?¢AA?¢AA?¢Â ?? editor.css âA?¢AA?¢AA?¢Â ?? style.css âAA?¢AA?¢Â ?? series.php </pre> <p>Načíst hlavní soubor našich bloků v <code>functions.php</code> našeho tématu:</p> <pre name="code"> if (function_exists ('register_block_type')) vyžadují get_template_directory (). '/blocks/series.php'; </pre> <p>Všimněte si, že vkládáme soubor s podmínkou. To zajišťuje <strong>kompatibilita s předchozí verzí WordPressu, že náš blok je načten pouze při Gutenbergu</strong>. Náš blok by měl být nyní k dispozici v rámci rozhraní Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>To, jak to vypadá, když vložíme blok.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenberg API</h3> <p>Gutenberg zavádí dvě sady API pro registraci nového bloku. Když se podíváme na <code>series.php</code>, najdeme následující kód, který registruje náš nový blok. To také <strong>načte předlohu a JavaScript na úvodní stránku a editor</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', pole ('editor_script' => 'series-block-editor', 'editor_style' => 'seriál-editor-editor', 'styl' => 'blok bloku'));</pre> <p>Jak je vidět výše, náš blok je pojmenován <code>twentyseventeen / series</code>, Název bloku musí být jedinečný a jmenný, aby nedošlo ke kolizi s ostatními bloky, které přinášejí ostatní pluginy.</p> <p>Dále, <strong>Gutenberg poskytuje sadu nových JavaScript API pro interakci s “Blok” rozhraní</strong> v editoru. Vzhledem k tomu, že API je poměrně hojné, budeme se zaměřovat na některá specifika, o kterých si myslím, že byste měli vědět, abyste získali jednoduchý, ale funkční Gutenbergův blok..</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Nejprve se podíváme do <code>wp.blocks.registerBlockType</code>. Tato funkce se používá <strong>zaregistrovat nový “Blok” redakci Gutenbergu</strong>. Vyžaduje dva argumenty. První argument je název bloku, který by měl následovat název registrovaný v <code>register_block_type</code> funkce na straně PHP. Druhým argumentem je <strong>Objekt definující vlastnosti bloku</strong> rozhraní, jako je název, kategorie a několik funkcí.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), kategorie: 'widgety', klíčová slova: ['html'], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Tato funkce umožňuje vytvořit prvek uvnitř “Blok” v editoru příspěvků. <code>wp.element.createElement</code> funkce je v podstatě abstrakce React <code>createElement ()</code> funkce tak přijímá stejný soubor argumentů. První argument vezme typ prvku, například odstavec, a <code>rozpětí</code>, nebo <code>div</code> Jak je ukázáno níže:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Můžeme <strong>alias funkce do proměnné</strong> tak je kratší psát. Například:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>jestli ty <strong>preferují použití nové syntaxe ES6</strong>, můžete to také udělat takto:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>Můžeme také <strong>přidat atributy elementu</strong> Jako <code>třída</code> jméno nebo <code>id</code> na druhém parametru následovně:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'serie-html5', 'id': 'série-html-post-id-001');</pre> <p> <code>div</code> bez obsahu by to nedávalo smysl. Můžeme <strong>přidejte obsah do argumentu třetího parametru</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', '' '' ':' serie-html5 ',' id ':' serie-html-post-id-001 ',' Tento článek je součástí našeho "HTML5 / CSS3 Tutorials series" - vyhrazeno vám pomůže lépe navrhnout a / nebo vytvořit vývojáře Klikněte zde pro více článků ze stejné série ');</pre> <h4><code>wp.components</code></h4> <p> <code>wp.components</code> obsahovat sbírku, jak jméno napovídá, Gutenberg komponenty. Tyto komponenty jsou technicky React vlastní komponenty, které zahrnují Button, Popover, Spinner, Tooltip, a spoustu dalších. Můžeme <strong>znovu použít tyto komponenty do vlastního bloku</strong>. V následujícím příkladu přidáme komponentu tlačítka.</p> <pre name="code"> var Button = wp.components.Button; el (Tlačítko, 'class': 'tlačítko ke stažení',, 'Download');</pre> <h4>Atributy</h4> <p>Atributy jsou způsob, jak ukládat data do našeho bloku, tato data mohou být jako obsah, barvy, zarovnání, adresa URL, atd. Můžeme získat atributy z vlastností předaných na <code>Upravit()</code> funkce:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; return el ('div', '' class ':' serie-html5 ',' id ':' série-html-post-id-001 ', obsah); </pre> <p>Pro aktualizaci atributů používáme <code>setAttributes ()</code> funkce. Typicky bychom změnili obsah určitých akcí, jako je například klepnutí na tlačítko, vyplnění vstupu, volba je vybrána, atd. V následujícím příkladu jej použijeme k přidání <strong>ustoupit</strong> obsahu našeho bloku v případě, že by se něco stalo našemu <code>sérieObsah</code> Atribut.</p> <pre name="code"> edit: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Zde je nouzový obsah.' ) var content = props.attributes.seriesContent; return [el ('div', '' class ':' serie-html5 ',' id ':' série-html-post-id-001 ', obsah),]; </pre> <h4>Uložení bloku</h4> <p> <code>Uložit()</code> funkce funguje podobně jako <code>Upravit()</code>, kromě toho definuje obsah našeho bloku, který má být uložen do databáze příspěvků. Uložení obsahu bloku je poměrně jednoduché, jak vidíme níže:</p> <pre name="code"> save: function (props) if (! rekvizity ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; return [el ('div', '' class ':' serie-html5 ',' id ':' série-html-post-id-001 ', obsah),]; </pre> <h3>Co bude dál?</h3> <p>Gutenberg změní WordPress ekosystém pro lepší (nebo možná horší). Umožňuje vývojářům <strong>přijmout nový způsob vývoje WordPress pluginů a témat</strong>. Gutenberg je jen začátek. Brzy “Blok” paradigma bude rozšířena do dalších oblastí WordPressu, jako jsou API nastavení a widgety.</p> <p>Naučte JavaScript hluboce; je to jediný způsob, jak se dostat do Gutenbergu a zůstat relevantní pro budoucnost ve WordPress průmyslu. Pokud jste již obeznámeni se základy JavaScriptu, s vtipy, funkcemi, nástroji, zbožím a zlými, jsem si jistý, že s Gutenbergem dosáhnete rychlosti.</p> <p>Jak bylo zmíněno, Gutenberg vystavuje hojnost API, dost, aby udělal téměř cokoliv do vašeho bloku. Můžete zvolit, zda <strong>kód váš blok s obyčejný starý JavaScript, JavaScript se syntaxí ES6, React, nebo dokonce Vue</strong>.</p> <h4>Nápady a inspirace</h4> <p>Vytvořil jsem velmi (velmi) jednoduchý Gutenberg Block, který najdete v repozitáři našeho Github účtu. Dále jsem také sestavil řadu repozitářů, odkud můžete řídit inspiraci při budování komplexnějšího bloku.</p> <ul><li>Gutenblocks - sbírka bloků Mathieu Viet psaný v JavaScriptu s ES5 syntaxí</li> <li>Jetpack Gutenblocks projekt - sbírka bloků svázaných v Jetpack</li> <li>Seznam příkladů Gutenberg implementace včetně Vue.js</li> </ul><h3>Další reference</h3> <ul><li>Oficiální repozitář Gutenberg</li> <li>Gutenbergova příručka</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">Hack IKEA Lack tabulka do komponentního stojanu</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">Hack oddělit starou klávesnici pro vytvoření uživatelského ovládacího rozhraní</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">Průvodce Windows 10 Task Manager - část 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">Další článek</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">Hack si $ 10 Flashlight do Ultra-jasný Premium jeden</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Předchozí článek</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">Průvodce Windows 10 Task Manager - část 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"> Užitečné informace a tipy pro vývoj webových aplikací. Programování, webdesign, CSS, HTML, JAVASCRIPT. Nakonfigurujte a znovu nainstalujte Windows. Vytváření webů a aplikací od nuly. </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>