Tsim WordPress matrix nrog Sites API thiab Blueprints

Txoj kev ua luv luv: qhib playground.wordpress.net, tos window.playgroundSites.isReady(), txhais cov version combinations ces hu createNewSavedSite() rau txhua combination. Tom qab ntawd siv list(), setActiveSite() thiab ib qho PHP check los txheeb xyuas qhov tshwm sim.

Hauv cov ntaub ntawv tam sim no, lub npe raug cai yog Sites API; “Site Manager API” yog ib lo lus piav txog nws txoj haujlwm tswj site. API no tsim nyog rau kev tsim, khaws cia, hloov npe, hloov mus siv thiab rho tawm Playground site. API tsis txais plugin, theme lossis blueprint-urlncaj qha; cov kauj ruam ntawd yog haujlwm ntawm Blueprints lossis JavaScript API (raws li wordpress.github.io).

Zaj lus no siv cov version strings ua piv txwv. Hloov <wp-version> thiab <php-version> ua cov version uas Playground thiab koj qhov kev kuaj txhawb. Tsis txhob siv ib version tsuas yog vim nws tshwm hauv qhov piv txwv; cov version uas txhawb yuav hloov raws lub sijhawm.

Xaiv API raws li yam koj yuav ua

Hom phiaj	Cuab yeej tsim nyog siv	Qhov tshwm sim
Sib piv WordPress, PHP lossis networking	Sites API	Muaj ntau site raug tsim thiab khaws cia hauv browser
Nruab plugin, theme lossis sample content	Blueprints	Ib qho kev teeb tsa pib uas muaj cov kauj ruam tau teem tseg ua ntej
Tsim ntau qhov testing environment uas sib cais	JavaScript API + Blueprints	Txhua client lossis iframe yog ib qho environment cais
Hloov npe, hloov site lossis rho tawm site uas twb khaws cia lawm	Sites API	Tswj site lub neej voj voog

Yog tias matrix tsuas muaj WordPress × PHP × networking, pib nrog Sites API. Yog tias txhua lub cell tseem yuav tsum nruab plugin, theme lossis sample data, khaws qhov matrix cia tab sis siv Blueprint thiab JavaScript API los pib teeb tsa txhua lub cell.

Npaj thiab txhais lub matrix

Koj yuav tsum muaj browser uas txhawb JavaScript, muaj cai nkag mus rau Playground thiab muaj daim ntawv teev cov version uas koj xav kuaj. Cov code hauv qab no khiav hauv DevTools ntawm Playground nplooj ntawv; tsis yog khiav hauv WordPress admin dashboard lossis production server.

Qhov piv txwv no tsim plaub lub combination. Cov nqi uas muaj cim <...> yog placeholder uas yuav tsum hloov ua ntej khiav:

const matrix = [
  { wp: '<wp-version>', php: '<php-version-1>', networking: false },
  { wp: '<wp-version>', php: '<php-version-1>', networking: true },
  { wp: '<wp-version>', php: '<php-version-2>', networking: false },
  { wp: '<wp-version>', php: '<php-version-2>', networking: true },
];

Qhov piv txwv no tsuas qhia txoj kev tsim matrix xwb; nws tsis yog pov thawj tias txhua lub combination sib haum. Ua ntej khiav, xyuas kom cov version strings yog cov version tshwj xeeb uas Playground txhawb. Thaum xav kom rov tsim tau tib qhov txiaj ntsig, siv version tshwj xeeb es tsis yog latest .

Tos kom Sites API npaj txhij

window.playgroundSites tej zaum yuav tsis tshwm tam sim tom qab nplooj ntawv load. Function hauv qab no tos ntev kawg 30 vib nas this, ces hu isReady(). Lub sijhawm txwv no pab kom waiting loop tsis txhob tos mus tsis kawg yog nplooj ntawv muaj teeb meem lossis storage raug thaiv.

async function waitForSitesAPI(timeoutMs = 30000) {
  const startedAt = Date.now();

  while (!window.playgroundSites) {
    if (Date.now() - startedAt > timeoutMs) {
      throw new Error('Không tìm thấy window.playgroundSites trong thời gian chờ.');
    }
    await new Promise((resolve) => setTimeout(resolve, 100));
  }

  await window.playgroundSites.isReady();
  return window.playgroundSites;
}

const sites = await waitForSitesAPI();
console.table(sites.list());

Khiav cov code hauv DevTools Console ntawm tib lub Playground tab. Qhov xav pom yog ib daim ntawv teev cov site uas twb muaj lawm. Yog Console tsis pub await nyob rau qib sab nraud, muab cov lus txib qhwv rau hauv ib qho function async lossis khiav txhua ntu tom qab API npaj txhij lawm.

Yog tau qhov yuam kev playgroundSites is undefined, xyuas URL dua, tos kom nplooj ntawv load tiav thiab sim dua. Yog isReady() tsis tiav, qhib Playground tab dua ua ntej tsim site; tsis tsim nyog txuas ntxiv khiav cov lus txib tsim site thaum application tseem tsis tau npaj txhij.

Tsim cov site ua ib qho zuj zus ntawm matrix

Nqe code no siv createNewSavedSite(slug, settings, options). Txhua lub site yuav raug khaws cia nrog persistence: 'explicit', muaj slug cais, thiab yuav tsis hloov browser URL vim siv updateUrl: false. Khiav nqe code no tom qab koj tau txhais matrix thiab waitForSitesAPI() lawm.

async function createMatrixSites(matrix) {
  const sites = await waitForSitesAPI();
  const created = [];

  for (const item of matrix) {
    const slug = [
      'matrix',
      `wp-${item.wp.replace(/\./g, '-')}`,
      `php-${item.php.replace(/\./g, '-')}`,
      item.networking ? 'net-on' : 'net-off',
    ].join('-');
    const name = `WordPress ${item.wp} / PHP ${item.php} / ${item.networking ? 'networking bật' : 'networking tắt'}`;

    try {
      const createdSlug = await sites.createNewSavedSite(
        slug,
        {
          wpVersion: item.wp,
          phpVersion: item.php,
          networking: item.networking,
        },
        {
          persistence: 'explicit',
          updateUrl: false,
        }
      );

      await sites.rename(name, createdSlug);

      created.push({
        slug: createdSlug,
        name,
        wp: item.wp,
        php: item.php,
        networking: item.networking,
        status: 'created',
      });

      console.log(`Đã tạo: ${name}`);
    } catch (error) {
      created.push({
        slug,
        name,
        wp: item.wp,
        php: item.php,
        networking: item.networking,
        status: 'failed',
        error: String(error),
      });

      console.error(`Không tạo được ${name}`, error);
    }
  }

  return created;
}

const result = await createMatrixSites(matrix);
console.table(result);
console.table(window.playgroundSites.list());

Nqe code no khiav ua ntu zus, kom txhua zaus tsim tau tiav tso mam mus rau qhov kev sib xyaw tom ntej. Txoj kev no ua rau taug qab tau yooj yim dua tias lub site twg tab tom ua haujlwm thiab txhua lub cell muaj teeb meem dab tsi, piv rau kev tsim tib lub sijhawm. Qhov tshwm sim created tsuas qhia tias txoj kev tsim tau tiav xwb; nws tseem tsis tau lees tias plugin, theme lossis application functionality sib haum.

Txoj kev txheeb xyuas cov npe site

Hauv qhov tshwm sim ntawm list(), muab slug, npe, hom kev khaws cia thiab active status los sib piv raws li cov field uas koj lub API version xa rov qab. Tsis txhob suav lub npe uas qhia tawm tias yog pov thawj ntawm runtime version; yuav tsum nyeem version dua los ntawm lub site uas tab tom ua haujlwm hauv theem PHP verification.

Yog xav hloov mus rau ib lub site twg, hloov slug hauv qab no ua tus slug tiag hauv qhov tshwm sim ntawm list():

const slugToCheck = 'matrix-wp-<wp-version>-php-<php-version-1>-net-on';

await window.playgroundSites.setActiveSite(slugToCheck);
await window.playgroundSites.isReady();
console.log(window.playgroundSites.getClient());

Yog tsis muaj slug ntawd, setActiveSite() yuav muaj error lossis hloov tsis tau lub site. Luam slug los ntawm qhov tshwm sim tiag tiag, tsis txhob kwv yees tias yuav sau dot lossis variant name li cas.

Txheeb xyuas WordPress version thiab status

Tom qab xaiv lub site lawm, siv client ntawm lub site uas tab tom ua haujlwm los khiav ib qho PHP code me me. Nqe code no tsuas txheeb xyuas tias WordPress puas load tau thiab qhia tias yog version twg xwb; nws tsis txheeb xyuas plugin lossis theme functionality.

const client = window.playgroundSites.getClient();

if (!client) {
  throw new Error('Site hiện tại chưa sẵn sàng.');
}

const response = await client.run({
  code: `<?php
require '/wordpress/wp-load.php';
echo wp_json_encode([
  'wp_version' => get_bloginfo('version'),
  'php_version' => PHP_VERSION,
  'site_url' => site_url(),
]);
`,
});

console.log(response);

Muab wp_version thiab php_version los sib piv nrog qhov kev sib xyaw uas koj tab tom kuaj. Yog cov nqi tsis sib phim, tsum txoj kev sib piv; rov xyuas slug, version uas siv thaum pib tsim thiab site status ua ntej sim dua. Yog lub site pib tau tab sis qhov kev kuaj no ua tsis tiav, qhov ntawd yog teeb meem ntawm kev pib tsim lossis load WordPress, tsis yog pov thawj tias muaj compatibility.

