Crearea de blocuri Gutenberg personalizate pentru WordPress

Crearea de blocuri Gutenberg personalizate pentru WordPress nu trebuie să fie dificilă. De fapt, cu puțin cod, vă puteți crea propriile blocuri personalizate fără a fi nevoie să utilizați un plugin. Gutenberg este un nou editor pentru WordPress care vă permite să creați blocuri personalizate pentru conținutul dvs. Blocurile sunt elementele de bază ale conținutului tău în Gutenberg. Ele pot fi folosite pentru a adăuga text, imagini, videoclipuri și multe altele. Pentru a crea un bloc personalizat , va trebui să utilizați un editor de text precum Editorul de coduri WordPress sau un plugin precum Block Lab. Odată ce aveți un editor de text, puteți crea un fișier nou în directorul de tema sau plugin. Primul lucru pe care trebuie să-l faceți este să creați un tip de bloc. Un tip de bloc este o colecție de setări care definesc modul în care se comportă blocul. Pentru a face acest lucru, va trebui să utilizați funcția register_block_type. Odată ce aveți un tip de bloc, îl puteți înregistra cu WordPress. Această funcție va lua două argumente: numele tipului de bloc și un obiect care conține setările pentru bloc. După ce v-ați înregistrat tipul de blocare, puteți începe să adăugați câmpuri la acesta. Câmpurile sunt setările care controlează modul în care arată și se comportă blocul tău. Pentru a adăuga un câmp la tipul dvs. de bloc, va trebui să utilizați funcția add_field. După ce ați adăugat toate câmpurile pe care le doriți la tipul dvs. de bloc, îl puteți înregistra cu WordPress. Si asta e! Acum ați creat un bloc personalizat Gutenberg pentru WordPress.

Editorul de blocuri Gutenberg a fost una dintre îmbunătățirile aduse WordPress 5.0. Editorul Gutenberg împarte conținutul în blocuri, care sunt secțiuni ușor de rearanjat. Majoritatea dezvoltatorilor nu ar putea crea blocuri proiectate nativ, deoarece le lipsesc abilitățile React. Comunitatea de dezvoltatori WordPress a răspuns prin dezvoltarea de instrumente care pot îndeplini cerințele React/JavaScript. Blocurile din Block Lab sunt create în trei etape: adăugarea lor în cadrul administratorului, copierea și lipirea lor și apoi exportarea lor. Un API poate fi folosit și pentru a crea controale personalizate pentru blocul dvs. Acest lucru poate să nu fie prea mult de privit, dar vă va oferi o idee despre ce puteți face cu un bloc personalizat Gutenberg.

Pentru a face un bloc, va trebui să creăm un nou fișier numit block-notification-bar.php, care conține un titlu (Notification Bar) și trei câmpuri. Ca răspuns la acest fișier, va apărea un mesaj de notificare care ne va instrui să plasăm șablonul nostru de bloc personalizat în tema noastră. Înainte de a încărca fișierul, asigurați-vă că este salvat și încărcat pe serverul dvs. web. Acum a fost creat un bloc personalizat pentru noi. Tot ce contează este să atingi acel obiectiv. Avem o mulțime de opțiuni dacă vrem să extindem ceea ce am creat deja. Pictogramele, butoanele și posibilitatea de a crea linkuri către o altă postare sau pagină sunt doar câteva dintre caracteristicile care pot fi adăugate. Toate aceste abilități pot fi obținute prin Block Lab, precum și prin alte plugin-uri menționate mai sus.

Plugin pentru blocuri personalizate WordPress

Există multe pluginuri grozave de blocuri personalizate disponibile pentru WordPress. Fiecare plugin oferă un set diferit de caracteristici și opțiuni. Unele plugin-uri de blocuri personalizate vă permit să creați blocuri personalizate pentru postările și paginile dvs., în timp ce altele oferă un set de blocuri pre-proiectate pe care le puteți utiliza.

