Uma introdução ao WordPress Playground (incluindo casos de uso e comentários do desenvolvedor principal)

O WordPress Playground pode ser a resposta para muitos problemas. Por muito tempo, não havia uma maneira sólida de exibir produtos WordPress, como temas ou plug-ins, sem configurações complexas de hospedagem e demonstração. Além disso, replicar um erro costuma ser um campo minado para uma equipe de suporte. O WordPress Playground é uma versão da plataforma no navegador que pode resolver todos esses problemas.

👉 Nesta postagem, examinarei o projeto WordPress Playground, falarei sobre sua história, mostrarei como usá-lo e discutirei para onde essa ferramenta empolgante está indo.

O que é o WordPress Playground

O WordPress precisa de suas muitas partes móveis para inicializar. Um servidor é uma necessidade óbvia, mas sua arquitetura PHP também exigirá um banco de dados. No entanto, e se você não precisasse de uma implementação típica de nenhum deles para iniciar uma nova instalação do WordPress? É aqui que entra o WordPress Playground.

É uma versão totalmente no navegador da plataforma que não precisa de servidor, PHP ou banco de dados. Em vez disso, ele usa algumas outras tecnologias comuns para simular ou substituir os componentes padrão exigidos:

• A ferramenta usa um binário WebAssembly para construir um interpretador PHP.
• Em vez do MySQL, existe um plug-in do WordPress que executa o SQLite.
• O servidor web usa uma implementação inteligente de JavaScript como Service Worker.

Dessa forma, você pode ter uma nova versão do WordPress que será executada no navegador, sem suas dependências usuais (pelo menos da maneira que você esperaria).

Um rápido tour pelo WordPress Playground

Depois de acessar o site do WordPress Playground, o serviço preparará uma versão do WordPress para você e isso deve levar apenas alguns segundos. Tecnicamente é isso, embora existam mais possibilidades esperando (como veremos mais tarde).

A tela principal mostrará o front-end de um site WordPress, como se você tivesse feito login. Isso significa que você tem a barra de ferramentas típica com a qual pode acessar o back-end. No entanto, antes de fazer isso, identifique alguns dos recursos extras na barra de ferramentas simulada do navegador :

• Um menu para ajudá-lo a escolher uma versão específica do PHP ou WordPress.
• Opções para importar e exportar instâncias do Playground para uso futuro.

Ao escolher sua versão PHP e WordPress, você também pode escolher armazenamento temporário ou persistente. Este último usa cookies para reter sua instância do WordPress.

Como sugiro, existem outras maneiras de personalizar sua instância do WordPress Playground, que abordarei em breve. Enquanto isso, o restante da instalação será semelhante ao WordPress típico. O único plugin que o WordPress Playground instala é aquele para importar conteúdo:

Falando nisso, nenhuma solução pode ser perfeita, e também é o caso do WordPress Playground. Vamos falar mais sobre isso a seguir.

Limitações do WordPress Playground

A principal limitação do WordPress Playground é que você não pode acessar o WordPress Theme Directory ou o WordPress Plugin Directory. No entanto, você pode usar atributos em URLs para instalar temas e plugins. Isso é algo que mostrarei como fazer mais tarde.

Também é uma boa ideia exportar sua instância do Playground se quiser preservar suas alterações. Embora agora exista um modo de armazenamento persistente , você não deseja confiar nele enquanto o projeto estiver em seus estágios iniciais.

Quando se trata de questões de desenvolvimento, você pode identificar alguns problemas com iFrames, Xdebug e certas funções PHP. É uma boa ideia manter a seção dedicada da documentação à mão para ver como esses problemas progridem no futuro. 🔮

Por que o WordPress Playground existe

O WordPress Playground é super novo e brilhante. Aliás, a primeira apresentação do projeto foi no Estado da Palavra em novembro de 2022:

O ritmo alucinante do projeto – da concepção à realização – é resultado do trabalho do desenvolvedor da Automattic, Adam Zielinski. Como afirma sua postagem detalhada no blog, ele queria encontrar uma maneira de instalar o WordPress sem longos fluxos de trabalho ou tempo de configuração.

Além disso, também acho que ajuda o objetivo de longo prazo do WordPress a competir com criadores de sites como Squarespace e Wix. Afinal, essas plataformas não se preocupam com servidores, código e bancos de dados. Este é um benefício secundário legal que ajuda a avançar todo o projeto WordPress e é algo sobre o qual falarei mais em uma seção posterior.

Em junho de 2023, o WordPress Playground teve outra exibição durante o WordCamp Europe 2023 Keynote de junho de Josepha Haden Chomphosy:

Neste ponto, o WordPress Playground é um aplicativo maduro que pode começar a trabalhar no desenvolvimento diário. Ele pode se encaixar em qualquer número de fluxos de trabalho, projetos e situações. Eu posso cobrir alguns deles mais tarde.

Onde o WordPress Playground se encaixa no ecossistema da plataforma

Alguns anos atrás, a equipe do WP Sandbox criou o Poopy.life – um sandbox do WordPress que permite criar novas instalações quando e quando você precisar delas gratuitamente. Esse projeto não durou muito, embora você possa ver como o conceito continua no WordPress Playground.

Ao contrário de seus antecessores, o WordPress Playground pode oferecer uma maneira melhor de integrar a plataforma em quase todas as facetas da comunidade.

Por exemplo, imagine um cenário em que você poderia apresentar um tema WordPress ou uma demonstração de plug-in ao vivo no site da sua empresa, com acesso total ao back-end e ao front-end. Você basicamente oferece ao usuário uma demonstração totalmente funcional em um site real. Aqui estão os pensamentos de Adam Zielinski:

…autores de plug-ins e mercados provavelmente começarão a oferecer visualizações interativas baseadas no Playground; editores de código online podem adicionar suporte ao WordPress. As empresas de hospedagem podem oferecer experiências interativas de integração nas quais você começa personalizando um site WordPress real…

Em outras áreas, as equipes de suporte ao cliente podem usar um Playground simulado para ajudar a criar uma configuração do WordPress com base nas especificações exatas do usuário. Isso significa que, se um usuário tiver um problema com WordPress, plug-ins, temas ou outros produtos, pode não haver necessidade de acesso remoto a um sistema. Em vez disso, o usuário pode mostrar à equipe de suporte exatamente o que está fazendo, mantendo o site seguro.

Adam vê o WordPress Playground como uma “…experiência WordPress mais interativa…” e uma “…maneira mais acessível de aprender sobre o WordPress”. Esses tipos de casos de uso são exatamente o que ele quis dizer. Na verdade, você já pode ver isso em ação, pois a página inicial do WordPress.org inclui um link Experimente o WordPress usando o Playground:

Para o trabalho de desenvolvimento, o WordPress Playground pode ser uma dádiva de Deus. Por exemplo, pode ser a “…ferramenta padrão que os desenvolvedores usam para começar com o WordPress, experimentar sites temporários, configurar sites de teste e visualizar solicitações pull”.

É possível que o WordPress Playground se torne uma maneira de lançar o WordPress, especialmente para fins de desenvolvimento. Já existe um método para iniciar o WordPress e carregá-lo com um plugin específico do Gutenberg, Pull Request (PR), assim:

Vou deixar as palavras finais de como o WordPress Playground se encaixará no ecossistema geral da plataforma:

…o objetivo final é ajudar o WordPress a se tornar o sistema operacional da web…

Porém, para aproveitar o potencial do Playground, você precisa saber como usá-lo. Eu vou te mostrar isso a seguir.

Como usar o WordPress Playground (quatro dicas)

Em essência, o WordPress Playground é super simples de usar e trabalhar. No entanto, existem muitos truques, dicas e técnicas avançadas para criar a instalação exata que você deseja.

Nas próximas seções, mostrarei algumas maneiras de usar o WordPress Playground. O melhor lugar para começar é como realizar instalações fundamentais dentro do aplicativo.

1. Aproveite os atributos da API de consulta para realizar tarefas do WordPress e personalizar a plataforma
2. Crie blueprints JSON para criar instalações personalizadas do WordPress
3. Controle o WordPress Playground com a API JavaScript
4. Use o WordPress Playground no Node.js

1. Aproveite os atributos da API de consulta para realizar tarefas do WordPress e personalizar a plataforma

A maneira mais básica de implementar o WordPress Playground é com a API de consulta, que é simples de usar. Sua instalação será exibida em um iFrame, para que você possa incorporá-la em praticamente qualquer site com uma linha de código:

 <iframe src="https://playground.wordpress.net/"></iframe>

A partir daqui, você pode personalizar sua instalação usando opções de configuração dedicadas na URL. Há um punhado de opções disponíveis agora para cobrir a maioria das tarefas básicas. Por exemplo, você pode escolher sua versão do PHP, modo de página, opção de armazenamento e muito mais.

O aspecto mais importante é quais plugins e temas você instala, pois esta é a única maneira de fazer isso no WordPress Playground:

 <iframe src="https://playground.wordpress.net/?plugin=otter-blocks&theme=neve&url=/wp-admin/post-new.php&mode=seamless"> </iframe>

Este snippet instalará Otter Blocks e Neve, mostrará o WordPress em tela cheia e abrirá em uma página de edição de postagem. Você os insere na barra de endereço simulada na tela:

💡 É uma forma flexível de instalar o que você precisa, e você deve estar familiarizado com ela se souber PHP.

2. Crie projetos JSON para criar instalações personalizadas do WordPress

Outra maneira familiar de personalizar o WordPress Playground é por meio da API JSON Blueprints. Aqui, você usará uma formatação JSON para criar um perfil de site. Você entenderá o processo se usar o Variing Vagrant Vagrants (VVV) para desenvolvimento local do WordPress.

 { "$schema": "https://playground.wordpress.net/blueprint-schema.json", "landingPage": "/wp-admin/", "preferredVersions": { "php": "8.0", "wp": "latest" }, "steps": [ { "step": "login", "username": "admin", "password": "password" } ] }

