Как да адаптирате своя плъгин за Гутенберг: Част 1 (Block API)

Как да адаптирате своя плъгин за Гутенберг: Част 1 (Block API)

Как да адаптирате своя плъгин за Гутенберг: Част 1 (Block API)
СОДЕРЖАНИЕ
02 июня 2020

"Имам плъгин," казва ти, "как да го направя Гутенберг-готов?"


Историята е пряма; Gutenberg е новият опит на редактора в WordPress, който ще бъде обединен в ядро ​​в следващата голяма версия. Много плъгини, които не са в крак с това ще остарее. Това е от съществено значение да адаптирате своя плъгин за Гутенберг, преди да е станало твърде късно.

Кой е засегнат?

Почти всички плъгини които имат нещо общо с редактора на публикации, ще бъдат засегнати от Гутенберг. Например, ако вашата приставка добави бутон в TinyMCE, за да поставите кратък код в редактора, лоши новини; това ще бъде краят на това.
Адаптиране на вашия плъгин за Гутенберг: Част 1 (Блок API)

"Трябва ли да адаптирам своите плъгини за Гутенберг?"

И така, кои плъгини се нуждаят от актуализиране за Гутенберг? Всички плъгини, които работят с:

  • Персонализирани метабокси
  • кратките
  • TinyMCE бутони
  • или изобщо някаква функция за редактор

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

Дори късите кодове ще продължат да работят както преди, но това ще бъде просто текстов възел в редактора, докато всички приставки за кратък код за Gutenberg ще следват потребителския му интерфейс и ще бъдат по-лесни за използване от потребителите.

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

Само за да ви дам представа, ето един пример за това как изглежда стандартното изживяване на стария редактор на потребителя с плъгин от нашия (А), и след това как изглежда в Гутенберг (Б) – с приставката, оптимизирана за него.

(Б)RSS емисии на Feedzy - приставка, готова за Гутенберг

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

Неща, които си струва да се знае предварително, Гутенберг е написан на React. И плъгините на Gutenberg са кодирани в JavaScript, което също може да бъде груб преход за разработчиците, които кодират само в PHP. Въпреки че не е необходимо да имате познания за React, за да създавате плъгини за Гутенберг, ще ви е необходимо основно разбиране на JavaScript. Ако преди това сте работили по React и JSX, то това ще бъде подобно основание за вас.

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

Как да адаптирате своя плъгин за Gutenberg

API на Гутенберг ни предоставя много начини за разширяване на редактора, като Block API, Shortcode API и други. Кой API да използвате зависи от типа на плъгин, който изграждаме.

Ако вашата приставка е обикновена приставка за кратък код, тогава Block API може да се използва, за да се направи красив блок за редактора. Но ако вашата приставка използва сложни метабокси, където даден блок не е достатъчен, можем да използваме API на страничната лента.

Също така ще използваме модерен стек от инструменти за разработка на JavaScript, като NodeJS, NPM, webpack и ESNext. Ще ви предоставим примерни файлове, така че няма нужда да се притеснявате от настройката на вашата среда за разработка.

В тази публикация ще разгледаме как да направите своя плъгин Gutenberg-съвместим с помощта на Block API. Ще влезем в другите методи (API на страничната лента, панела за публикуване, лентата на състоянието & подобни API) в част втора, ако е необходимо.

Можете да намерите всички споменати примери в това хранилище на GitHub.

Gutenberg среда за развитие

Разработването за Gutenberg изисква да настроите куп инструменти, като NPM, webpack, Babel и JSX. Това отнема много време и усилия, затова сме подготвили средата за вас.

Gutenberg Boilerplate е плъгин с минимални настройки и примери за разработка на Gutenberg. Той съдържа един блок и пример за страничната лента. Можете да използвате това за разширяване на вашия персонализиран блок.

Котенна плоча на Гутенберг

Можете да разклоните или клонирате Хранилище за котелни плочи Gutenberg Към твоя / WP-съдържание / приставки / и да го използвате като среда за развитие.

След това трябва да инсталирате NodeJS на вашата машина, за да започнете. Отворете папката Gutenberg Boilerplate и стартирайте npm install

