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

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


В първата част на тази мини-серия разгледахме Block API на Gutenberg – от това се нуждаят повечето плъгини от гледна точка на съвместимостта на Gutenberg. Този път ще изследваме още едно парче от пъзела Гутенберг – API на страничната лента на Гутенберг.

Само за да сме сигурни, че сме на една и съща страница, бързо обяснение:

  • Блокът API на Гутенберг е много обширен и ви позволява да изграждате почти всичко като блокове, но понякога не е достатъчно.
  • API на страничната лента, от друга страна, позволява на плъгините да регистрират странична лента, където те могат да пренесат функционалността си извън блоковете. Страничната лента е подобна на Block Inspector.

Направете своя плъгин съвместим с API на Gutenberg - Sidebar

Например, API на страничната лента на Гутенберг в употреба, както е показано от Yoast SEO:

API на страничната лента на Гутенберг

Къде можете да използвате API на страничната лента?

Наскоро работихме върху създаването на нашия плъгин – WP Преглед на продукта – готов за Гутенберг. WP Product Review използва мета полета за добавяне на данни от рецензии към публикацията и поради различни причини за съвместимост не можем да превърнем в блок. Следователно използвахме API на страничната лента.

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

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

WP Product Review е един от примерите, при които API на страничната лента може да бъде полезен. Друг чудесен пример е Пусни го плъгин, който позволява на потребителите да вмъкват стокови изображения от Unsplash и Giphy, използвайки страничната лента.

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

Мета кутиите са готови за Гутенберг по подразбиране, но не съвсем

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

Това може да изглежда следното в класическия редактор:

Meta Box в класически редактор

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

/ **
* Регистрация Hello Gutenbert Meta Box
* /
функция hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’);
}
добавяне (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* Здравей Gutenberg Metabox Callback
* /
функция hello_gutenberg_metabox_callback ($ post) {
$ value = get_post_meta ($ пост->ID, ‘_hello_gutenberg_field’, вярно);
?>
<?php _e („Какво се казваш?“, „здравей-гутенберг“) ?>

<?PHP
}

/ **
* Запазване Здравейте, Гутенберг Metabox
* /
функция hello_gutenberg_save_postdata ($ post_id) {
ако (array_key_exists (‘hello_gutenberg_field’, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hello_gutenberg_field’]);
}
}
добавяне (‘save_post’, ‘hello_gutenberg_save_postdata’);

Така че въпросът да се зададе тук е:

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

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

Въпреки това, когато говорим за съвместимост с Гутенберг, ние не говорим само за плъгин, който работи в Gutenberg среда, а плъгинът работи * като Gutenberg *.

"Защо?" – ще попитате. Просто казано, потребителите, които ще започнат да използват WordPress, след като Гутенберг е редактор по подразбиране, ще намерят старите начини да бъдат контраинтуитивни. Освен това те ще очакват по-подобен на Гутенберг стил за всичко в редактора.

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

И накрая, нека си изцапаме ръцете с някакъв код!

Първи стъпки с API на страничната лента

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

Приготвяне на вашата мета кутия за Гутенберг

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

