Bangun pengalaman WordPress dalam browser dengan WordPress Playground dan WebAssembly

WordPress lengkap yang didukung oleh PHP yang berjalan hanya di browser dengan WebAssembly

Adam Zieliński
Thomas Nattestad
Thomas Nattestad
X

Saat pertama kali melihat WordPress Playground, situs ini tampak seperti situs biasa–mungkin kecuali latar belakangnya yang berwarna-warni. Tidak sama sekali. Yang sebenarnya Anda lihat adalah seluruh tech stack WordPress, termasuk PHP dan database, yang berjalan langsung di browser Anda.

Dalam postingan ini, Adam Zieliński (pemimpin WordPress Playground) dan Thomas Nattestad (Product Manager untuk V8) membahas:

  • Cara WordPress Playground dapat membantu Anda sebagai developer WordPress.
  • Cara kerjanya di balik layar.
  • Pengaruhnya terhadap masa depan WordPress.

Menggunakan WordPress tanpa penginstalan, menyematkannya di aplikasi, dan bahkan mengontrolnya dengan JavaScript

Anda dapat menggunakan dan menyesuaikan WordPress yang disematkan di playground.wordpress.net secara gratis. Tidak ada infrastruktur dan dukungan cloud yang harus dibayar, karena situs tersebut sepenuhnya berada di browser Anda. Tidak ada orang lain yang dapat mengunjunginya. Hal ini juga bersifat sementara. Segera setelah Anda memuat ulang halaman, halaman tersebut akan hilang. Anda bisa mendapatkan situs ini sebanyak yang Anda inginkan untuk prototyping, mencoba plugin, dan menjelajahi ide dengan cepat.

Anda bahkan dapat menggunakannya untuk menguji kode di lingkungan yang berbeda menggunakan pengalih versi PHP dan WordPress bawaan:

halaman phpinfo.

WordPress Playground adalah cara baru untuk menggunakan WordPress. Namun, kemampuan penuhnya hanya dapat diakses dengan menyertakannya dalam aplikasi Anda. Cara mudahnya adalah dengan menyematkan WordPress Playground di <iframe> dan mengonfigurasinya menggunakan API parameter kueri. Itulah yang dilakukan katalog resmi. Saat Anda memilih, misalnya, tema Pendant dan plugin Coblocks, iframe tersemat akan diperbarui untuk mengarah ke https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

Showcase WordPress Playground.

Iframe adalah cara mudah untuk memulai, tetapi juga terbatas pada opsi konfigurasi dasar. Jika Anda memerlukan lebih dari itu, ada API lain yang lebih andal.

Klien JavaScript WordPress Playground memungkinkan kontrol penuh atas situs tersemat

Anda dapat mengontrol seluruh situs WordPress, termasuk sistem file dan PHP, menggunakan API lengkap yang tersedia melalui paket npm @wp-playground/client. Contoh berikut menunjukkan cara menggunakannya—lihat tutorial interaktif untuk mengetahui contoh lainnya:

import {
  connectPlayground,
  login,
  connectPlayground,
} from '@wp-playground/client';

const client = await connectPlayground(
  document.getElementById('wp'), // An iframe
  { loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();

// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');

// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });

// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);

Menggunakan PHP WebAssembly bahkan tanpa WordPress

WordPress Playground bukan monolit. PHP WebAssembly dirilis secara independen dari WordPress dan Anda juga dapat menggunakannya secara terpisah. Untuk web, Anda dapat menggunakan paket npm @php-wasm/web yang dioptimalkan untuk ukuran paket yang rendah, dan di Node.js, Anda dapat mengandalkan @php-wasm/node yang menyediakan lebih banyak ekstensi PHP. Adam menggunakan yang pertama untuk menambahkan cuplikan PHP interaktif ke tutorial WP_HTML_Tag_Processor ini. Berikut adalah cuplikan cara menggunakannya:

import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
  requestHandler: {
    documentRoot: '/www',
  },
});

// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });

// Or use the familiar HTTP concepts:
const response = php.request({
  method: 'POST',
  relativeUrl: '/index.php',
  data: { name: 'John' },
});
console