Build for Gutenberg: Jak autoři pluginů a motivů řeší přechod na Gutenberg

Build for Gutenberg: Jak autoři pluginů a motivů řeší přechod


Na WordCamp Europe 2018 Matt Mullenweg stanovil hrubý plán pro Gutenberga v průběhu několika příštích měsíců. V červenci bude velký tlak na zvýšení adopce Gutenbergem, s 5.0 beta ve hře za srpen (nebo později; vlastně pravděpodobně pravděpodobně). Nastávající integrace vás možná bude zajímat, jak vývojáři WordPress plánují stavět pro Gutenberg.

Jaké jsou různé způsoby, jak vývojáři připravují své nabídky pro Gutenberg? A lidé dělají pro Gutenberga něco nového a zajímavého?

V tomto příspěvku vám ukážeme několik konkrétních příkladů toho, jak mohou vývojáři pluginů a motivů vytvořit pro Gutenberga tím, že vám ukážeme, co už tam venku je.

Doufáme, že se podíváte na příklady z praxe, jak vývojáři používají bloky a styly k vytvoření integrovanějšího střihu,

  • Pochopte, jak vám může Gutenberg jako koncový uživatel těžit.
  • Získejte několik nápadů, jak vytvořit Gutenberg pro své vlastní projekty WordPress.

Pokud si stále nejste jisti, co je editor Gutenberg, možná byste si měli nejdříve prohlédnout celý náš průvodce Gutenberg editorem.

Šest příkladů, jak stávající pluginy řeší přechod na Gutenberg

Způsob, jakým autoři pluginu vytvářejí pro Gutenberg, závisí především na funkci pluginu.

Na jedné straně máte pluginy, které jsou zaměřeny na přidávání obsahu front-end. Jedná se hlavně o věci, které by dříve byly provedeny přidáním krátkého kódu.

Dobrým příkladem je formulářový plugin. Téměř každý plugin pluginu vám poskytuje oddělené rozhraní pro sestavování formulářů a poté zkratku pro skutečné vložení těchto formulářů na frontend.

Tyto typy pluginů obvykle osloví Gutenberga pomocí vlastní blok usnadnit vkládání obsahu. V této sekci uvidíte několik příkladů:

  • Formuláře Ninja
  • Dát
  • WooCommerce

Pak máte další pluginy, které vám pomohou ovládat podrobnosti za scénami. Tyto pluginy obvykle používají meta boxy.

Nejznámějším příkladem by bylo něco jako SEO. Nepřidáváte obsah, ale všechny tyto informace v meta boxu jsou nezbytné.

Meta-boxy nyní spolupracují s Gutenbergem, ale stále existuje šance, aby tyto pluginy změnily své funkce tak, aby využívaly výhody Gutenbergu. Ukážu vám několik způsobů, jak by váš SEO mohl problém vyřešit, a také, jak jsme se rozhodli dělat věci s některými z našich vlastních pluginů..

1. Ninja Forms přidá nový blok Gutenberg

Formuláře Ninja je jedním z nejoblíbenějších doplňků formulářů v repozitáři WordPress.org. Zatím to oslovuje Gutenberga přidáním jednoduchého Formuláře Ninja blok.

Vložíte blok jako každý jiný blok Gutenberg:

jak ninja formy devs stavět pro Gutenberg

Poté můžete z rozbalovací nabídky vybrat svůj formulář:

ninja tvoří blok

A jakmile vyberete formulář, uvidíte přímo v editoru živý náhled:

živý náhled formuláře

Právě teď je to všechno. Jedná se však o solidní základní přístup, protože:

  • Vylučuje to nutnost přímé práce s krátkými kódy
  • Během úpravy stránky můžete vidět živý náhled svého návrhu

Další dva pluginy budou stavět na tomto s některými hlubšími styling / control options.

2. Give přidá dva Gutenbergovy bloky s možnostmi rozvržení

