PluginDocumentSettingPanel

Урок 5

Зарегистрируйтесь или войдите и получите бесплатный доступ к первому уроку курса.

Урок 5

PluginDocumentSettingPanel – добавляем поля в основные настройки поста

В предыдущих уроках мы уже научились создавать свои собственные сайдбары и добавлять в него сколько угодно открывающихся панелей.

В этом же уроке я хочу познакомить вас с компонентом Gutenberg PluginDocumentSettingPanel, благодаря которому мы сможем добавлять аккордеон-панели в сайдбар, в котором выводятся основные настройки поста, например рубрики, метки, изображение записи и так далее.

Для того, чтобы скачать готовый код этого урока, нужно приобрести курс.

Чтобы лучше понять то, что я имею ввиду, посмотрите на этот скриншот:

На этом скриншоте вы можете заметить, что часть панель у нас находится в нашем кастомной сайдбаре, который является компонентом PluginSidebar, а часть опций я решил отобразить в основной панели настроек WordPress при помощи компонента PluginDocumentSettingPanel

PluginDocumentSettingPanel

Этот компонент принимает несколько параметров.

name
(строка) Ярлык, иденцифицирующий панель.
title
(строка) Заголовок панели.
className
(строка) Необязательный параметр, в котором вы можете задать какой-то произвольный CSS-класс для этой панели.
icon
(строка|элемент) О да, панелям можно даже присваивать какие-либо иконки. И вы можете либо передать ярлык иконки из комплекта Dashicons, либо SVG-элемент. Покажу, как сделать, в уроке.
<PluginDocumentSettingPanel
	name="true-panel"
	title="Моя панель"
	className="true-panel-class"
>
	Тут уже можем выводить какой-то произвольный текст, компоненты полей и так далее
</PluginDocumentSettingPanel>
Купить курс
  • 5 видеоуроков
  • Gutenberg больше не будет казаться «великим и ужасным»
  • Если вы всё ещё не умеете делать сборку на Webpack, самое время научиться
  • Уроки регулярно обновляются в соответствии с изменениями в Gutenberg
  • Доступ навсегда
5000 р3500 р
Скидка 30% до 28 октября