• Напишите нам
  • [email protected]
Перезвоните мне
Круглосуточно
0 Избранное
0 Сравнение
0 Корзина

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

Бесплатная
Доставка
Гарантия
Возврата
Онлайн
Поддержка
100 рублей
Подробнее

Автор: Миша Рудрастых
Название: Создание блока Gutenberg

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

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

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

proxy.php?image=https%3A%2F%2Fmisha.agency%2Fimages%2F2020%2F05%2Fsozdanie-bloka-gutenberg.gif&hash=61c54389d1c43d324c6736842b2860da


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

proxy.php?image=https%3A%2F%2Fmisha.agency%2Fimages%2F2020%2F05%2Fprimer-richtext-gutenberg.gif&hash=ec5b08940aabb206d56c4b4aa847faa5


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

proxy.php?image=https%3A%2F%2Fmisha.agency%2Fimages%2F2020%2F05%2Fgutenberg-richtext-s-ispolzovaniem-formatirovanija.gif&hash=f1aaf515cbe233af15a3c2143fce14cc


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

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

proxy.php?image=https%3A%2F%2Fmisha.agency%2Fimages%2F2020%2F05%2Fdobavlenie-izobrazhenij-v-blok.png&hash=2ffcc4585a9be73da5a8568d08092492


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

proxy.php?image=https%3A%2F%2Fmisha.agency%2Fimages%2F2020%2F05%2Fpaneli-gutenberg-inspectorcontrols.png&hash=3c35e70482bbf6cdb77ed9dcf54d76b4


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

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

proxy.php?image=https%3A%2F%2Fmisha.agency%2Fimages%2F2020%2F05%2Fpalitra-cvetov-v-nastrojke-bloka-gutenberg.gif&hash=6aa5df56beda667bcddbefbfccb4e4fe


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

proxy.php?image=https%3A%2F%2Fmisha.agency%2Fimages%2F2020%2F05%2Fvariacii-stilej-bloka-gutenberg.gif&hash=913d48c7dbdfabadca34366d78aed764


Подробнее:
Для просмотра содержимого вам необходимо .

Скачать: