Pular para o conteúdo principal

WordPress Playground for Plugin Developers

O WordPress Playground é uma ferramenta inovadora que permite aos desenvolvedores de plugins construir, testar e exibir seus plugins diretamente em um ambiente de navegador.

Este guia mostrará como usar o WordPress Playground para melhorar seu fluxo de trabalho de desenvolvimento de plugins, criar demonstrações ao vivo para exibir seu plugin e simplificar seus testes e revisão de plugins.

info

Descubra como Construir, Testar e Lançar seus produtos com o WordPress Playground na seção Sobre o Playground.

Iniciando uma instância do Playground com um plugin​

Plugin no diretório de temas do WordPress​

Com o WordPress Playground, você pode iniciar rapidamente uma instalação do WordPress com quase qualquer plugin disponível no Diretório de Plugins do WordPress instalado e ativado. Tudo que você precisa fazer é adicionar o parâmetro de consulta plugin à URL do Playground e usar o slug do plugin do diretório WordPress como valor. Por exemplo: https://playground.wordpress.net/?plugin=create-block-theme

dica

Você pode instalar e ativar vários plugins via parâmetros de consulta repetindo o parâmetro plugin para cada plugin que deseja ser instalado e ativado na instância do Playground. Por exemplo: https://playground.wordpress.net/?plugin=gutenberg&plugin=akismet&plugin=wordpress-seo.

Você também pode carregar qualquer plugin do diretório de plugins do WordPress definindo o passo installPlugin de um Blueprint passado para a instância do Playground.

{
	"landingPage": "/wp-admin/plugins.php",
	"login": true,
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "wordpress.org/plugins",
				"slug": "gutenberg"
			}
		}
	]
}

   Executar Blueprint   

Os Blueprints podem ser passados para uma instância do Playground de várias maneiras.

Plugin em um repositório GitHub​

Um plugin armazenado em um repositório GitHub também pode ser carregado em uma instância do Playground via Blueprints.

Com a propriedade pluginData do passo blueprint installPlugin, você pode definir um recurso url que aponta para a localização do arquivo .zip contendo o plugin que você deseja carregar na instância do Playground.

Para evitar problemas de CORS, o projeto Playground fornece um proxy GitHub que permite gerar um .zip de um repositório (ou mesmo uma pasta dentro de um repo) contendo seu plugin.

info

O proxy GitHub é uma ferramenta incrivelmente útil para carregar plugins de repositórios GitHub, pois permite carregar um plugin de uma branch específica, um diretório específico, um commit específico ou um PR específico.

Por exemplo, o seguinte blueprint.json instala um plugin de um repositório GitHub aproveitando a ferramenta https://github-proxy.com:

{
	"landingPage": "/wp-admin/admin.php?page=add-media-from-third-party-service",
	"login": true,
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "url",
				"url": "https://github-proxy.com/proxy/?repo=wptrainingteam/devblog-dataviews-plugin"
			}
		}
	]
}

   Executar Blueprint   

Plugin de código em um arquivo ou gist no GitHub​

Combinando os passos writeFile e activatePlugin, você também pode iniciar uma instância do WP Playground com um plugin construído dinamicamente a partir de código armazenado em um gist ou um arquivo no GitHub:

{
	"landingPage": "/wp-admin/plugins.php",
	"login": true,
	"steps": [
		{
			"step": "login"
		},
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/plugins/cpt-books.php",
			"data": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/custom-post/books.php"
			}
		},
		{
			"step": "activatePlugin",
			"pluginPath": "cpt-books.php"
		}
	]
}

   Executar Blueprint   

info

O exemplo Instalar plugin de um gist na Galeria de Blueprints mostra como carregar um plugin de código em um gist

Configurando uma demonstração para seu plugin com Blueprints​

Ao fornecer um link para uma instância do WordPress Playground com alguns plugins ativados, você também pode querer personalizar a configuração inicial para essa instância do Playground usando esses plugins. Com os Blueprints do Playground, você pode carregar/ativar plugins e configurar a instância do Playground.

dica

Algumas ferramentas e recursos úteis fornecidos pelo projeto Playground para trabalhar com blueprints são:

  • Verifique a Galeria de Blueprints para explorar exemplos de código reais de uso do WordPress Playground para iniciar um site WordPress com várias configurações.
  • A ferramenta Biblioteca de Passos do WordPress Playground fornece uma interface visual para arrastar ou clicar nos passos para criar um blueprint para o WordPress Playground. Você também pode criar seus próprios passos!
  • A ferramenta Construtor de Blueprints permite editar seu blueprint online e executá-lo diretamente em uma instância do Playground.

Através de propriedades e steps no Blueprint, você pode configurar a configuração inicial da instância do Playground, fornecendo aos seus plugins o conteúdo e a configuração necessários para exibir os recursos e funcionalidades convincentes do seu plugin.

info

Uma ótima demonstração com o WordPress Playground pode exigir que você carregue conteúdo padrão para seu plugin e tema, incluindo imagens e outros recursos. Confira o guia Fornecendo conteúdo para sua demonstração para saber mais sobre isso.

plugins​

Se seu plugin tem dependências de outros plugins, você pode usar a abreviação plugins para instalar o seu junto com quaisquer outros plugins necessários.

{
	"landingPage": "/wp-admin/plugins.php",
	"plugins": ["gutenberg", "sql-buddy", "create-block-theme"],
	"login": true
}

   Executar Blueprint   

landingPage​

Se seu plugin tem uma visualização de configurações ou assistente de integração, você pode usar a abreviação landingPage para redirecionar automaticamente para qualquer página na instância do Playground ao carregar.

{
	"landingPage": "/wp-admin/admin.php?page=my-custom-gutenberg-app",
	"login": true,
	"plugins": ["https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/data-basics-59c8f8.zip"]
}

   Executar Blueprint   

writeFile​

Com o passo writeFile, você pode criar qualquer arquivo de plugin dinamicamente, referenciando código de um arquivo *.php armazenado no GitHub ou Gist.

Aqui está um exemplo de um plugin que gera Custom Post Types, colocado na pasta mu-plugins para garantir que o código seja executado automaticamente ao carregar:

{
	"landingPage": "/wp-admin/",
	"login": true,
	"steps": [
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/mu-plugins/books.php",
			"data": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/custom-post/books.php"
			}
		}
	]
}

Desenvolvimento de Plugins​

Desenvolvimento e teste local de plugins com o Playground​

A partir de uma pasta de plugins em seu ambiente de desenvolvimento local, você pode carregar rapidamente uma instância do Playground localmente com esse plugin carregado e ativado.

Use o comando @wp-playground/cli do diretório raiz do seu plugin usando seu programa de linha de comando preferido.

Com o IDE Visual Studio Code, você também pode usar a extensão do Visual Studio Code enquanto trabalha no diretório raiz do seu plugin.

Por exemplo:

git clone git@github.com:wptrainingteam/devblog-dataviews-plugin.git
cd devblog-dataviews-plugin
npx @wp-playground/cli server --auto-mount

Veja suas alterações locais em uma instância do Playground e crie PRs diretamente em um repo GitHub com suas alterações​

Com o Google Chrome, você pode sincronizar uma instância do Playground com o código do seu plugin local e o repo GitHub do seu plugin. Com essa conexão, você pode:

  • Ver ao vivo (na instância do Playground) suas alterações locais
  • Criar PRs no repo GitHub com suas alterações

Aqui está uma pequena demonstração deste fluxo de trabalho em ação:

info

Confira Sobre o Playground > Construir > Sincronizar sua instância do playground com uma pasta local e criar Pull Requests do Github para mais informações.