Puteți crea cu ușurință postări și pagini cu WordPress adăugând conținut și elemente de aspect ca blocuri. WordPress oferă o gamă largă de blocuri în configurația sa implicită. Cu toate acestea, este posibil să doriți să creați un bloc personalizat pentru a îndeplini o anumită sarcină. Acest tutorial vă va ghida prin pașii pentru realizarea unui bloc complet unic. Primul pas este să inserați trei câmpuri în blocul dvs. de mărturii. Faceți clic pe butonul Adăugați câmp pentru a începe să completați primul câmp. Al doilea pas este crearea unui șablon de bloc, care va determina exact cum vor fi afișate datele.

Al treilea pas este să stilați marcajul de ieșire a blocului făcând clic pe fila CSS. Încărcând manual șabloanele, vă puteți crea propriul bloc personalizat. În acest caz, PHP este cel mai bun mod de a interacționa cu câmpurile tale blocate personalizate. Pur și simplu încărcați șablonul editorului pe tema dvs. folosind metoda de încărcare. Pentru a începe, previzualizați blocul personalizat. Înainte de a putea previzualiza HTML/CSS, trebuie să furnizați câteva date de testare. Creați un site web WordPress care este construit personalizat cu un bloc Gutenberg.

Pentru a căuta un bloc, introduceți numele sau cuvintele cheie ale acestuia în caseta care apare după ce faceți clic pe butonul pentru adăugarea unui bloc nou. Puteți previzualiza blocul salvând și editând postarea și pagina. Pe site-ul nostru de testare, puteți vedea cum arată blocul de mărturii.

Creați Gutenberg Block React

Există câteva moduri de a crea un bloc Gutenberg în React. Prima modalitate este să utilizați instrumentul CLI create-guten-block. Acest lucru va crea un nou bloc Gutenberg pentru tine. Pentru a utiliza această metodă, va trebui să aveți instalate Node.js și npm pe computer. Odată ce ați instalat aceste dependențe, puteți crea un nou bloc Gutenberg rulând următoarea comandă: create-guten-block my-block Acest lucru va crea un nou director numit my-block cu toate fișierele necesare pentru un bloc Gutenberg. A doua modalitate de a crea un bloc Gutenberg în React este utilizarea pachetului @wordpress/block-editor. Acest pachet include o funcție de ajutor numită createBlock care poate fi folosită pentru a crea blocuri Gutenberg. Pentru a utiliza această metodă, va trebui să instalați pachetul @wordpress/block-editor în proiectul dvs. Odată ce ați instalat pachetul, puteți crea un nou bloc Gutenberg rulând următorul cod: import { createBlock } din '@wordpress/block-editor'; createBlock( 'blocul meu/blocul meu', { title: 'Blocul meu', categorie: 'common', } ); Acest lucru va crea un nou bloc numit my-block în categoria comună. A treia modalitate de a crea un bloc Gutenberg în React este să utilizați funcția wp.blocks.createBlock . Această funcție face parte din API-ul WordPress JavaScript și poate fi utilizată pentru a crea blocuri Gutenberg. Pentru a utiliza această metodă, va trebui să includeți pachetul wp-api-request în proiectul dvs. Odată ce ați instalat pachetul, puteți crea un nou bloc Gutenberg rulând următorul cod: import { wp } din 'wp'; wp.blocks.createBlock( 'blocul meu/blocul meu', { title: 'Blocul meu', categorie: 'common', } ); Acest lucru va crea un nou bloc numit my-block în categoria comună.

Aflați cum să creați blocuri personalizate în acest tutorial pentru editorul Gutenberg. Veți folosi un plugin creat de dvs. pentru a finaliza sarcina. Deși una dintre temele implicite este disponibilă pentru a crea un bloc personalizat Gutenberg, trebuie să recunoaștem că este posibil. În acest tutorial, vom analiza cum să creați un nou bloc personalizat cu Gutenberg. În plus, vom personaliza aspectul frontend-ului și al editorului în funcție de preferințele de design pe care le oferim. Dacă nu doriți să petreceți mult timp creând blocuri, puteți pur și simplu să adăugați unul și apoi să le personalizați în funcție de cerințele dvs.

React este ușor de utilizat în teme personalizate

React este o bibliotecă excelentă pentru crearea de interfețe de utilizator cu JavaScript. WordPress l-a folosit pentru a alimenta noul editor Gutenberg , precum și ecranul de administrare widget și actualizările recente ale capabilităților de editare a conținutului site-ului. Deoarece React este deja încorporat în WordPress, este simplu de utilizat în teme personalizate.

Gutenberg Creați un bloc de butoane personalizat

Gutenberg create butoane personalizate bloc este un instrument foarte util pentru a crea butoane personalizate pentru site-ul dvs. web. Cu acest instrument, puteți crea cu ușurință butoane care sunt atât atrăgătoare, cât și funcționale. Aceasta este o modalitate excelentă de a adăuga o notă personală site-ului dvs. și de a-l face să iasă în evidență de restul.

În acest tutorial, vei învăța cum să faci primul tău blocaj simplu în aplicația populară. Aplicația noastră WordPress @create-block este un instrument oficial care ne permite să generăm rapid cod Javascript/PHP/CSS. În modul interactiv, vă puteți configura blocul într-o serie de pași. Când tocmai înveți despre Gutenberg, acest lucru poate fi extrem de util. Dacă ați deja montat blocul, acum puteți accesa directorul nou creat printr-un editor de cod. Structura plugin-ului bloc urmează așa cum este în prezent (la momentul scrierii acestui tutorial). Vom trece peste detaliile fiecărui fișier și utilizarea acestuia în acest modul.

Indicatorul de linie de comandă este o metodă comună de specificare a opțiunilor pentru programele de linie de comandă. Înainte de a utiliza steaguri, înlocuiți valorile din directorul steaguri cu cele pe care doriți să le utilizați. O foaie de stil care va fi pusă în coadă sau aplicată în editor. Detaliile de bază ale pluginului sunt discutate în detaliu. WordPress afișează informații despre plugin în mod implicit. Pentru a-i spune lui Git ce fișiere să ignore atunci când se creează un proiect controlat de versiune, fișierul Gitignore A. ar trebui inclus. Depozitul conține informații. Config permite dezvoltatorilor să mențină un stil de codare consecvent în mai multe proiecte.

Dezvoltare WordPress Gutenberg Plugin

Pluginul WordPress Gutenberg este un proiect open source care este dezvoltat de o comunitate de voluntari. Oricine poate contribui la proiect și poate ajuta la îmbunătățirea acestuia. Pluginul este în mod constant actualizat și îmbunătățit. Dacă sunteți dezvoltator, puteți contribui la proiect prin dezvoltarea de noi funcții sau remedierea erorilor.

Probabil ați auzit de Gutenberg (editorul de blocuri WordPress), dar cum începeți să vă creați propriul plugin? Blocurile sunt create cu un simplu script WordPress. Tipul de plugin WordPress creat aici este de obicei un bloc, dar oferă un bun punct de plecare pentru alții în proces. Scriptul Creare bloc poate fi folosit ca șablon pentru a vă crea propriul plugin. Puteți vedea cu ușurință blocul în partea din față a WordPress, dar are un aspect diferit pentru a vă ajuta să vă obișnuiți cu el în partea din spate. Acest fișier trebuie generat în modul de dezvoltare numai după ce activele au fost compilate. /node_modules – Acesta este folderul din care sunt stocați toți parametrii dependenți de JavaScript ai pluginului dumneavoastră.

