Rakenna Gutenbergille: Kuinka laajennus- ja teemakirjailijat käsittelevät siirtymistä Gutenbergiin

Rakenna Gutenbergille: Kuinka laajennus- ja teemakirjailijat käsittelevät siirtymävaihetta


WordCamp Europe 2018 -tapahtumassa Matt Mullenweg laati karkean etenemissuunnitelman Gutenbergille seuraavien useiden kuukausien ajan. Heinäkuussa Gutenbergin käyttöönoton lisäämiseen on tarkoitus lisätä 5,0-beta-versiota elokuussa (tai sen jälkeen; oikeastaan ​​todennäköisesti sen jälkeen). Tuleva integraatio saattaa saada sinut ihmettelemään, kuinka WordPress-kehittäjät suunnittelevat rakentavansa Gutenbergiin.

Eli mitkä ovat eri tapoja, joilla kehittäjät valmistelevat tarjouksiaan Gutenbergiin? Ja tekevätkö ihmiset jotain uutta ja mielenkiintoista Gutenbergin hyväksi?

Tässä viestissä aiomme antaa sinulle joitain todellisia, konkreettisia esimerkkejä siitä, kuinka laajennus- ja teemakehittäjät voivat rakentaa Gutenbergiä osoittamalla sinulle, mitä siellä on jo olemassa.

Tarkastelemalla joitain tosielämän esimerkkejä siitä, kuinka kehittäjät käyttävät lohkoja ja tyylejä luodakseen yhtenäisemmän editointikokemuksen, toivomme, että:

  • Ymmärrä, kuinka Gutenberg voi hyödyttää sinua loppukäyttäjänä.
  • Hanki ideoita rakentaa Gutenbergille omille WordPress-projekteillesi.

Jos et vieläkään ole varma, mikä Gutenberg-editori on, kannattaa tutustua ensin koko Gutenbergin toimittajan oppaaseemme..

Kuusi esimerkkiä siitä, kuinka nykyiset laajennukset osoittavat vaihtamista Gutenbergiin

Tapa, jolla laajennusten kirjoittajat rakentavat Gutenbergille, riippuu ensisijaisesti laajennuksen toiminnasta.

Toisaalta sinulla on laajennuksia, jotka keskittyvät käyttöliittymäsisällön lisäämiseen. Tämä on pääosin asioita, jotka aikaisemmin olisi tehty lisäämällä lyhytkoodi.

Hyvä esimerkki on lomakelisäosa. Melkein jokainen lomakelaajennus antaa sinulle erillisen käyttöliittymän lomakkeiden rakentamiseksi ja sitten lyhytkoodin upottaaksesi nämä lomakkeet käyttöliittymään.

Tämäntyyppiset laajennukset tulevat tyypillisesti osoittamaan Gutenbergiin näppäimellä mukautettu lohko sisällön lisäämisen helpottamiseksi. Tässä osiossa on useita esimerkkejä:

  • Ninja-lomakkeet
  • Antaa
  • WooCommerce

Sitten sinulla on muita laajennuksia, joiden avulla voit hallita kulissien takana olevia yksityiskohtia. Tyypillisesti nämä laajennukset käyttävät meta-ruutuja.

Tunnetuin esimerkki olisi jotain kuten Yoast SEO. Et lisää sisältöä, mutta kaikki metalaatikkotiedot ovat välttämättömiä.

Metakotelot toimivat nyt Gutenbergin kanssa, mutta kyseisillä laajennuksilla on edelleen mahdollisuus muuttaa toimintojaan hyödyntääkseen Gutenbergia. Esitän sinulle joitain tapoja, joilla Yoast SEO voi ratkaista ongelman, sekä kuinka olemme päättäneet tehdä asioita joidenkin omien laajennusten kanssa.

1. Ninja Forms lisää uuden Gutenberg-lohkon

Ninja-lomakkeet on yksi suosituimmista lomakkeiden lisäosista WordPress.org-repo-ohjelmassa. Toistaiseksi se on osoittanut Gutenbergille lisäämällä yksinkertaisen Ninja-lomakkeet lohko.

Lisäät lohkon kuten mikä tahansa muu Gutenberg-lohko:

kuinka ninjamuodot kehittävät Gutenbergin

Sitten voit valita lomakkeen avattavasta valikosta:

ninja muodot estää

Ja kun olet valinnut lomakkeen, näet reaaliaikaisen esikatselun suoraan editorissa:

lomakkeen suora esikatselu

