Авторы WordPress предлагают новый API интерактивности для внешних блоков

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

Новое предложение для интерактивного API направлено на то, чтобы предоставить разработчикам стандартный способ добавления интерактивности во внешний интерфейс, что позволяет быстрее создавать эти возможности, не изобретая каждый раз велосипед.

Спонсируемый Automattic основной участник Марио Сантос поделился своим видением того, что даст новый API:

Что, если бы было возможно без особых усилий создавать эффективную, плавную и идиоматическую интерактивность внешнего интерфейса на блочных сайтах WordPress? Представьте себе плагины, обеспечивающие такие взаимодействия, как «отметить этот пост» или «добавить в корзину» без перезагрузки страницы. Представьте мгновенный поиск, комментирование и встроенные переходы на всю страницу как лучшие в своем классе встроенные функции без сложных шаблонов или внешних инструментов. Представьте себе достижение этого в любой блочной теме по умолчанию, не жертвуя рендерингом PHP-сервера и экосистемой плагинов для среды выполнения JS. Визуализируйте, как разработчики блоков легко объявляют и расширяют такое поведение способом, который сразу же знаком и совместим с блочной экосистемой.

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

API интерактивности создается для использования во внешнем интерфейсе блочных веб-сайтов, но участники также могут изучить возможность повторного использования некоторых его директив внутри редактора. Они используют аналогичный подход к Alpine.js с «директивами», которые расширяют HTML специальными атрибутами, за исключением того, что они разработаны специально для WordPress и обратно совместимы с его API.

«API разработан для мира блоков и принимает во внимание историю тесной связи WordPress с веб-стандартами», — сказал Сантос.

«Поскольку директивы добавляются в HTML, они отлично работают с динамическими блоками и PHP».

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

Участники проекта выбрали Preact для создания системы директив из-за его совместимости с HTML, небольшого размера, производительности, расширяемости и совместимости с React.

API интерактивности в настоящее время находится на стадии сбора отзывов для включения в разработку, а также расширения технической документации.

«Хотя сейчас он распространяется в виде плагина, его планируется добавить в Gutenberg в качестве экспериментальной функции», — сказал Сантос. «Цель состоит в том, чтобы включить его в Core после того, как будет собрано достаточно отзывов и станет ясно, что это правильное направление».

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

«Интерактивный API — одно из самых интересных предложений для внешнего интерфейса WordPress UX и DX, которые я когда-либо видел», — сказал Уэстон Рутер, участник WordPress Core .

«Как человеку, который много экспериментировал с использованием AlpineJS, HTMX, Unpoly, StimulusJS и т. д. для интерактивности во внешнем интерфейсе, было бы очень кстати иметь благословенное решение в ядре WP», — прокомментировал другой разработчик .

Разработчик WordPress и участник WPGraphQL Дэвид Левин, похоже, был менее воодушевлен подходом, изложенным в предложении. «Отличная идея, но недальновидное исполнение», — сказал Левин. «Нам нужен фактический уровень блочных данных, чтобы не загрязнять нашу разметку для синтаксического анализа наших скриптов. Это только усугубляет те же проблемы, из-за которых мы попали в эту неразбериху».

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

«Это довольно необычный подход, который отличается от всего, что я видел раньше», — сказал главный участник WordPress Джо Хойл. «Это вызывает у меня осторожность, так как это очень специфично / ориентировано на wp. Я думаю, что с редактором блоков есть возможность больше соответствовать отраслевым инновациям в области интерфейсных инструментов. Я думаю, что это действительно отличная работа и очень творческая; но опять же, я еще не уверен, что это правильное направление. Возможно, нет долгосрочного решения, позволяющего внедрить «nextjs» в WordPress, но я не уверен, что смотрю на это».

Предложение включает примеры того, как создавать интерактивные блоки с помощью API, и разработчики начали оживленное обсуждение этого подхода. Участники интерактивного API планируют провести два сеанса 17 апреля 2023 г. ( один в 08:00 UTC , а другой в 17:00 UTC ), которые будут включать демонстрацию продукта в режиме реального времени, за которой последуют вопросы и ответы. Ознакомьтесь с предложением для получения более подробной информации и репозиторием Interactivity API GitHub , чтобы увидеть некоторые эксперименты, над которыми до сих пор работала команда.