InspectorControls

Урок 4

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

Урок 4

Панель настроек блока InspectorControls

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

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

Дополнительные поля настроек блока Gutenberg при помощи компонента InspectorControls

По сути мы добавим две аккордеон-панели для настроек: в первой будет отображаться тогл (или чекбокс), который будет включать / выключать отображение всех ссылок на соц сети, а во второй будут непосредственно текстовые поля для заполнения имени пользователя в каждой из соц сетей.

Ну и разумеется, если какая-то определённая соц сеть не заполнена, ссылка на неё тоже не будет выводиться.

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

Пример добавления двух панелей с настройками блока при помощи InspectorControls
Купить курс
  • 7 видеоуроков
  • Сможете скачать готовый код – после каждого урока
  • Единоразовый платёж
  • Доступ навсегда
  • Уроки актуальны в 2024-м году
5000 р3500 р
Скидка 30% до 24 апреля

Нажав на кнопку, вы соглашаетесь c условиями предоставления услуг и с обработкой персональных данных.