Sukurkite Gutenbergui: kaip papildinių ir temų autoriai sprendžia perėjimą prie Gutenbergo

Sukurkite Gutenbergui: kaip papildinių ir temų autoriai sprendžia pereinamąjį laikotarpį


„WordCamp Europe 2018“ parodoje Mattas Mullenwegas pateikė apytikslį kelių ateinančių mėnesių Gutenbergo planą. Liepos mėnesį bus didelis postūmis didinti „Gutenberg“ priėmimą su rugpjūčio mėn. (Ar vėliau; iš tikrųjų, tikriausiai, už jo ribų) veikiančia 5,0 beta versija. Artėjanti integracija gali jus nustebinti, kaip „WordPress“ kūrėjai planuoja kurti „Gutenberg“.

T. y., Kokiais įvairiais būdais kūrėjai rengia savo pasiūlymus „Gutenberg“? Ar žmonės daro ką nors naujo ir įdomaus Gutenbergui?

Šiame įraše pateiksime realių, konkrečių pavyzdžių, kaip papildinių ir temų kūrėjai gali sukurti „Gutenberg“, parodydami jums tai, kas jau yra ten.

Pažvelgdami į keletą realių pavyzdžių, kaip kūrėjai naudoja blokus ir stilius, kad sukurtų labiau integruotą redagavimo patirtį, tikimės, kad jūs:

  • Supraskite, kaip „Gutenberg“ gali būti naudinga jums, kaip galutiniam vartotojui.
  • Gaukite keletą idėjų, kaip kurti „Gutenberg“ savo „WordPress“ projektams.

Jei vis dar nežinote, kas yra „Gutenberg“ redaktorius, pirmiausia turėtumėte sužinoti mūsų išsamią „Gutenberg“ redaktoriaus mokymo programą..

Šeši pavyzdžiai, kaip esami papildiniai kreipiasi į „Gutenberg“

Tai, kaip papildinių autoriai kuria „Gutenberg“, pirmiausia priklauso nuo įskiepio funkcijos.

Viena vertus, turite įskiepių, kuriuose pagrindinis dėmesys skiriamas turinio pridėjimui. Tai daugiausia tai, kas anksčiau buvo padaryta pridedant trumpąjį kodą.

Geras pavyzdys yra formos papildinys. Beveik kiekvienas formos papildinys suteikia jums atskirą sąsają formoms formuoti, o po to trumpąjį kodą, kad iš tikrųjų įdėtumėte šias formas priekiniame gale..

Šio tipo papildiniai paprastai kreipiasi į Gutenbergą su a pasirinktinis blokas kad būtų lengviau įterpti turinį. Šiame skyriuje pamatysite kelis pavyzdžius iš:

  • „Ninja“ formos
  • Duok
  • „WooCommerce“

Tada turite kitų papildinių, kurie padeda valdyti užkulisines detales. Paprastai šie įskiepiai naudoja meta dėžutes.

Labiausiai žinomas pavyzdys galėtų būti kažkas panašaus į Yoast SEO. Jūs nepridedate turinio, tačiau visa ta meta dėžutės informacija yra būtina.

Meta dėžutės dabar veikia su „Gutenberg“, tačiau vis dar yra galimybė tiems papildiniams pakeisti savo funkcionalumą, kad būtų galima naudotis „Gutenberg“. Parodysiu keletą būdų, kaip „Yoast SEO“ galėtų išspręsti problemą, taip pat kaip mes pasirinkome daryti dalykus su kai kuriais savo papildiniais.

1. „Ninja Forms“ prideda naują „Gutenberg“ bloką

„Ninja“ formos yra vienas iš populiariausių formos įskiepių „WordPress.org“ repo. Iki šiol jis kreipėsi į Gutenbergą pridėdamas paprastą „Ninja“ formos blokuoti.

Jūs įterpiate bloką kaip ir bet kurį kitą „Gutenberg“ bloką:

kaip Ninja formuoja devėjus Gutenbergui

Tada išskleidžiamajame meniu galite pasirinkti savo formą:

Ninja formos blokuoja

Pasirinkę formą, redagavimo priemonėje pamatysite tiesioginę peržiūrą:

tiesioginė formos peržiūra

Šiuo metu viskas yra. Tačiau tai yra tvirtas pradinis požiūris, nes:

  • Tai pašalina poreikį tiesiogiai dirbti su trumpaisiais kodais
  • Vis dar redaguodami savo puslapį galite pamatyti tiesioginę savo dizaino apžvalgą

