Gutenberg Tot ce trebuie să știți despre ultimul editor WordPress
Gutenberg este un nou editor pentru WordPress, care va fi total înlocuiți editorul curent cu TinyMCE. Este un proiect ambițios care va schimba WordPress în multe moduri și ar afecta atât utilizatorii finali și dezvoltatorii obișnuiți, cât și cei care depind de ecranul editorului pentru lucrul pe WordPress. Iată cum arată.
Gutenberg introduce, de asemenea, o nouă paradigmă în WordPress numită “bloc”.
“bloc” este termenul abstract folosit pentru a descrie unități de marcare care sunt compuse din conținutul sau aspectul unei pagini Web. Ideea combină conceptele cu ceea ce se realizează astăzi cu WordPress coduri scurte, cod HTML personalizat și descoperire încorporată într-un singur API consistent și experiența utilizatorului.
Configurarea proiectului
Știind faptul că Gutenberg este construit pe partea de sus a React, unii dezvoltatori sunt îngrijorați de faptul că bariera este prea mare pentru dezvoltatorii de la începutul dezvoltării pentru Gutenberg.
Configurarea React.js ar putea fi destul de consumatoare de timp și de confuzie dacă tocmai ați început cu asta. Va trebui cel puțin transformatorul JSX, Babel, în funcție de codul dvs., este posibil să aveți nevoie de niște pluginuri Babel și un Bundler cum ar fi Webpack, Rollup sau Parcel.
din fericire, unii oameni din comunitatea WordPress s-au intensificat și încearcă să facă dezvoltarea lui Gutenberg cât mai ușoară posibil pentru toată lumea să o urmeze. Astăzi, avem un instrument care va genera un boilerplate Gutenberg așa putem începe să scriem codul imediat în loc să vă bateți cu instrumentele și configurațiile.
Creați Guten Block
crea-guten-bloc este un proiect inițiat de Ahmad Awais. E o set de instrumente pentru configurația zero (# 0CJS), care vă va permite să dezvoltați un bloc Gutenberg cu câteva stive moderne presetate, inclusiv React, Webpack, ESNext, Babel, ESLint și Sass. Urmați instrucțiunile pentru a începe să creați un Guten Block.
Folosind ES5 (ECMAScript 5)
Folosind toate aceste instrumente pentru a crea un simplu “Salut Lume” bloc poate părea prea mult. Dacă vă place să vă păstrați stivele înclinate, puteți să dezvoltați un bloc Gutenberg folosind un simplu ECMAScript 5 bun pe care deja îl puteți familiariza. Daca ai WP-CLI 1.5.0 instalat pe computer, puteți rula pur și simplu ...
wp bloc de schele[--Title = ] [--dashicon =<dashicon>] [--categorie =<category>] [--mai] [--plugin =<plugin>] [--forta]</pre> <p>… la <strong>generați boilerplate-ul de bloc Gutenberg în plugin-ul sau tema</strong>. Această abordare este mai sensibilă, în special pentru pluginurile și temele existente pe care le-ați dezvoltat înainte de epoca Gutenberg.</p> <p>În loc să creați un plugin nou pentru a găzdui blocurile Gutenberg, este posibil să doriți să integrați blocurile în pluginurile sau temele. Și pentru a face acest tutorial ușor de urmat pentru toată lumea, <strong>vom folosi ECMAScript 5 cu WP-CLI</strong>.</p> <h4>Înregistrarea unui nou bloc</h4> <p>Gutenberg este în prezent dezvoltat ca un plugin și va fi îmbinat cu WordPress 5.0 ori de câte ori echipa consideră că este gata. Deci, pentru moment, va trebui să o instalați din <strong>Pagina de pluginuri din <code>wp-admin</code></strong>. Odată ce ați instalat și l-ați activat, executați următoarea comandă în Terminal sau în Prompt Command dacă sunteți pe o mașină Windows.</p> <pre name="code"> wp seria blocului de schele --title = "Seria HTML5" - temă</pre> <p>Această comandă va genera o blocare a temei active în prezent. Blocul nostru va consta din următoarele fișiere:</p> <pre name="code"> . A¢Â ??  ?? â ??  ?? â ??  ?? serie âÂ? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? block.js âÂ? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? editor.css âÂ? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? style.css â ??  ?? â ??  ?? â ??  ?? series.php </pre> <p>Să încărcăm fișierul principal al blocurilor noastre în <code>functions.php</code> din tema noastră:</p> <pre name="code"> dacă (function_exists ('register_block_type')) necesită get_template_directory (). '/Blocks/series.php'; </pre> <p>Observați că închidem încărcarea fișierului cu condiționată. Acest lucru este asigurat <strong>compatibilitatea cu versiunea anterioară WordPress care blocul nostru este încărcat numai când Gutenberg este prezent</strong>. Blocul nostru ar trebui să fie acum disponibil în interfața Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Cum arată când introducem blocul.</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 două seturi de API-uri pentru a înregistra un nou Bloc. Dacă ne uităm la <code>series.php</code>, vom găsi următorul cod care înregistrează noul nostru Bloc. De asemenea <strong>încărcați foaia de stil și JavaScript pe front-end și editor</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor';</pre> <p>După cum vedem mai sus, blocul nostru este numit <code>twentyseventeen / serie</code>, numele blocului trebuie să fie unic și să aibă un nume pentru a evita coliziunea cu celelalte blocuri aduse de celelalte pluginuri.</p> <p>În plus, <strong>Gutenberg oferă un set de noi API-uri JavaScript pentru a interacționa cu “bloc” interfață</strong> în editor. Deoarece API este destul de abundent, ne vom concentra pe anumite specificații pe care cred că trebuie să le cunoașteți pentru a obține un simplu Gutenberg Block.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>În primul rând, vom căuta <code>wp.blocks.registerBlockType</code>. Această funcție este utilizată pentru <strong>înregistrați un nou “bloc” la redactorul Gutenberg</strong>. Aceasta necesită două argumente. Primul argument este numele blocului care trebuie să urmeze numele înregistrat în <code>register_block_type</code> funcția din partea PHP. Al doilea argument este un <strong>Obiect care definește proprietățile blocului</strong> cum ar fi titlul, categoria și câteva funcții pentru a face interfața Block.</p> <pre name="code"> var registruBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('Seria HTML5'), categoria: 'widgets', keywords: ['html'], edit: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Această funcție vă permite să creați elementul în cadrul “bloc” în editorul postului. <code>wp.element.createElement</code> funcția este în principiu o abstractizare a Reactului <code>createElement ()</code> funcția acceptă astfel același set de argumente. Primul argument ia tipul de element, de exemplu un paragraf, a <code>deschidere</code>, sau a <code>div</code> așa cum se arată mai jos:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Noi putem <strong>alias funcția într-o variabilă</strong> deci este mai scurta sa scriu. De exemplu:</p> <pre name="code"> var el = wp.element.createElement; el ( 'div');</pre> <p>daca tu <strong>preferați să utilizați noua sintaxă ES6</strong>, puteți face acest lucru și în felul următor:</p> <pre name="code"> const createElement: el = wp.element; el ( 'div');</pre> <p>Putem de asemenea <strong>adăugați atributele elementului</strong> la fel ca <code>clasă</code> nume sau <code>id</code> cu privire la al doilea parametru, după cum urmează:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'seria-html5', 'id': 'seria-html-post-id-001');</pre> <p> <code>div</code> pe care am creat-o nu ar avea sens fără conținut. Noi putem <strong>adăugați conținutul în argumentul celui de-al treilea parametru</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'seria-html5', 'id': 'seria-html-post-id-001' pentru a vă ajuta să vă faceți un designer mai bun și / sau un dezvoltator. Faceți clic aici pentru a vedea mai multe articole din aceeași serie ");</pre> <h4><code>wp.components</code></h4> <p> <code>wp.components</code> conține o colecție de componente Gutenberg, după cum sugerează și numele. Aceste componente tehnice sunt componentele React personalizate care includ butonul, Popover, Spinner, Tooltip și o grămadă de alții. Noi putem <strong>reutilizați aceste componente în propriul Bloc</strong>. În exemplul următor, adăugăm o componentă de buton.</p> <pre name="code"> butonul var = wp.components.Button; el (Button, 'class': 'download-button',, 'Download');</pre> <h4>atribute</h4> <p>Atributele reprezintă modul de stocare a datelor în blocul nostru, aceste date ar putea fi precum conținutul, culorile, aliniamentele, adresa URL etc. Putem obține atributele din proprietățile transmise pe <code>Editați | ×()</code> funcție, după cum urmează:</p> <pre name="code"> edita: funcție (recuzită) var content = props.attributes.seriesContent; retur el ('div', 'class': 'series-html5', 'id': 'seria-html-post-id-001', conținut); </pre> <p>Pentru a actualiza atributele, folosim <code>setAttributes ()</code> funcţie. În mod obișnuit, vom schimba conținutul pentru anumite acțiuni, cum ar fi când se face clic pe un buton, se introduce o intrare, se selectează o opțiune etc. În exemplul următor îl folosim pentru a adăuga <strong>da înapoi</strong> conținutul blocului nostru, în cazul în care sa întâmplat ceva neașteptat cu noi <code>seriesContent</code> Atribut.</p> <pre name="code"> ediție: funcție (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute contentContent: 'Hello World! ) var content = props.attributes.seriesContent; întoarcere [el ('div', 'class': 'series-html5', 'id': 'seria-html-post-id-001'; </pre> <h4>Salvarea blocului</h4> <p> <code>Salvați()</code> funcționează în mod similar cu funcția <code>Editați | ×()</code>, cu excepția faptului că definește conținutul blocului nostru pentru a fi salvat în baza de date postare. Salvarea conținutului blocului este destul de simplă, după cum vedem mai jos:</p> <pre name="code"> salvați: funcția (recuzită) if (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; întoarcere [el ('div', 'class': 'series-html5', 'id': 'seria-html-post-id-001'; </pre> <h3>Ce urmeaza?</h3> <p>Gutenberg va schimba ecosistemul WordPress în bine (sau poate și mai rău). Acesta permite dezvoltatorilor să <strong>adoptați un nou mod de a dezvolta pluginuri și teme WordPress</strong>. Gutenberg este doar un început. Curând “bloc” paradigma va fi extinsă la alte domenii ale WordPress, cum ar fi API-urile de setări și widget-urile.</p> <p>Aflați JavaScript în profunzime; este singura modalitate de a intra în Gutenberg și de a rămâne relevanți pentru viitorul industriei WordPress. Dacă sunteți deja familiarizați cu elementele de bază JavaScript, cu ciudățenii, funcții, instrumente, bunuri și trupuri, sunt foarte sigur că veți ajunge la viteza cu Gutenberg.</p> <p>După cum sa menționat, Gutenberg expune o abundență de API-uri, suficient pentru a face aproape orice pentru blocul tău. Puteți alege dacă doriți <strong>codați-vă blocul cu un JavaScript vechi obișnuit, JavaScript cu sintaxă ES6, React sau chiar Vue</strong>.</p> <h4>Idei și inspirații</h4> <p>Am creat un foarte (foarte) simplu Gutenberg Block pe care îl puteți găsi în depozitul contului nostru Github. Mai mult, am mai pus și un număr de depozite din care puteți inspira crearea unui bloc mai complex.</p> <ul><li>Gutenblocks - O colecție de blocuri de Mathieu Viet scrisă în JavaScript cu sintaxa ES5</li> <li>Jetpack Gutenblocks Project - o colecție de blocuri incluse în Jetpack</li> <li>O listă de exemple de implementare Gutenberg, inclusiv cu Vue.js</li> </ul><h3>Referințe ulterioare</h3> <ul><li>Reprezentanța oficială Gutenberg</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 un tabel lipsă IKEA într-o rack de componente</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 apartin o tastatură veche pentru a crea interfață de comandă personalizată</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">Ghid pentru Windows 10 Task Manager - Partea a II-a</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">Articolul următor</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 un lanternă de 10 $ într-un Premium Premium Ultra-luminos</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Articolul precedent</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">Ghid pentru Windows 10 Task Manager - Partea a III-a</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"> Informații utile și sfaturi de dezvoltare web. Programare, design web, CSS, HTML, JAVASCRIPT. Configurați și reinstalați WINDOWS. Crearea site-urilor și aplicațiilor de la 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>