[Миша Рудрастых] Создание блока Gutenberg
Цена:
99
Рекомендации
![[PLASTIK] Университет Кибербезопасности и Анонимности 2.0 (2020)](https://i3.storeland.net/2/8200/181996547/baec64/plastik-universitet-kiberbezopasnosti-i-anonimnosti-2-0-2020.png "[PLASTIK] Университет Кибербезопасности и Анонимности 2.0 (2020)")
![[pixel.one] Создание 2D игр в Unity (2019)](https://i2.storeland.net/2/8200/181996548/baec64/pixel-one-sozdanie-2d-igr-v-unity-2019.png "[pixel.one] Создание 2D игр в Unity (2019)"){kind=tracking}
![[php.ntschool] Стань PHP программистом (2017)](https://i3.storeland.net/2/8200/181996549/baec64/php-ntschool-stan-php-programmistom-2017.png "[php.ntschool] Стань PHP программистом (2017)")
![[PHP] Полный курс от 'Школы программирования'](https://i3.storeland.net/2/8200/181996550/baec64/php-polnyj-kurs-ot-shkoly-programmirovaniya.png "[PHP] Полный курс от 'Школы программирования'")
![[Петр Арсентьев] Java для начинающих. Путь от ученика до эксперта](https://i4.storeland.net/2/8200/181996551/baec64/petr-arsentev-java-dlya-nachinayushhih-put-ot-uchenika-do-jeksperta.png "[Петр Арсентьев] Java для начинающих. Путь от ученика до эксперта")
![[pentestit.ru] Безопасность сетевой инфраструктуры. Расширенные методы взлома и защиты (2015)](https://i3.storeland.net/2/8200/181996552/baec64/pentestit-ru-bezopasnost-setevoj-infrastruktury-rasshirennye-metody-vzloma-i-zashhity-2015.png "[pentestit.ru] Безопасность сетевой инфраструктуры. Расширенные методы взлома и защиты (2015)")
![[PENTESTIT] «Zero Security: A» - стажировка в области ИБ для начинающих. Информационная безопасность (2015)](https://i4.storeland.net/2/8200/181996553/baec64/pentestit-zero-security-a-stazhirovka-v-oblasti-ib-dlya-nachinayushhih-informacionnaya-bezopasnost-2015.png "[PENTESTIT] «Zero Security: A» - стажировка в области ИБ для начинающих. Информационная безопасность (2015)")
![[PENTESTIT] Корпоративные лаборатории - тестирование на проникновение (Эксперт) (2017)](https://i3.storeland.net/2/8200/181996555/baec64/pentestit-korporativnye-laboratorii-testirovanie-na-proniknovenie-jekspert-2017.png "[PENTESTIT] Корпоративные лаборатории - тестирование на проникновение (Эксперт) (2017)")
![[pensionary] Практические советы начинающему вебмастеру](https://i1.storeland.net/2/8200/181996556/baec64/pensionary-prakticheskie-sovety-nachinayushhemu-vebmasteru.png "[pensionary] Практические советы начинающему вебмастеру")
![[Павлов] Надстройка PLEX для Microsoft Excel 2007-2016 (2016)](https://i1.storeland.net/2/8200/181996557/baec64/pavlov-nadstrojka-plex-dlya-microsoft-excel-2007-2016-2016.png "[Павлов] Надстройка PLEX для Microsoft Excel 2007-2016 (2016)")
![[Павел Труфанов] Практикум по программированию (2018)](https://i3.storeland.net/2/8200/181996558/baec64/pavel-trufanov-praktikum-po-programmirovaniyu-2018.png "[Павел Труфанов] Практикум по программированию (2018)")
![[Павел Шаповалов] Excel за 5 дней (2019)](https://i4.storeland.net/2/8200/181996559/baec64/pavel-shapovalov-excel-za-5-dnej-2019.png "[Павел Шаповалов] Excel за 5 дней (2019)")
![[Павел Шаповалов] Автоматизация рутинной работы в Excel](https://i4.storeland.net/2/8200/181996560/baec64/pavel-shapovalov-avtomatizaciya-rutinnoj-raboty-v-excel.png "[Павел Шаповалов] Автоматизация рутинной работы в Excel")
![[Павел Нагаев] Секреты Notepad ++ (2021)](https://i4.storeland.net/2/8200/181996561/baec64/pavel-nagaev-sekrety-notepad-2021.png "[Павел Нагаев] Секреты Notepad ++ (2021)")
![[Павел Миронов] Сценарист видеоигр введение в профессию](https://i2.storeland.net/2/8200/181996562/baec64/pavel-mironov-scenarist-videoigr-vvedenie-v-professiyu.png "[Павел Миронов] Сценарист видеоигр введение в профессию")
![[Павел Кашинский] Программирование ThinkOrSwim](https://i4.storeland.net/2/8200/181996564/baec64/pavel-kashinskij-programmirovanie-thinkorswim.png "[Павел Кашинский] Программирование ThinkOrSwim")
![[packt] 360 GB курсов по программированию (англ)](https://i4.storeland.net/2/8200/181996565/baec64/packt-360-gb-kursov-po-programmirovaniyu-angl.png "[packt] 360 GB курсов по программированию (англ)")
![[packtpub] Программирование нейросетей на Java / Neural Network Programming with Java](https://i2.storeland.net/2/8200/181996566/baec64/packtpub-programmirovanie-nejrosetej-na-java-neural-network-programming-with-java.png "[packtpub] Программирование нейросетей на Java / Neural Network Programming with Java")
![[О. Бунин] Пошаговый алгоритм проектирования высоконагруженной системы для Web](https://i1.storeland.net/2/8200/181996567/baec64/o-bunin-poshagovyj-algoritm-proektirovaniya-vysokonagruzhennoj-sistemy-dlya-web.png "[О. Бунин] Пошаговый алгоритм проектирования высоконагруженной системы для Web")
![[Ontico] Moscow Python Conf ++ (2021)](https://i3.storeland.net/2/8200/181996568/baec64/ontico-moscow-python-conf-2021.png "[Ontico] Moscow Python Conf ++ (2021)")
![[Ольга Шулова] 1С: Бухгалтерия для начинающих и не только (2021)](https://i1.storeland.net/2/8200/181996569/baec64/olga-shulova-1s-buhgalteriya-dlya-nachinayushhih-i-ne-tolko-2021.png "[Ольга Шулова] 1С: Бухгалтерия для начинающих и не только (2021)")
![[Ольга Назина] Тестирование Rest Api (2019)](https://i4.storeland.net/2/8200/181996570/baec64/olga-nazina-testirovanie-rest-api-2019.png "[Ольга Назина] Тестирование Rest Api (2019)")
![[Ольга Назина] Техники локализации плавающих дефектов (2019)](https://i2.storeland.net/2/8200/181996572/baec64/olga-nazina-tehniki-lokalizacii-plavayushhih-defektov-2019.png "[Ольга Назина] Техники локализации плавающих дефектов (2019)")
![[Ольга Назина] Школа для начинающих тестировщиков (2018)](https://i3.storeland.net/2/8200/181996573/baec64/olga-nazina-shkola-dlya-nachinayushhih-testirovshhikov-2018.png "[Ольга Назина] Школа для начинающих тестировщиков (2018)")
![[Олег Тундайкин] Asterisk Pro (2022)](https://i2.storeland.net/2/8200/181996574/baec64/oleg-tundajkin-asterisk-pro-2022.png "[Олег Тундайкин] Asterisk Pro (2022)")
![[Олег Молчанов] Python ООП (2020)](https://i3.storeland.net/2/8200/181996575/baec64/oleg-molchanov-python-oop-2020.png "[Олег Молчанов] Python ООП (2020)")
![[Олег Ивченко] Linux / Git для начинающих (2021)](https://i3.storeland.net/2/8200/181996576/baec64/oleg-ivchenko-linux-git-dlya-nachinayushhih-2021.png "[Олег Ивченко] Linux / Git для начинающих (2021)")
![[Олег Ивченко] Docker + Gitlab CI для начинающих (2021)](https://i2.storeland.net/2/8200/181996577/baec64/oleg-ivchenko-docker-gitlab-ci-dlya-nachinayushhih-2021.png "[Олег Ивченко] Docker + Gitlab CI для начинающих (2021)")
![[Охрименко] JavaScript Essential (2013)](https://i4.storeland.net/2/8200/181996578/baec64/ohrimenko-javascript-essential-2013.png "[Охрименко] JavaScript Essential (2013)")
![[Н.А. Вязовик] Программирование на Java (2016)](https://i4.storeland.net/2/8200/181996579/baec64/n-a-vyazovik-programmirovanie-na-java-2016.png "[Н.А. Вязовик] Программирование на Java (2016)")
![[Nztcoder] ZennoPoster-Master #1: Становление - с нуля до кодера](https://i3.storeland.net/2/8200/181996581/baec64/nztcoder-zennoposter-master-1-stanovlenie-s-nulya-do-kodera.png "[Nztcoder] ZennoPoster-Master #1: Становление - с нуля до кодера")
![[Nulled] HostBill - Биллинг для хостеров](https://i3.storeland.net/2/8200/181996582/baec64/nulled-hostbill-billing-dlya-hosterov.png "[Nulled] HostBill - Биллинг для хостеров")
![[Nomad Coders] Youtube клон NodeJS (2019)](https://i3.storeland.net/2/8200/181996583/baec64/nomad-coders-youtube-klon-nodejs-2019.png "[Nomad Coders] Youtube клон NodeJS (2019)")
![[Nomad Coders] Создавайте игры в реальном времени с Node.JS (2019)](https://i4.storeland.net/2/8200/181996584/baec64/nomad-coders-sozdavajte-igry-v-realnom-vremeni-s-node-js-2019.png "[Nomad Coders] Создавайте игры в реальном времени с Node.JS (2019)")
![[Node University] Node Microservices (2020)](https://i3.storeland.net/2/8200/181996585/baec64/node-university-node-microservices-2020.png "[Node University] Node Microservices (2020)")
![[nizamov.school] Сервер 1с в дата центре (2021)](https://i4.storeland.net/2/8200/181996586/baec64/nizamov-school-server-1s-v-data-centre-2021.png "[nizamov.school] Сервер 1с в дата центре (2021)")
![[Николай Захаров] Специалист по настройке ПК с Windows 10](https://i3.storeland.net/2/8200/181996587/baec64/nikolaj-zaharov-specialist-po-nastrojke-pk-s-windows-10.png "[Николай Захаров] Специалист по настройке ПК с Windows 10")
![[Николай Петров] Создание чат-ботов в WhatsApp, Telegram, Viber для маркетинга и продаж (2021)](https://i3.storeland.net/2/8200/181996588/baec64/nikolaj-petrov-sozdanie-chat-botov-v-whatsapp-telegram-viber-dlya-marketinga-i-prodazh-2021.png "[Николай Петров] Создание чат-ботов в WhatsApp, Telegram, Viber для маркетинга и продаж (2021)")
![[Николай Мельничук] Обучающий Видеокурс C# Универсальные шаблоны](https://i4.storeland.net/2/8200/181996589/baec64/nikolaj-melnichuk-obuchayushhij-videokurs-c-universalnye-shablony.png "[Николай Мельничук] Обучающий Видеокурс C# Универсальные шаблоны")
![[Николай Марков] Python как движущая сила в управлении инфраструктурой (junior+) (2021)](https://i4.storeland.net/2/8200/181996590/baec64/nikolaj-markov-python-kak-dvizhushhaya-sila-v-upravlenii-infrastrukturoj-junior-2021.png "[Николай Марков] Python как движущая сила в управлении инфраструктурой (junior+) (2021)")
![[Николай Бондаренко] Базовый курс для начинающих 1С-программистов (2019)](https://i4.storeland.net/2/8200/181996592/baec64/nikolaj-bondarenko-bazovyj-kurs-dlya-nachinayushhih-1s-programmistov-2019.png "[Николай Бондаренко] Базовый курс для начинающих 1С-программистов (2019)")
![[Николай Бондаренко] 1С: Предприятие для программистов (2020)](https://i4.storeland.net/2/8200/181996593/baec64/nikolaj-bondarenko-1s-predpriyatie-dlya-programmistov-2020.png "[Николай Бондаренко] 1С: Предприятие для программистов (2020)")
![[Николай Ясинский] Программирование начинающим.](https://i3.storeland.net/2/8200/181996594/baec64/nikolaj-yasinskij-programmirovanie-nachinayushhim.png "[Николай Ясинский] Программирование начинающим.")
![[Никитин Иван] JavaScript и jQuery. Расширенный курс](https://i4.storeland.net/2/8200/181996595/baec64/nikitin-ivan-javascript-i-jquery-rasshirennyj-kurs.png "[Никитин Иван] JavaScript и jQuery. Расширенный курс")
![[Никита Шультайс] Online-курс программирования на языке Python 3](https://i4.storeland.net/2/8200/181996596/baec64/nikita-shultajs-online-kurs-programmirovaniya-na-yazyke-python-3.png "[Никита Шультайс] Online-курс программирования на языке Python 3")
![[Никита Соболев] Устройство и применение библиотек dry-python на практике (middle+) (2021)](https://i4.storeland.net/2/8200/181996597/baec64/nikita-sobolev-ustrojstvo-i-primenenie-bibliotek-dry-python-na-praktike-middle-2021.png "[Никита Соболев] Устройство и применение библиотек dry-python на практике (middle+) (2021)")
![[Никита Соболев] Будущее развитие Python (middle+) (2021)](https://i3.storeland.net/2/8200/181996598/baec64/nikita-sobolev-budushhee-razvitie-python-middle-2021.png "[Никита Соболев] Будущее развитие Python (middle+) (2021)")
![[Никита Хохлов] PyQt5 Python - Разработка графических интерфейсов (2020)](https://i2.storeland.net/2/8200/181996599/baec64/nikita-hohlov-pyqt5-python-razrabotka-graficheskih-interfejsov-2020.png "[Никита Хохлов] PyQt5 Python - Разработка графических интерфейсов (2020)")
![[nginx] Создание веб-серверов](https://i2.storeland.net/2/8200/181996601/baec64/nginx-sozdanie-veb-serverov.png "[nginx] Создание веб-серверов")
![[Нexlet] Практические курсы по программированию](https://i1.storeland.net/2/8200/181996602/baec64/nexlet-prakticheskie-kursy-po-programmirovaniyu.png "[Нexlet] Практические курсы по программированию")
![[Непипенко] Курс по TypeScript (2017)](https://i2.storeland.net/2/8200/181996603/baec64/nepipenko-kurs-po-typescript-2017.png "[Непипенко] Курс по TypeScript (2017)")
![[NEOS] Объёмно-кластерный анализ. Разгон](https://i2.storeland.net/2/8200/181996604/baec64/neos-objomno-klasternyj-analiz-razgon.png "[NEOS] Объёмно-кластерный анализ. Разгон")
![[Негодов Дмитрий] Уверенный пользователь Windows 8.1](https://i1.storeland.net/2/8200/181996605/baec64/negodov-dmitrij-uverennyj-polzovatel-windows-8-1.png "[Негодов Дмитрий] Уверенный пользователь Windows 8.1")
![[Назар Рудь] Entity Framework 6 (2015)](https://i1.storeland.net/2/8200/181996606/baec64/nazar-rud-entity-framework-6-2015.png "[Назар Рудь] Entity Framework 6 (2015)")
![[Наталья Никитина] Легкий и быстрый способ обучиться работе с 1с управление торговлей 11](https://i1.storeland.net/2/8200/181996607/baec64/natalya-nikitina-legkij-i-bystryj-sposob-obuchitsya-rabote-s-1s-upravlenie-torgovlej-11.png "[Наталья Никитина] Легкий и быстрый способ обучиться работе с 1с управление торговлей 11")
![[Насипов Фарит] 1С:Конвертация Данных](https://i2.storeland.net/2/8200/181996608/baec64/nasipov-farit-1s-konvertaciya-dannyh.png "[Насипов Фарит] 1С:Конвертация Данных")
![[М. Пистолетов] Видеокурс 'Программируем на языке qlua' (2017)](https://i3.storeland.net/2/8200/181996610/baec64/m-pistoletov-videokurs-programmiruem-na-yazyke-qlua-2017.png "[М. Пистолетов] Видеокурс 'Программируем на языке qlua' (2017)")
![[М. Базаров] Создание сайта на Битрикс](https://i4.storeland.net/2/8200/181996611/baec64/m-bazarov-sozdanie-sajta-na-bitriks.png "[М. Базаров] Создание сайта на Битрикс")
![[Мусатов Владислав] Система коммуникаций](https://i4.storeland.net/2/8200/181996612/baec64/musatov-vladislav-sistema-kommunikacij.png "[Мусатов Владислав] Система коммуникаций")
![[Муратов] Самый понятный курс по PHP для начинающих (2018)](https://i4.storeland.net/2/8200/181996613/baec64/muratov-samyj-ponyatnyj-kurs-po-php-dlya-nachinayushhih-2018.png "[Муратов] Самый понятный курс по PHP для начинающих (2018)")
Автор: Миша Рудрастых
Название: Создание блока Gutenberg
Добро пожаловать на базовый курс по созданию блока Gutenberg!
Когда в интернете начали появляться плагины, позволяющие создавать блоки Gutenberg на PHP ?? , я уже не мог больше это игнорировать! ?
Итак, ещё раз добро пожаловать на курс и что вас на нём ждёт:
Что будет на курсе?
1. Научимся создавать блок с произвольным HTML и стилизовать его в CSS
Наш блок будет представлять себя что-то наподобие блока «Об авторе» с изображением, двумя текстовыми полями и ссылками на социальные сети.
2. Узнаем, как редактировать текст внутри самого блока
В нашем примере будет два редактируемых текстовых элемента, которые будут отличаться как возможностью добавления новых строк в виде параграфов, так и своими кнопками форматирования текста.
При редактировании заголовка у нас не будет возможности перехода на новую строку, а также мы отключим все кнопки форматирования текста, т.е. в заголовок нельзя будет вставить ссылку или сделать его жирным.
Зато, когда мы будем редактировать текст описания, при нажатии на клавишу Enter у нас будет создаваться новый абзац плюс будут доступны все кнопки форматирования текста.
3. Покажу вам, как можно легко загружать изображения в блок
4. Научимся добавлять поля настроек блока
Обратите внимание, что с произвольными полями это не имеет ничего общего, все настройки блока будут сохраняться в его атрибутах без каких-либо лишних запросов в базу данных.
Мы добавим настройки блока на примере ссылок на социальные сети:
То есть, когда соответствующее поле для заполнения профиля соц сети заполнено, в блоке будет автоматически появляться иконка этой соц сети со ссылкой на профиль.
Помимо этого также научимся использовать палитру цветов в настройках блока:
5. Узнаем, что такое вариации стилей и научимся их использовать
В нашем примере мы добавим вариацию стиля, которая будет делать изображение закруглённым.
Подробнее:
Скачать: