Gutenberg Tutto quello che devi sapere sull'ultimo editor di WordPress
Gutenberg è un nuovo editor per WordPress che sarà totalmente sostituisci l'attuale editor basato su TinyMCE. È un progetto ambizioso che cambierà WordPress in molti modi e influenzerebbe sia gli utenti finali che gli sviluppatori, in particolare quelli che dipendono dalla schermata dell'editor per lavorare su WordPress. Ecco come appare.
Gutenberg introduce anche un nuovo paradigma in WordPress chiamato “Bloccare”.
“Bloccare” è il termine astratto usato per descrivere unità di markup che sono composti dal contenuto o dal layout di una pagina web. L'idea combina i concetti di ciò che in WordPress oggi realizziamo shortcode, HTML personalizzato e incorporamento del rilevamento in un'unica API coerente e l'esperienza dell'utente.
Impostazione del progetto
Sapendo che Gutenberg è stato costruito su React, alcuni sviluppatori temono che barriera è troppo alta per gli sviluppatori entry-level per lo sviluppo di Gutenberg.
L'installazione di React.js potrebbe richiedere molto tempo e confondere se hai appena iniziato. Avrai bisogno almeno del trasformatore JSX, Babel, a seconda del tuo codice potresti aver bisogno di alcuni plugin Babel e di un Bundler come Webpack, Rollup o Parcel.
per fortuna, alcune persone all'interno della comunità di WordPress intensificato e stanno cercando di rendere Gutenberg in via di sviluppo il più semplice possibile da seguire per tutti. Oggi abbiamo uno strumento che genererà una caldaia di Gutenberg così possiamo iniziare a scrivere il codice subito invece di confondere con gli strumenti e le configurazioni.
Crea blocco Guten
Il creare-Guten-block è un progetto iniziato da Ahmad Awais. È un kit di strumenti di configurazione zero (# 0CJS) che ti permetterà di sviluppare blocchi Gutenberg con alcuni preset di stack moderni tra cui React, Webpack, ESNext, Babel, ESLint e Sass. Segui le istruzioni per iniziare con Crea Guten Block.
Utilizzo di ES5 (ECMAScript 5)
Usando tutti questi strumenti per creare un semplice “Ciao mondo” il blocco potrebbe sembrare troppo. Se ti piace mantenere magri i tuoi stack, puoi effettivamente sviluppare un blocco Gutenberg usando un semplice ECMAScript 5 che potresti già avere familiarità con. Se hai WP-CLI 1.5.0 installato sul tuo computer, puoi semplicemente correre ...
blocco ponteggio wp[--Title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--force]</pre> <p>… a <strong>genera il blocco di blocchi Gutenberg sul tuo plugin o tema</strong>. Questo approccio è più sensato, in particolare, per i plug-in e i temi esistenti che hai sviluppato prima dell'era Gutenberg.</p> <p>Invece di creare un nuovo plug-in per accogliere i blocchi di Gutenberg, potresti voler integrare i blocchi con i tuoi plugin o con i temi. E per rendere questo tutorial facile da seguire per tutti, <strong>utilizzeremo ECMAScript 5 con WP-CLI</strong>.</p> <h4>Registrazione di un nuovo blocco</h4> <p>Gutenberg è attualmente sviluppato come un plugin e sarà unito a WordPress 5.0 ogni volta che il team si sentirà pronto. Quindi, per il momento, dovrai installarlo dal <strong>Pagina dei plugin in <code>wp-admin</code></strong>. Dopo averlo installato e attivato, esegui il seguente comando nel Terminale o nel Prompt dei comandi se sei su un computer Windows.</p> <pre name="code"> wp scaffold block series --title = "HTML5 Series" --theme</pre> <p>Questo comando genererà un blocco per il tema attualmente attivo. Il nostro blocco sarà composto dai seguenti file:</p> <pre name="code"> . UN¢Â  ?? à ??¢Â  ?? à ??¢AA?? serie â ??  Ã  â  ?? à ??¢Â  ?? à ??¢AA?? block.js â ??  Ã  â  ?? à ??¢Â  ?? à ??¢AA?? editor.css â ??  Ã  â  ?? à ??¢Â  ?? à ??¢AA?? style.css â  ?? à ??¢Â  ?? à ??¢AA?? series.php </pre> <p>Carichiamo il file principale dei nostri blocchi nel <code>functions.php</code> del nostro tema:</p> <pre name="code"> if (function_exists ('register_block_type')) richiede get_template_directory (). '/Blocks/series.php'; </pre> <p>Si noti che si allega il caricamento del file con un condizionale. Questo assicura <strong>compatibilità con la precedente versione di WordPress che il nostro blocco viene caricato solo quando Gutenberg è presente</strong>. Il nostro blocco dovrebbe ora essere disponibile nell'interfaccia di Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Ecco come appare quando inseriamo il blocco.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>API Gutenberg</h3> <p>Gutenberg introduce due serie di API per registrare un nuovo blocco. Se guardiamo al <code>series.php</code>, troveremo il seguente codice che registra il nostro nuovo blocco. Anche <strong>carica il foglio di stile e i JavaScript sul front-end e l'editor</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>Come possiamo vedere sopra, il nostro blocco è chiamato <code>twentyseventeen / serie</code>, il nome del blocco deve essere univoco e con un namespace per evitare la collisione con gli altri blocchi portati dagli altri plugin.</p> <p>inoltre, <strong>Gutenberg fornisce una serie di nuove API JavaScript per interagire con “Bloccare” interfaccia</strong> nell'editor. Dato che l'API è abbastanza abbondante, ci concentreremo su alcune specifiche che penso dovresti sapere per ottenere un blocco Gutenberg semplice ma funzionante.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>In primo luogo, esamineremo <code>wp.blocks.registerBlockType</code>. Questa funzione è usata per <strong>registra un nuovo “Bloccare” all'editore di Gutenberg</strong>. Richiede due argomenti. Il primo argomento è il nome del blocco che dovrebbe seguire il nome registrato nel file <code>register_block_type</code> funzione nel lato PHP. Il secondo argomento è un <strong>Oggetto che definisce le proprietà del blocco</strong> come titolo, categoria e un paio di funzioni per rendere l'interfaccia di blocco.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), categoria: 'widgets', parole chiave: ['html'], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Questa funzione ti consente di creare l'elemento all'interno di “Bloccare” nell'editor di post. Il <code>wp.element.createElement</code> la funzione è fondamentalmente un'astrazione del React <code>createElement ()</code> funzione quindi accetta lo stesso insieme di argomenti. Il primo argomento prende il tipo di elemento ad esempio un paragrafo, a <code>campata</code>, o a <code>div</code> come mostrato di seguito:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Noi possiamo <strong>alias la funzione in una variabile</strong> quindi è più breve da scrivere. Per esempio:</p> <pre name="code"> var el = wp.element.createElement; EL ( 'div');</pre> <p>Se tu <strong>preferisco usare la nuova sintassi ES6</strong>, puoi anche farlo in questo modo:</p> <pre name="code"> const createElement: el = wp.element; EL ( 'div');</pre> <p>Possiamo anche <strong>aggiungi gli attributi dell'elemento</strong> come il <code>classe</code> nome o <code>id</code> sul secondo parametro come segue:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>Il <code>div</code> che abbiamo creato non avrebbe senso senza il contenuto. Noi possiamo <strong>aggiungi il contenuto sull'argomento del terzo parametro</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Questo articolo fa parte della nostra "Serie di tutorial HTML5 / CSS3" - dedicato per aiutarti a diventare un designer e / o uno sviluppatore migliore. Clicca qui per vedere altri articoli della stessa serie ');</pre> <h4><code>wp.components</code></h4> <p>Il <code>wp.components</code> contiene una raccolta di, come suggerisce il nome, i componenti di Gutenberg. Questi componenti tecnicamente sono componenti personalizzati React che includono Button, Popover, Spinner, Tooltip e molti altri. Noi possiamo <strong>riutilizzare questi componenti nel nostro blocco</strong>. Nell'esempio seguente, aggiungiamo un componente pulsante.</p> <pre name="code"> var Button = wp.components.Button; el (Button, 'class': 'download-button',, 'Download');</pre> <h4>attributi</h4> <p>Gli Attributi sono il modo per memorizzare i dati nel nostro Blocco, questi dati potrebbero essere come il contenuto, i colori, gli allineamenti, l'URL, ecc. Possiamo ottenere gli attributi dalle Proprietà passate sul <code>modificare()</code> funzione, come segue:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', contenuto); </pre> <p>Per aggiornare gli attributi, usiamo il <code>setAttributes ()</code> funzione. In genere modifichiamo il contenuto in determinate azioni, ad esempio quando si fa clic su un pulsante, si riempie un input, si seleziona un'opzione, ecc. Nell'esempio seguente, lo usiamo per aggiungere un <strong>ricaderci</strong> contenuto del nostro Blocco nel caso in cui qualcosa di inaspettato è successo al nostro <code>seriesContent</code> Attributo.</p> <pre name="code"> edit: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Ecco il contenuto di riserva.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', contenuto),]; </pre> <h4>Salvataggio del blocco</h4> <p>Il <code>salvare()</code> la funzione funziona in modo simile a <code>modificare()</code>, tranne che definisce il contenuto del nostro blocco per salvare nel database dei post. Salvare il contenuto del blocco è abbastanza semplice, come possiamo vedere di seguito:</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', contenuto),]; </pre> <h3>Qual'è il prossimo?</h3> <p>Gutenberg cambierà l'ecosistema di WordPress per il meglio (o forse il peggio). Permette agli sviluppatori di <strong>adotta un nuovo modo di sviluppare plugin e temi per WordPress</strong>. Gutenberg è solo l'inizio. Presto il “Bloccare” il paradigma verrà esteso ad altre aree di WordPress come le API delle impostazioni e i widget.</p> <p>Scopri JavaScript in profondità; è l'unico modo per entrare a Gutenberg e rimanere attinenti al futuro nel settore WordPress. Se hai già familiarità con le nozioni di base di JavaScript, i capricci, le funzioni, gli strumenti, i beni e i cattivi, sono sicuro che ti sentirai al passo con Gutenberg.</p> <p>Come accennato, Gutenberg espone un'abbondanza di API, sufficienti per fare quasi qualsiasi cosa per il tuo Block. Puoi scegliere se <strong>codifica il tuo blocco con un semplice vecchio JavaScript, JavaScript con sintassi ES6, React o persino Vue</strong>.</p> <h4>Idee e Ispirazioni</h4> <p>Ho creato un blocco Gutenberg molto (molto) semplice che puoi trovare nel repository del nostro account Github. Inoltre, ho anche creato una serie di repository da cui puoi trarre ispirazione per costruire un Block più complesso.</p> <ul><li>Gutenblocks - Una raccolta di blocchi di Mathieu Viet scritta in JavaScript con ES5 Sintassi</li> <li>Progetto Jetpack Gutenblocks: una raccolta di blocchi raggruppati in Jetpack</li> <li>Un elenco di esempi di implementazione di Gutenberg, incluso Vue.js</li> </ul><h3>Ulteriore riferimento</h3> <ul><li>Gutenberg Official Repository</li> <li>Manuale di 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 una tabella di mancanza IKEA in un rack di componenti</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 a parte una vecchia tastiera per creare l'interfaccia di controllo personalizzata</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">Guida a Task Manager di Windows 10 - Parte 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">Articolo successivo</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 una Torcia da $ 10 in un Premium Premium Ultra</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Articolo precedente</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">Guida a Task Manager di Windows 10 - Parte 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"> Informazioni utili e suggerimenti per lo sviluppo web. Programmazione, web design, CSS, HTML, JAVASCRIPT. Configurare e reinstallare WINDOWS. Creazione di siti e applicazioni da zero. </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>