[docs] Replacing info component by compatible handbook element

[fellyph]

Motivation for the change, related issues

This pull request replaces the :::info component with a div that is compatible with the Handbook documentation. When the page is loaded from the handbook, the style will be applied. This PR includes a fallback on the current docs with the custom.css file.

Implementation details

The component from docusaurus :::info was replaced by <div class="callout callout-info">, this first pull request will replace the component only for the English version.

Previous design:

New design:

Testing Instructions (or ideally a Blueprint)

1. Pull the branch replacing-info-block-docs
2. Install the dependencies npm install
3. Run the docs locally npm run dev:docs
4. Check the component info on the home page

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR replaces Docusaurus :::info admonitions with Handbook-compatible callout markup and adds CSS to style the new callouts (with a fallback in the current docs site).

Changes:

• Replace :::info blocks with <div class="callout callout-info">…</div> across multiple docs pages.
• Add WordPress.org design-token CSS variables and new .callout styling (including variants and dark mode behavior).
• Update code examples formatting in the Playwright guide while migrating its info blocks.

Reviewed changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/docs/site/src/css/custom.css	Adds WP.org-like design tokens and styles for the new .callout component variants.
packages/docs/site/i18n/bn/docusaurus-plugin-content-docs/current/main/contributing/code.md	Replaces :::info blocks with callout <div> markup (Bengali translation).
packages/docs/site/i18n/bn/docusaurus-plugin-content-docs/current/blueprints/tutorial/01-what-are-blueprints-what-you-can-do-with-them.md	Replaces :::info with callout <div> markup (Bengali translation).
packages/docs/site/docs/main/quick-start-guide.md	Replaces :::info blocks with callout <div> markup.
packages/docs/site/docs/main/intro.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/main/guides/providing-content-for-your-demo.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/main/guides/playground-for-everyone.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/main/guides/for-theme-developers.md	Replaces multiple :::info blocks with callout <div> markup.
packages/docs/site/docs/main/guides/for-plugin-developers.md	Replaces multiple :::info blocks with callout <div> markup.
packages/docs/site/docs/main/guides/e2e-testing-with-playwright.md	Replaces :::info blocks with callout <div> markup and reformats TS/YAML snippets.
packages/docs/site/docs/main/contributing/translations.md	Replaces multiple :::info blocks with callout <div> markup.
packages/docs/site/docs/main/contributing/contributor-day.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/main/contributing/code.md	Replaces multiple :::info blocks with callout <div> markup.
packages/docs/site/docs/main/about/launch.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/main/about/build.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/developers/23-architecture/18-host-your-own-playground.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/developers/23-architecture/10-browser-iframe-rendering.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/developers/07-xdebug/02-getting-started.md	Replaces multiple :::info blocks with callout <div> markup.
packages/docs/site/docs/developers/06-apis/query-api/01-index.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/developers/06-apis/javascript-api/01-index.md	Replaces multiple :::info blocks with callout <div> markup.
packages/docs/site/docs/developers/06-apis/01-index.md	Replaces multiple :::info blocks with callout <div> markup.
packages/docs/site/docs/developers/05-local-development/04-wp-playground-cli.md	Replaces multiple :::info blocks with callout <div> markup.
packages/docs/site/docs/developers/05-local-development/02-vscode-extension.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/developers/05-local-development/01-wp-now.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/blueprints/tutorial/01-what-are-blueprints-what-you-can-do-with-them.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/blueprints/09-troubleshoot-and-debug-blueprints.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/blueprints/07-json-api-and-function-api.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/blueprints/05-steps-shorthands.md	Replaces :::info block with callout <div> markup.
packages/docs/site/docs/blueprints/04-resources.md	Replaces :::info block with callout <div> markup.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ashfame]

@fellyph Changeset looks good overall. I see you resolved the Copilot review comments, but I don't see any follow-up commits or responses addressing them — could you clarify how they were handled? Just want to make sure they were intentionally dismissed rather than resolved without action.

[fellyph]

@ashfame, the Copilot comments don´t make any sense. I have resolved because they are not relevant. I have talked with @brandonpayton, and I included other languages as well on this PR.

[fellyph]

@ashfame can you take a look again at the PR?

[ashfame]

This is good to go.