Gutenberg Vse, kar morate vedeti o najnovejšem urejevalniku WordPress
Gutenberg je nov urednik za WordPress, ki bo popolnoma zamenjajte trenutni urejevalnik, ki ga poganja TinyMCE. Gre za ambiciozen projekt, ki bo verjetno spremenil WordPress na več načinov in bi prizadel tako redne končne uporabnike kot tudi razvijalce, predvsem tiste, ki so odvisni od uredniškega zaslona za delo z WordPressom. Tukaj je, kako izgleda.
Gutenberg uvaja tudi novo paradigmo v WordPressu “Blokiraj”.
“Blokiraj” je abstraktni izraz, ki se uporablja za opis enote označevanja ki so sestavljeni iz vsebine ali postavitve spletne strani. Ideja združuje koncepte o tem, kaj danes v WordPressu dosegamo kratke kode, HTML po meri in vdelavo odkrivanja v en sam skladen API in uporabniško izkušnjo.
Vzpostavitev projekta
Poznavanje dejstva, da je Gutenberg zgrajen na vrhu Reacta, so nekateri razvijalci zaskrbljeni, da pregrada je previsoka za začetnike, ki razvijajo Gutenberg.
Nastavitev React.js bi lahko bila precej zamudna in zmedena, če ste jo šele začeli uporabljati. Potrebovali boste vsaj transformator JSX, Babel, odvisno od vaše kode, boste morda potrebovali nekaj Babel plugins in Bundler, kot je Webpack, Rollup ali Parcel.
Na srečo, nekateri ljudje v skupnosti WordPress so se okrepili in se trudijo, da bi Gutenberg čim lažje sledili. Danes imamo orodje, ki bo tako ustvarilo Gutenbergovo predlogo takoj lahko začnemo pisati kodo namesto da bi se motili z orodji in konfiguracijami.
Ustvari blok Guten
The create-guten-block je projekt, ki ga je sprožil Ahmad Awais. Je komplet orodij brez nastavitve (# 0CJS), ki vam bo omogočil razvoj Gutenbergovega bloka z nekaterimi modernimi prednastavitvami, kot so React, Webpack, ESNext, Babel, ESLint in Sass. Sledite navodilom, da začnete z Create Guten Block.
Uporaba ES5 (ECMAScript 5)
Uporaba vseh teh orodij za ustvarjanje preprostih “Pozdravljen, svet” blok se morda zdi preveč. Če želite ohraniti svoje vitke vitkejših, lahko dejansko razvijete Gutenbergov blok z uporabo navadnega dobrega ECMAScripta 5, ki ga morda že poznate. Če imate V računalniku je nameščen WP-CLI 1.5.0, preprosto lahko zaženete ...
blok gradbenih odrov[--title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--force]</pre> <p>… Do <strong>ustvarite predlogo Gutenberg bloka za vaš plugin ali temo</strong>. Ta pristop je bolj smiseln, zlasti za obstoječe vtičnike in teme, ki ste jih razvili pred Gutenberško dobo.</p> <p>Namesto ustvarjanja novega vtičnika za prilagoditev Gutenbergovih blokov, boste morda želeli povezati bloke z vtičniki ali temami. In za to, da je ta vadba preprosta za vsakogar, <strong>uporabljali bomo ECMAScript 5 z WP-CLI</strong>.</p> <h4>Registracija novega bloka</h4> <p>Gutenberg je trenutno razvit kot vtičnik in se bo združil z WordPress 5.0, ko bo ekipa menila, da je pripravljena. Torej ga boste za zdaj morali namestiti iz <strong>Stran z vtičniki v <code>wp-admin</code></strong>. Ko ga namestite in aktivirate, zaženite naslednji ukaz v terminalu ali v ukaznem pozivu, če ste na računalniku z operacijskim sistemom Windows.</p> <pre name="code"> wp scaffold blok serija --title = "HTML5 Series" - tema</pre> <p>Ta ukaz ustvari blok na trenutno aktivno temo. Naš blok bo sestavljen iz naslednjih datotek:</p> <pre name="code"> . â ?? â ?? â ?? serije âÂ? Â'Ã' Ã' â ?? â ?? â ?? block.js âÂ? Â'Ã' Ã' â ?? â ?? â ?? editor.css âÂ? Â'Ã' Ã' â ?? â ?? â ?? style.css â ?? â ?? â ?? series.php </pre> <p>Naložimo glavno datoteko naših blokov v <code>functions.php</code> naše teme:</p> <pre name="code"> if (function_exists ('register_block_type')) zahteva get_template_directory (). '/blocks/series.php'; </pre> <p>Opazimo, da smo datoteko naložili s pogojno. To zagotavlja <strong>združljivost s prejšnjo različico programa WordPress, da je naš blok naložen le, če je prisoten Gutenberg</strong>. Naš blok bi moral biti zdaj na voljo znotraj Gutenbergovega vmesnika.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Tako izgleda, ko vstavimo 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 uvaja dva niza API-jev za registracijo novega bloka. Če pogledamo <code>series.php</code>, našli bomo naslednjo kodo, ki beleži naš novi blok. Tudi <strong>naloži slogovno predlogo in JavaScript na sprednji in urejevalnik</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Kot lahko vidimo zgoraj, je naš blok imenovan <code>enaindvajset / serija</code>, Ime Block mora biti unikatno in imenovano, da bi se izognili koliziji z drugimi bloki, ki jih prinesejo drugi vtičniki.</p> <p>Poleg tega, <strong>Gutenberg ponuja vrsto novih API-jev JavaScript za interakcijo z “Blokiraj” vmesnik</strong> v urejevalniku. Ker je API precej obilen, se bomo osredotočili na nekatere posebnosti, za katere mislim, da bi morali vedeti, da boste dobili preprost, a delujoč blok Gutenberg.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Prvič, preučili bomo <code>wp.blocks.registerBlockType</code>. Ta funkcija je uporabljena <strong>registrirati novo “Blokiraj” Gutenbergu</strong>. Zahteva dva argumenta. Prvi argument je ime bloka, ki mora slediti imenu, registriranemu v <code>register_block_type</code> funkcijo na strani PHP. Drugi argument je <strong>Definiranje lastnosti blokovnih objektov</strong> kot so naslov, kategorija in nekaj funkcij, ki omogočajo vmesnik Block.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), kategorija: 'pripomočki', ključne besede: ['html'], uredi: funkcija (rekviziti) , shrani: funkcija (rekviziti) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Ta funkcija vam omogoča, da ustvarite element znotraj “Blokiraj” v urejevalniku objav. The <code>wp.element.createElement</code> Funkcija je v bistvu abstrakcija Reacta <code>createElement ()</code> funkcijo, tako da sprejme isti niz argumentov. Prvi argument vzame tip elementa, na primer odstavek, a <code>razpon</code>, ali a <code>div</code> kot je prikazano spodaj:</p> <pre name="code">wp.element.createElement („div“);</pre> <p>Mi lahko <strong>alias funkcijo v spremenljivko</strong> zato je krajše pisati. Na primer:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>Če ti <strong>raje uporabljajo novo skladnjo ES6</strong>, lahko to storite tudi tako:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>Lahko tudi <strong>dodajte atribute elementa</strong> kot je <code>razred</code> ime ali <code>id</code> na drugem parametru:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>The <code>div</code> ki smo jih ustvarili, ne bi imeli smisla brez vsebine. Mi lahko <strong>dodajte vsebino na argument tretjega parametra</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Ta članek je del naše "serije vadnic HTML5 / CSS3" - namenjen da bi vam pomagali, da ste boljši oblikovalec in / ali razvijalec. Kliknite tukaj za več člankov iz iste serije ');</pre> <h4><code>wp.components</code></h4> <p>The <code>wp.components</code> vsebujejo zbirko Gutenbergovih sestavin, kot že ime pove. Te komponente so tehnično komponente React custom, ki vključujejo gumb, popover, Spinner, Tooltip in veliko drugih. Mi lahko <strong>ponovno uporabite te komponente v naš blok</strong>. V naslednjem primeru dodamo komponento gumba.</p> <pre name="code"> var Button = wp.components.Button; el (Button, 'class': 'gumb za prenos',, 'Download');</pre> <h4>Lastnosti</h4> <p>Atributi so način za shranjevanje podatkov v našem bloku, ti podatki so lahko podobni vsebini, barvam, poravnavam, URL-ju itd. Atribute lahko dobimo iz lastnosti, prenesene na <code>Uredi()</code> funkcijo, kot sledi: \ t</p> <pre name="code"> edit: funkcija (props) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', vsebina); </pre> <p>Za posodobitev atributov uporabimo <code>setAttributes ()</code> funkcijo. Običajno bi spremenili vsebino določenega dejanja, na primer ob kliku gumba, vnosu, izbrani možnosti itd. V naslednjem primeru ga uporabimo za dodajanje <strong>pasti nazaj</strong> vsebino našega bloka v primeru, da se je našemu kaj zgodilo nekaj nepričakovanega <code>seriesContent</code> Atribut.</p> <pre name="code"> edit: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Pozdrav svet! ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', vsebina),]; </pre> <h4>Shranjevanje bloka</h4> <p>The <code>shrani ()</code> Funkcija deluje podobno kot <code>Uredi()</code>, razen, da definira vsebino našega bloka za shranjevanje v bazo podatkov posta. Shranjevanje vsebine bloka je precej preprosto, kot lahko vidite spodaj:</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', vsebina),]; </pre> <h3>Kaj je naslednje?</h3> <p>Gutenberg bo spremenil WordPress ekosistem na bolje (ali morda še slabše). To omogoča razvijalcem <strong>sprejme nov način razvoja WordPress vtičnikov in tem</strong>. Gutenberg je samo začetek. Kmalu “Blokiraj” paradigma bo razširjena na druga področja WordPressa, kot so API-ji za nastavitve in Widgets.</p> <p>Naučite JavaScript globoko; to je edini način, da pridete v Gutenberg in ostanete relevantni za prihodnost v industriji WordPress. Če ste že seznanjeni z osnovami JavaScripta, funkcijami, orodji, blagom in značkami, sem prepričan, da boste z Gutenbergom hitro napredovali..</p> <p>Kot smo že omenili, Gutenberg izpostavlja številne API-je, dovolj, da skoraj blokira. Izberete lahko, ali želite <strong>kodirajte svoj blok z navadnim starim JavaScriptom, JavaScriptom s sintakso ES6, React ali celo Vue</strong>.</p> <h4>Ideje in navdihi</h4> <p>Ustvaril sem zelo (zelo) preprost Gutenbergov blok, ki ga lahko najdete v skladišču našega Githubovega računa. Poleg tega sem sestavil tudi več skladišč, od koder lahko navdih navdihne pri gradnji kompleksnejšega bloka.</p> <ul><li>Gutenblocks - Zbirka blokov Mathieu Viet, napisana v JavaScriptu s sintakso ES5</li> <li>Jetpack Gutenblocks Project - zbirka blokov, združenih v Jetpacku</li> <li>Seznam primerov izvedbe Gutenberga, vključno z Vue.js</li> </ul><h3>Nadaljnje reference</h3> <ul><li>Uradni repozitorij Gutenberga</li> <li>Priročnik Gutenberga</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 pomanjkanje tabele v komponento 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 Poleg stare tipkovnice za ustvarjanje Custom Control Interface</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">Vodnik za Windows 10 Task Manager - Del 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">Naslednji članek</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 a $ 10 Svetilka v Ultra-svetel Premium One</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Prejšnji članek</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">Vodnik za Windows 10 Task Manager - Del 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"> Koristne informacije in nasveti za razvoj spleta. Programiranje, spletni dizajn, CSS, HTML, JAVASCRIPT. Konfigurirajte in znova namestite WINDOWS. Izdelava spletnih mest in aplikacij iz nič. </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>