Juuri nyt siinä kaikki on. Mutta tämä on vankka lähtökohta, koska:

  • Se poistaa tarpeen työskennellä suoraan lyhytkoodien kanssa
  • Voit nähdä kuvasi reaaliaikaisen esikatselun, kun muokkaat sivua vielä

Seuraavat kaksi lisäosaa rakentuvat tähän joihinkin syvemmillä muotoilu- / hallintavaihtoehdoilla.

2. Anna lisää kaksi Gutenberg-lohkoa asetteluvaihtoehdoilla

Antaa on suosittu lahjoituslaajennus kehitysyhteistyöryhmän kanssa, joka on ollut erittäin aktiivinen integroimalla Anta Gutenbergin toimittajan kanssa (jos pidät tämän viestin aiheesta, nautit #PlayingWithBlocks-sarjasta Anna blogi, missä Give-tiimi ilmoittaa suunnitelmastaan ​​rakentaa Gutenbergiin).

Give -palvelussa on yksi virtaviivaisimmista Gutenbergin kokemuksista, joita olen kokeillut. Paitsi, että voit tuoda lahjoituslomakkeita Givein kahden lohkon kautta, voit myös muotoilla niitä Gutenbergin käyttöliittymän avulla.

Anna kaksi lohkoa, joiden avulla voit upottaa:

  • Yksi lahjoituslomake
  • Lahjoituslomakkeiden ruudukko

givewp gutenberg-lohkot

Kuten Ninja Forms, saat esikatselun lomakkeestasi. Mutta saat myös Lohko muokkausvaihtoehdot, joiden avulla voit:

  • Valitse muoto
  • Ota lahjoitustavoite käyttöön / poista se käytöstä
  • Valitse, mihin sisältö sijoitetaan

estä asetteluvaihtoehdot

Ja jos siirrät hiiren lomakkeen päälle, saat suoran linkin lomakkeen muokkaamiseen:

estä muokkaaminen

Joten katsotaan, kuinka lohkot voivat mennä hieman syvemmälle kuin Ninja Formsin nykyinen toteutus. Mutta WooCommerce menee askeleen pidemmälle …

3. WooCommerce lisää tuotelohkon kanssa tuotelohkon

Vaikka WooCommerce lisää todennäköisesti enemmän Gutenberg-integraatioita, kun WordPress 5.0 liikkuu lähempänä (jotkut ideoita tuotteiden lisäämiseen tähän), joukkue on jo upottanut varpaansa Gutenbergiin virallisen kanssa WooCommerce Gutenberg Products Block -laajennus.

Kyllä – nyt tämä on erillinen laajennus. Mutta kun olet asentanut sen, pystyt lisäämään olemassa olevat WooCommerce-tuotteet lohkoksi Gutenbergin sisältöön.

Kun lisäät Tuotteet estää, voit valita näytettävät tuotteet:

gutenberg-verkkokaupan lohko

Sitten voit estää muokkausvaihtoehtoja muuttaaksesi asettelua:

gutenbergin verkkokaupan asettelun muuttaminen

Tämä innostaa minua melko hyvin, koska se on loistava esimerkki siitä, kuinka Gutenberg tekee siitä paremmin käytettävän tyylin / määrittämään epästandardin sisällön.

4. Beaver Builder lisää a "Muunna Beaver Builder -sovellukseksi" vaihtoehto

On ollut paljon puhetta siitä, kuinka sivunrakentajat tulevat ottamaan yhteyttä Gutenbergiin. Konkreettisia ei vielä ole, mutta Beaver Builder on lisännyt Beaver Builder 2.1: ään ominaisuuden, jonka avulla voit muuntaa Gutenbergin asettelun Beaver Builderiksi:

majavanrakentaja gutenberg

Tällä hetkellä muuntoprosessi ei ole täydellinen. Mutta idea liikkua Gutenbergin ja sivunrakentajan välillä on kiehtova, jos muuntaminen olisi saumatonta.

5. Metarasioiden tulisi silti toimia – Yoast SEO on hyvä esimerkki

En usko, että Yoast SEO on vielä julkaissut muutoksia Gutenbergin osoittamiseen, joten nyt tämä on enemmän esimerkki siitä, kuinka nykyiset metakotelot toimivat Gutenbergin kanssa (jos et ole seurannut Gutenbergia tiiviisti – sillä on nyt metalaatikkotuki, vaikka se on enemmän taaksepäin yhteensopivuutta kuin pitkäaikainen ratkaisu).

Kuten voitte nähdä, tärkein Yoast SEO -metaluutu tulee Gutenbergin välityksellä:

gutenberg hiiva SEO meta-laatikko

Mutta sinulta puuttuu SEO ja sisältöanalyysitulokset, jotka olivat aiemmin käyneet sivupalkissa.

Joten kuinka Yoast voisi rakentaa Gutenbergin käsittelemään tätä? Tässä on joitain malleja mahdollisia tapoja, joilla Yoast voi integroida analyysinsä todelliseen Gutenbergin käyttöliittymään:

Malli Bhiiva SEO varoitus
Malli Chiiva SEO sisällönanalyysi

6. Kuinka osoitamme metalaatikoita WP-tuotekatsauksessa

Meidän WP Product Review -laajennus on yksi niistä laajennuksista, joka käyttää meta-ruutua ohjaamaan käyttöliittymän tuloksia (tässä tapauksessa tarkistusruutu).

Näin työskentelemme integroidaksesi WP-tuotekatsauksen Gutenbergin toimittajaan:

wp-tuotearvostelu gutenberg

Kun käyttäjät ilmoittavat, että viesti on arvostelu sivupalkin avulla, he voivat määrittää kaiken tarkistuslaatikonsa yllä olevista vaihtoehdoista:

wp arvostelu pro gutenberg vaihtaa

Kehittäjät – tässä on hieno resurssi saadaksesi laajennus valmiiksi Gutenbergiin

Jos olet varsinainen laajennuskehittäjä, saatat miettiä, kuinka sinun pitäisi rakentaa Gutenbergille tietylle laajennuksellesi. No … En voi kertoa sitä sinulle. Mutta voin osoittaa teille tämän oman Hardeep Asranin mahtava postituksen. Hardeep antaa joitain toimivia vinkkejä laajennuksen valmistelemiseksi Gutenbergiin.

Kehittäjät voivat rakentaa Gutenbergiin myös uusilla laajennuksilla

Kehittäjät eivät ole keskittyneet vain nykyisten laajennusten tekemiseen yhteensopiviksi Gutenbergin kanssa, he suunnittelevat myös rakentavansa Gutenbergille uusia laajennuksia.

Uusi Gutenberg estää ylenpalttisuutta

Toisaalta sinulla on runsaasti yleisiä laajennuksia, jotka lisäävät vain uuden tyyppisiä sisältölohkoja. Ne antavat Gutenbergille enemmän sivunrakentajan tunteen. Löydät lohkot:

  • Hinnoittelu taulukot
  • Suositukset
  • Ryhmän jäsenet
  • Jne.

Tässä on esimerkiksi hinnoittelutaulukko Pinottava – Ultimate Gutenberg Blocks -laajennus. Katso kuinka yksityiskohtaisia ​​lohkon muokkausvaihtoehdot ovat:

uudet gutenbergin lohkot

WordPress.org-sivustossa on jo joukko näitä laajennuksia. Mutta edellä mainitun pinottavan laajennuksen lisäksi muut suositut tarjoukset näyttävät olevan:

Tarjolla on myös nimitys CoBlocks joka markkinoi itseään "Gutenberg-lohkot sisältömarkkinoijille".

Minusta tämä niche-lähestymistapa on erityisen mielenkiintoinen. Ehkä näemme tulevaisuudessa erityisiä Gutenbergin lohkosarjoja:

Kirja-arvostelu Block plugin on toinen pieni esimerkki siitä, kuinka kapeat Gutenbergin lohkot voivat tulla asiaksi.

Esimerkki siitä, kuinka mukautetut kentät voivat toimia Gutenbergin kanssa

Gutenbergin mukautetut kentät on toinen mielenkiintoinen laajennus, joka näyttää saavan jonkin verran pitoa.

Tiettyihin mukautettuihin viestityyppeihin liittyvien mukautettujen kenttien tai kenttäryhmien asettaminen on helppoa:

gutenbergin toimittajan mukautetut kentät

Sitten, kun siirryt Gutenbergin toimittajaan, nämä mukautetut kentät esitäytetään lohkoina:

gutenbergin mukautettu kenttäesimerkki

Monet ihmiset ovat miettineet, kuinka mukautetut kentät toimivat Gutenbergin kanssa – tämä on yksi lupaava esimerkki, joka on jo ulkona. Sinä pystyt lisätietoja siitä täältä.

Kolme esimerkkiä siitä, kuinka teemakehittäjät suhtautuvat siirtymiseen Gutenbergiin

Näit vain joitain esimerkkejä siitä, kuinka laajennuskehittäjät voivat rakentaa Gutenbergille, mutta entä teemat?

Teemakehittäjät vaikuttavat seuraavan kahta pääväylää siirtymistä varten:

  • Teemojen tekeminen Gutenberg-valmiiksi lisäämällä tyylit lohkoille ja tukemalla Gutenbergin asetteluvaihtoehtoja
  • Gutenbergin lohkojen käyttäminen teemasisällön luomiseen

Tässä on esimerkkejä kuvan maalaamisesta…

1. Mukautettujen tyylien lisääminen Gutenberg-editoriin

Yksi todella siisti asia, jota kehittäjät näkevät, on teematyylien lisääminen todelliseen Gutenbergin käyttöliittymään. Tämä avaa oven luomaan todella WYSIWYG-kokemuksen, vaikkakin Spencer BigBox WooCommerceltä yksityiskohtaisesti joitain kolmansien osapuolien lohkojen muotoilun ongelmia.

Katso esimerkiksi kuinka ThemeShaperin Ohana-teema uudelleentoistaa kokonaan kaiken Gutenbergin sisällön, mukaan lukien viestin otsikko:

gutenberg-kojelautaan liittyvät tyylit

Jos haluat nähdä sen toiminnassa, lataa Ohana-teema GitHubista. Ja ThemeShaper selittää myös, kuinka he saavuttivat tämän vaikutuksen tässä blogiviestissä.

2. Lisätään uusia koko leveyden kohdistusvaihtoehtoja

Toinen hieno teemayhteensopivuus, joka näet, on lisäys Leveä suuntaus tuki. Pohjimmiltaan tämä antaa sinun tehdä tiettyjä lohkoja koko leveydeksi. Yleisin esimerkki on täysleveyden kuvan lisääminen.

Voit jälleen nähdä tämän käytännössä Ohana-teeman kanssa:

gutenberg leveä asettelu

Jotta tämä suuntaus toimisi, teemakirjailijoiden on nimenomaisesti ilmoitettava tukevansa.

3. Teemademosisällön rakentaminen lohkoilla – esim. Estä teema

Lopuksi, tämä orgaanisten teemojen lähestymistapa on aika hieno:

Estä teema demosisältö on rakennettu kokonaan Gutenbergin lohkoilla.

Tämä on jotain, jota epäilemättä jatkamme kasvavan, kuten Matt totesi nimenomaisesti Gutenbergin etenemissuunnitelmassa, että heinäkuu sisälsi tutkimuksen "Laajentamalla Gutenbergin postin ulkopuolelle sivustojen mukauttamiseen."

The Block -teeman lisäksi Array Themesilla on myös Atomic Blocks -teema joka on erityisesti suunniteltu integroitavaksi yllä mainittujen Atomic Blocks -laajennusten kanssa.

Kehittäjät – tässä on miten saada teema valmis Gutenbergiin

Jos olet teemakehittäjä, ihmettelevät kuinka tehdä nykyisestä teemastasi yhteensopiva Gutenbergin kanssa, Bill Ericksonilla on loistava opas korkeaan pisteeseen. Ja Teeman tuki Gutenbergin käsikirjan osa on toinen hyvä lähde.

Tulee ehdottomasti enemmän hienoja juttuja

Yllä olevan näytteen perusteella toivon, että ymmärrät paremmin, kuinka laajennus- ja teemakehittäjät suunnittelevat Gutenbergin rakentamista.

Henkilökohtaisella huomautuksellani tiedän, että tämän viestin kirjoittaminen on tehnyt minua huomattavasti innostuneemmaksi Gutenbergin mahdollisuuksista.

Pluginin edessä lohkojen käyttäminen kaikkien asioiden korvaamiseksi, jotka aiemmin olisi tehty lyhytkoodeilla, on merkittävä parannus käytettävyydelle, etenkin rento käyttäjille.

Ja tapa, jolla teemakehittäjät voivat tuoda omat tyylinsä ja sisällyttää lohkoja, on myös mielenkiintoista – varsinkin kun Gutenberg laajenee enemmän sivuston räätälöintiin.

Nyt sinulle – olet kompastellut hienoja esimerkkejä laajennuksista tai teemakirjailijoista, jotka ovat löytäneet mielenkiintoisia tapoja rakentaa Gutenbergille? Kerro meille kommenteissa!

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 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