WordPress Playground: от 5-минутной установки до мгновенного развертывания

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

За прошедшие годы в WordPress поменялось многое, однако один незыблемый аспект все же остался: знаменитая простая установка. Скачайте WordPress, загрузите его на сервер, создайте БД, добавьте некоторую конфигурацию – готово! Раньше такую установку называли «пятиминутной», но сегодня это прилагательное исчезло, ибо многие хостинги стали предлагать более простой, быстрый и оптимизированный процесс.

Однако давайте представим себе, что WP вообще не требует никакой настройки. Вы нажимаете на ссылку, и тут же, как по мановению волшебной палочки, для вас открывается готовый WordPress-сайт. Звучит фантастично? Действительно, сложно представить себе, чтобы это работало, ведь WordPress требует для своего запуска PHP, MySQL и Apache. Это далеко не самая портативная система.

Собственно, такую цель и преследовало создание WordPress Playground — среды, которая была впервые представлена Мэттом Мулленвегом во время «State of the Word 2022».

В этом видео Мэтт описывает WordPress Playground как «виртуальную машину», и это достаточно точное описание, потому что все стандартные требования для запуска WordPress — PHP, веб-сервер, база данных и так далее – создаются и выполняются непосредственно в браузере. Среда полностью абстрагирует процесс установки — настолько, что здесь даже нет кривой обучения. Никаких технических знаний для запуска экземпляра WordPress не требуется!

Содержание

1. Как работает WordPress Playground
2. Другие песочницы WordPress
3. Запускаем WordPress Playground
4. Базовый сайт в среде Playground
5. Установка тем, плагинов и блочных паттернов
6. Импорт и экспорт Playground
7. Возможности для совместной работы
8. Совместный доступ с помощью Query API
9. Совместный доступ с помощью встраиваемого Iframe
10. Совместный доступ с помощью JSON
11. Расширенные конфигурации Playground

Как работает WordPress Playground

Есть одна загвоздка: экземпляр временный.

Именно так. Даже если вы просто обновите браузер, экземпляр исчезнет. Сайт испарился в воздухе. Его даже не запечатлели в машине времени Веб-архива. Сайт фактически никогда не существовал. Мэтт правильно называет WordPress Playground «виртуальной машиной», потому что фактически это симуляция WordPress.

Я не стану вдаваться в дебри того, как работает WordPress Playground под капотом. Это слишком углубленно – и моя статья не об этом. Скажу лишь, какие основные компоненты используются:

• WebAssembly (Wasm),
• SQLite,
• Web Service Worker API.

Этот коктейль технологий позволяет PHP работать в браузере (WebAssembly), данным — сохраняться в автономной БД (SQLite) и сайту — работать офлайн без подключения к интернету (Service Worker API).

Результат — скорее «одноразовая песочница WordPress», а не живой сайт, который вы бы нашли в производственной среде. Playground создает экземпляры, которые больше напоминают изолированные среды тестирования. На самом деле, это идеальное место для тестирования кода, тем и плагинов в разных средах, потому что Playground способен запускать разные версии PHP и WordPress, и все, что нужно сделать, это отправить запрос к Playground API через URL. К примеру, следующий запрос, направленный на сайт Playground, запускает экземпляр WordPress, работающий с WordPress 6.2 в среде PHP 8.2.

https://playground.wordpress.net/?php=8.2&wp=6.2

Мы коснемся функционала более подробно далее. Важно понимать сейчас, что WordPress Playground — это виртуальная машина, имитирующая среду сервера, способная запускать WordPress прямо в браузере без доступа к реальному серверу. Таким образом, это симуляция WordPress, отключенная от Интернета, но работающая в веб-браузере, не сильно отличающаяся от локальной установки WordPress, существующей лишь на вашем компьютере.

Другие песочницы WordPress

Площадка WordPress Playground — не единственное и далеко не первое решение, предлагающее тестовую среду в формате временной песочницы WordPress. Некоторые из уже существующих популярных вариантов включают:

• TasteWP;
• InstaWP (и его расширение для Chrome, InstaWP Launcher);
• WP Sandbox (закрыто).

