Gutenberg Alt du behøver at vide om WordPress 'nyeste editor
Gutenberg er en ny editor til WordPress, der vil helt Udskift den nuværende TinyMCE-drevne editor. Det er et ambitiøst projekt, der sandsynligvis ændrer WordPress på mange måder og vil påvirke både almindelige slutbrugere og udviklere, specifikt dem, der er afhængige af redigeringsskærmen for at arbejde på WordPress. Sådan ser det ud.
Gutenberg introducerer også et nyt paradigme i WordPress kaldet “Blok”.
“Blok” Er det abstrakte udtryk, der bruges til at beskrive enheder af markering som er sammensat af indholdet eller layoutet på en webside. Ideen kombinerer begreber til hvad i WordPress i dag vi opnår med kortkoder, brugerdefineret HTML og integrere opdagelse i en enkelt sammenhængende API og brugeroplevelse.
Opsætning af projektet
At vide, at Gutenberg er bygget oven på React, er nogle udviklere bekymrede over, at barriere er for høj til entry-level udviklere til udvikling af Gutenberg.
Opsætning React.js kan være ret tidskrævende og forvirrende, hvis du lige er begyndt med det. Du skal mindst bruge JSX-transformeren, Babel, afhængigt af din kode, kan du have brug for nogle Babel-plugins og en Bundler som Webpack, Rollup eller Parcel.
Heldigvis, nogle mennesker inden for WordPress-fællesskabet steg op og forsøger at gøre udviklingen af Gutenberg så let som muligt for alle at følge. I dag har vi et værktøj, der vil generere en Gutenberg boilerplate vi kan begynde at skrive kode med det samme i stedet for at befrugte med værktøjerne og konfigurationerne.
Opret Guten Block
Det skabe-guten-blok er et initiativt projekt af Ahmad Awais. Det er en nulkonfigurationsværktøjssæt (# 0CJS), der giver dig mulighed for at udvikle Gutenberg-blokken med nogle moderne stabler forudindstillet, herunder React, Webpack, ESNext, Babel, ESLint og Sass. Følg vejledningen for at komme i gang med Create Guten Block.
Brug af ES5 (ECMAScript 5)
Brug alle disse værktøjer til at skabe en enkel “Hej Verden” blokke kan virke bare for meget. Hvis du kan lide at holde dine stabler lænket, kan du faktisk udvikle en Gutenberg-blok ved hjælp af en almindelig god ol 'ECMAScript 5, som du måske allerede har kendskab til. Hvis du har WP-CLI 1.5.0 installeret på din computer, du kan bare køre ...
wp stillads blok[--Title = ] [--dashicon =<dashicon>] [- kategori =<category>] [--theme] [- plugin =<plugin>] [--force]</pre> <p>… til <strong>generer Gutenberg-kogepladen til dit plugin eller tema</strong>. Denne tilgang er mere fornuftig, især for eksisterende plugins og temaer, som du har udviklet før Gutenberg æra.</p> <p>I stedet for at oprette et nyt plugin for at imødekomme Gutenberg-blokke, kan du måske integrere blokkerne i dine plugins eller temaerne. Og for at gøre denne vejledning nem at følge for alle, <strong>vi bruger ECMAScript 5 med WP-CLI</strong>.</p> <h4>Registrering af en ny blok</h4> <p>Gutenberg er i øjeblikket udviklet som et plugin og vil blive slået sammen til WordPress 5.0, når holdet føler, at det er klar. Så i øjeblikket skal du installere det fra <strong>Plugins side i <code>wp-admin</code></strong>. Når du har installeret og aktiveret det, skal du køre følgende kommando i Terminal eller Command Prompt, hvis du er på en Windows-maskine.</p> <pre name="code"> wp stilladsblokserie --title = "HTML5 Series" --theme</pre> <p>Denne kommando vil generere en blok til det aktuelt aktive tema. Vores Blok består af følgende filer:</p> <pre name="code"> . EN¢Â ?? â ?? â ?? â ?? â ?? â ?? serie â     à â ?? â ?? â ?? â ?? â ?? â ?? block.js â     à â ?? â ?? â ?? â ?? â ?? â ?? editor.css â     à â ?? â ?? â ?? â ?? â ?? â ?? style.css â ?? â ?? â ?? â ?? â ?? â ?? series.php </pre> <p>Lad os indlæse hovedfilen af vores blokke i <code>functions.php</code> af vores tema:</p> <pre name="code"> hvis (function_exists ('register_block_type')) kræver get_template_directory (). '/Blocks/series.php'; </pre> <p>Bemærk, at vi vedlægger filindlæsningen med en betinget. Dette sikrer <strong>kompatibilitet med tidligere WordPress-version, at vores blok kun er indlæst, når Gutenberg er til stede</strong>. Vores blok skal nu være tilgængelig inden for Gutenberg-grænsefladen.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Sådan ser det ud, når vi indsætter blokken.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenberg API'er</h3> <p>Gutenberg introducerer to sæt API'er til registrering af en ny blok. Hvis vi ser på <code>series.php</code>, Vi finder følgende kode, der registrerer vores nye blok. Det også <strong>Indlæser stilarket og JavaScripts i front-end og editoren</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'serieblok-editor', 'editor_style' => 'serieblok-editor', 'style' => 'serieblok'));</pre> <p>Som vi kan se ovenfor, er vores blok navngivet <code>twentyseventeen / serie</code>, Bloknavnet skal være unikt og navnefelt for at undgå kollision med de andre blokke, der er bragt af de andre plugins.</p> <p>desuden, <strong>Gutenberg giver et sæt nye JavaScript API'er til at interagere med “Blok” grænseflade</strong> i redaktøren. Da API'en er rigelig, vil vi fokusere på nogle detaljer, som jeg synes du burde vide for at få en enkel, men alligevel fungerende Gutenberg Block.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Først skal vi se nærmere på <code>wp.blocks.registerBlockType</code>. Denne funktion er vant til <strong>registrer en ny “Blok” til Gutenberg editoren</strong>. Det kræver to argumenter. Det første argument er bloknavnet, som skal følge navnet registreret i <code>register_block_type</code> funktion i PHP side. Det andet argument er en <strong>Objekt definerer blokegenskaberne</strong> lignende titel, kategori og et par funktioner til at gøre Block-grænsefladen.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), kategori: 'widgets', nøgleord: ['html'], rediger: funktion (rekvisitter) , gem: funktion ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Denne funktion giver dig mulighed for at oprette elementet i “Blok” i postredaktøren. Det <code>wp.element.createElement</code> funktion er i grunden en abstraktion af reaktionen <code>createElement ()</code> funktionen accepterer således det samme sæt argumenter. Det første argument tager elementets type for eksempel et afsnit, a <code>span</code>, eller a <code>div</code> som vist nedenfor:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Vi kan <strong>alias funktionen i en variabel</strong> så det er kortere at skrive. For eksempel:</p> <pre name="code"> var el = wp.element.createElement; el ( 'div');</pre> <p>hvis du <strong>foretrækker at bruge den nye ES6 syntaks</strong>, du kan også gøre det på denne måde:</p> <pre name="code"> const createElement: el = wp.element; el ( 'div');</pre> <p>Vi kan også <strong>Tilføj elementattributterne</strong> som f.eks <code>klasse</code> navn eller <code>id</code> på den anden parameter 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>Det <code>div</code> at vi skabte ville ikke give mening uden indholdet. Vi kan <strong>Tilføj indholdet på argumentet for den tredje parameter</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Denne artikel er en del af vores "HTML5 / CSS3 Tutorials Series" for at gøre dig til en bedre designer og / eller udvikler. Klik her for at se flere artikler fra samme serie ');</pre> <h4><code>wp.components</code></h4> <p>Det <code>wp.components</code> indeholder en samling af Gutenberg-komponenterne, som navnet antyder. Disse komponenter teknisk er React custom komponenter, som omfatter knappen, popover, spinner, tooltip og en masse andre. Vi kan <strong>genbrug disse komponenter i vores egen blok</strong>. I det følgende eksempel tilføjer vi en knap komponent.</p> <pre name="code"> Var Button = wp.components.Button; el (Button, 'class': 'download-button',, 'Download');</pre> <h4>Egenskaber</h4> <p>Attributterne er vejen til at gemme dataene i vores blok, disse data kan være som indholdet, farverne, justeringer, webadressen osv. Vi kan få attributterne fra egenskaberne passeret på <code>redigere()</code> funktion som følger:</p> <pre name="code"> rediger: funktion (rekvisitter) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001', indhold); </pre> <p>For at opdatere attributterne bruger vi <code>setAttributes ()</code> fungere. Typisk vil vi ændre indholdet på bestemte handlinger, f.eks. Når en knap er klikket, en indtastning er udfyldt, en valgmulighed er valgt, osv. I det følgende eksempel bruger vi det til at tilføje en <strong>Falde tilbage</strong> indholdet af vores blok, hvis der er sket noget uventet med vores <code>seriesContent</code> Egenskab.</p> <pre name="code"> rediger: funktion (rekvisitter) if (type af props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hej World! Her er backback indholdet.' ) var indhold = rekvisitter.attributes.seriesContent; returnere [el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001', indhold) </pre> <h4>Gemmer blokken</h4> <p>Det <code>Gemme()</code> funktion fungerer på samme måde som <code>redigere()</code>, bortset fra det definerer indholdet af vores blok for at gemme til postdatabasen. At gemme blokindholdet er ret ligetil, som vi kan se nedenfor:</p> <pre name="code"> gem: funktion (rekvisitter) hvis (! rekvisitter ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; returnere [el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001', indhold) </pre> <h3>Hvad er næste?</h3> <p>Gutenberg vil ændre WordPress økosystem til det bedre (eller muligvis det værre). Det gør det muligt for udviklere at <strong>vedtage en ny måde at udvikle WordPress plugins og temaer på</strong>. Gutenberg er bare en start. Snart den “Blok” paradigmet vil blive udvidet til andre områder af WordPress som indstillinger API og Widgets.</p> <p>Lær JavaScript Deeply; det er den eneste vej til at komme ind i Gutenberg og holde sig relevant for fremtiden i WordPress-branchen. Hvis du allerede er bekendt med JavaScript-basics, quirks, funktionerne, værktøjerne, varerne og bads, er jeg virkelig sikker på at du vil komme hurtigt med Gutenberg.</p> <p>Som nævnt udsætter Gutenberg en overflod af API'er, nok til at gøre næsten alt til din blok. Du kan vælge, om du vil <strong>kode din blok med et almindeligt gammelt JavaScript, JavaScript med ES6 syntaks, React eller endda Vue</strong>.</p> <h4>Idéer og inspiration</h4> <p>Jeg har oprettet en meget (meget) enkel Gutenberg-blok, som du kan finde i vores Github-konto. Desuden har jeg også sammensat en række lagre, hvorfra du kan drive inspiration til at opbygge en mere kompleks blok.</p> <ul><li>Gutenblocks - En samling af Blocks af Mathieu Viet skrevet i JavaScript med ES5 Syntax</li> <li>Jetpack Gutenblocks Project - en samling af blokke bundtet i Jetpack</li> <li>En liste med eksempler på Gutenberg implementering herunder med Vue.js</li> </ul><h3>Yderligere Reference</h3> <ul><li>Gutenberg Official Repository</li> <li>Gutenberg Håndbog</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 Bordbord i en komponentramme</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 Fjern et gammelt tastatur til at oprette brugerdefineret kontrolgrænseflade</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 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">Næste artikel</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 en $ 10 lommelygte til en ultra-lys Premium One</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Forrige artikel</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 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"> Nyttige oplysninger og tips til webudvikling. Programmering, webdesign, CSS, HTML, JAVASCRIPT. Konfigurer og geninstaller WINDOWS. Oprettelse af websteder og applikationer fra bunden. </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>