Acho que são mais flexíveis do que usar a API de consulta, pois você não precisa de código (apenas JSON). Além do mais, a API Blueprints busca solicitações HTTP em seu nome. Você também pode usá-los no Node.js (falaremos mais sobre isso depois), embora seja mais simples colar o projeto na barra de endereço simulada.

Embora eu não possa abordar como usar a API do Blueprints na íntegra aqui, encorajo você a verificar a fantástica documentação. Você descobrirá que pode automatizar aspectos de um processo, como fazer login de um usuário com uma função específica.

3. Controle o WordPress Playground com a API JavaScript

O WordPress Playground fornece sua própria API JavaScript que permite executar uma instância e controlá-la de maneira semelhante a outros métodos. Para fazer isso, você deve usar o npm para obter o pacote @wp-playground/client . Você também precisará de um iFrame para exibir a instalação resultante do WordPress.

Aqui está um conjunto de códigos da documentação do WordPress Playground que mostra o caminho mais curto para usar a API JavaScript:

 <iframe ></iframe> <script type="module"> // Use unpkg for convenience import { startPlaygroundWeb } from 'https://unpkg.com/@wp-playground/client/index.js'; 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>

Com esse objeto client , você pode controlar ainda mais o site usando JSON Blueprints e funções e o Playground API Client. O último permite que você execute código PHP específico, faça solicitações HTTP, personalize o arquivo PHP.ini, gerencie arquivos e diretórios e quase tudo o mais que você esperaria alcançar.

4. Use o WordPress Playground dentro do Node.js

O WebAssembly é uma tecnologia central do WordPress Playground, graças ao qual você pode usá-lo no Node.js. Isso abre a ferramenta para ajudá-lo a desenvolver para WordPress em editores baseados em VSCode usando uma extensão.

A extensão permite instalar um ambiente de desenvolvimento local de configuração zero que não precisa de dependências como Apache, MySQL e outros. Você pode iniciar um servidor WordPress com um clique na barra lateral:

Essa pode ser uma excelente maneira de manter seu código e seu ambiente de desenvolvimento juntos. E, na minha opinião, é uma maneira eficiente e organizada de manter seus projetos.

O futuro do WordPress Playground

Dado que o WordPress Playground é novo - para não mencionar emocionante! – projeto, o desenvolvimento está ocorrendo em um ritmo acelerado. Isso significa que há muitos desenvolvimentos e atualizações interessantes acontecendo o tempo todo.

Um dos maiores é o Blocknotes. Este aplicativo para iOS está em fase beta no momento e permite que você crie notas em seu dispositivo que, em seguida, são sincronizadas com o WordPress para ajudá-lo a criar postagens e páginas. A esperança é que se torne central para uma melhor experiência móvel do WordPress – algo que a comunidade pediu. Como Adão explica:

Blocknotes lidera o caminho para documentar e automatizar um processo de uso do WordPress como um aplicativo móvel – eu adoraria ver um mundo onde você pode apenas personalizar um site WordPress ou criar um plug-in WordPress, clicar em um botão e transformá-lo em um dispositivo móvel app .

No entanto, o WordPress Playground pode oferecer mais. Por exemplo, existe o plug-in Interactive Code Block que permite executar o PHP no navegador graças à arquitetura do Playground.

Existem até esforços para fazer o WP CLI funcionar com o Playground:

…Passei algum tempo…executando o WP CLI no navegador usando o Playground. Pensando no futuro, o site WP CLI poderia exibir um terminal interativo que permite aprender e explorar os comandos WP CLI…

No geral, o futuro parece pesado no WordPress Playground:

…Os autores e mercados de plug-ins provavelmente começarão a oferecer visualizações interativas baseadas no Playground…

Este parece ser um aplicativo modesto, dado o escopo do Playground como um todo. Isso pode ser um marco para o WordPress como plataforma, da mesma forma que o Block Editor ou inovações semelhantes.

Conclusão 🧐

O ecossistema WordPress pediu uma ferramenta para mostrar plug-ins, temas, sites e muito mais sem a necessidade de um processo de configuração complicado ou outra hospedagem. O projeto WordPress Playground oferece exatamente isso. Ele permite que você execute uma versão completa do WordPress no navegador, sem a necessidade de um servidor, banco de dados, PHP ou muitas outras dependências.

Em poucas palavras, a ferramenta é incrível e parece fazer parte do futuro da plataforma. Melhor ainda, a equipe de desenvolvimento trabalha na solução perpetuamente. Houve muitas adições interessantes, como uma opção de solicitação pull que, acredito, tornará o desenvolvimento e o suporte do WordPress muito mais fáceis de agora em diante.

Como o WordPress Playground ajudará seus projetos a se tornarem melhores? Deixe-nos saber seus pensamentos na seção de comentários abaixo!