/ **
* Регистрирайте се Hello Gutenberg Metabox
* /
функция hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’, масив (
‘__back_compat_meta_box’ => фалшив,
));
}
добавяне (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Наръчникът на Гутенберг има повече подробности за това как можете да обработвате пренасяне на PHP мета кутии в Гутенберг (тук).

Това ще гарантира, че старите ни метаполета на PHP вече не се появяват в Гутенберг. Сега също трябва да направим нашето мета поле за Гутенберг, като го добавим към WordPress REST API. Можете да добавите следния код, за да регистрирате мета полето с REST API:

/ **
* Регистрирайте Hello Gutenberg Meta Field to Rest API
* /
функция hello_gutenberg_register_meta () {
register_meta (
‘публикация’, ‘_hello_gutenberg_field’, масив (
= “Тип”> “Низ”,
“единични” => вярно,
“show_in_rest” => вярно,
)
);
}
добавяне (‘init’, ‘hello_gutenberg_register_meta’);

Това ще добави _hello_gutenberg_field към полето мета обект в REST API.

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

Следващият код ще добави нашия персонализиран маршрут към WordPress REST API, който ще бъде / Здравей-Гутенберг / v1 / актуализиране-мета /:

/ **
* Регистрирайте Hello Gutenberg Metabox to Rest API
* /
функция hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, масив (
‘методи’ => “POST”,
‘callback’ => “Hello_gutenberg_update_callback”,
‘args’ => масив (
‘id’ => масив (
‘sanitize_callback’ => “Absint”,
),
),
)
);
}
добавяне (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Здравейте, Гутенберг REST API Callback за Gutenberg
* /
функция hello_gutenberg_update_callback ($ данни) {
върнете update_post_meta ($ data [‘id’], $ data [‘key’], $ data [‘value’]);
}

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

По същия начин, ако искате да знаете какво е API на WordPress REST и как да започнете, можете да прочетете нашата публикация в блога: WordPress REST API: Какво представлява и как да започнете да го използвате.

Добавяне на блок на страничната лента към Гутенберг

Да започнем с кода на страничната лента от Котенна плоча на Гутенберг:

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

const {Fragment} = wp.element;

const {
PluginSidebar,
PluginSidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const Component = () => (

{__ („Котенна плоча на Гутенберг“)}

{ __( ‘Здравей свят!’ ) }

);

registerPlugin (‘gutenberg-kotplateplate’, {
икона: ‘администратор-сайт’,
render: Компонент,
});

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

Примерният код е от нашето хранилище на Gutenberg Boilerplate и в резултат на това трябва да заменим всички събития на "Котенна плоча на Гутенберг" с "Здравей Гутенберг".

Използвани компоненти

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

/ **
* Вътрешни блокови библиотеки
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.com компоненти;

const {
Компонент,
фрагмент
} = wp.елемент;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Нека научим бързо за всички компоненти, които сме импортирали.

  1. Както беше обсъдено в предишната статия, __ компонент се използва, за да направи нашия текст преводим.
  2. Най- PluginSidebar компонент се използва за добавяне на страничната ни лента към Гутенберг.
  3. PluginSidebarMoreMenuItem се използва за добавяне на бутон в менюто на Гутенберг, който превключва видимостта на страничната лента.
  4. Най- PanelBody компонент се използва за добавяне на панел към нашата странична лента.
  5. TextControl се използва за нашето поле за въвеждане.
  6. След това импортирахме Компонент и фрагмент компоненти. И двете са React компоненти, които използваме в нашата странична лента.
    • Компонентът Fragment се използва за групиране на списък на деца без добавяне на допълнителни възли в DOM. Трябва да използваме компонента Fragment в нашия код, тъй като JSX не ни позволява да имаме повече от един родителски възел.
  7. withSelect е компонент от по-висок ред. За да научите какво са компоненти от по-висок ред, препоръчвам ви да прочетете тази документация.
  8. И накрая, ние внасяме registerPlugin, което е подобно на registerBlockType, което използвахме в предишната статия. Вместо да регистрирате блок, registerPlugin регистрира вашия плъгин.

Добавяне на контроли

Засега страничната ни лента е просто компонентна функция, но тъй като ще използваме методите на жизнения цикъл на React, ще я превърнем в компонент React, като така:

клас Hello_Gutenberg разширява Компонент {
render () {
връщане (

{__ (‘Здравей Гутенберг’)}

{ __( ‘Здравей свят!’ ) }

)
}
}

registerPlugin (‘hello-gutenberg’, {
икона: ‘администратор-сайт’,
рендер: Hello_Gutenberg,
});

Това трябва да накара страничната ви лента да работи с обикновен текст.

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

клас Hello_Gutenberg разширява Компонент {
render () {
връщане (

{__ (‘Здравей Гутенберг’)}

)
}
}

Първо, ние сме дефинирали първоначално състояние, което е основно ключът и стойността на нашето мета поле. След това ние използваме apiFetch, за да извлечем данните от текущата ни публикация.

Предаваме идентификационния номер на текущата ни публикация с променлива $ {this.props.postId}. Ще се върнем към този момент по-късно.

След като данните бъдат извлечени, ние актуализираме състоянието си със стойността от нашия REST API.

Сега, да се върнем към променливата postId. В момента не знаем идентификационния номер на текущата ни публикация, така че за това използваме компонента withSelect от по-висок ред, като този:

const HOC = withSelect ((изберете) => {
const {getCurrentPostId} = select (‘ядро / редактор’);
връщане {
postId: getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin (‘hello-gutenberg’, {
икона: ‘администратор-сайт’,
визуализация: HOC,
});

Това ще предаде идентификатора на текущата ни публикация като променлива postId. Сега можете да пуснете по-стара публикация и нашата странична лента в Гутенберг ще покаже стойността на вашето мета поле.

Актуализирайте мета стойността

Сега трябва да позволим на страничната ни лента да актуализира и мета стойността. Подобно на извличането на детайлите, ние ще използваме wp.apiRequest полезност.

Всеки път, когато стойността на нашето състояние се променя, ние ще го актуализираме с REST API. За това първо трябва да добавим събитие onChange към нашия TextControl, като този:

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