Guia rápido para desenvolvedores
WordPress Playground foi criado como uma ferramenta programável. Abaixo você encontrará alguns exemplos do que pode fazer com ele. Cada API discutida é descrita em detalhes na seção de APIs:
Incorporar WordPress no seu site
O Playground pode ser incorporado no seu site usando a tag HTML <iframe> da seguinte forma:
<iframe src="https://playground.wordpress.net/"></iframe>
Cada visitante receberá sua própria instância privada do WordPress gratuitamente. Você pode então personalizá-la usando uma das APIs do Playground.
The site at https://playground.wordpress.net is there to support the community, but there are no guarantees it will continue to work if the traffic grows significantly.
If you need certain availability, you should host your own WordPress Playground.
Controlar o site incorporado
O WordPress Playground fornece três APIs que você pode usar para controlar o site incorporado em iframe. Todos os exemplos nesta seção são construídos usando uma delas:
- Query API enable basic operations using only query parameters
- Blueprints API give you a great degree of control with a simple JSON file
- JavaScript API give you full control via a JavaScript client from an npm package
Saiba mais sobre cada uma dessas APIs na seção de visão geral das APIs.
Apresentar um plugin ou tema do diretório WordPress
Você pode instalar plugins e temas do diretório WordPress apenas com parâmetros de URL. Este iframe pré-instala os plugins coblocks e friends e o tema pendant.
This is called Query API and you can learn more about it here.
<iframe src="https://playground.wordpress.net/?plugin=coblocks"></iframe>
Apresentar qualquer plugin ou tema
E se seu plugin não estiver no diretório WordPress?
Você ainda pode apresentá-lo no Playground usando JSON Blueprints. Por exemplo, este Blueprint baixaria e instalaria um plugin e um tema do seu site e também importaria algum conteúdo inicial:
{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "url",
"url": "https://your-site.com/your-plugin.zip"
}
},
{
"step": "installTheme",
"themeData": {
"resource": "url",
"url": "https://your-site.com/your-theme.zip"
}
},
{
"step": "importWxr",
"file": {
"resource": "url",
"url": "https://your-site.com/starter-content.wxr"
}
}
]
}
Veja começando com Blueprints para saber mais.
Visualizar pull requests do seu repositório
Você pode visualizar código do repositório de duas maneiras: diretamente com git:directory, ou apontando para um .zip do seu pipeline de CI. Aqui está a abordagem git:directory usando Blueprints:
{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "git:directory",
"url": "https://github.com/my-user/my-repo",
"ref": "refs/pull/1/head",
"refType": "refname"
},
"options": {
"activate": true
},
"progress": {
"caption": "Installing plugin from my-user/my-repo PR #1"
}
}
]
}
No código acima, será instalado um plugin de um repositório localizado na url, e a referência para encontrar o branch é refType; neste caso, será usado refname, mas também pode ser usado branch, tag e commit.
Você pode automatizar esse processo usando a Ação do GitHub para gerar links de pré-visualização, o que ajudará a agilizar o processo.
Carregar um arquivo .zip é outra alternativa para visualizar seu projeto. Veja o exemplo ao vivo do visualizador de PR do Gutenberg.
Para usar o Playground como um visualizador de PR, você precisa:
- Um pipeline de CI que empacote seu plugin ou tema
- Acesso público ao arquivo
.zipgerado
Esses pacotes zip não são diferentes dos plugins WordPress regulares, o que significa que você pode instalá-los no Playground usando a API JSON Blueprints. Depois que você expuser um endpoint como https://your-site.com/pull-request-1234.zip, o seguinte Blueprint fará o resto:
{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "url",
"url": "https://your-site.com/pull-request-1234.zip"
}
}
]
}
A demonstração oficial do Playground usa esta técnica para visualizar pull requests do repositório Gutenberg:
{
"landingPage": "/wp-admin/plugins.php?test=42test",
"steps": [
{
"step": "login",
"username": "admin",
"password": "password"
},
{
"step": "mkdir",
"path": "/wordpress/pr"
},
{
"step": "writeFile",
"path": "/wordpress/pr/pr.zip",
"data": {
"resource": "url",
"url": "/plugin-proxy.php?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=60819",
"caption": "Downloading Gutenberg PR 47739"
},
"progress": {
"weight": 2,
"caption": "Applying Gutenberg PR 47739"
}
},
{
"step": "unzip",
"zipPath": "/wordpress/pr/pr.zip",
"extractToPath": "/wordpress/pr"
},
{
"step": "installPlugin",
"pluginData": {
"resource": "vfs",
"path": "/wordpress/pr/gutenberg.zip"
}
}
]
}
Visualizar Branches ou PRs do WordPress Core e Gutenberg
Você pode visualizar pull requests específicos dos repositórios WordPress Core e Gutenberg usando parâmetros da Query API. Os branches do Gutenberg também têm uma alternativa para visualizá-los com o parâmetro gutenberg-branch. Isso é útil para testar as últimas alterações do trunk ou branches de recursos específicos sem criar um PR.
- Visualizar um PR específico do WordPress Core:
https://playground.wordpress.net/?core-pr=9500 - Visualizar um PR específico do Gutenberg:
https://playground.wordpress.net/?gutenberg-pr=73010 - Visualizar o branch trunk do Gutenberg:
https://playground.wordpress.net/?gutenberg-branch=trunk
Construir um ambiente de teste de compatibilidade
Teste seu plugin em diferentes versões do PHP e WordPress configurando-as no Playground. Isso ajuda você a verificar a compatibilidade antes do lançamento.
Com a API de Query, você simplesmente adicionaria os parâmetros de consulta php e wp à URL:
<iframe src="https://playground.wordpress.net/?php=8.3&wp=6.1"></iframe>
Com JSON Blueprints, você usaria a propriedade preferredVersions:
{
"preferredVersions": {
"php": "8.3",
"wp": "6.1"
}
}
Executar código PHP no navegador
A API JavaScript fornece o método run() que você pode usar para executar código PHP no navegador:
<iframe id="wp"></iframe>
<script type="module">
const client = await startPlaygroundWeb({
iframe: document.getElementById('wp'),
remoteUrl: 'https://playground.wordpress.net/remote.html',
});
await client.isReady;
await client.run({
code: `<?php
require("/wordpress/wp-load.php");
update_option("blogname", "Playground is really cool!");
echo "Site title updated!";
`,
});
client.goTo('/');
</script>
Combine isso com um editor de código como Monaco ou CodeMirror, e você terá snippets de código ao vivo como neste artigo!