Fișierele presetate care conțin medii utile Visual Studio Code (VDC) pot fi găsite în acest fișier. Trebuie să vă asigurați că vă aflați în folderul plugin WordPress dacă doriți să creați un plugin. Ca rezultat, veți putea vizualiza etapele de dezvoltare și producție ale pluginului. Deschideți /src/save.js în editorul dvs. pentru a înlocui funcția de salvare cu următoarea: BlockText poate fi scos ca șir în acest mod. Următorul cod trebuie adăugat la rădăcina pluginului pentru a vă afișa blocurile într-o categorie de blocuri personalizată. Funcția registerBlockType.js returnează o listă a categoriilor de blocuri, care poate fi apoi recompilată folosind funcția registerBlockType.js a pluginului.

Editarea conținutului Gutenberg

Utilizatorii WordPress pot crea, edita și șterge conținut prin intermediul aplicației Single Page (SPA) care este construită pe React. Spre deosebire de editorul de conținut tradițional, acesta oferă o interfață mai fluidă și mai ușor de utilizat. Dacă doriți un editor de conținut mai puternic, aplicația Gutenberg nu este pentru dvs. Dacă preferați un aspect mai relaxat, vă puteți baza pe Gutenberg.

Editor de blocuri personalizate WordPress

Puteți folosi acest bloc pe orice postare sau pagină doriți. Pe ecranul Adăugare bloc nou, utilizați caseta de căutare pentru a căuta blocul dvs. introducând numele sau cuvintele cheie ale acestuia. După ce inserați blocul în zona de conținut, veți vedea câmpurile de bloc pe care le-ați creat pentru acest bloc personalizat.

Acest tutorial vă va ghida prin procesul de creare a unei instanțe de editor de blocuri personalizate complet funcționale în WordPress. Acest editor va fi construit în întregime într-o pagină personalizată WP Admin numită Block Editor (în cel mai creativ mod). În WordPress Plug-A-Thon, vom crea un editor. Acum trebuie să generăm ceva HTML în pagina noastră personalizată utilizând componenta React a editorului de blocuri. Ca al treilea argument, folosim linia dependențe de script ($script_asset['dependencies']). Se va asigura că scripturile legate de WordPress nu sunt incluse în pachetul construit. De asemenea, trebuie să înregistrăm stilurile noastre CSS personalizate și biblioteca de formatare implicită WordPress pentru a le folosi.

Acest lucru ne permite să folosim JavaScript pentru a genera un Editor de blocuri în HTML-ul paginii. Magia se întâmplă atunci când componenta pentru aceasta se numește BlockEditor. Este posibil să randați editorul din PHP fără a crea un JS global. Aspectul editorului este construit pe schele, după cum puteți vedea aici, pe lângă câțiva furnizori de context specializați. Block EditorProvider este cea mai importantă componentă a pachetului de editor de blocuri WordPress. După cum am explicat anterior, acesta oferă un nou context pentru un nou editor de blocuri în contextul editării blocurilor. Realizează acest lucru abonându-se la registrul furnizat (prin HOC cu furnizorul de registru), ascultând evenimentele de modificare a blocului, determinând dacă schimbarea blocului a rămas persistentă și apelând handlerul de intrare onChange atunci când este necesar.

Cea mai intrigantă componentă este componenta BlockList, care adaugă o listă de blocuri la editor. Merită să studiați aceste componente în detaliu, deoarece sunt unele dintre cele mai complicate și mai implicate. Pentru a afla mai multe despre componenta noastră personalizată EditorBlock, vă rugăm să consultați următorul articol. Slot/fill este implementat prin utilizarea componentei noastre Blockeditor (vezi mai sus) pentru a expune un Fill (bară laterală. InspectorFill) în cadrul acestuia, pe care îl importăm și îl redăm ulterior în implementare. Ca rezultat, React ne permite să păstrăm o componentă de inspecție în DOM-ul său în timp ce o redăm în markup într-o locație separată (de exemplu, în bara laterală). Blocurile pot fi găsite și în LocalStorage sub cheia getdavesbeBlocks.

Aceste date sunt serializate în formatul Block Grammar, ceea ce înseamnă că pot fi stocate într-un șir. GitHub a compilat întregul cod pentru editorul de blocuri funcționale personalizate. Programul poate fi descărcat și încercat gratuit.