От този момент нататък трябва да знаете три команди, които ще използвате по време на процеса на разработка:

  • npm install – Инсталирайте проектни зависимости, когато клонирате проекта.
  • npm run dev – Компилирайте кода по време на процеса на разработка. Трябва да стартирате това веднъж и той ще продължи да следи промените.
  • npm run build – Компилирайте кода за оптимизирана компилация след приключване на процеса на разработка.

Блокиране на API

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

Процесът, базиран на съществуващ плъгин

В нашия пример ще приемем кратък код Click to Tweet към блок на Гутенберг. Този кратък код за щракване върху Tweet ще направи кутия с текст и бутон за туитиране на този текст. Като този:

Кликнете, за да цветете Layout

Нашият кратък код изглежда така:

[clicktotweet tweet ="Текст за показване" tweetsent ="Текст, който трябва да се туитва" бутонът ="чуруликане" тематични ="кликване, чуруликане"]

Нашият кратък код има четири параметъра:

  • tweet: Текст, който се появява на вашия сайт.
  • tweetsent: Текст, който отива в Twitter.
  • бутон: текст на бутона за щракване.
  • тема: Или щракване към туит или щракване към твит-алт като тема на полето.

Адаптиране на приставки за Гутенберг с Block API

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

Целият код е наличен в Здравейте хранилище за плъгини Gutenberg в GitHub. Можете да клонирате хранилището, за да видите приставката в действие или да промените кода.

Запишете скриптове / стилове за Гутенберг

Първо, трябва да завладеем нашите скриптове и стилове в редактора на Гутенберг, използвайки enqueue_block_assets:

/ **
* Enqueue предния край и редактора JavaScript и CSS
* /
функция hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Enqueue пакетния JS файл в пакет
wp_enqueue_script (
Ало-Гутенберг сегмент на JS “,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-блоки’, ‘wp-редактор’, ‘wp-компоненти’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Enqueue стилове на фронтед и редактор на блок
wp_enqueue_style (
“Здравей-Гутенберг-блок-CSS”,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Сценариите на куките функционират в куката за редактор на блокове
добавяне на управление (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Към нашия скрипт добавихме четири зависимости, които ще използваме в нашия блок. Нека първо да научим за тези зависимости:

wp-i18n е версия на Гутенберг за функции на интернационализация, като например __ (). wp-блокове се използват за функцията registerBlockType, която регистрира вашия блок. Ние използваме wp-редактор и wp-компоненти скриптове за различни компоненти в нашия блок.

Сега, след като завладяхме активите ви, можем да започнем да пишем нашия блок /src/block.js досие.

Импортиране на зависимости

Ако използвате Gutenberg Boilerplate, тогава вашата block.js файлът трябва да има основна структура на блока, която можете да използвате за изграждане на плъгини за Gutenberg:

/ **
* Вътрешни блокови библиотеки
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* Регистрационен блок
* /
експортиране по подразбиране registerBlockType (‘gutenberg-bojplate / block’, {
// Заглавие на блока
заглавие: __ („Котенна плоча на Гутенберг“),
// Описание на блока
описание: __ (‘Примерен блок.’),
// Блок категория
категория: „общ“,
// Икона на блок
икона: ‘администратор-сайт’,
// Блокиране на ключови думи
ключови думи: [
__( ‘Стереотипния’ ),
__( ‘Здравей свят’ ),
__ („Пример“),
],
атрибути: {
},
// Определяне на интерфейса за редактиране
редактиране: реквизит => {
връщане (

{__ (‘Здравей бекенд’)}

);
},
// Определяне на интерфейса на предния край
запишете: реквизит => {
връщане (

{__ (‘Здравейте Frontend’)}

);
},
});

Можете да стартирате npm run dev, за да започнете да компилирате нашия код в реално време.

Първо, ще импортираме всички компоненти и библиотеки, които са ни необходими за блока в горната част:

/ **
* Блокирайте зависимостите
* /

импортиране на имена на класове от „имена на класове“;

/ **
* Вътрешни блокови библиотеки
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

const {
Богат текст,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
Toolbar,
бутон,
Подсказка,
} = wp.com компоненти;

Първият внос classnames които инсталирахме с помощта на npm, за да използваме няколко класа в нашия код, тъй като JSX не позволява множество класове в елементи.

Ще научим за други компоненти, които сме импортирали, докато ги използваме.

Определете атрибути

Сега ще дефинираме четири атрибута за нашия блок Гутенберг, същият като нашия кратък код:

атрибути: {
туит: {
тип: ‘string’,
},
tweetsent: {
тип: ‘string’,
},
бутон: {
тип: ‘string’,
по подразбиране: __ (‘Tweet’),
},
тема: {
тип: ‘boolean’,
по подразбиране: false,
},
},

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

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

Редактиране на интерфейс

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

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

// Определяне на интерфейса за редактиране
редактиране: реквизит => {
връщане (

{__ (‘Здравей бекенд’)}

);
},

Със следния код:

// Определяне на интерфейса за редактиране
редактиране: реквизит => {
връщане [

Тикви и пингвини

чуруликане

];
},

Това трябва да ви даде представа за нашия краен резултат. Ще изглежда нещо така:

Приставки за Гутенберг

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

Ще използваме Богат текст компонент, който преди това сме импортирали, за да заменим нашия твърдо кодиран текст.

Нашият компонент RichText има пет аргумента. форматът е низ, тъй като ние ще използваме нашия кратък код за показване на елементите в предния край. Ако искахме да използваме селектор в нашия атрибут, тогава форматът щеше да бъде масив.

RichText има някои опции за форматиране по подразбиране, като удебелен шрифт и курсив, които сме деактивирали, като предаваме празен масив в аргумента на formattingControls.

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

И накрая, стойност ще бъде стойността на нашето поле, която ще бъде взета от атрибут tweet, който дефинирахме по-рано.

След като сме дефинирали нашата област RichText, трябва да изградим onChangeTweet функция, която ще се задейства, когато стойността се промени в текстовото ни поле.

// Определяне на интерфейса за редактиране
редактиране: реквизит => {
const onChangeTweet = стойност => {
props.setAttributes ({tweet: стойност});
};
връщане [
…останалата част от кода

Предаваме стойност на полето RichText във функцията onChangeTweet, която използва props.setAttributes функция за актуализиране на стойността на атрибут tweet.

Ще видите силата на Гутенберг сега, когато използвате блока си.

RichField в Гутенберг

Не е ли страхотно?

Блок инспектор

Когато изграждате приставки за Gutenberg, не е необходимо да изобретявате колелото всеки път, за да направите опционни панели за своите плъгини. Gutenberg ни предоставя опростен начин да позволим персонализиране на блока и гарантира, че всеки потребител има постоянен опит с вградени модели на потребителски интерфейс.

Подобно на компонента RichText, компонентът InspectorControls добавя странична лента, когато е избран блокът. Нещо като това:

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

Ще използваме също TextareaControl и TextControl, за да добавим поле за въвеждане на текст и поле за въвеждане на текст в нашата зона на инспектора.

Ще добавим следния код към декларацията ви за връщане:

!! props.isSelected && (

),

props.isИзбрани проверки, за да се уверите, че инспекторът се появява само когато е избран блокът.

Компонентите TextareaControl и TextControl, подобно на RichText, имат стойност и метод onChange.

Също така трябва да променим кода на вашия блоков дисплей, за да се съобразят с новите промени. В нашия случай трябва само да добавим текст на бутона в нашия блок, тъй като текстът на Tweet ще бъде добавен към връзката, така че не е необходимо да го показваме в нашия бекенд.

Можете да замените хипервръзката в нашия първоначален код със следното:


{props.attributes.button}

Както споменахме по-рано, премахваме хипервръзката от кода си, тъй като не е необходимо да го показваме в бекенда. Това ще направи нашия блок да изглежда така:

Гутенберг Щракнете, за да щракнете върху Инспекторски контроли

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

Ще добавим една последна опция към нашия блок, за да завършим JavaScript частта в следващия раздел.

Блокова лента с инструменти

Block Toolbar е друг предварително изграден UI компонент, който можем да използваме, за да добавим още опции към нашия блок. Той ще се появи над вашия блок, когато го изберете. Пример:

Gutenberg Block Toolbar

В идеалния случай лентата с инструменти за блокиране трябва да съдържа основните контроли на вашия блок, като инспекторът хоства вторичните контроли. Това обаче е спорно и зависи от вашия блок.

Ще използваме областта „Блокиране на лентата с инструменти“, за да хостваме нашия алтернативен контрол на стила.

Подобно на Block Inspector, ние трябва да добавим следния код към нашето изявление за връщане, за да добавим Block Toolbar към нашия блок:

!! props.isSelected && (

),

Използваме компонентите на BlockControls и Toolbar, за да добавим лента с инструменти към нашия блок. Подобно на Block Inspector, props.isSelected гарантира, че лентата ни с инструменти се появява само когато поставим фокус върху нашия блок.

Също така използваме компонентите на Tooltip и Button за нашия контрол. Компонентът на подсказка е увит около компонента на бутона, за да се уверите, че има подсказка, когато задържите курсора на мишката върху контрола, за да ви даде повече контекст.

Компонентът на бутон използва модул с имена на класове, който импортирахме по-рано в статията. Използвахме функцията имена на класове, за да дадем три класа на нашия контрол. Третият клас, е активен, се появява само когато стойността на нашия атрибут на тема е вярна.

Функцията onChange превключва атрибута на тема true / false. В крайна сметка компонентите на Dashicon се използват за показване на икона за нашето управление.

Ще трябва също да променим блоковия си код, за да работи с промените. Трябва да заменим следния ред:

С участието на:

Проверяваме дали атрибутът на тема е вярно или невярно и съответно присвояваме клас на нашия блок.

Сега вашият блок трябва да изглежда така:

Кликнете, за да щракнете върху лентата с инструменти

Завършихме частта от JavaScript на нашия блок в Гутенберг. Можете да намерите целия изходен код на файла тук.

Сега ще завършим нашия блок, като обработваме изхода от страната на сървъра.

Предаване от страна на сървъра

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

Първо, ще направим нашия метод за запазване да върне нула, като го заменим със следния код:

// Определяне на интерфейса на предния край
save () {
// Визуализация в PHP
връща нула;
},

Ще използваме PHP функция register_block_type, за да регистрираме нашия тип блок в PHP:

if (function_exists (‘register_block_type’)) {
// Превъртане на страна на куката на сървъра в обратен визуализация
register_block_type (
„здравей-гутенберг / щракнете върху туит“, [
‘render_callback’ => “Hello_gutenberg_block_callback”,
‘атрибути’ => масив (
‘tweet’ => масив (
‘type’ => “Низ”,
),
‘tweetsent’ => масив (
‘type’ => “Низ”,
),
= ‘Бутона’> масив (
= “Тип”> “Низ”,
‘по подразбиране’ => “Tweet”,
),
‘тема’ => масив (
= “Тип”> “Булев”,
‘по подразбиране’ => фалшив,
),
),
]
);
}

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

Първият аргумент е функцията render_callback, която призовава към нашата hello_gutenberg_block_callback функция за изобразяване от страна на сървъра.

След обратното ни обаждане, предаваме атрибутите като масив, подобен на файл block.js, който използваме в нашата функция за обратно извикване на визуализация.

Нашата функция за обратно извикване на визуализация изглежда така:

функция hello_gutenberg_block_callback ($ attr) {
извлечение ($ attr);
if (isset ($ tweet)) {
$ topic = ($ topic === true? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="%с" tweetsent ="%с" бутонът ="%с" тематични ="%с"];
връщане sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ бутон, $ тема);
}
}

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

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

В следващата част ще разгледаме други начини за адаптиране на съществуващите плъгини за Gutenberg, включително API на Sidebar.

Ако имате въпроси как да адаптирате своя плъгин за Gutenberg, моля, попитайте ги в коментарите!

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

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