Yog kuaj plugin lossis theme, yuav tsum ntxiv cov kev kuaj cais: puas tau nruab thiab activate plugin, puas khiav tau nplooj ntawv lossis command tseem ceeb, puas muaj error hauv log, thiab qhov tshwm sim puas ua tau raws li cov qauv ntawm qhov kev kuaj. Lub site uas pib tau zoo tsis hloov tau ib lub functional test suite.

Siv Blueprints thaum xav tau plugin lossis theme

createNewSavedSite() tsis yog qhov chaw xa plugin, theme lossis blueprint-url mus. Blueprints piav txog cov theem pib tsim xws li installPlugin, installTheme, login thiab runPHP (raws li wordpress.github.io).

Blueprint hauv qab no yog ib qho qauv uas muaj qauv tseeb. Hloov your-plugin-slug thiab your-theme-slug ua cov slug tiag los ntawm WordPress.org ua ntej siv:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "preferredVersions": {
    "wp": "<wp-version>",
    "php": "<php-version>"
  },
  "login": true,
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "your-plugin-slug"
      }
    },
    {
      "step": "installTheme",
      "themeData": {
        "resource": "wordpress.org/themes",
        "slug": "your-theme-slug"
      },
      "options": {
        "activate": true
      }
    }
  ]
}

Qhov no yog JSON data, tsis yog command uas khiav ncaj qha hauv Console. Khaws nws ua ib daim Blueprint file lossis xa mus rau JavaScript API raws li txoj kev uas koj daim application siv. Yog siv plugin lossis theme uas tsim nyog rau koj tus kheej, siv URL rub ncaj qha mus rau ZIP file lossis resource uas tau txais kev txhawb; tsis txhob siv nplooj HTML ntawm code repository los hloov installation file (raws li wordpress.github.io).

Pib ntau qhov plugin environment nrog JavaScript API

Thaum txhua lub cell hauv matrix yuav tsum muaj nws tus plugin, tsim ib qho Playground client rau txhua lub cell. Qauv hauv qab no tsim iframe, pib client thiab tos kom txhua tus client npaj txhij. Hloov cov placeholder ua ntej khiav hauv ib nplooj HTML uas txhawb module:

<div id="playgrounds"></div>
<script type="module">
import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';

const testCases = [
  { wp: '<wp-version>', php: '<php-version-1>', plugin: 'your-plugin-slug' },
  { wp: '<wp-version>', php: '<php-version-2>', plugin: 'your-plugin-slug' },
];

async function startCase(testCase) {
  const iframe = document.createElement('iframe');
  iframe.title = `WordPress ${testCase.wp} / PHP ${testCase.php}`;
  iframe.width = '100%';
  iframe.height = '600';
  document.querySelector('#playgrounds').appendChild(iframe);

  const client = await startPlaygroundWeb({
    iframe,
    remoteUrl: 'https://playground.wordpress.net/remote.html',
    blueprint: {
      preferredVersions: {
        wp: testCase.wp,
        php: testCase.php,
      },
      login: true,
      steps: [
        {
          step: 'installPlugin',
          pluginData: {
            resource: 'wordpress.org/plugins',
            slug: testCase.plugin,
          },
        },
      ],
    },
  });

  await client.isReady();
  return client;
}

const clients = [];
for (const testCase of testCases) {
  clients.push(await startCase(testCase));
}

console.log(`Đã khởi tạo ${clients.length} môi trường.`);
</script>

Nqe code no siv JavaScript API ncaj qha rau cov iframe; cov iframe tsis cia li dhau los ua site uas window.playgroundSites tswj hwm. Sites API muab rau ntawm Playground application layer, hos embedded client raug tswj hauv koj tus code (raws li wordpress.github.io).

Ntxuav thiab rov qab kho tom qab kuaj

Lub explicit site yuav raug khaws cia mus txog thaum koj rho tawm. Ua ntej rho tawm, khaws cov txiaj ntsig ntawm qhov kev kuaj lossis export cov ntaub ntawv uas xav tau; kev rho tawm yog ib kauj ruam ntxuav, tsis yog ib txoj kev rov qab tau cov ntaub ntawv.

const sitesToDelete = window.playgroundSites
  .list()
  .filter((site) => site.slug.startsWith('matrix-'));

for (const site of sitesToDelete) {
  await window.playgroundSites.delete(site.slug);
  console.log(`Đã xóa ${site.slug}`);
}

console.table(window.playgroundSites.list());