Последнее решение, WP Sandbox, официально закрылось 23 сентября 2023 года. У меня нет информации, почему они закрыли песочницу, но, возможно, запуск WordPress Playground как-то повлиял на это. Я уверен, что и владельцы других сервисов задумываются о том, как Playground повлияет на их бизнесы.

Playground — далеко не то же самое, что другие песочницы WordPress. Речь идет об ином технологическом стеке. К примеру, некоторые сервисы построены на базе сети мультисайтов WordPress, где фактически вы создаете сайт на их сервере.

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

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

Например, давайте рассмотрим процесс запуска сайта в TasteWP. Вы можете мгновенно создать новый сайт WordPress, перейдя по следующему URL: https://tastewp.com/new/. После небольшой плеяды действий TasteWP поприветствует вас на вашем новом сайте непосредственно в консоли WordPress. Вы уже авторизованы и все готово.

Обратите внимание, что URL является субдоменом домена верхнего уровня, связанного с TasteWP: hangingpurpose.s1-tastewp.com. Сервис создает экземпляр в мультисайтовой сети и генерирует для него URL на основе системы рандомизированных имен.

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

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

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

TasteWP действительно позволяет запустить тестовый сайт WordPress с набором продвинутых опций, включая выбор версии WordPress и PHP, задание настроек, которые обычно определяются в wp-config.php, а также добавление определенных тем и плагинов.

Итак, в чем разница TasteWP и WordPress Playground? Возможно, самое большое различие заключается в том, что сайт TasteWP подключается к интернету. Это не симуляция WordPress, а реальный экземпляр с URL, которым вы можете поделиться с другими… пока сайт не «сгорел». Это, скорее всего, достаточно существенное различие для большинства пользователей. А потому TasteWP никуда не денется даже в эпоху активного распространения Playground.

Теперь, когда мы знаем, какие опции по развертыванию песочниц доступны, давайте вернемся к Playground и исследуем его.

Запускаем WordPress Playground

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

Вы можете просто ввести URL playground.wordpress.net в своем браузере, чтобы мгновенно запустить новый сайт. Или вы можете запустить экземпляр из командной строки. Возможно, вам удобнее использовать официальное расширение для Chrome. В любом случае, давайте рассмотрим эти варианты.

1. Запуск WordPress Playground через URL

Это самый простой способ запустить экземпляр WordPress Playground. Просто перейдите по адресу playground.wordpress.net в браузере, и WordPress-сайт будет создан немедленно.

Если вы хотите использовать конкретную версию WordPress и PHP в своей тестовой среде Playground, вам просто нужно добавить несколько параметров к URL-адресу. Например, мы можем запустить WordPress 6.2 на PHP 8.2 с помощью следующего URL-адреса:

https://playground.wordpress.net/?php=8.2&wp=6.2

Вы можете протестировать даже разрабатываемые версии WordPress с помощью Playground, используя следующий параметр:

https://playground.wordpress.net/?wp=beta

2. Запуск WordPress Playground через Github-репозиторий

Верный духу WordPress, сервис Playground — это, прежде всего, проект с открытым исходным кодом. Репозиторий доступен на GitHub, и мы можем загрузить его в локальную среду прямо из терминала.

Сначала давайте клонируем репозиторий из командной строки.

git clone https://github.com/WordPress/wordpress-playground.git

Существует более быстрый альтернативный вариант, который получает только последнюю версию:

git clone -b trunk —single-branch —depth 1 git@github.com:WordPress/wordpress-playground.git

Теперь, когда пакет WordPress Playground находится в нашей локальной среде, мы можем формально установить его:

cd wordpress-playground

npm install

npm run dev

После запуска локального сервера мы должны получить от терминала URL-адрес, который мы можем использовать для доступа к новому экземпляру Playground; обычно это http://localhost:5400/website-server/.

Мы также можем указать, какие версии WordPress и PHP мы хотим использовать в виртуальной среде, добавив в команду пару инструкций. К примеру, следующая команда запускает новый экземпляр WordPress 5.9, работающий на PHP 7.4:

wp-now start —wp=5.9 —php=7.4

3. Запуск WordPress Playground в командной строке

