InspectorControls

Урок 4

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

Урок 4

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

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

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

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

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

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

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

Пример добавления двух панелей с настройками блока при помощи InspectorControls
Купить курс
3800 ₽
  • 7 видеоуроков
  • Сможете скачать готовый код – после каждого урока
  • Уроки регулярно обновляются в соответствии с изменениями в Gutenberg
Ваш email будет использоваться только для регистрации на сайте. На него придёт письмо с логином и паролем. Войдите, если уже зарегистрированы.