Gutenberg component RichText
Компонент RichText отображает пользовательский интерфейс для редактирования текстового контента с поддержкой форматирования текста и добавления ссылок.Внутри функции сохранения блока вам необходимо использовать <RichText.Content> для правильного сохранения и рендеринга. RichText принимает общие значения атрибутов и onChange. Значение атрибута и onChange необходимы для того, чтобы ввод был редактируемым. Пример использования: block.json: edit.jsx: save.jsx: index.js: Вид в редакторе: […]
Read more...Gutenberg component TextControl
TextControl — это компонент для стандартного ввода текста (<input type=»text» ../>), который позволяет пользователи вводят и редактируют текст в однострочном графическом интерфейсе. Пример: TextControl При разработке блоков удобно таким образом задавать дополнительные атрибуты, например data-name, так же можно использовать для вывода текста (не стоит), но для таких целей лучше использоваться ReachText. Пример использования: block.json: edit.jsx: […]
Read more...Расширение возможностей core/blocks Gutenberg WordPress
Добавим возможность устанавливать data-title атрибут для ссылок кнопок стандартных блоков Gutenberg. 1. Добавим фильтр: Фильтры блоков работают примерно так же как и фильтры wordpress, то есть, в данном случае, при регистрации блока кнопки мы добавили к нему свою кастомную функцию, которая будет добавлять атрибут dataTitle в редакторе кода. Для вывода сожержимого во фронт добавим код […]
Read more...Локальное развертывание WordPress с Docker для начинающих (Windows)
Установки WSL Откройте Командную строку PowerShell или Windows в режиме администратора , щелкнув правой кнопкой мыши и выбрав команду «Запуск от имени администратора», введите команду wsl —install, а затем перезапустите компьютер. Эта команда включит функции, необходимые для запуска WSL и установки дистрибутива Ubuntu для Linux. Для максимальной производительности сохраните файлы в файловой системе WSL: \\wsl$\<DistroName>\home\<UserName>\Project Установите Docker […]
Read more...Настройка окружения разработки
Настройка окружения разработки для работы с блоками Gutenberg в WordPress может быть сделана несколькими способами, включая использование инструментов типа Create React App (CRA), WP-CLI и Docker. Вот общий обзор того, как можно настроить окружение разработки: Установка WordPress: Сначала вам понадобится установить локальную копию WordPress на вашем компьютере. Это можно сделать с помощью инструментов вроде Local […]
Read more...Основы разработки блоков для Гутенберга
Редактор блоков Гутенберг (Gutenberg) в WordPress представляет собой мощный инструмент для создания и редактирования контента, который позволяет пользователям легко добавлять различные элементы (блоки) в свои статьи и страницы. Разработка пользовательских блоков для Гутенберга дает возможность расширить функциональность вашего сайта и предоставить уникальные возможности для редактирования контента. Рассмотрим основные этапы разработки блоков для Гутенберга. Основы разработки […]
Read more...Введение в разработку блоков Gutenberg
Система Gutenberg, введенная в WordPress в версии 5.0, изменила способ создания контента в этой популярной платформе для управления контентом. Одной из ключевых функций Gutenberg является возможность создания собственных блоков для расширения функциональности редактора контента. В этой статье мы рассмотрим основы разработки собственных блоков Gutenberg для WordPress. Мы поговорим о том, что такое блоки Gutenberg, и […]
Read more...