PHP [Миша Рудрастых] Создание блока Gutenberg

  • Автор темы Flesh
  • Дата начала
Flesh
Flesh
Модератор
Сообщения
74,667
Реакции
616,370
Автор: Миша Рудрастых
Название: Создание блока Gutenberg

Добро пожаловать на базовый курс по созданию блока Gutenberg!
Когда в интернете начали появляться плагины, позволяющие создавать блоки Gutenberg на PHP ?‍♂️, я уже не мог больше это игнорировать! ?
Итак, ещё раз добро пожаловать на курс и что вас на нём ждёт:

Что будет на курсе?

1. Научимся создавать блок с произвольным HTML и стилизовать его в CSS

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

Sozdanie bloka gutenberg



2. Узнаем, как редактировать текст внутри самого блока
В нашем примере будет два редактируемых текстовых элемента, которые будут отличаться как возможностью добавления новых строк в виде параграфов, так и своими кнопками форматирования текста.

Primer richtext gutenberg



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

Gutenberg richtext s ispolzovaniem formatirovanija



Зато, когда мы будем редактировать текст описания, при нажатии на клавишу Enter у нас будет создаваться новый абзац плюс будут доступны все кнопки форматирования текста.

3. Покажу вам, как можно легко загружать изображения в блок

Dobavlenie izobrazhenij v blok



4. Научимся добавлять поля настроек блока
Обратите внимание, что с произвольными полями это не имеет ничего общего, все настройки блока будут сохраняться в его атрибутах без каких-либо лишних запросов в базу данных.
Мы добавим настройки блока на примере ссылок на социальные сети:

Paneli gutenberg inspectorcontrols



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

Помимо этого также научимся использовать палитру цветов в настройках блока:

Palitra cvetov v nastrojke bloka gutenberg



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

Variacii stilej bloka gutenberg



Подробнее:

Скачать:
 
Последнее редактирование:
Ч
Чинги
Премиум
Сообщения
2
Реакции
0
Пустая ссылка
 
K
konsty
Премиум
Сообщения
3
Реакции
0
"Пожалуйста, обновите ссылку"
 
Сверху