Gutenberg Alt du trenger å vite om WordPress 'nyeste redaktør
Gutenberg er en ny redaktør for WordPress som vil helt erstatt gjeldende TinyMCE-drevet editor. Det er et ambisiøst prosjekt som sikkert vil endre WordPress på mange måter, og vil påvirke både vanlige sluttbrukere og utviklere, spesielt de som er avhengige av redigeringsskjermbildet for å jobbe på WordPress. Slik ser det ut.
Gutenberg introduserer også et nytt paradigme i WordPress kalt “Blokkere”.
“Blokkere” er det abstrakte begrepet som brukes til å beskrive enheter av oppslag som er sammensatt av innholdet eller utformingen av en nettside. Ideen kombinerer begreper som i WordPress i dag vi oppnår med kortkoder, egendefinert HTML og integrere funn i en enkelt konsistent API og brukeropplevelse.
Sette opp prosjektet
Å vite at Gutenberg er bygget på toppen av React, er noen utviklere bekymret for at barriere er for høy for utviklere på grunnnivå for å utvikle Gutenberg.
Sette opp React.js kan være ganske tidkrevende og forvirrende hvis du nettopp har begynt med det. Du trenger minst, JSX-transformator, Babel, avhengig av koden din, kan du trenge noen Babel-plugins, og en Bundler som Webpack, Rollup eller Parcel.
Heldigvis, Noen mennesker i WordPress-fellesskapet gikk opp og prøver å gjøre utviklingen av Gutenberg så enkelt som mulig for alle å følge. I dag har vi et verktøy som vil generere en Gutenberg boilerplate slik vi kan begynne å skrive kode med en gang i stedet for å forske med verktøyene og konfigurasjonene.
Opprett Guten Block
De lag-guten-blokk er et initiert prosjekt av Ahmad Awais. Det er en nullkonfigurasjonsverktøy (# 0CJS) som gjør at du kan utvikle Gutenberg-blokken med noen moderne stabler forhåndsinnstilt, inkludert React, Webpack, ESNext, Babel, ESLint og Sass. Følg instruksjonene for å komme i gang med Create Guten Block.
Bruke ES5 (ECMAScript 5)
Bruk alle disse verktøyene til å lage en enkel “Hei Verden” blokk kan virke bare for mye. Hvis du liker å holde stablene lene, kan du faktisk utvikle en Gutenberg-blokk ved hjelp av en vanlig god ol 'ECMAScript 5 som du kanskje allerede har kjent med. Hvis du har WP-CLI 1.5.0 installert på datamaskinen, du kan bare kjøre ...
wp stillas blokk[--Title = ] [--dashicon =<dashicon>] [- kategori =<category>] [--theme] [- plugin =<plugin>] [--force]</pre> <p>… til <strong>generer Gutenberg-blokkens boilerplate til plugin eller tema</strong>. Denne tilnærmingen er mer fornuftig, spesielt for eksisterende plugins og temaer som du har utviklet før Gutenberg-epoken.</p> <p>I stedet for å lage et nytt plugin for å imøtekomme Gutenberg-blokkene, vil du kanskje integrere blokkene til pluginene dine eller temaene. Og for å gjøre denne opplæringen enkel å følge for alle, <strong>Vi bruker ECMAScript 5 med WP-CLI</strong>.</p> <h4>Registrering av en ny blokk</h4> <p>Gutenberg er for tiden utviklet som et plugin og vil bli slått sammen til WordPress 5.0 når laget føler at det er klart. Så, for øyeblikket, må du installere den fra <strong>Plugins-siden i <code>wp-admin</code></strong>. Når du har installert og aktivert det, kjør følgende kommando i Terminal eller Kommandoprompt hvis du er på en Windows-maskin.</p> <pre name="code"> wp stillasblokkserie --title = "HTML5 Series" - tema</pre> <p>Denne kommandoen vil generere en blokk til det aktive temaet. Vår Blokk består av følgende filer:</p> <pre name="code"> . EN¢Â ??  ?? â ??  ?? â ??  ?? serie â    à  â ??  ?? â ??  ?? â ??  ?? block.js â    à  â ??  ?? â ??  ?? â ??  ?? editor.css â    à  â ??  ?? â ??  ?? â ??  ?? style.css â ??  ?? â ??  ?? â ??  ?? series.php </pre> <p>La oss laste inn hovedfilen til blokkene våre i <code>functions.php</code> av vårt tema:</p> <pre name="code"> hvis (function_exists ('register_block_type')) krever get_template_directory (). '/Blocks/series.php'; </pre> <p>Legg merke til at vi vedlegger filen lastes med en betinget. Dette sikrer <strong>kompatibilitet med tidligere WordPress versjon at vår blokk bare er lastet når Gutenberg er til stede</strong>. Vår blokk skal nå være tilgjengelig i Gutenberg-grensesnittet.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Slik ser det ut når vi legger inn blokken.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenberg APIer</h3> <p>Gutenberg introduserer to sett med APIer for å registrere en ny blokk. Hvis vi ser på <code>series.php</code>, Vi finner følgende kode som registrerer vår nye blokk. Det også <strong>laster stilarket og JavaScripts på forsiden og redigeringsprogrammet</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'series-block-editor', 'editor_style' => 'serie-blokk-editor', 'style' => 'serieblokk'</pre> <p>Som vi kan se over, er vår blokk navngitt <code>twentyseventeen / serie</code>, Blokknavnet må være unikt og navngitt for å unngå kollisjon med de andre blokkene brakt av de andre pluginene.</p> <p>Dessuten, <strong>Gutenberg gir et sett med nye JavaScript-APIer for å samhandle med “Blokkere” grensesnitt</strong> i redaktøren. Siden API er ganske rikelig, vil vi fokusere på noen detaljer som jeg tror du burde vite for å få en enkel, men likevel fungerende Gutenberg Block.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Først vil vi se på <code>wp.blocks.registerBlockType</code>. Denne funksjonen er vant til <strong>registrer en ny “Blokkere” til Gutenberg-redaktøren</strong>. Det krever to argumenter. Det første argumentet er blokknavnet som skal følge navnet som er registrert i <code>register_block_type</code> fungere i PHP-siden. Det andre argumentet er en <strong>Objekt som definerer blokkegenskapene</strong> som tittel, kategori og et par funksjoner for å gjengi Block-grensesnittet.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), kategori: 'widgets', nøkkelord: ['html'], rediger: funksjon (rekvisitter) , lagre: funksjon (rekvisitter) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Denne funksjonen lar deg lage elementet i “Blokkere” i innleggeditoren. De <code>wp.element.createElement</code> funksjon er i utgangspunktet en abstraksjon av React <code>createElement ()</code> funksjonen slik at den aksepterer det samme settet av argumenter. Det første argumentet tar elementets type for eksempel et avsnitt, a <code>span</code>, eller a <code>div</code> som vist under:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Vi kan <strong>alias funksjonen til en variabel</strong> så det er kortere å skrive. For eksempel:</p> <pre name="code"> var el = wp.element.createElement; el ( 'div');</pre> <p>Hvis du <strong>foretrekker å bruke den nye ES6-syntaksen</strong>, du kan også gjøre det på denne måten:</p> <pre name="code"> const createElement: el = wp.element; el ( 'div');</pre> <p>Vi kan også <strong>legg til elementattributtene</strong> slik som <code>klasse</code> navn eller <code>id</code> på den andre parameteren som følger:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001');</pre> <p>De <code>div</code> som vi opprettet ville ikke gi mening uten innholdet. Vi kan <strong>legg til innholdet på argumentet til den tredje parameteren</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Denne artikkelen er en del av vår "HTML5 / CSS3 opplæringsserie" for å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie ');</pre> <h4><code>wp.components</code></h4> <p>De <code>wp.components</code> inneholder en samling av Gutenberg-komponentene, som navnet antyder. Disse komponentene er teknisk sett React tilpassede komponenter som inkluderer knappen, Popover, Spinner, Tooltip og en haug med andre. Vi kan <strong>Gjenbruk disse komponentene i vår egen blokk</strong>. I følgende eksempel legger vi til en knappkomponent.</p> <pre name="code"> Var Button = wp.components.Button; el (Button, 'class': 'download-button',, 'Download');</pre> <h4>Egenskaper</h4> <p>Attributtene er måten å lagre dataene i Blokken på. Disse dataene kan være som innholdet, farger, justeringer, nettadressen etc. Vi kan få attributter fra egenskapene passert på <code>redigere()</code> funksjon, som følger:</p> <pre name="code"> rediger: funksjon (rekvisitter) var content = props.attributes.seriesContent; returnere el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001', innhold); </pre> <p>For å oppdatere egenskapene bruker vi <code>setAttributes ()</code> funksjon. Vanligvis vil vi endre innholdet på bestemte handlinger, for eksempel når en knapp klikkes, et innspill fylles, et alternativ er valgt, etc. I det følgende eksempel bruker vi det til å legge til en <strong>falle tilbake</strong> innholdet i blokken vår i tilfelle noe uventet skjedde med vår <code>seriesContent</code> Egenskap.</p> <pre name="code"> edit function ) var content = props.attributes.seriesContent; returnere [el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001', innhold),]; </pre> <h4>Lagre blokken</h4> <p>De <code>lagre()</code> funksjon fungerer på samme måte som <code>redigere()</code>, bortsett fra det definerer innholdet i blokken vår for å lagre i postdatabasen. Lagring av blokkinnholdet er ganske enkelt, som vi kan se nedenfor:</p> <pre name="code"> lagre: funksjon (rekvisitter) hvis (! rekvisitter ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; returnere [el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001', innhold),]; </pre> <h3>Hva blir det neste?</h3> <p>Gutenberg vil forandre WordPress økosystem til det bedre (eller muligens det verre). Det gjør det mulig for utviklere å <strong>vedta en ny måte å utvikle WordPress plugins og temaer på</strong>. Gutenberg er bare en start. Snart “Blokkere” paradigmet vil bli utvidet til andre områder av WordPress som Innstillinger APIer og Widgets.</p> <p>Lær JavaScript dypt; det er den eneste måten å komme inn på Gutenberg og være relevant for fremtiden i WordPress-bransjen. Hvis du allerede er kjent med JavaScript-grunnleggende, quirks, funksjonene, verktøyene, varene og bads, er jeg veldig sikker på at du vil komme opp til fart med Gutenberg.</p> <p>Som nevnt avslører Gutenberg en overflod av APIer, nok til å gjøre nesten alt til Blokken din. Du kan velge om du vil <strong>kode din Blokker med et vanlig gammelt JavaScript, JavaScript med ES6 syntaks, React, eller til og med Vue</strong>.</p> <h4>Ideer og inspirasjon</h4> <p>Jeg har opprettet en veldig (veldig) enkel Gutenberg-blokk som du finner i Github-kontoens arkiv. Videre har jeg også satt sammen en rekke lagre der du kan drive inspirasjon på å bygge en mer kompleks blokk.</p> <ul><li>Gutenblocks - En samling av blokker av Mathieu Viet skrevet i JavaScript med ES5 syntaks</li> <li>Jetpack Gutenblocks Project - en samling av blokker pakket i Jetpack</li> <li>En liste over eksempler på Gutenberg Implementering inkludert med Vue.js</li> </ul><h3>Ytterligere referanse</h3> <ul><li>Gutenberg Offisiell Repository</li> <li>Gutenberg-håndboken</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">Hakk et IKEA Lack-bord i en komponenthylle</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 Del et gammelt tastatur for å skape tilpasset kontrollgrensesnitt</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">Guide til Windows 10 Oppgavebehandling - 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">Neste artikkel</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">Hakk en $ 10 lommelykt inn i en Ultra Bright Premium One</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Forrige artikkel</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">Guide til Windows 10 Oppgavebehandling - 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"> Nyttig informasjon og tips om nettutvikling. Programmering, webdesign, CSS, HTML, JAVASCRIPT. Konfigurer og installer WINDOWS på nytt. Opprettelse av nettsteder og applikasjoner fra bunnen av. </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>