Създайте за Гутенберг: Как авторите на плъгини и теми се отнасят към прехода към Гутенберг

Създайте за Гутенберг: Как авторите на плъгини и теми се отнасят към прехода към Гутенберг

Създайте за Гутенберг: Как авторите на плъгини и теми се отнасят към прехода към Гутенберг
СОДЕРЖАНИЕ
02 июня 2020

Създайте за Гутенберг: Как авторите на плъгини и теми се отнасят към прехода


На WordCamp Europe 2018, Мат Мълленвег изложи груба пътна карта за Гутенберг през следващите няколко месеца. През юли ще има голям тласък за увеличаване на приемането на Гутенберг, с 5.0 бета игра за август (или след това; всъщност, вероятно отвъд). Предстоящата интеграция може да ви накара да се чудите как разработчиците на WordPress планират да изграждат за Гутенберг.

Тоест, какви са различните начини, по които разработчиците подготвят своите предложения за Gutenberg? А хората правят ли нещо ново и интересно за Гутенберг?

В тази публикация ще ви дадем някои реални, конкретни примери за това как плъгини и разработчици на теми могат да създадат за Гутенберг, като ви покажем какво вече е там.

Разглеждайки някои примери от реалния живот как разработчиците използват блокове и стилове, за да създадат по-интегрирано преживяване за редактиране, надяваме се, че:

  • Разберете как Гутенберг може да ви бъде от полза като краен потребител.
  • Вземете няколко идеи за изграждане на Гутенберг за вашите собствени проекти на WordPress.

Ако все още не сте сигурни какво представлява редакторът на Гутенберг, може би ще искате първо да разгледате пълния ни ръководство за редактор на Гутенберг.

Contents

Шест примера как съществуващите плъгини адресират превключването към Гутенберг

Начинът, който авторите на плъгините изграждат за Гутенберг, зависи преди всичко от функцията на приставката.

От една страна, имате плъгини, които са фокусирани върху добавяне на предно съдържание. Това са главно нещата, които преди това щяха да бъдат направени чрез добавяне на кратък код.

Добър пример е приставка за форма. Почти всеки плъгин за формуляра ви дава отделен интерфейс за изграждане на вашите формуляри и след това кратък код за действително вграждане на тези форми в предния край.

Тези типове плъгини обикновено ще адресират Гутенберг с a персонализиран блок за да улесните вмъкването на съдържание. В този раздел ще видите няколко примера от:

  • Форми на нинджа
  • давам
  • WooCommerce

След това имате други плъгини, които ви помагат да контролирате детайлите зад кулисите. Обикновено тези приставки използват мета полета.

Най-известният пример би бил нещо като Yoast SEO. Не добавяте съдържание, но цялата тази информация в мета полето е от съществено значение.

Мета кутиите вече работят с Гутенберг, но все още има шанс тези плъгини да променят своята функционалност, за да се възползват от Гутенберг. Ще ви покажа някои начини, по които Yoast SEO може да реши проблема, както и как сме избрали да правим неща с някои от нашите собствени приставки.

1. Ninja Forms добавя нов блок на Гутенберг

Форми на нинджа е един от най-популярните плъгини на формата в репо WordPress.org. Засега се обръща към Гутенберг чрез добавяне на просто Форми на нинджа блок.

Вмъквате блока като всеки друг блок на Гутенберг:

как нинджа образува разработки за Гутенберг

След това можете да изберете формата си от падащото меню:

нинджа образува блок

И след като изберете форма, в редактора ще видите преглед на живо:

предварителен преглед на формата

В момента това е всичко. Но това е солиден основен подход, защото:

  • Елиминира необходимостта да се работи директно с къси кодове
  • Можете да видите преглед на живо на вашия дизайн, докато все още редактирате страницата си

Следващите два приставки ще надграждат това с някои по-дълбоки опции за стилизиране / управление.

2. Дайте добавя два блока на Гутенберг с опции за оформление