Еще более быстрый способ запустить Playground из командной строки предлагает CLI-инструмент wp-now. Устанавливаем его:

npm install -g @wp-now/wp-now

Теперь мы можем создать новый экземпляр Playground в любое время с помощью одной команды:

wp-now start

Убедитесь, что вы используете Node 18 или выше. В противном случае вы, вероятно, столкнетесь с некоторыми ошибками. После выполнения команды браузер автоматически откроет новую вкладку, указывающую на новый экземпляр. Вы уже будете залогинены в WordPress!

Мы можем настроить среду так же, как и с пакетом npm:

wp-now start —wp=5.9 —php=7.4

Существуют и другие параметры, включая режимы для тем, плагинов, wp-content и wordpress-develop, которые отмечены в документации.

4. Использование расширения Visual Studio Code

WordPress Playground также доступен в виде расширения Visual Studio Code. Оно обеспечивает удобный запуск локального сайта WordPress в один клик.

После установки расширения в меню боковой панели появится иконка WordPress, при нажатии на которую открывается панель для запуска нового сайта WordPress Playground.

Откройте папку проекта, нажмите «Start WordPress Server», и расширение Playground тут же запустит новый сайт. Расширение также предоставляет сведения о сервере, включая локальный URL, режим, а также настройки для изменения используемых версий WordPress и PHP.

Пока я ковырялся с экземпляром, я заметил одну вещь: расширение автоматически устанавливает и активирует плагин SQLite Database Integration. Этот плагин устанавливается всегда – но этот момент неочевиден.

5. Использование расширения Chrome для просмотра тем и плагинов

Было ли у вас желание быстро протестировать определенную тему из каталога тем WordPress? Для этого в каталоге уже встроена кнопка «Preview».

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

Но насколько круче было бы открыть тему и посмотреть, каково это — выполнять с ее помощью реальные задачи в консоли WordPress: публиковать записи, редактировать страницы, изучать ее блочные паттерны.

Именно это умеет делать Chrome-расширение «Open in WordPress Playground». Оно добавляет кнопку «Preview», которая позволяет вам взаимодействовать с темой в реальной среде WordPress.

Я опробовал расширение, и оно сработало без каких-либо багов; отмечу, что оно работает и с каталогом плагинов WordPress. Другими словами, теперь можно опробовать новый плагин на месте, без необходимости устанавливать, активировать и тестировать его самостоятельно в какой-нибудь песочнице или, что еще хуже, в вашей реальной среде WordPress.

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

Расширение доступно бесплатно в Chrome Web Store, но вы также можете воспользоваться кодом в репозитории GitHub. Стоит отметить, что это стороннее расширение, а не официальная версия от WordPress или Automattic.

Базовый сайт в среде Playground

Независимо от того, какой метод Playground вы используете, запускаемые экземпляры практически идентичны. Например, во всех рассмотренных нами методах по умолчанию ставится и активируется тема WordPress Twenty Twenty-Three. В этом есть смысл: стандартная установка WordPress делает то же самое.

Аналогично, во всех рассмотренных нами экземплярах используется плагин SQLite Database Integration, разработанный командой WordPress Performance Team. Это тоже имеет смысл: плагин нужен для создания базы данных. Из описания плагина следует, что в конечном итоге разработчики хотят интегрировать плагин в ядро WordPress, поэтому, возможно, в какой-то момент мы увидим нулевое количество сопутствующих плагинов в экземпляре Playground по умолчанию.

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

Метод	Версия WordPress	Версия PHP	Темы	Плагины
WordPress Playground website	6.3.2	8.0	Twenty Twenty-Three (active)	SQLite Database Integration (active)
GitHub repo	6.3.2	8.0	Twenty Twenty-Three (active)	SQLite Database Integration (active)
wp-now package	6.3.2	8.0.10-dev	Twenty Twenty-Three (active) Twenty Twenty-Two Twenty Twenty-One	Akismet Hello Dolly SQLite Database Integration (active)
VS Code extension	6.3.2	7.4	Twenty Twenty-Three (active) Twenty Twenty-Two Twenty Twenty-One	Akismet Hello Dolly SQLite Database Integration (active)
Chrome extension	6.3.2	8.0	Twenty Twenty-Three (active)	SQLite Database Integration (active)

И, естественно, остальные различия будут зависеть от того, как вы настраиваете свой экземпляр. К примеру, если вы запустите пакет wp-now в командной строке, когда находитесь в каталоге с WordPress и несколькими установленными темами и плагинами, тогда эти темы и плагины будут доступны для активации и использования. Аналогичным образом, использование расширения Chrome на любой странице каталога тем WordPress или странице каталога плагинов приведет к установке этой конкретной темы или плагина.

Установка тем, плагинов и блочных паттернов

В стандартной установке WordPress вы можете войти в консоль WordPress, перейти во «Внешний вид» → «Темы» и установить новую тему прямо из каталога тем WordPress. Все потому, что ваш сайт имеет подключение к Интернету и может получать данные с WordPress.org. Поскольку экземпляр WordPress Playground с веб-сайта Playground технически не подключен к Интернету, для него невозможно установить плагины и темы.

Если вам нужен такой же функциональный интерфейс на своем сайте Playground, который вы имеете при стандартной установке WordPress, воспользуйтесь репозиторием GitHub, пакетом wp-now или расширением VS Code. Все они действительно подключены к Интернету, а потому для них можно устанавливать темы и плагины непосредственно из консоли WordPress.

Вы можете заметить примечание об использовании Query API для установки темы или плагина в экземпляре WordPress Playground, который отключен от Интернета:

«Playground пока не поддерживает подключение к каталогу тем. Вы по-прежнему можете загрузить тему или установить ее с помощью Query API (например, ?theme=pendant).»

Это верно! Мы по-прежнему можем загрузить любую тему, которую захотим, передав слаг темы в URL-адрес Playground, используемый для создания сайта. Например:

https://playground.wordpress.net/?theme=ollie

То же самое верно для плагинов:

https://playground.wordpress.net/?plugin=jetpack

А если мы хотим объединить несколько плагинов, мы можем передать каждый плагин как отдельную цепочку параметров с амперсандом (&) в URL-адресе:

https://playground.wordpress.net/plugin=jetpack&plugin=woocommerce

Не похоже, что мы можем сделать то же самое с темами. Если вы планируете протестировать несколько тем в одном экземпляре, то, вероятно, лучше использовать пакет wp-now или расширение VS Code, находясь в каталоге, который уже содержит эти темы.

Вы спросите, а как насчет блочных паттернов? Мы получаем только два предопределенных паттерна в экземпляре WordPress Playground по умолчанию, созданном на сайте Playground: Posts и Call to Action.

Это связано с тем, что блочные паттерны также передаются в консоль WordPress через подключение к Интернету. Гораздо более широкий выбор возможностей мы получаем при создании экземпляра любым из методов, устанавливающих Интернет-соединение.

К сожалению, похоже, что нет возможности импортировать паттерны с помощью Query API, как мы это делаем для тем и плагинов. Кажется, лучший способ добавить новый паттерн — это либо связать его с используемой темой, либо перейти в Block Pattern Directory и использовать опцию «Copy», чтобы вставить паттерн на страницу или в запись, которую вы тестируете в Playground.

Импорт и экспорт Playground

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

Откройте новый сайт WordPress по адресу Playground.wordpress.net и найдите иконки «Upload» и «Download» в правом верхнем углу фрейма.

Не волнуйтесь, это не пошаговое руководство о том, как нажимать кнопки. Единственное, что вам действительно нужно знать, это то, что указанные кнопки доступны только в экземплярах, созданных на сайте WordPress Playground, или при использовании расширения Chrome для предварительного просмотра тем и плагинов с WordPress.org.

Еще интереснее то, что мы получаем при экспорте экземпляра. Мы получаем ZIP-файл — точнее, wordpress-playground.zip — как и следовало ожидать. Извлеките его, и вы получите весь веб-сайт, включая полную установку WordPress. Он похож на любой другой стандартный проект WordPress с каталогом wp-content, который содержит исходные файлы для установленных тем и плагинов, а также файлы в медиа-библиотеке.

Единственное отличие, которое я смог заметить между этим пакетом WordPress Playground и стандартным проектом, заключается в том, что Playground предоставляет при экспорте базу данных SQLite, которая также расположена в каталоге wp-content.

Это полноценный проект WordPress. Теперь, когда он у нас есть, мы можем использовать функцию импорта Playground для репликации экспортированного сайта в совершенно новом экземпляре WordPress Playground. Нажмите значок «Загрузить» во фрейме нового экземпляра, затем следуйте инструкциям, чтобы загрузить ZIP-файл с оригинальным экземпляром.

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

Иными словами, Playground можно использовать в качестве испытательной площадки для разработки, а затем, когда все будет готово, можно отправить сайт в продакшн. Аналогично, экспортированные файлы могут быть помещены в репозиторий GitHub, где находятся ваши рабочие файлы.

Возможности для совместной работы

Возможность импортировать и экспортировать Playground-сайты имеет очевидные плюсы. WordPress никогда не был настолько портативной системой. Вы знаете это, если когда-либо переносили сайты и данные WordPress. Но когда WordPress может передаваться так же легко, как и Playground, это открывает новые возможности для совместной работы.

Совместный доступ с помощью Query API

Мы использовали Query API во многих примерах. Этот API чрезвычайно удобен тем, что вы добавляете параметры к URL, и сайт в Playground запускается со всеми указанными атрибутами.

Для совместного использования определенной конфигурации сайта Playground требуется только предоставить URL-адрес с некоторыми параметрами. К примеру, по этой ссылке представлена тема Blue Note, дополненная плагином Gutenberg:

https://playground.wordpress.net/?plugin=gutenberg&theme=blue-note

Мы можем создать прямую ссылку на редактор записей:

https://playground.wordpress.net/?plugin=gutenberg&theme=blue-note&url=/wp-admin/post-new.php

А еще лучше, давайте покажем кому-нибудь шаблоны темы в Редакторе сайта:

https://playground.wordpress.net/?plugin=gutenberg&theme=blue-note&url=/wp-admin/site-editor.php?path=%2Fwp_template

Опять же, существует гораздо больше параметров, чем те, которые мы рассмотрели в этой статье; они отмечены в документации WordPress Playground.

Совместный доступ с помощью встраиваемого Iframe

Мы уже знаем, что это возможно, потому что лучшим примером такого встраивания является страница разработчика WordPress Playground. Экземпляр Playground запущен и встроен прямо на эту страницу. Даже когда вы запускаете новый экземпляр Playground, вы фактически запускаете iframe внутри iframe.

Допустим, мы хотим встроить сайт WordPress, созданный с темой Pendant и плагином Gutenberg:

<iframe width="800" height="650" src="https://playground.wordpress.net/?plugin=gutenberg&theme=pendant&mode=seamless" allowfullscreen></iframe>

Здесь мы используем исходный URL-адрес в другом контексте. Понятно, что мы можем поделиться URL-адресом с кем-то, и они получат доступ к настроенному сайту в браузере. Однако в нашем случае мы помещаем URL-адрес в элемент iframe в HTML, и экземпляр Playground отображается на странице.

Довольно удобно, что мы можем войти на рабочий сайт WordPress, создать новую страницу и встроить на страницу экземпляр Playground с помощью блока Custom HTML:

Что мне нравится в совместном использовании сайтов Playground, так это то, что экземпляр сохраняется и всегда доступен. Конечно, данные при обновлении страницы слетят, но создайте URL-адрес один раз, и у вас под рукой всегда будет копия сайта для предварительного просмотра с другой вашей веб-страницы.

Кстати говоря, WordPress Playground может стать автономным в будущем. Понятно, что в своем текущем виде Playground API, хранящийся на сайте Playground.wordpress.net, со временем будет перегружаться, если предположить, что Playground привлечет внимание сообщества. Если их сервера будут перегружены, я ожидаю, что размещенный API либо исчезнет (сломав существующие экземпляры), либо, по крайней мере, будет заблокирован для создания новых экземпляров.

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

Совместный доступ с помощью JSON

«Современная» эра WordPress связана с блочными макетами, которые в большей степени опираются на JavaScript, а не на PHP. Благодаря этому переходу мы получили возможность создавать целые темы WordPress, даже не открывая файлы шаблонов – и всё из-за внедрения theme.json.

По этой причине Playground можно настроить с помощью структурированных данных. Вы можете увидеть JSON-конфигурации веб-сайта Playground по следующей ссылке. Удивительно, что мы можем настроить сайт Playground без написания кода, после чего поделиться JSON-файлом с другими для синхронизации сред.

Вот пример, взятый непосредственно из документации Playground:

{

«$schema»: «https://playground.wordpress.net/blueprint-schema.json»,

«landingPage»: «/wp-admin/»,

«preferredVersions»: {

«php»: «8.0»,

«wp»: «latest»

},

«steps»: [{

«step»: «login»,

«username»: «admin»,

«password»: «password»

}]

}

Мы вполне можем отправить этот файл другим пользователям для клонирования сайта, над которым мы работаем. Или мы можем использовать файл в автономном контексте, а другие могут использовать его в своем собственном проекте.

Интересно, что мы можем даже вообще отказаться от blueprint-файла и вместо этого записать структурированные данные в виде фрагментов URL:

https://playground.wordpress.net/#{«preferredVersions»: {«php»:»7.4″, «wp»:»5.9″}}

Приятно, что команда WordPress Playground думает обо всех возможных способах портирования WordPress.

Расширенные конфигурации Playground

До сих пор мы рассматривали различные способы настройки WordPress Playground с использованием API, предоставляемого Playground.wordpress.net. Это быстро, удобно и чертовски гибко.

Но предположим, что вам нужен полный контроль для настройки экземпляра Playground. Я имею в виду всё, начиная с предустановленных тем и плагинов до предварительно опубликованных страниц и записей, ограничений памяти в php.ini и т.д. В таком случае вам понадобится JavaScript API, поскольку он способен выполнять код PHP, отправлять запросы, осуществлять управление файлами и каталогами, а также настраивать компоненты WordPress, что не предлагает ни один из других подходов.

JavaScript API интегрирован в iframe и использует npm-пакет @wp-playground/client. В руководстве «Quick Start» есть следующий пример:

<iframe id="wp" style="width: 100%; height: 300px; border: 1px solid #000;"></iframe>  &nbsp;  <script type="module">  // Use unpkg for convenience  import { startPlaygroundWeb } from 'https://unpkg.com/@wp-playground/client/index.js';  &nbsp;  const client = await startPlaygroundWeb({  iframe: document.getElementById('wp'),  remoteUrl: `https://playground.wordpress.net/remote.html`,  });  // Let's wait until Playground is fully loaded  await client.isReady();  </script>  

Это довольно простой пример, демонстрирующий, как JavaScript API встраивается в страницу через iframe. Документация Playground предлагает пример того, как PHP используется в JavaScript для выполнения определенных действий – к примеру, для выполнения файла, хранящегося в определенном каталоге:

 php.writeFile(  "/www/index.php",  `<?php echo "Hello world!";"`  );  const result = await php.run({  scriptPath: "/www/index.php"  });  // result.text === "Hello world!"  

Адам Зелински и Томас Наттестад предлагают пример с несколькими задачами в статье, которую они опубликовали на web.dev:

 import {  connectPlayground,  login,  connectPlayground,  } from '@wp-playground/client';  &nbsp;  const client = await connectPlayground(  document.getElementById('wp'), // An iframe  { loadRemote: 'https://playground.wordpress.net/remote.html' },  );  await client.isReady();  &nbsp;  // Login the user as admin and go to the post editor:  await login(client, 'admin', 'password');  await client.goTo('/wp-admin/post-new.php');  &nbsp;  // Run arbitrary PHP code:  await client.run({ code: '<?php echo "Hi!"; ?>' });  &nbsp;  // Install a plugin:  const plugin = await fetchZipFile();  await installPlugin(client, plugin);  

Опять же, объем и широта использования JavaScript API для сложных конфигураций — это еще одна тема, которая, возможно, заслуживает отдельной статьи.

Источник: https://www.smashingmagazine.com

Источник: oddstyle.ru