Как добавить пользовательское форматирование текста в Gutenberg WordPress
Редактор блоков Gutenberg в WordPress предоставляет стандартные возможности форматирования текста, включая выделение жирным через тег <strong>. Но что, если вы хотите использовать альтернативный тег <b>? В этой статье мы рассмотрим, как добавить новую кнопку для кастомного форматирования текста в редакторе WordPress, используя Gutenberg Rich Text API. Создание пользовательского формата текста Gutenberg Чтобы расширить возможности редактора, […]
Read more...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
По умолчанию, стандартные блоки Gutenberg WordPress, такие как core/button, не поддерживают дополнительные атрибуты, например, data-title. Этот атрибут может быть полезен для SEO, аналитики или кастомного JavaScript. В этой статье мы рассмотрим, как добавить пользовательский атрибут data-title для кнопок Gutenberg с помощью фильтров и кастомного кода. Основные шаги: 1. Добавление атрибута в блок Gutenberg Сначала используем […]
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...