Dát je populární plugin pro dárcovství s vývojovým týmem, který byl velmi aktivní při integraci aplikace Give s editorem Gutenberg (pokud se vám téma tohoto příspěvku líbí, budete si užívat série #PlayingWithBlocks na Dejte blog, kde tým Dejte podrobnosti o svých plánech stavět pro Gutenberg).

Dej má jeden z nejefektivnějších Gutenbergových zážitků, které jsem vyzkoušel. Nejen, že můžete přinést dárcovské formuláře prostřednictvím dvou bloků Give, můžete je také stylizovat pomocí rozhraní Gutenberg.

Dejme vám dva bloky, které vám umožní vložit:

  • Jeden formulář pro darování
  • Síť dárcovských formulářů

givewp gutenberg bloky

Podobně jako Ninja Forms získáte i živý náhled formuláře. Ale také dostanete Blok možnosti úprav, které vám umožní:

  • Vyberte formát
  • Povolit / zakázat cíl dárcovství
  • Vyberte, kam umístit obsah

blokovat možnosti rozvržení

Pokud umístíte kurzor myši nad formulář, zobrazí se vám přímý odkaz na úpravu tohoto formuláře:

blokové úpravy

Takže se podíváme na to, jak bloky mohou jít trochu hlouběji než současná implementace Ninja Forms. Ale WooCommerce jde ještě o krok dále …

3. WooCommerce přidá blok produktů s kontrolou sloupců

Zatímco WooCommerce pravděpodobně přidá další Gutenbergovy integrace, když se WordPress 5.0 přibližuje (některé nápady, jak sem přidat produkty), tým již s úředníkem ponořil prsty do Gutenbergu Plugin WooCommerce Gutenberg Products Block.

Ano – právě teď se jedná o samostatný plugin. Jakmile ji však nainstalujete, budete moci do svého obsahu Gutenberg vložit stávající produkty WooCommerce jako blok.

Když přidáte produkty blok, můžete si vybrat, které produkty chcete zobrazit:

gutenbergův woocommerce blok

Poté můžete pomocí možností úprav bloku změnit rozvržení:

změna rozložení woocommerce v gutenbergu

Tohle mě docela vzrušuje, protože je to skvělý příklad toho, jak Gutenberg dělá přístup ke stylu / konfiguraci nestandardního obsahu.

4. Beaver Builder přidává a "Převést na Beaver Builder" volba

O tom, jak tvůrci stránek osloví Gutenberga, se hodně mluvilo. Zatím není mnoho konkrétních, ale Beaver Builder přidal do Beaver Builderu 2.1 funkci, která vám umožní převést Gutenbergovo rozložení na Beaver Builder:

bobří stavitel gutenberg

Momentálně proces převodu není dokonalý. Myšlenka, že se dokážeme pohybovat mezi Gutenbergem a tvůrcem stránek, je však zajímavá, pokud byla konverze bezproblémová.

5. Meta boxy by stále měly fungovat – váš SEO je dobrým příkladem

Nemyslím si, že váš SEO zatím vydal nějaké změny týkající se adresy Gutenberg, takže právě teď je to více příklad toho, jak stávající meta boxy spolupracují s Gutenbergem (pokud jste Gutenberga těsně nesledovali – nyní má podporu meta boxu, i když je to více pro zpětnou kompatibilitu než dlouhodobé řešení).

Jak můžete vidět, hlavní Yoast SEO meta box prochází bez úhony s Gutenbergem:

gutenberg yoast seo meta box

Chybí vám však skóre SEO a analýza obsahu, která bývala v postranním panelu.

Jak tedy může Yoast postavit pro Gutenberg, aby to vyřešil? Zde jsou některé makety pro možné způsoby, jak může Yoast integrovat svou analýzu do skutečného Gutenbergova rozhraní:

Maketa Bvarování před seo
Maketa Cvaše obsahová analýza

6. Jak řešíme meta boxy v recenzi produktu WP

Náš Doplněk pro kontrolu produktu WP je jedním z těch pluginů, které používají meta box k řízení výstupu na front-endu (v tomto případě je to revizní box).

Pracujeme na integraci recenze produktu WP do editoru Gutenberg:

Recenze produktu wp gutenberg

Když uživatelé uvedou, že příspěvek představuje recenzi s přepínačem na postranním panelu, budou moci nakonfigurovat vše o svém recenzním poli z výše uvedených možností:

wp recenze pro gutenberg přepnout

Vývojáři – tady je skvělý zdroj, jak připravit váš plugin pro Gutenberg

Pokud jste skutečný vývojář pluginů, možná by vás zajímalo, jak byste měli pro Gutenberg vytvořit svůj konkrétní plugin. No … to ti nemohu říct. Ale mohu vás poukázat na tento úžasný příspěvek od našeho vlastního Hardeep Asraniho. Hardeep uvádí několik praktických tipů, jak připravit váš plugin pro Gutenberg.

Vývojáři mohou pro Gutenberg stavět také s novými pluginy

Vývojáři se nezaměřují pouze na to, aby stávající pluginy byly kompatibilní s Gutenbergem, ale také plánují stavět pro Gutenberg s novými pluginy.

Nový Gutenberg blokuje habaděj

Na jedné straně máte spoustu obecných pluginů, které pouze přidávají nové typy bloků obsahu. To dává Gutenbergovi více pocitů pro tvůrce stránek. Najdete bloky pro:

  • Cenové tabulky
  • Posudky
  • Členové týmu
  • Atd.

Zde je například blok cenových tabulek Stohovatelný – zásuvný modul Ultimate Gutenberg Blocks. Podívejte se, jak podrobné jsou možnosti úprav bloku:

nové gutenbergové bloky

Na WordPress.org již existuje řada těchto pluginů. Zdá se však, že kromě výše uvedeného pluginu pro stohování jsou další oblíbené nabídky:

Je tu také nabídka CoBlocks který se prodává jako "Bloky Gutenberg pro obchodníky s obsahem".

Myslím, že tento zvláštní přístup je obzvláště zajímavý. Možná v budoucnu uvidíme speciální sady Gutenbergových bloků pro:

Blok recenze knihy plugin je další malý příklad toho, jak se výklenky Gutenbergových bloků mohou stát věcí.

Příklad toho, jak mohou vlastní pole pracovat s Gutenbergem

Vlastní pole Gutenberg je další zajímavý plugin, který se zdá být trochu trakční.

Usnadňuje nastavení vlastních polí nebo skupin polí, které jsou spojeny s konkrétním typem vlastního příspěvku:

gutenberg editor vlastní pole

Poté, když jdete do editoru Gutenberg, jsou tato vlastní pole předvyplněna jako bloky:

Příklad vlastního pole gutenberg

Mnoho lidí přemýšlelo, jak bude vlastní pole fungovat s Gutenbergem – to je jeden slibný příklad, který je už venku v přírodě. Můžeš dozvědět se o tom více zde.

Tři příklady, jak vývojáři témat řeší přechod na Gutenberg

Právě jste viděli několik příkladů toho, jak vývojáři pluginů mohou stavět pro Gutenberg, ale co témata?

Zdá se, že vývojáři témat sledují tento přechod dvěma hlavními způsoby:

  • Vytváření témat připravených pomocí Gutenbergu přidáním stylů pro bloky a podporou možností rozložení Gutenbergu
  • Použití Gutenbergových bloků k vytváření obsahu témat

Zde je několik příkladů pro malování obrázku …

1. Přidání vlastních stylů do editoru Gutenberg

Jedinou skutečně úhlednou věcí, kterou vývojáři vidíme, je přidání tematických stylů do skutečného rozhraní Gutenberg back-end. Tím se otevírají dveře pro vytvoření skutečně WYSIWYG zážitku, i když Spencer z BigBox WooCommerce podrobnosti o některých problémech se stylingem bloků třetích stran.

Podívejte se například na to, jak téma Ohana ThemeShaper Ohana zcela obnovuje veškerý obsah Gutenbergu, včetně názvu příspěvku:

gutenbergové styly na palubní desce

Pokud to chcete vidět v akci, stáhnout téma Ohana z GitHubu. A ThemeShaper také vysvětluje, jak tohoto účinku dosáhli v tomto blogovém příspěvku.

2. Přidání nových možností zarovnání plné šířky

Další skvělou vylepšení kompatibility motivů, kterou uvidíte, je přidání Široké vyrovnání Podpěra, podpora. V podstatě to umožňuje provést určité bloky v plné šířce. Nejběžnějším příkladem by bylo vložení obrazu v plné šířce.

Opět můžete vidět toto ve skutečnosti s tématem Ohana:

gutenberg široké rozložení

Aby toto zarovnání fungovalo, musí autoři motivu výslovně deklarovat podporu.

3. Vytváření ukázkového obsahu témat pomocí bloků – např. Téma bloku

Nakonec je tento přístup z Organických témat docela cool:

Téma bloku je demo obsah je vytvořen výhradně s Gutenbergovými bloky.

To je nepochybně i nadále růst, jak Matt výslovně řekl v Gutenbergově plánu, že červenec bude zahrnovat zkoumání "rozšiřování Gutenbergu mimo příspěvek do přizpůsobení webu."

Kromě tématu Blok má Array Themes také Atomic Blocks Theme který je speciálně navržen pro integraci s výše uvedeným pluginem Atomic Blocks.

Vývojáři – připravte si téma pro Gutenberg

Pokud jste vývojář motivů přemýšlel, jak učinit vaše stávající téma kompatibilním s Gutenbergem, Bill Erickson má skvělého průvodce k vysokým bodům. A Podpora témat část příručky Gutenberg je další dobrý zdroj.

Určitě bude více skvělých věcí, které přijdou

Z výše uvedeného vzorku doufám, že budete lépe rozumět tomu, jak vývojáři pluginů a motivů plánují stavět pro Gutenberg.

Pokud jde o osobní poznámku, vím, že psaní tohoto příspěvku mě výrazně nadchlo možnostmi s Gutenbergem.

Pokud jde o plugin, použití bloků k nahrazení všech věcí, které by se dříve prováděly, pomocí krátkých kódů, je významným zlepšením použitelnosti, zejména pro příležitostné uživatele..

A způsob, jakým mohou vývojáři témat přinést své vlastní styly a začlenit bloky, je také vzrušující – zejména když se Gutenberg rozšiřuje více o přizpůsobení stránek.

Nyní k vám – narazili jste na nějaké skvělé příklady autorů pluginů nebo motivů, kteří hledali zajímavé způsoby, jak stavět pro Gutenberga? Dejte nám vědět v komentářích!

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 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