Rho tawm tsuas yog cov slug uas koj tau txheeb xyuas tias yog ib feem ntawm qhov matrix kuaj. Tsis txhob siv ib qho prefix uas zoo ib yam yog tias tseem muaj site hauv browser uas yuav tsum khaws cia. Rau qhov kev kuaj uas tsis tas yuav khaws cia, xav txog createNewTemporarySite(); temporary site tsis tsim nyog siv los khaws cov txiaj ntsig hla ntau session.

Yog ib lub cell muaj teeb meem, khaws nws log thiab slug, kho qhov configuration kom raug, ces tsim dua tsuas yog lub cell uas muaj teeb meem. Tsis txhob rho tawm tag nrho matrix ua ntej nrhiav tau qhov ua rau. Yog xav tau cov txiaj ntsig uas rov ua tau tib yam, lock WordPress/PHP version thiab siv release lossis commit uas tau txheeb xyuas meej rau plugin/theme resource.

Kev txheeb xyuas ceev rau cov teeb meem nquag

Tsos mob	Qhov ua tau	Txoj kev daws
`window.playgroundSites` tseem tsis tau muaj	Playground application tseem tsis tau load tiav	Khiav `waitForSitesAPI()`, xyuas kom yog nplooj ntawv raug thiab sim dua tom qab nplooj ntawv load tiav.
Tsim tsis tau version	Txoj hlua version tsis yog hom uas runtime txhawb lossis sau tsis raug hom ntawv	Hloov placeholder mus rau ib hom version uas txhawb, thiab nyeem tag nrho cov lus yuam kev uas xa rov qab.
Site tsis tshwm hauv `list()`	Kev ua haujlwm ua tsis tiav, browser qhov kev khaws cia raug thaiv, lossis site raug tsim ib ntus	Kuaj xyuas `result`, browser qhov kev tso cai khaws cia thiab qhov kev xaiv `persistence: 'explicit'`.
Plugin lossis theme raug hla dhau	Koj tau xa parameter yuam kev mus rau Sites API	Siv Blueprint hauv JavaScript API lossis khiav tus txheej txheem teeb tsa cais nrog client.
Rub tsis tau plugin/theme ZIP	URL xa HTML rov qab, yuav tsum tau login, tas sijhawm, lossis tsis ua raws li qhov yuav tsum tau nkag mus	Kuaj xyuas qhov URL rub tawm ncaj qha, kev tso cai nkag mus, ZIP hom ntawv thiab cov peev txheej uas Playground txhawb.
Cov txiaj ntsig sib txawv ntawm ib zaug khiav mus rau lwm zaug	Siv `latest`, cov peev txheej hloov pauv lossis plugin hloov kho nws tus kheej	Xauv version thiab siv ib qho release lossis commit tshwj xeeb thaum yuav tsum rov tsim tau tib yam.
Nco tsis txaus lossis nrhiav tsis yooj yim tau site	Tsim ntau dhau ntawm cov site explicit	Sau tseg cov txiaj ntsig, tshem cov site sim uas tsis tas yuav khaws, thiab siv site ib ntus rau kev sim luv luv.

Yog lub hom phiaj yog sim plugin ua ntej hloov kho lub website tiag, muab ob txoj haujlwm cais: tsim ib puag ncig huv thiab khiav ib pob kev sim functionality. Saib ntxiv daim checklist sim plugin thiab theme WordPress thiab txheej txheem kuaj plugin ua ntej hloov kho. Playground pab kuaj hauv ib puag ncig browser; tsis tsim nyog suav tias nws yog ib daim qauv luam tag nrho ntawm production infrastructure.

Checklist ua tiav

Tau khiav cov code hauv Playground DevTools, tsis yog hauv WordPress dashboard.
Tau hu isReady() ua ntej siv Sites API.
Tau hloov tag nrho cov placeholder mus rau cov version thiab resource slug tiag tiag.
Txhua qhov kev sib xyaw muaj nws tus slug thiab raug tsim ua ntu zus.
Tau siv list() los sib piv cov site, ces siv setActiveSite() thiab getClient() los kuaj xyuas.
Tau nyeem dua WordPress/PHP version los ntawm site uas tab tom active, tsis yog cia siab rau lub npe site xwb.
Tau siv Blueprint lossis JavaScript API rau plugin, theme thiab cov qauv ntaub ntawv.
Tau khaws cov txiaj ntsig uas tsim nyog thiab tshem cov site explicit uas tsis siv lawm.

Qhov ciam teb tseem ceeb uas yuav tsum nco yog: Sites API tswj seb muaj cov site twg thiab khaws lawv li cas; Blueprints piav qhia tias site raug pib nrog cov khoom dab tsi. Kev cais ob txoj haujlwm no pab tswj version matrix tau yooj yim dua thiab zam kom tsis txhob cia siab yuam kev rau API cov parameter.

Tsim WordPress matrix hauv Playground kom tsis txhob yuam Sites API nrog Blueprints