давам е популярна приставка за дарение с екип за разработка, който беше много активен относно интегрирането на Give с редактора на Гутенберг (ако ви харесва темата на тази публикация, ще се насладите на серията #PlayingWithBlocks в Дайте блог, където екипът на Give подробно описва плановете си да изгради за Гутенберг).

Give има едно от най-модерните преживявания в Гутенберг, което съм опитвал. Можете не само да въведете формуляри за даряване чрез два блока на Give, но можете да ги оформите и чрез интерфейса на Гутенберг.

Дайте два блока, които ви позволяват да вграждате:

  • Единична форма за дарение
  • Решетка от формуляри за дарение

блокове Givewp Gutenberg

Подобно на Ninja Forms, вие получавате преглед на живо на формата си. Но вие също получавате блок опции за редактиране, които ви позволяват:

  • Изберете формата
  • Активиране / деактивиране на целта за дарение
  • Изберете къде да позиционирате съдържание

опции за оформление на блока

И ако задържите курсора на мишката върху формата си, ще получите директна връзка за редактиране на този формуляр:

редактиране на блок

Така че има поглед върху това как блоковете могат да отидат малко по-дълбоко от сегашната имплементация на Ninja Forms. Но WooCommerce върви с една крачка напред …

3. WooCommerce добавя блок продукти с контрол на колоните

Докато WooCommerce вероятно ще добави още интеграции на Gutenberg, тъй като WordPress 5.0 се приближава (някои от тях) идеи как да добавите продукти тук), екипът вече е потопил пръстите на краката си в Гутенберг с официалното лице WooCommerce Gutenberg Products Block плъгин.

Да – в момента това е отделен плъгин. Но след като го инсталирате, ще можете да вмъкнете съществуващите продукти на WooCommerce като блок във вашето съдържание в Гутенберг.

Когато добавите Продукти блок, можете да изберете кои продукти да показвате:

блок за woocommerce gutenberg

След това можете да използвате опциите за редактиране на блокове, за да промените оформлението:

промяна на оформлението на woocommerce в Гутенберг

Този ме вълнува доста, защото е чудесен пример за това как Гутенберг го прави по-достъпен за стил / конфигуриране на нестандартно съдържание.

4. Beaver Builder добавя a "Преобразуване в Beaver Builder" опция

Много се говореше за това как създателите на страници ще се обърнат към Гутенберг. Все още няма много конкретни, но Beaver Builder добави функция в Beaver Builder 2.1, която ви позволява да конвертирате оформление на Гутенберг в Beaver Builder:

бобър строител Гутенберг

В момента процесът на преобразуване не е перфектен. Но идеята да може да се мести между Гутенберг и създател на страници е интригуваща, ако преобразуването беше безпроблемно.

5. Мета кутиите все още трябва да работят – Yoast SEO е добър пример

Не мисля, че Yoast SEO все още е пуснал промени по адрес на Гутенберг, така че в момента това е по-пример за това как съществуващите мета кутии работят с Гутенберг (ако не сте следили отблизо Гутенберг – той вече има поддръжка за мета кутии, въпреки че е така повече за обратна съвместимост, отколкото за дългосрочно решение).

Както можете да видите, основната мета кутия Yoast SEO идва чрез невредими с Гутенберг:

gutenberg yoast seo meta box

Но ви липсват оценките за SEO и анализ на съдържанието, които се използваха в страничната лента.

Как може Йоаст да изгради Гутенберг, за да се справи с това? Ето няколко макети за възможни начини Yoast да интегрира своя анализ в реалния интерфейс на Гутенберг:

Макет Bпредупреждение yoast seo
Мокет Cанализ на съдържанието на yoast seo

6. Как се обръщаме към мета полета в WP Product Review

наш WP плъгин за преглед на продукти е един от онези плъгини, който използва мета поле за контролиране на изхода от предния край (поле за преглед в този случай).

Ето как работим върху интегрирането на WP Product Review в редактора на Гутенберг:

wp преглед на продукта gutenberg

Когато потребителите посочат, че публикацията е преглед с превключване на страничната лента, те ще могат да конфигурират всичко за полето за преглед от опциите по-горе:

wp преглед за gutenberg превключвател

Разработчици – тук е чудесен ресурс, за да подготвите своя плъгин за Gutenberg

Ако сте действителен разработчик на приставки, може би се питате как трябва да изградите Gutenberg за вашия конкретен плъгин. Е … не мога да ви кажа това. Но мога да ви насоча към този страхотен пост от нашия собствен Хардип Асрани. Хардип излага някои полезни съвети, за да подготвите своя плъгин за Гутенберг.

Разработчиците могат да създадат и за Gutenberg с нови плъгини

Разработчиците не са фокусирани само върху това да направят съществуващите плъгини съвместими с Гутенберг, те също планират да създадат за Гутенберг нови плъгини.

Ню Гутенберг блокира галора

От една страна, имате множество общи плъгини, които просто добавят нови видове блокове със съдържание. Те дават на Гутенберг повече усещане за създателя на страници. Можете да намерите блокове за:

  • Таблици с цени
  • Отзиви
  • Членове на отбора
  • И т.н..

Например, ето блок от ценови таблици от Stackable – Ultimate Gutenberg Blocks плъгин. Вижте колко подробни са опциите за редактиране на блокове:

нови блокове Гутенберг