Kiti du papildiniai bus paremti tuo, turėdami keletą gilesnių stiliaus / valdymo parinkčių.

2. Duoti prideda du „Gutenberg“ blokus su išdėstymo galimybėmis

Duok yra populiarus aukų papildinys, kuriame dalyvauja kūrimo komanda, kuri labai iniciatyviai integravo „Datą“ su „Gutenberg“ redaktoriumi (jei jums patinka šio įrašo tema, jums patiks #PlayingWithBlocks serija „ Duok dienoraštį, kur „Give“ komanda detalizuoja savo planus kurti Gutenbergą).

„Give“ yra viena moderniausių Gutenbergo patirčių, kurią aš išbandžiau. Galite ne tik atsinešti dovanojimo formas naudodamiesi dviem „Don“ blokais, bet ir formatuoti jas naudodami „Gutenberg“ sąsają..

Duokite du blokus, kuriuos galite įterpti:

  • Viena dovanojimo forma
  • Aukojimo formų tinklelis

givewp gutenberg blokai

Kaip ir „Ninja Forms“, jūs tiesiogiai matote savo formą. Bet jūs taip pat gaunate Blokuoti redagavimo parinktys, kurios leidžia:

  • Pasirinkite formatą
  • Įgalinti / išjungti aukojimo tikslą
  • Pasirinkite, kur išdėstyti turinį

blokuoti išdėstymo parinktis

O jei užveskite pelės žymeklį ant formos, gausite tiesioginę nuorodą, kad galėtumėte redaguoti tą formą:

blokuoti redagavimą

Taigi pažvelgiama, kaip blokai gali būti šiek tiek gilesni nei dabartinis „Ninja Forms“ įgyvendinimas. Tačiau „WooCommerce“ žengia dar vieną žingsnį toliau …

3. „WooCommerce“ prideda produktų bloką su stulpelių valdymu

Nors WooCommerce tikriausiai pridės daugiau Gutenberg integracijų, nes WordPress 5.0 juda arčiau (kai kurios idėjų, kaip čia pridėti produktų), komanda jau nusimetė kojų pirštus į Gutenbergą su pareigūnu „WooCommerce Gutenberg Products“ blokuojantis papildinys.

Taip – šiuo metu tai yra atskiras papildinys. Bet kai įdiegsite, galėsite įterpti esamus „WooCommerce“ produktus kaip bloką į savo „Gutenberg“ turinį.

Kai pridėsite Produktai blokuoti, galite pasirinkti, kuriuos produktus rodyti:

gutenberg woocommerce blokas

Tada galite naudoti bloko redagavimo parinktis, kad pakeistumėte išdėstymą:

keičiasi internetinės prekybos išdėstymas Gutenberge

Tai mane labai sujaudina, nes tai puikus pavyzdys, kaip „Gutenberg“ padaro jį labiau prieinamą prie stiliaus ir konfigūravimo nestandartinio turinio..

4. Bebras statybininkas prideda a "Konvertuoti į „Beaver Builder“" variantas

Buvo daug kalbėta apie tai, kaip puslapių kūrėjai kreipsis į Gutenbergą. Dar nėra daug konkrečių variantų, tačiau „Beaver Builder“ į „Beaver Builder 2.1“ įtraukė funkciją, leidžiančią konvertuoti „Gutenberg“ išdėstymą į „Beaver Builder“:

bebrų statytojas Gutenbergas

Šiuo metu konversijos procesas nėra tobulas. Tačiau mintis, kad būtų galima judėti tarp Gutenbergo ir puslapių kūrėjo, intriguotų, jei konversija vyktų sklandžiai.

5. Meta dėžutės vis tiek turėtų veikti – Yoast SEO yra geras pavyzdys

Nemanau, kad „Yoast SEO“ dar nepaleido jokių pakeitimų, nukreipiančių į „Gutenberg“, todėl dabar tai yra daugiau pavyzdžių, kaip esamos meta dėžutės veikia su „Gutenberg“ (jei jūs atidžiai nesekėte „Gutenberg“ – dabar ji palaiko „meta box“, nors tai yra daugiau už atgalinį suderinamumą nei ilgalaikį sprendimą).

Kaip matote, pagrindinis „Yoast SEO“ meta langelis nepatenkintas į Gutenberg:

gutenberg yoast seo meta dėžutė

Bet jums trūksta SEO ir turinio analizės balų, kurie buvo naudojami šoninėje juostoje.

Taigi, kaip Yoastas galėtų sukurti Gutenbergui, kad išspręstų tai? Štai keletas maketų galimus būdus, kaip Yoast gali integruoti savo analizę į tikrąją Gutenbergo sąsają:

B maketasyoast seo perspėjimas
C maketas„yoo seo“ turinio analizė

6. Kaip mes kreipiamės į meta dėžutes WP produkto apžvalgoje

Mūsų WP produkto apžvalgos papildinys yra vienas iš tų įskiepių, kurie naudoja meta laukelį, norėdami valdyti išvestį priekinėje dalyje (šiuo atveju – peržiūros laukelis).

Štai kaip mes dirbame integruodami WP produkto apžvalgą į „Gutenberg“ redaktorių:

wp produkto apžvalga gutenberg

Kai vartotojai nurodo, kad įrašas yra peržiūra su šoninės juostos perjungimu, jie galės sukonfigūruoti viską, kas yra jų apžvalgos lauke iš aukščiau pateiktų parinkčių:

WP peržiūra pro gutenberg perjungti

Kūrėjai – čia yra puikus šaltinis paruošti jūsų papildinį „Gutenberg“

Jei esate tikras įskiepių kūrėjas, jums gali kilti klausimas, kaip turėtumėte sukurti „Gutenberg“ savo konkrečiam papildiniui. Na … aš to negaliu tau pasakyti. Bet aš galiu jums atkreipti dėmesį į šį nuostabų mūsų pačių Hardeepo Asrani pranešimą. „Hardeep“ pateikia keletą įgyvendinamų patarimų, kaip paruošti jūsų papildinį „Gutenberg“.

Kūrėjai gali kurti „Gutenberg“ su naujais papildiniais

Kūrėjai ne tik stengiasi, kad esami papildiniai būtų suderinami su „Gutenberg“, jie taip pat planuoja kurti „Gutenberg“ su naujais papildiniais..

Naujasis „Gutenberg“ blokuoja gausybę

Viena vertus, turite daugybę bendrųjų įskiepių, kurie tiesiog prideda naujo tipo turinio blokus. Tai suteikia Gutenbergui daugiau puslapių kūrėjo pojūčio. Galite rasti blokus:

  • Kainų lentelės
  • Atsiliepimai
  • Komandos nariai
  • Ir tt.

Pvz., Čia yra kainų lentelės blokas iš Stackable – „Gutenberg Blocks“ papildinys. Pažiūrėkite, kiek išsamios yra bloko redagavimo parinktys:

nauji gutenbergo blokai

„WordPress.org“ jau yra krūva šių papildinių. Tačiau neapsiribojant anksčiau minėtu „Stackable“ papildiniu, atrodo, kad yra ir kitų populiarių pasiūlymų:

Taip pat yra pasiūlymas, vadinamas „CoBlocks“ kuri prekiauja kaip "„Gutenberg“ turinio rinkodaros blokai".

Manau, kad šis nišinis požiūris yra ypač įdomus. Galbūt ateityje pamatysime specialius „Gutenberg“ blokų rinkinius:

Knygų apžvalgos blokas įskiepis yra dar vienas mažas pavyzdys, kaip nišiniai „Gutenberg“ blokai gali tapti daiktu.

Pavyzdys, kaip pasirinktiniai laukai gali veikti kartu su „Gutenberg“

Gutenbergo pasirinktiniai laukai yra dar vienas įdomus papildinys, kuris, atrodo, šiek tiek traukia.

Tai leidžia lengvai nustatyti pasirinktinius laukus arba laukų grupes, susietas su tam tikru pasirinktinių įrašų tipu:

„gutenberg“ redaktoriaus pasirinktiniai laukai

Tuomet, kai jūs einate į „Gutenberg“ redaktorių, šie pasirinktiniai laukai užpildomi kaip blokai:

gutenberg pasirinktinio lauko pavyzdys

Daugeliui žmonių kilo klausimas, kaip pasirinktiniai laukai veiks su „Gutenberg“ – tai vienas iš perspektyvių pavyzdžių, jau atrodančių gamtoje. Tu gali Sužinokite daugiau apie tai čia.

Trys pavyzdžiai, kaip temos kūrėjai sprendžia perėjimą prie Gutenbergo

Jūs ką tik matėte pavyzdžius, kaip papildinių kūrėjai gali kurti „Gutenberg“, bet kaip su temomis?

Atrodo, kad temos kūrėjai siekia dviejų pagrindinių būdų, kaip spręsti perėjimą:

  • Padaryti paruoštas temas „Gutenberg“ pridedant stilių blokams ir palaikant „Gutenberg“ išdėstymo parinktis
  • Gutenbergo blokų naudojimas kuriant temos turinį

Čia yra keletas paveikslo tapybos pavyzdžių …

1. Įtraukite pasirinktinius stilius į „Gutenberg“ redaktorių

Vienas iš tiesų tvarkingų dalykų, kuriuos matome kūrėjams, yra teminių stilių įtraukimas į faktinę „Gutenberg“ sąsają. Tai atveria duris sukurti tikrai „WYSIWYG“ patirtį, nors „Spencer“ iš „BigBox WooCommerce“ išsamiai aprašomos kai kurios trečiųjų šalių blokų stiliaus problemos.

Pvz., Pažiūrėkite, kaip „ThemeShaper“ tema „Ohana“ visiškai perkuria visą „Gutenberg“ turinį, įskaitant įrašo pavadinimą:

„gutenberg“ prietaisų skydelio stiliai

Jei norite tai pamatyti veikiant, atsisiųskite „Ohana“ temą iš „GitHub“. „ThemeShaper“ taip pat paaiškina, kaip jie pasiekė šį efektą šiame tinklaraščio įraše.

2. Pridedame naujas viso pločio išlyginimo parinktis

Kitas nuostabus temų suderinamumo keitimas, kurį pamatysite, yra papildymas Platus išlyginimas palaikymas. Iš esmės tai leidžia padaryti tam tikrus blokus viso pločio. Dažniausias pavyzdys būtų įterpti viso pločio vaizdą.

Tai vėlgi galite pamatyti naudodami Ohanos temą:

gutenberg platus išdėstymas

Kad šis derinimas veiktų, temų autoriai turi aiškiai deklaruoti palaikymą.

3. Temos demonstracinio turinio kūrimas naudojant blokus – pvz. Bloko tema

Pagaliau šis organinių temų požiūris yra gana šaunus:

Blokavimo tema demonstracinis turinys sukurtas vien tik iš „Gutenberg“ blokų.

Tai neabejotinai ir toliau augsime, kaip Matas aiškiai pasakė Gutenbergo veiksmų plane, kad liepą bus tiriama "„Gutenberg“ išplėtimas, neapsiribojant svetainių pritaikymu."

Be „The Block“ temos, „Array Themes“ taip pat turi Atominių blokų tema kuri yra specialiai sukurta integruoti su anksčiau minėtu „Atominių blokų“ papildiniu.

Kūrėjai – Štai kaip paruošti jūsų temą Gutenbergui

Jei esate temos kūrėjas, įdomu, kaip padaryti esamą temą suderinamą su „Gutenberg“, Billas Ericksonas turi puikų vadovą į aukštumas. Ir Temos palaikymas Gutenbergo vadovo skyrius yra dar vienas geras šaltinis.

Aišku, kad bus daugiau šaunių dalykų

Remdamasis aukščiau pateiktais pavyzdžiais, tikiuosi, kad jūs geriau supratote, kaip papildinių ir temų kūrėjai planuoja kurti „Gutenberg“.

Asmeniškai aš žinau, kad šio įrašo rašymas mane labiau sujaudino apie galimybes su Gutenbergu.

Įskiepio priekyje, naudojant blokus, kad būtų pakeisti visi dalykai, kurie anksčiau buvo daromi trumpaisiais kodais, yra didelis patobulinimas, kad būtų lengviau naudoti, ypač atsitiktiniams vartotojams..

Tai, kad temų kūrėjai gali įnešti savo stilių ir integruoti blokus, taip pat yra įdomu – ypač tada, kai „Gutenberg“ labiau plečiasi į svetainės pritaikymą.

Dabar jums – ar jūs suklupote puikių įskiepių pavyzdžių ar temų autorių, ieškančių įdomių Gutenbergo kūrimo būdų? Praneškite mums komentaruose!

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 50–80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map