Gutenberg Sve što trebate znati o WordPress 'Najnoviji urednik
Gutenberg je novi urednik WordPressa koji će potpuno zamijenite trenutni TinyMCE uređivač. Riječ je o ambicioznom projektu koji će vjerojatno na različite načine promijeniti WordPress i utjecati na redovne krajnje korisnike i programere, posebno one koji ovise o uređivačkom zaslonu za rad na WordPressu. Evo kako to izgleda.
Gutenberg također uvodi novu paradigmu u WordPressu “Blok”.
“Blok” je apstraktni izraz koji se koristi za opisivanje jedinice označivanja koji su sastavljeni od sadržaja ili izgleda web-stranice. Ideja kombinira koncepte onoga što u WordPressu danas postižemo kratki kodovi, prilagođeni HTML i ugradnja otkrića u jedan konzistentan API i korisničko iskustvo.
Postavljanje projekta
Znajući činjenicu da je Gutenberg izgrađen na vrhu Reacta, neki programeri su zabrinuti da je Pregrada je previsoka za početnike u razvoju Gutenberga.
Postavljanje React.js moglo bi biti prilično dugotrajno i zbunjujuće ako ste tek počeli s njim. Trebat će vam barem JSX transformator, Babel, ovisno o vašem kodu možda će vam trebati Babel plugins, a Bundler poput Webpack, Rollup ili Parcel.
srećom, neki ljudi unutar WordPress zajednice pojačali su se i pokušavaju učiniti razvoj Gutenberga što je moguće lakšim za svakoga. Danas imamo alat koji će tako generirati Gutenbergov predložak odmah možemo početi pisati kod umjesto da se zbunjuju alatima i konfiguracijama.
Napravite blok Guten
stvoriti-Guten-blok je inicirani projekt Ahmada Awaisa. To je komplet alata s nultom konfiguracijom (# 0CJS) koji će vam omogućiti da razvijete Gutenberg blok s nekim modernim stackovima, uključujući React, Webpack, ESNext, Babel, ESLint i Sass. Slijedite upute da biste započeli s blokom Create Guten.
Korištenje ES5 (ECMAScript 5)
Koristeći sve te alate za stvaranje jednostavnog “Pozdrav svijete” blok može izgledati previše. Ako želite zadržati svoje hrpe mršavih, zapravo možete razviti Gutenbergov blok pomoću običnog dobrog ECMAScripta 5 s kojim ste možda već upoznati. Ako imate Na računalu je instaliran WP-CLI 1.5.0, možete jednostavno pokrenuti ...
blok skele wp[--Title = ] [--dashicon =<dashicon>] [--category =<category>] [- theme] [--plugin =<plugin>] [--force]</pre> <p>... do <strong>generirati predložak Gutenberg bloka za svoj dodatak ili temu</strong>. Ovaj je pristup osjetljiviji, posebno za postojeće dodatke i teme koje ste razvili prije Gutenbergovog doba.</p> <p>Umjesto stvaranja novog dodatka za smještaj Gutenbergovih blokova, možda ćete htjeti integrirati blokove u vaše dodatke ili teme. I kako bi ovaj tutorial lako slijediti za svakoga, <strong>koristit ćemo ECMAScript 5 s WP-CLI</strong>.</p> <h4>Registriranje novog bloka</h4> <p>Gutenberg je trenutno razvijen kao dodatak i spojit će se s WordPressom 5.0 kad god se tim osjeća spremnim. Dakle, za sada, trebat ćete ga instalirati iz <strong>Stranica dodataka u <code>wp-admin</code></strong>. Nakon što ste ga instalirali i aktivirali, pokrenite sljedeću naredbu u terminalu ili naredbenom retku ako ste na računalu sa sustavom Windows.</p> <pre name="code"> wp blok skele serija --title = "HTML5 Series" - tema</pre> <p>Ova će naredba generirati blok na trenutno aktivnu temu. Naš blok će se sastojati od sljedećih datoteka:</p> <pre name="code"> . Ă¢Â ??  ?? ¢ ??  ?? ¢ ??  ?? serije âÂ? Â'Ã' Ã' â ??  ?? ¢ ??  ?? ¢ ??  ?? block.js âÂ? Â'Ã' Ã' â ??  ?? ¢ ??  ?? ¢ ??  ?? editor.css âÂ? Â'Ã' Ã' â ??  ?? ¢ ??  ?? ¢ ??  ?? style.css â ??  ?? ¢ ??  ?? ¢ ??  ?? series.php </pre> <p>Učitajmo glavnu datoteku naših blokova u <code>functions.php</code> naše teme:</p> <pre name="code"> if (function_exists ('register_block_type')) zahtijevaju get_template_directory (). '/Blocks/series.php'; </pre> <p>Primijetite da datoteku učitavamo s uvjetnim. To osigurava <strong>kompatibilnost s prethodnom verzijom programa WordPress da je naš blok učitan samo kada je Gutenberg prisutan</strong>. Naš blok bi sada trebao biti dostupan unutar Gutenbergovog sučelja.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Ovako izgleda kada ubacimo blok.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenbergovi API-ji</h3> <p>Gutenberg uvodi dva seta API-ja za registriranje novog bloka. Ako pogledamo <code>series.php</code>, naći ćemo sljedeći kod koji registrira naš novi blok. Također <strong>učitava stilsku ploču i JavaScript na front-end i editor</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', niz ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Kao što možemo vidjeti gore, naš blok je imenovan <code>twentyseventeen / serija</code>, Naziv bloka mora biti jedinstven i prostorno označen kako bi se izbjegao sudar s drugim blokovima koje donose drugi dodaci.</p> <p>osim toga, <strong>Gutenberg nudi skup novih JavaScript API-ja za interakciju s “Blok” sučelje</strong> u uređivaču. Budući da je API dosta obilan, usredotočit ćemo se na neke specifičnosti za koje mislim da biste trebali znati kako biste dobili jednostavan, ali funkcionalan blok Gutenberg.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Prvo ćemo istražiti <code>wp.blocks.registerBlockType</code>. Ova funkcija je korištena <strong>registrirati novo “Blok” Gutenbergovom uredniku</strong>. Za to su potrebna dva argumenta. Prvi argument je ime bloka koje treba slijediti ime registrirano u <code>register_block_type</code> funkcija na PHP strani. Drugi argument je <strong>Object definira svojstva bloka</strong> kao što su naslov, kategorija i nekoliko funkcija za prikaz sučelja Block.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), kategorija: 'widgets', ključne riječi: ['html'], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Ova funkcija omogućuje stvaranje elementa unutar “Blok” u uređivaču postova. <code>wp.element.createElement</code> Funkcija je u osnovi apstrakcija Reakcije <code>createElement ()</code> tako prihvaća isti skup argumenata. Prvi argument uzima vrstu elementa, primjerice, stavak, a <code>pedalj</code>, ili a <code>div</code> kako je prikazano dolje:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Možemo <strong>alias funkciju u varijablu</strong> tako da je kraće pisati. Na primjer:</p> <pre name="code"> var el = wp.element.createElement; el ( 'div');</pre> <p>Ako ti <strong>preferiraju novu ES6 sintaksu</strong>, to možete učiniti i na ovaj način:</p> <pre name="code"> const createElement: el = wp.element; el ( 'div');</pre> <p>Možemo također <strong>dodajte atribute elemenata</strong> kao <code>klasa</code> ime ili <code>iskaznica</code> na drugom parametru kako slijedi:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p> <code>div</code> koje smo stvorili ne bi imalo smisla bez sadržaja. Možemo <strong>dodajte sadržaj na argument trećeg parametra</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Ovaj je članak dio naše "serije HTML5 / CSS3 Tutorials" - posvećenih kako bi vam pomogao da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije ');</pre> <h4><code>wp.components</code></h4> <p> <code>wp.components</code> sadrži zbirku Gutenbergovih komponenti, kao što i samo ime implicira. Te su komponente tehnički React prilagođene komponente koje uključuju Button, Popover, Spinner, Tooltip i hrpu drugih. Možemo <strong>ponovno upotrijebite ove komponente u naš vlastiti blok</strong>. U sljedećem primjeru dodamo komponentu gumba.</p> <pre name="code"> var Button = wp.components.Button; el (Button, 'class': 'gumb za preuzimanje',, 'Download');</pre> <h4>Značajke</h4> <p>Atributi su način pohranjivanja podataka u naš Blok, a ti podaci mogu biti poput sadržaja, boja, poravnanja, URL-a itd. Atribute možemo dobiti iz svojstava prenesenih na <code>Uredi()</code> funkcija, kako slijedi:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', sadržaj); </pre> <p>Za ažuriranje atributa koristimo <code>setAttributes ()</code> funkcija. Tipično bismo izmijenili sadržaj na određenoj radnji, primjerice kada se klikne na gumb, unesemo unos, odaberemo opciju, itd. U sljedećem primjeru koristimo ga za dodavanje <strong>rezervna</strong> sadržaj našeg bloka u slučaju da se nešto neočekivano dogodilo našem <code>seriesContent</code> Atribut.</p> <pre name="code"> edit: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Pozdrav svijetu! Ovdje je povratni sadržaj.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', sadržaj),]; </pre> <h4>Spremanje bloka</h4> <p> <code>uštedjeti()</code> Funkcija radi slično kao <code>Uredi()</code>, osim što definira sadržaj našeg Bloka za spremanje u bazu podataka posta. Spremanje sadržaja bloka vrlo je jednostavno, kao što možemo vidjeti u nastavku:</p> <pre name="code"> save: function (props) if (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', sadržaj),]; </pre> <h3>Što je sljedeće?</h3> <p>Gutenberg će promijeniti WordPress ekosustav na bolje (ili možda još gore). To omogućuje programerima da <strong>usvojiti novi način razvoja WordPress dodataka i tema</strong>. Gutenberg je samo početak. Uskoro “Blok” paradigma će se proširiti na druga područja WordPressa, kao što su API-ji postavki i Widgeti.</p> <p>Saznajte duboko JavaScript; to je jedini način da uđete u Gutenberg i ostanete relevantni za budućnost u WordPress industriji. Ako ste već upoznati s osnovama JavaScripta, funkcijama, alatima, robom i oštricama, siguran sam da ćete se ubrzati s Gutenbergom.</p> <p>Kao što je već spomenuto, Gutenberg izlaže obilje API-ja, dovoljno za gotovo sve što je u vašem Bloku. Možete odabrati želite li <strong>kodirajte svoj blok s običnim starim JavaScriptom, JavaScriptom s ES6 sintaksu, React ili čak Vue</strong>.</p> <h4>Ideje i nadahnuća</h4> <p>Napravio sam vrlo (vrlo) jednostavan Gutenbergov blok koji možete pronaći u spremištu našeg Github računa. Nadalje, također sam sastavio niz spremišta odakle možete inspirirati izgradnju složenijeg bloka.</p> <ul><li>Gutenblocks - Zbirka blokova koju je napisao Mathieu Viet u JavaScriptu sa ES5 sintaksom</li> <li>Jetpack Gutenblocks Project - zbirka blokova u Jetpacku</li> <li>Popis primjera implementacije Gutenberga, uključujući i Vue.js</li> </ul><h3>Daljnje reference</h3> <ul><li>Službeni repozitorij Gutenberga</li> <li>Priručnik za 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">Hack IKEA nedostatak tablice u komponentu Rack</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 Apart Stara tipkovnica za stvaranje Custom Control sučelje</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">Vodič za Windows 10 Task Manager - Dio 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">Sljedeći članak</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 $ 10 Svjetiljka u Ultra-svijetle Premium</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Prethodni članak</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">Vodič za Windows 10 Task Manager - Dio 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"> Korisni podaci i savjeti za web-razvoj. Programiranje, web dizajn, CSS, HTML, JAVASCRIPT. Konfigurirajte i ponovno instalirajte WINDOWS. Izrada web stranica i aplikacija ispočetka. </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>