Share
Gutenberg este noul editor WordPress și toată lumea vorbește despre asta. Acesta a introdus un mod complet nou de a scrie conținut cu WordPress. Deci, nu numai că pot beneficia dezvoltatorii de aspectul său modelat-bloc, dar utilizatorii finali vor fi, de asemenea, posibilitatea de a crea structuri dinamice de pagini cu ea.
Cu toate acestea, construirea de blocuri personalizate cu Gutenberg poate fi un obstacol destul de mare pentru dezvoltatorii care doresc să-l integreze în proiectele lor. Acest tutorial va conține un set de instrumente incredibil-crea-guten-bloc-prin care puteți crea blocuri Gutenberg în câteva minute.
Deci sa începem!
Accentsconagua
crea-guten-bloccrea-guten-bloc (CGB) este un set de instrumente pentru dezvoltatori cu configurație zero pentru construirea blocurilor WordPress Gutenberg. Construită de Ahmad Awais - soțul meu și un avocat dezvoltator open source care contribuie în mod regulat la WordPress Core - setul de instrumente a redus dificultatea de a crea blocuri Gutenberg. Este zero-config, și creează blocuri fără blocare și doar o singură dependență.
Pentru a construi un bloc Gutenberg, trebuie să creați mai întâi un plugin WordPress. Pentru a face acest lucru, veți începe prin configurarea Webpack, React, ES 6/7/8 / Next, ESLint, Babel etc., iar apoi puteți începe codarea blocului. Și va trebui să continuați să actualizați configurațiile de unelte ca cele care susțin pachetele și bibliotecile.
Acest lucru încetinește dezvoltarea, astfel încât Ahmad a ascuns toate aceste configurații într-un pachet optimizat numit CGB-script-uri, pe care îl găsiți în dosarul rădăcină al blocului. Aceasta este dependența unică pe care am menționat-o mai devreme.
Deci, în loc să actualizăm totul separat și în mod regulat, CGB-script-uri pachetul este actualizat și, în acest fel, îl puteți actualiza întotdeauna fără a face modificări în codul dvs. Acesta este singurul lucru care mi-a plăcut cel mai mult.
Poveste lungă scurtă ...
crea-guten-bloc este un dezvoltator de go-to zero-config. set de instrumente pentru construirea de blocuri de WordPress Gutenberg într-o chestiune de minute, fără a mai configura WebPACK, React, Modern JavaScript, ESLint, Babel, etc - proiect site-ul GitHub Să începem să explorăm câteva dintre cele mai importante caracteristici ale instrumentului.
crea-guten-bloc oferă un mediu de dezvoltare up-to-date pentru dezvoltarea unui plugin WordPress Gutenberg. Acesta este ambalat cu caracteristici cum ar fi:
Întreținerea și actualizările tuturor instrumentelor menționate mai sus sunt gestionate de o singură dependență de construire: CGB-script-uri pachet. Deci, în ciuda faptului că utilizați Webpack, Babel, ESLint și alte proiecte uimitoare, vă puteți bucura încă de o experiență de dezvoltare fără probleme cu acest pachet, care va rămâne tot timpul la curent.
În timpul utilizării crea-guten-bloc nu aveți nevoie să configurați nimic. Cele mai multe dintre lucrurile pe care le cereți pentru mediul de dezvoltare și producție sunt preconfigurate.
O preocupare pe care dezvoltatorii ar putea să o aibă înainte de a începe să utilizeze CGB Toolkit este ce să facă în cazul în care un proiect are nevoie de personalizare, deoarece aceste instrumente sunt preconfigurate pentru a lucra într-un mod specific. Deci, vestea bună este că, la un moment dat poate „scoate“ proiectul și personalizați-l, dar atunci va trebui să mențină configurația-te.
Pentru a scoate proiectul, executați o singură comandă, și toate de configurare și de a construi dependențe vor fi mutate direct în proiectul dumneavoastră, și puteți începe exact unde ai plecat.
Noțiuni de bază și de lucru cu crea-guten-bloc setul de instrumente este foarte simplu. Doar instalați-l și apoi executați pentru a crea un plugin de bloc Gutenberg pentru WordPress. Dar, înainte de aceasta, există anumite premise care trebuie create. Deci, asigurați-vă că aveți următoarele:
Apoi, urmați acești pași simpli:
trebuie sa ai node.js și NPM instalat. Dacă acestea sunt deja instalate, treceți la pasul următor. În caz contrar, descărcați Node.js și instalați-l. Pentru a verifica instalarea, tastați următoarele comenzi.
node -v # Rezultate în v9.1.0 - asigurați-vă că aveți Nod> = 8 instalat. npm -v # Rezultatele în 5.6.0 - asigurați-vă că ați instalat npm> = 5.3.
crea-guten-bloc Acum, veți instala crea-guten-bloc în interiorul WordPress dvs. locală /wp.local/wp-content/plugins/ director. De asemenea, veți furniza un nume pentru pluginul pe care doriți să îl creați. Rulați următoarea comandă și așteptați un timp, deoarece ar putea dura câteva minute pentru a instala.
npx crea-guten-bloc demo-bloc
Această comandă creează un director de pluginuri numit Demo-bloc în dosarul curent. De asemenea, creează structura necesară a dosarelor și instalează dependențele de tip dev.
Creează o structură de directoare ca aceasta:
/local.dv/wp-content/plugins/demo-block ├── plugin.php ├── package.json ├── README.md | ├─ dist ├───────────────────────── ├─────────────────────────────── └───┘ blocks.style.build.css | └── src ├── bloc | ├────────────────── ├───────────────────── └──────────────────── ├────────────────────────────────────────────────────┘
După finalizarea instalării, deschideți folderul proiectului și executați scriptul de pornire introducând următoarea comandă:
cd demo-bloc npm începe
npm start comandă rulează plugin-ul în modul de dezvoltare. Există, de asemenea, un npm run build care vă ajută să rulați plugin-ul în modul de producție. Citiți mai departe pentru a găsi detalii despre trei funcții diferite pe care le puteți efectua cu CGB set de instrumente.
crea-guten-bloc Când lucrați cu acest script, veți lucra cu trei scripturi care vă vor ajuta dezvolta, construi, și evacua plugin-ul dvs..
npm start scenariuAceastă comandă este utilizată pentru a compila și rula blocul Gutenberg în timp ce lucrați în modul de dezvoltare. De asemenea priveste pentru orice modificări și rapoarte înapoi cu erori în codul dvs..
npm run build scenariuPentru a lucra în modul de producție, executați această comandă în interiorul dist pliant. Aici veți vedea mesajele de construire, erorile și avertismentele pentru scame din consola. Această comandă rulează o singură dată și raportează înapoi gzip dimensiunile fișierelor codului produs.
npm run eject scenariuDacă în orice moment doriți să vă scoateți pluginul crea-guten-bloc, executați această comandă. Aceasta vă permite să personalizați proiectul în funcție de cerințele dvs. Cu toate acestea, este un proces unidirecțional și nu poate fi reluat.
După ce ați terminat evacuaed, trebuie să actualizați și să mențineți toate dependențele de proiect pe cont propriu.
crea-guten-bloc După instalarea și configurarea cu succes, puteți să deschideți tabloul de bord WordPress și să mergeți la Plugin-uri secțiune. Aici puteți găsi un nou plugin numit demo-bloc - CGB Gutenberg Block Plugin fiind adăugat. Apasă pe Activati buton și sunteți bine să mergeți.
Acum du-te la Mesaje> Adăugați noi pentru a deschide editorul Gutenberg. (Amintiți-vă pluginul Gutenberg este o condiție prealabilă pentru crea-guten-bloc set de instrumente.)
Faceți clic pe + pentru a accesa toate blocurile. În bara de căutare, tastați CGB și veți găsi un bloc Gutenberg adăugat.
Faceți clic pe el și adăugați un bloc Gutenberg în editorul WordPress, astfel:
Loveste Publica pentru a vedea cum apare pe front-end.
Uimit? Am fost, când mi-am dat seama că Ahmad a desemnat blocurile Gutenberg diferit pentru front-end și back-end. Acest lucru poate fi verificat în continuare prin deschiderea src dosarul dvs. Demo-bloc plugin în editorul de coduri.
Aici găsiți două fișiere separate: editor.scss care gestionează CSS pentru back-end, și style.css (editor.css este enqueued după style.scss, ceea ce o face mai mare în prioritate). Ambele fișiere au fost incluse în principal block.js fișier prin intermediul import comanda.
Spre deosebire de alte truse de pornire și de boiler, există multe caracteristici distinctive care crea-guten-bloc au primit oferte, și pentru a rezuma, aici este un scurt rezumat al caracteristicilor sale cheie:
CGB-script-uri dependenţă crea-guten-bloc este licențiat de MIT și este disponibil gratuit pe GitHub.
