Инструмент для свободной обрезки изображений в блочном редакторе — давно ожидаемый функционал. Эксперимент Gutenberg с модальным медиаредактором, интегрирующим эту и другие возможности, готов к тестированию и сбору отзывов.
Что представляет собой модальный медиаредактор
Медиаредактор в модальном окне (Media Editor Modal) пришел на замену существующему встроенному инструменту обрезки в блочном редакторе. Модальный интерфейс сохраняет привычную кнопку Crop и предлагает произвольную обрезку и обрезку по пропорциям, переворот, точное и шаговое вращение, а также редактирование метаданных.
Модальное окно использует базовый набор произвольных инструментов и компонентов, которые в конечном счете войдут в состав пакета WordPress. Это позволит отказаться от сторонних библиотек для обрезки изображений.
Почему произошли эти изменения
Функционал обрезки изображений в блочном редакторе практически не изменился с момента его появления. Существующий встроенный кроппер построен на основе библиотеки react-easy-crop. Эта реализация имеет несколько ограничений:
- она лимитирована возможностями, которые предоставляет холст редактора и блочный тулбар;
- библиотека имеет малый набор функций.
Зачем создавать собственную библиотеку? Хорошо поддерживаемых опенсорсных альтернатив, которые делают большинство из того, что ожидают пользователи, очень мало. Плюс ко всему, к библиотеке выставляются общие требования, характерные всему пространству WordPress. Она должна:
- обладать всеми необходимыми нам функциями «из коробки», такими как соотношение сторон, произвольные маркеры кадрирования, интуитивно понятное масштабирование, переворот и вращение;
- включать в себя все ожидаемые нами функции юзабилити, такие как поддержка сенсорного управления и клавиатуры;
- быть расширяемой теми способами, которые распространены в экосистеме WordPress.
Была предпринята попытка создать собственный компонент обрезки под редактор, но от этой идеи отказались. Вместо прописывания отдельных, разовых сценариев для разных блоков, модальный редактор медиафайлов призван обеспечить согласованную основу как для нового интерфейса медиатеки, так и для различных контекстов редактирования; он послужит платформой для создания более сложных интерфейсов в будущем.
Как протестировать
Если вы знакомы со средой разработки плагинов Gutenberg, вы можете прямо сейчас загрузить основную ветку и включить эксперимент Media Modal на странице экспериментов по адресу /wp-admin/admin.php?page=experiments-wp-admin.
Самый быстрый способ тестирования — через Playground. Вот ссылка, которая загружает Playground с Gutenberg Trunk и активным экспериментом Media Editor Modal.
Делитесь своими отзывами
Если вы хотите приступить к работе над Gutenberg, не стесняйтесь оставлять отзывы в следующем тикете, поскольку он является основным и охватывает текущие задачи для экспериментального модального окна. Нам бы хотелось узнать, к примеру:
- Открылось ли модальное окно там, где вы ожидали?
- Была ли обрезка понятна без дополнительных инструкций?
- Что-нибудь работало медленно, сбивало с толку или не работало?
- Работали ли кнопки «Save» и «Cancel» так, как вы ожидали?
Вне рамок проекта
Цель состоит в том, чтобы сначала доработать базовый процесс обрезки/редактирования, а затем уже внедрять дополнительные функции редактирования изображений. Некоторые смежные задачи все еще изучаются отдельно, например:
- Ручное управление обрезкой пикселей.
- Восстановление исходного изображения.
- Улучшение состояний истории undo/redo (отмена/повтор).
- Расширение возможностей редактора изображений для интеграции фильтров изображений и/или ИИ-опций.
Источник: https://make.wordpress.org
