Gutenberg Allt du behöver veta om WordPress senaste redaktör
Gutenberg är en ny editor för WordPress som kommer helt Byt ut den nuvarande TinyMCE-drivna redigeraren. Det är ett ambitiöst projekt som förmodligen kommer att ändra WordPress på många sätt och skulle påverka både vanliga slutanvändare och utvecklare, särskilt de som är beroende av redigeringsskärmen för att arbeta på WordPress. Så här ser det ut.
Gutenberg introducerar också ett nytt paradigm i WordPress som heter “Blockera”.
“Blockera” är den abstrakta termen som används för att beskriva enheter av markup som består av innehåll eller layout på en webbsida. Idén kombinerar begrepp som i WordPress idag vi uppnår med kortkoder, anpassad HTML och inbäddad upptäckt till ett enda konsekvent API och användarupplevelse.
Ställa in projektet
Att veta att Gutenberg är byggt ovanpå React, är vissa utvecklare oroliga över att barriären är för hög för utvecklare på grundnivå för att utveckla Gutenberg.
Att installera React.js kan vara ganska tidskrävande och förvirrande om du bara har börjat med det. Du behöver åtminstone JSX-transformatorn, Babel, beroende på din kod kan du behöva några Babel-plugins och en Bundler som Webpack, Rollup eller Parcel.
Lyckligtvis, vissa personer inom WordPress-community har intensifierats och försöker att utveckla Gutenberg så enkelt som möjligt för alla att följa. Idag har vi ett verktyg som kommer att generera en Gutenberg boilerplate så vi kan börja skriva kod direkt istället för att befruka med verktygen och konfigurationerna.
Skapa Guten Block
De skapa-guten-blocket är ett initierat projekt av Ahmad Awais. Det är en nollkonfigurationsverktygssats (# 0CJS) som tillåter dig att utveckla Gutenberg-blocket med några moderna staplar som förinställts, inklusive React, Webpack, ESNext, Babel, ESLint och Sass. Följ anvisningarna för att komma igång med Skapa Guten Block.
Använda ES5 (ECMAScript 5)
Använda alla dessa verktyg för att skapa en enkel “Hej världen” block kan tyckas bara för mycket. Om du gillar att hålla dina stackar luta, kan du faktiskt utveckla ett Gutenberg-block med en vanlig bra ol ECMAScript 5 som du kanske redan känner till. Om du har WP-CLI 1.5.0 installerad på din dator, du kan helt enkelt springa ...
wp ställningsblock[--Title = ] [--dashicon =<dashicon>] [- category =<category>] [--theme] [--plugin =<plugin>] [--force]</pre> <p>... till <strong>generera Gutenberg block boilerplate till din plugin eller tema</strong>. Detta tillvägagångssätt är mer förnuftigt, särskilt för befintliga plugins och teman som du har utvecklat före Gutenberg-eran.</p> <p>I stället för att skapa ett nytt plugin för att rymma Gutenberg-blocken, kanske du vill integrera blocken i dina plugins eller teman. Och för att göra denna handledning lätt att följa för alla, <strong>Vi använder ECMAScript 5 med WP-CLI</strong>.</p> <h4>Registrera ett nytt block</h4> <p>Gutenberg utvecklas för närvarande som ett plugin och kommer att slås samman med WordPress 5.0 när laget känner att det är klart. Så, för tillfället måste du installera den från <strong>Plugins sida i <code>wp-admin</code></strong>. När du har installerat och aktiverat det, kör följande kommando i Terminal eller Command Prompt om du är på en Windows-maskin.</p> <pre name="code"> wp ställningsblockserie - title = "HTML5 Series" --theme</pre> <p>Kommandot kommer att generera ett block till det aktuella aktiva temat. Vårt block består av följande filer:</p> <pre name="code"> . EN¢Â ??  ?? â ??  ?? â ??  ?? serie â     à â ??  ?? â ??  ?? â ??  ?? block.js â     à â ??  ?? â ??  ?? â ??  ?? editor.css â     à â ??  ?? â ??  ?? â ??  ?? style.css â ??  ?? â ??  ?? â ??  ?? series.php </pre> <p>Låt oss ladda huvudfilen till våra block i <code>functions.php</code> av vårt tema:</p> <pre name="code"> om (function_exists ('register_block_type')) kräver get_template_directory (). '/Blocks/series.php'; </pre> <p>Observera att vi bifogar filhanteringen med en villkorlig. Detta garanterar <strong>kompatibilitet med tidigare WordPress-version att vårt block bara laddas när Gutenberg är närvarande</strong>. Vårt block ska nu vara tillgängligt inom Gutenberg-gränssnittet.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Så här ser det ut när vi sätter in blocket.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenberg APIs</h3> <p>Gutenberg introducerar två uppsättningar av API för att registrera ett nytt block. Om vi tittar på <code>series.php</code>, Vi hittar följande kod som registrerar vårt nya Block. Det är också <strong>laddar stilarket och JavaScripts i fronten och redigeraren</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'serieblockredigerare', 'editor_style' => 'serieblockredigerare', 'style' => 'serieblock'));</pre> <p>Som vi kan se ovan heter vårt block <code>twentyseventeen / serie</code>, Blocknamnet måste vara unikt och namespaced för att undvika kollision med de andra blocken som tas med av de andra pluginsna.</p> <p>vidare, <strong>Gutenberg tillhandahåller en uppsättning nya JavaScript API för att interagera med “Blockera” gränssnitt</strong> i redaktören. Eftersom API är ganska rikligt fokuserar vi på några detaljer som jag tror att du borde veta för att få ett enkelt men ändå fungerande Gutenberg Block.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Först ska vi titta på <code>wp.blocks.registerBlockType</code>. Den här funktionen används till <strong>registrera en ny “Blockera” till Gutenberg-redaktören</strong>. Det kräver två argument. Det första argumentet är Blocknamnet som ska följa namn som är registrerat i <code>register_block_type</code> funktion på PHP-sidan. Det andra argumentet är en <strong>Objekt som definierar blockegenskaperna</strong> gillar titel, kategori och ett par funktioner för att göra Block-gränssnittet.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), kategori: 'widgets', nyckelord: ['html'], redigera: funktion (rekvisita) , spara: funktion (rekvisita) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Med den här funktionen kan du skapa elementet inom “Blockera” i postredigeraren. De <code>wp.element.createElement</code> funktion är i grunden en abstraktion av reaktionen <code>create ()</code> funktionen så accepterar den samma uppsättning argument. Det första argumentet tar elementets typ till exempel en punkt, a <code>spänna</code>, eller a <code>div</code> enligt nedanstående:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Vi kan <strong>alias funktionen till en variabel</strong> så det är kortare att skriva. Till exempel:</p> <pre name="code"> var el = wp.element.createElement; el ( 'div');</pre> <p>Om du <strong>föredra att använda den nya ES6-syntaxen</strong>, det kan du också göra så här:</p> <pre name="code"> const createElement: el = wp.element; el ( 'div');</pre> <p>Vi kan också <strong>lägg till elementattributen</strong> så som <code>klass</code> namn eller <code>id</code> på den andra parametern enligt följande:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'serie-html5', 'id': 'serie-html-post-id-001');</pre> <p>De <code>div</code> som vi skapade inte skulle ge mening utan innehållet. Vi kan <strong>lägg till innehållet på argumentet för den tredje parametern</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Denna artikel ingår i vår "HTML5 / CSS3 Tutorials Series" för att göra dig till en bättre designer och / eller utvecklare. Klicka här för att se fler artiklar från samma serie ");</pre> <h4><code>wp.components</code></h4> <p>De <code>wp.components</code> innehåller en samling av, som namnet antyder, Gutenberg-komponenterna. Dessa komponenter är tekniskt React anpassade komponenter som inkluderar knappen, popover, spinner, tooltip och en massa andra. Vi kan <strong>återanvända dessa komponenter till vårt eget block</strong>. I följande exempel lägger vi till en knappkomponent.</p> <pre name="code"> var knapp = wp.components.Button; el (knapp, 'class': 'download-button',, 'ladda ner');</pre> <h4>attribut</h4> <p>Attributen är sättet att lagra data i vårt block, den här data kan vara som innehållet, färgerna, justeringarna, webbadressen etc. Vi kan få attributen från egenskaperna gått vidare på <code>redigera()</code> funktion, enligt följande:</p> <pre name="code"> redigera: funktion (rekvisita) var content = props.attributes.seriesContent; returnera el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001', innehåll); </pre> <p>För att uppdatera attributen använder vi <code>setAttributes ()</code> fungera. Vanligtvis skulle vi ändra innehållet på vissa åtgärder, till exempel när en knapp klickas, en inmatning fylls, ett alternativ är valt, etc. I följande exempel använder vi den för att lägga till en <strong>Retirera</strong> Innehållet i vårt block om något hänt överraskande <code>seriesContent</code> Attribut.</p> <pre name="code"> redigera: funktion (rekvisita) if (typ av props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! ) var content = props.attributes.seriesContent; returnera [el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001', innehåll),]; </pre> <h4>Spara blocken</h4> <p>De <code>spara()</code> funktion fungerar på samma sätt som <code>redigera()</code>, förutom att det definierar innehållet i vårt block för att spara till postdatabasen. Att spara blockinnehållet är ganska enkelt, vilket vi kan se nedan:</p> <pre name="code"> spara: funktion (rekvisita) om (! rekvisita ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; returnera [el ('div', 'class': 'series-html5', 'id': 'serie-html-post-id-001', innehåll),]; </pre> <h3>Vad kommer härnäst?</h3> <p>Gutenberg kommer att ändra WordPress ekosystem till det bättre (eller möjligen det sämre). Det gör det möjligt för utvecklare att <strong>anta ett nytt sätt att utveckla WordPress-plugins och teman</strong>. Gutenberg är bara en början. Snart “Blockera” paradigmet kommer att utvidgas till andra områden i WordPress som Inställningar API och Widgets.</p> <p>Lär dig JavaScript djupt; Det är det enda sättet att komma in i Gutenberg och vara relevant för framtiden i WordPress-branschen. Om du redan är bekant med JavaScript-grunderna, quirksna, funktionerna, verktygen, varorna och badsna, är jag verkligen säker på att du kommer att få fart med Gutenberg.</p> <p>Som nämnts avslöjar Gutenberg ett överflöd av API, tillräckligt för att göra nästan vad som helst till ditt block. Du kan välja om du vill <strong>koda din Block med en vanlig gammal JavaScript, JavaScript med ES6-syntax, React eller till och med Vue</strong>.</p> <h4>Idéer och inspirationer</h4> <p>Jag har skapat ett mycket (väldigt) enkelt Gutenberg-block som du kan hitta i vårt Github-konto. Dessutom har jag också satt ihop ett antal förråd där du kan driva inspiration för att bygga ett mer komplext block.</p> <ul><li>Gutenblocks - En samling av Blocks av Mathieu Viet skrivet i JavaScript med ES5 Syntax</li> <li>Jetpack Gutenblocks Project - en samling Blocks bundna i Jetpack</li> <li>En lista med exempel på Gutenberg Implementation inklusive med Vue.js</li> </ul><h3>Ytterligare referens</h3> <ul><li>Gutenberg Official Repository</li> <li>Gutenberg Handbook</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 ett IKEA Bordbord i en komponentställ</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 Borttag ett gammalt tangentbord för att skapa anpassat kontrollgränssnitt</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 till Windows 10 Aktivitetshanterare - 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ästa 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 ficklampa till en ultra-ljus Premium One</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Föregående 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 till 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"> Användbar information och tips om webbutveckling. Programmering, webbdesign, CSS, HTML, JAVASCRIPT. Konfigurera och installera om WINDOWS. Skapa webbplatser och applikationer från början. </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>