Építsd meg a Gutenberg számára: Hogyan reagálnak a bővítmény és a témaírók a Gutenberg felé történő átmenetre?

Építsd meg Gutenbergnek: Hogyan kezelik a bővítmény és a téma szerzői az átmenetet


A WordCamp Europe 2018 rendezvényen Matt Mullenweg durva útitervet készített a Gutenberg számára az elkövetkező néhány hónapban. Júliusban nagy lendület lesz a Gutenberg elfogadásának fokozására, az augusztusi (vagy annál későbbi; valójában valószínűleg azon túl) 5,0-os bétaverzióval. Lehetséges, hogy a közelgő integráció kíváncsi, hogy a WordPress fejlesztői hogyan tervezik a Gutenberg számára.

Vagyis milyen különféle módokon készítik elő a fejlesztők a Gutenberg-re vonatkozó ajánlataikat? És vajon az emberek valami újat és érdekeset csinálnak-e a Gutenberg számára??

Ebben a bejegyzésben valódi, konkrét példákat mutatunk be Önnek arról, hogy a plugin és a témafejlesztők hogyan építhetnek fel Gutenberg számára azáltal, hogy megmutatják, mi már ott van.

Néhány valós példán áttekintve, hogy a fejlesztők hogyan használnak blokkokat és stílusokat egy integráltabb szerkesztési élmény létrehozására, reméljük, hogy Ön:

  • Tudja meg, hogy a Gutenberg milyen előnyökkel jár Önnek mint végfelhasználó.
  • Szerezzen néhány ötletet a Gutenberg számára a saját WordPress-projektjeihez.

Ha még mindig nem biztos benne, hogy mi a Gutenberg szerkesztő, akkor előbb megnézheti a teljes Gutenberg szerkesztő bemutatóját.

Hat példa arra, hogy a meglévő pluginek hogyan reagálnak a Gutenberg-váltóra

A plug-in-írók által a Gutenberg számára készített módszer elsősorban a plugin működésétől függ.

Egyrészt olyan plug-inek vannak, amelyek a front-end tartalom hozzáadására koncentrálnak. Ez elsősorban azok a dolgok, amelyeket korábban megtett volna egy rövid kód hozzáadásával.

Jó példa erre az űrlap-bővítmény. Nagyon sok minden űrlap-bővítmény külön felületet ad az űrlapok elkészítéséhez, majd egy rövid kódot, hogy ezeket az űrlapokat valóban beágyazhassa..

Az ilyen típusú bővítmények általában a Gutenberg címet fogják kezelni a egyedi blokk a tartalom beillesztésének megkönnyítése érdekében. Ebben a szakaszban számos példát láthat:

  • Ninja Forms
  • Adni
  • WooCommerce

Ezután van más beépülő modulja, amely segít a színfalak mögötti részletek kezelésében. Ezek a pluginok általában metamezőket használnak.

A legismertebb példa a Yoast SEO. Nem ad hozzá tartalmat, de a metabox-információk mindegyike elengedhetetlen.

A meta dobozok mostantól együtt működnek a Gutenberg-rel, de továbbra is fennáll annak a lehetősége, hogy ezek a bővítmények megváltoztassák működésüket a Gutenberg előnyeinek kihasználása érdekében. Megmutatom néhány módot, amellyel a Yoast SEO megoldhatja a problémát, valamint azt, hogy hogyan döntöttünk úgy, hogy valamelyik saját pluginunkkal dolgozunk.

1. A Ninja Forms új Gutenberg blokkot ad hozzá

Ninja Forms az egyik legnépszerűbb űrlap-bővítmény a WordPress.org repoban. Eddig egy egyszerű hozzáadásával szól Gutenberghez Ninja Forms Blokk.

A blokkot beilleszti, mint bármely más Gutenberg blokkot:

hogyan épülnek a nindzák formái a Gutenberg számára

Ezután kiválaszthatja az űrlapot a legördülő listából:

ninja formák blokk

És miután kiválasztotta az űrlapot, közvetlenül a szerkesztőben egy élő előnézetet fog látni:

élő képernyő előnézet

Jelenleg ennyi is van. De ez egy szilárd kiindulási megközelítés, mert:

  • Ez kiküszöböli a közvetlen kódokkal való közvetlen munkavégzés szükségességét
  • Láthatja a formatervezés élő előnézetét, miközben továbbra is szerkeszti az oldalt

A következő két plugin erre épít majd néhány mélyebb stílus / vezérlő lehetőséggel.

2. Give ad hozzá két Gutenberg blokkot elrendezési lehetőségekkel

Adni egy népszerű adományozási bővítmény egy fejlesztői csapattal, amely nagyon proaktív módon támogatja az Give és a Gutenberg szerkesztő integrálását (ha tetszik ez a üzenet témája, akkor a #PlayingWithBlocks sorozatot élvezheti a Adj blogot, ahol a Gondos csapat részletezi a Gutenbergi építkezés terveit).

A Gate az egyik legegyszerűbb Gutenberg-élmény, amelyet kipróbáltam. Nem csak az Adományozási űrlapokat hozhat be a Give két blokkján keresztül, hanem a Gutenberg felületen is stílusozhatja azokat..

Adj két blokkot, amelybe beágyazhatsz:

  • Egységes adományozási űrlap
  • Az adományozási űrlapok rácsa

givewp gutenberg blokkok

Mint a Ninja Forms, élő előnézetet kap a képernyőn. De te is megkapod Blokk szerkesztési lehetőségek, amelyek lehetővé teszik:

  • Válassza ki a formátumot
  • Az adományozási cél engedélyezése / letiltása
  • Válassza ki a tartalom helyét

blokkolja az elrendezési lehetőségeket

És ha az egérmutatót az űrlap fölé viszi, közvetlen linket kap az űrlap szerkesztéséhez:

blokkolja a szerkesztést

Tehát áttekintjük, hogyan lehet a blokkok mélyebbre jutni, mint a Ninja Forms jelenlegi megvalósítása. De a WooCommerce egy lépéssel tovább halad …

3. A WooCommerce termékblokkot ad hozzá oszlopvezérléssel

Míg a WooCommerce valószínűleg további Gutenberg-integrációkat fog hozzáadni, mivel a WordPress 5.0 közelebb kerül (néhány ötletek a termékek hozzáadásához itt), a csapat már bemerítette lábujjait Gutenbergbe a tisztviselővel WooCommerce Gutenberg Products Block plugin.

Igen – ez egy külön plugin. A telepítés után azonban meglévő WooCommerce termékeket blokkként illeszthet be a Gutenberg-tartalomba.

Amikor hozzáadja a Termékek blokkolással kiválaszthatja, hogy mely termékeket jelenítse meg:

gutenberg woocommerce blokk

Ezután a blokk szerkesztési lehetőségekkel módosíthatja az elrendezést:

az woocommerce elrendezésének megváltoztatása a gutenbergben

Ez nagyon izgatott, mert kiváló példa arra, hogy a Gutenberg hogyan teszi elérhetőbbé a nem szabványos tartalom stílusát / konfigurálását..

4. A Beaver Builder hozzáadja a "Konvertálás Beaver Builder-re" választási lehetőség

Sokat beszéltünk arról, hogy az oldalépítők hogyan fogják felvenni a kapcsolatot Gutenbergvel. Még nincs sok konkrét, de a Beaver Builder hozzáadott egy funkciót a Beaver Builder 2.1-hez, amely lehetővé teszi a Gutenberg-elrendezés Beaver Builderré konvertálását:

hódépítő gutenberg

Jelenleg a konverziós folyamat nem tökéletes. De az a gondolat, hogy Gutenberg és egy oldalépítő között tudunk mozogni, érdekes, ha az átalakítás zavartalan lenne.

5. A meta dobozoknak továbbra is működniük kell – a Yoast SEO jó példa

Nem hiszem, hogy a Yoast SEO még módosította a Gutenberg címét érintő változtatásokat, tehát ez most inkább egy példa arra, hogy a meglévő meta dobozok hogyan működnek együtt a Gutenberg-rel (ha még nem követtétek szorosan a Gutenberg-et – most metabox támogatással rendelkezik, bár ez az inkább a visszamenőleges kompatibilitás érdekében, mint egy hosszú távú megoldás).

Mint láthatja, a Yoast SEO fő mezője a Gutenbergnél nem érintkezik:

gutenberg yoast seo meta box

De hiányzik a SEO és a tartalomelemzés pontszáma, amelyek régen az oldalsávban voltak.

Tehát hogyan építheti Yoast Gutenbergnek, hogy foglalkozzon ezzel? Íme néhány makett annak lehetséges módjaira, hogy a Yoast hogyan integrálhatja elemzését a tényleges Gutenberg felületbe:

B. makettyoast seo figyelmeztetés
C. makettélesztő seo tartalom elemzése

6. Hogyan kezeljük a meta mezőket a WP Product Review-ban

a WP Product Review bővítmény egyike azoknak a plugineknek, amelyek meta mezőt használnak a kezelőfelület kimenetének ellenőrzésére (ebben az esetben egy áttekintő mező).

A következő módon dolgozunk azon, hogy a WP Termékértékelést integráljuk a Gutenberg szerkesztőbe:

wp termék vélemény gutenberg

Amikor a felhasználók azt jelzik, hogy a bejegyzés felülvizsgálat egy oldalsáv-váltóval, akkor a fenti lehetőségek közül mindent beállíthatnak az áttekintő dobozukkal kapcsolatban:

wp felülvizsgálat pro gutenberg váltás

Fejlesztők – ez egy nagyszerű forrás, amellyel készen áll a plugin-ra a Gutenberg számára

Ha Ön egy valódi plugin-fejlesztő, akkor kíváncsi lehet, hogy hogyan kell a Gutenberg-hez építnie az adott plugin számára. Nos … ezt nem mondhatom el. De felhívhatom Önöket a saját Hardeep Asrani félelmetes üzenetére. A Hardeep néhány cselekvési javaslatot tartalmaz a plugin előkészítéséhez a Gutenberg számára.

A fejlesztők a Gutenberg számára új plugineket is építhetnek

A fejlesztők nem csak arra koncentrálnak, hogy a meglévő pluginokat kompatibilissé tegyék a Gutenberggel, hanem azt is tervezik, hogy új pluginekkel építsék a Gutenberg számára..

Az új Gutenberg blokkolja a dologt

Egyrészt rengeteg általános plugin van, amelyek csak új típusú tartalomblokkokat adnak hozzá. Ezek még inkább az oldalépítőnek érzik magukat. A következő blokkokat találhatja meg:

  • Ár táblázatok
  • Beszámolók
  • Csapattagok
  • Stb.

Például itt található egy árazási táblázati blokk a Rakható – Ultimate Gutenberg Blocks plugin. Nézze meg, milyen részletesek a blokk szerkesztési lehetőségei:

új gutenberg blokkok

A WordPress.org-on már egy csomó ilyen plugin található. De a fent említett, egymásra rakható bővítményen túl más népszerű ajánlatok tűnnek:

Van is egy hívott ajánlat CoBlocks amely piacként jelenik meg "Gutenberg blokkok a tartalompiacon".

Úgy gondolom, hogy ez a niche-megközelítés különösen érdekes. Lehet, hogy a jövőben speciális Gutenberg blokkkészleteket fogunk látni:

Az Book Review Block A plugin egy újabb mini példa arra, hogy a niche Gutenberg blokkok mivoltá válhatnak.

Példa arra, hogy az egyedi mezők hogyan működhetnek együtt a Gutenberg-rel

Gutenberg egyedi mezők egy másik érdekes plugin, amely úgy tűnik, hogy vonzza.

Megkönnyíti az egyéni mezők vagy mezőcsoportok beállítását, amelyek egy adott egyéni hozzászólástípushoz vannak társítva:

gutenberg szerkesztő egyedi mezői

Ezután, amikor a Gutenberg szerkesztőbe lép, az egyéni mezők blokkokként vannak kitöltve:

példa a gutenberg egyedi mezőre

Sokan azon gondolkodtak, hogy az egyedi mezők hogyan működnek együtt a Gutenberggel – ez egy ígéretes példa, amely már vadonban van. tudsz Tudjon meg többet erről itt.

Három példa arra, hogy a témafejlesztők hogyan reagálnak a Gutenberg felé való áttérésre

Most látott néhány példát arra, hogy a plugin-fejlesztők hogyan építhetnek fel Gutenberg számára, de mi van a témákkal?

Úgy tűnik, hogy a témafejlesztők két fő utat követnek az átmenet kezelésére:

  • A témák készítése a Gutenberg számára a blokkok stílusának hozzáadásával és a Gutenberg elrendezési lehetőségeinek támogatásával
  • Gutenberg blokkok használata a tématartalom felépítéséhez

Íme néhány példa a kép festésére …

1. Egyéni stílusok hozzáadása a Gutenberg szerkesztőhöz

Az egyik nagyon ügyes dolog, amit a fejlesztők látnak, az, hogy a témastílusokat hozzáadják a tényleges háttér-Gutenberg felülethez. Ez megnyitja az ajtót egy valóban WYSIWYG élmény létrehozásához, bár a Spencer a BigBox WooCommerce-tól részletezi a harmadik féltől származó blokkok kialakításával kapcsolatos néhány kérdést.

Például nézd meg, hogy a ThemeShaper Ohana témája teljesen újratervezte a Gutenberg tartalmát, beleértve a bejegyzés címét:

gutenberg műszerfalba épített stílusok

Ha látni akarja, töltse le az Ohana témát a GitHubból. A ThemeShaper azt is elmagyarázza, hogyan sikerült elérni ezt a hatást ebben a blogbejegyzésben.

2. Új teljes szélességű beállítási lehetőségek hozzáadása

Egy másik jó téma-kompatibilitási csípés, amelyet látni fog, az a hozzáadása Széles igazítás támogatás. Alapvetően ez lehetővé teszi bizonyos blokkok teljes szélességű létrehozását. A leggyakoribb példa a teljes szélességű kép beillesztése.

Megint láthatja ezt az Ohana témában:

gutenberg széles elrendezés

Annak érdekében, hogy ez az igazítás működjön, a témaíróknak kifejezetten nyilatkozniuk kell a támogatásról.

3. Téma-demonstrációs tartalom építése blokkokkal – pl. A blokk téma

Végül, ez a Organic Themes megközelítése nagyon jó:

A Blokkoló téma A demo tartalom teljes egészében a Gutenberg blokkokkal épül.

Ez kétségtelenül továbbra is növekedni fog, amint Matt kifejezetten kijelentette a Gutenberg ütemtervében, hogy július magában foglalja majd a "a Gutenberg kibővítése a poszton túl a webhely testreszabásával."

A Block témán kívül a Array Themesnek van egy Atomic Blocks téma amelyet kifejezetten a fent említett Atomic Blocks bővítménnyel való integrálásra terveztek.

Fejlesztők – Így készítheti elő témáját Gutenbergre

Ha Ön témafejlesztő, kíváncsi, hogyan teheti meglévő témáját kompatibilissé a Gutenbergrel, Bill Erickson nagyszerű útmutatóval rendelkezik a csúcsra. És a Téma támogatás szakasz a Gutenberg kézikönyvben egy másik jó forrás.

Határozottan lesz még jó cucc

A fenti mintavétel alapján remélem, hogy jobban megérti azt, hogy a plugin és a témafejlesztők hogyan tervezik a Gutenberg számára.

Személyes feljegyzésként tudom, hogy ennek a bejegyzésnek az írása különösen izgatott volt a Gutenberg lehetőségeivel kapcsolatban.

A plugin elején a blokkok használata az összes olyan lépés cseréjéhez, amelyet korábban tettünk rövid kódokkal, jelentős javulást jelent a használhatóság szempontjából, különösen az alkalmi felhasználók számára.

Nagyon izgalmas az a mód is, ahogyan a témafejlesztők behozhatják saját stílusukat és blokkokat építhetnek be – különösen, mivel a Gutenberg jobban kibővíti a webhely testreszabását.

Most már neked – botlott valami nagyszerű példa arra, hogy a plugin vagy a téma szerzője érdekes módszereket talált a Gutenberg számára? Tudassa velünk a megjegyzésekben!

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

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