Вече има куп тези плъгини в WordPress.org. Но извън гореспоменатия плъгин Stackable, други популярни предложения изглежда са:

Има и предложение, наречено CoBlocks която се продава като "Блокове на Гутенберг за маркетинг на съдържание".

Мисля, че този нишов подход е особено интересен. Може би в бъдеще ще видим специални блокови комплекти на Гутенберг за:

Най- Блок за преглед на книги плъгинът е друг мини пример за това как нишевите блокове на Гутенберг могат да се превърнат в нещо.

Пример за това как персонализираните полета могат да работят с Гутенберг

Гутенбергски персонализирани полета е друг интересен плъгин, който сякаш получава някакво сцепление.

Улеснява настройването на персонализирани полета или групи от полета, които са свързани с конкретен персонализиран тип публикация:

персонализирани полета за редактор на gutenberg

След това, когато отидете в редактора на Гутенберг, тези персонализирани полета се попълват предварително като блокове:

пример за потребителско поле на gutenberg

Много хора се питаха как ще работят персонализирани полета с Гутенберг – това е един обещаващ пример, който вече е в природата. Можеш научете повече за това тук.

Три примера за това как разработчиците на теми се занимават с прехода към Гутенберг

Току-що видяхте някои примери за това как разработчиците на плъгини могат да изграждат за Гутенберг, но какво да кажем за теми?

Изглежда, че разработчиците на теми следват два основни начина за справяне с прехода:

  • Оформяне на теми за Гутенберг чрез добавяне на стилистика за блокове и поддържане на опции за оформление на Гутенберг
  • Използване на блокове Гутенберг за изграждане на тематично съдържание

Ето няколко примера за рисуване на картината …

1. Добавяне на персонализирани стилове в редактора на Гутенберг

Едно наистина кокетно нещо, което виждаме разработчиците, е да добавяте стилове на теми към реалния интерфейс на Гутенберг в заден план. Това отваря вратите за създаване на наистина WYSIWYG изживяване, въпреки че Spencer от BigBox WooCommerce подробно описва някои проблеми със стилизиращите блокове на трети страни.

Например, вижте как темата на Охана на ThemeShaper напълно рестайлизира цялото съдържание в Гутенберг, включително заглавието на публикацията:

gutenberg стилове в таблото

Ако искате да го видите в действие, изтеглете темата Ohana от GitHub. И ThemeShaper обяснява и как са постигнали този ефект в тази публикация в блога.

2. Добавяне на нови опции за подравняване на пълна ширина

Друг готин настрой за съвместимост на темите, който ще видите, е добавянето на Широко привеждане в съответствие поддържа. По същество това ви позволява да правите определени блокове с пълна ширина. Най-често срещаният пример би бил вмъкване на изображение в пълна ширина.

Отново можете да видите това в сила с темата на Охана:

gutenberg широко оформление

За да работи това привеждане в съответствие, авторите на теми трябва изрично да декларират подкрепа.

3. Изграждане на тематично демо съдържание с блокове – напр. Темата за блока

И накрая, този подход от органичните теми е доста готин:

Темата на блока е демонстрационното съдържание е изградено изцяло с блокове Гутенберг.

Това е нещо, което несъмнено ще продължим да наблюдаваме, като Мат изрично каза в пътната карта на Гутенберг, че юли ще включва изследване. "разширяване на Гутенберг извън публикацията в персонализиране на сайта."

Отвъд темата за блока, темите за масив имат и Тема за атомните блокове който е специално създаден да се интегрира с плъгина Atomic Blocks, споменат по-горе.

Разработчици – ето как да подготвите темата си за Гутенберг

Ако сте разработчик на теми, се чудите как да направите съществуващата си тема съвместима с Гутенберг, Бил Ериксън има страхотен водач до високите точки. И на Тематична поддръжка раздел от наръчника за Гутенберг е друг добър ресурс.

Определено ще предстоят по-готини неща

От извадката по-горе, надявам се да разберете по-добре как разработчиците на плъгини и теми планират да създадат за Гутенберг.

В лична бележка знам, че писането на тази публикация ме направи значително по-развълнуван от възможностите с Гутенберг.

На лицевата страна на приставката използването на блокове за заместване на всички неща, които преди са били направени с къси кодове, е голямо подобрение за използваемостта, особено за случайните потребители.

И начинът, по който разработчиците на теми могат да въведат свои собствени стилове и да вгражда блокове, също е вълнуващ – особено след като Гутенберг се разширява повече в персонализирането на сайтове.

Сега към вас – попадали ли сте на страхотни примери на плъгини или автори на теми, намиращи интересни начини за изграждане за Гутенберг? Уведомете ни в коментарите!

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector