Skip to content

Refresh /about/requirements: three-column cards, warning callout, CTAs#679

Closed
4thhubbard wants to merge 1 commit into
WordPress:trunkfrom
4thhubbard:mary/refresh-about-requirements
Closed

Refresh /about/requirements: three-column cards, warning callout, CTAs#679
4thhubbard wants to merge 1 commit into
WordPress:trunkfrom
4thhubbard:mary/refresh-about-requirements

Conversation

@4thhubbard

Copy link
Copy Markdown

Refreshes the /about/requirements page with a cleaner layout, a proper warning callout, and clear next-step CTAs. Content-only changes to the about-requirements.php block pattern — no template, function, or shortcode logic touched.

  • Convert the three core requirements (PHP, Database, HTTPS) from a bulleted list into a three-column card layout with equal heights and a blueberry-1 top accent.
  • Promote the legacy-version security note into a lemon-3 warning callout with an H4 heading ("Running on legacy versions?") so the security risk reads as a warning rather than body text — consistent with the yellow warning convention used across wp-admin.
  • Add a button pair at the bottom: "Download WordPress" (primary) and "Browse recommended hosts" (outlined), so readers have clear next steps after understanding the requirements.

All shortcodes ([recommended_php], [recommended_mariadb], [recommended_mysql], [minimum_php]) preserved. Translator comments and i18n calls preserved. No functional changes — visual/content polish only.

Screenshots

Before After
Before After

How to test the changes in this Pull Request:

  1. Check out this branch (mary/refresh-about-requirements) in a local wporg-main-2022 environment
  2. Run yarn wp-env start and visit http://localhost:8888/about/requirements/
  3. Verify:
    • The three requirement cards (PHP, Database, HTTPS) render side-by-side with equal heights and a thin blueberry-blue line across the top of each
    • The legacy-version note appears on a soft-yellow background as a distinct warning callout with an H4 heading
    • Two buttons appear at the bottom of the page: a filled blueberry "Download WordPress" primary and an outlined "Browse recommended hosts" secondary
    • All version numbers (PHP 8.3, MariaDB 10.6, MySQL 8.0) still populate from the shortcodes and match the source of truth

- Convert the three core requirements (PHP, Database, HTTPS) from a bulleted list into a three-column card layout with equal heights and a blueberry-1 top accent.

- Promote the legacy-version security note into a lemon-3 warning callout with an H4 heading ("Running on legacy versions?") so the security risk reads as a warning rather than body text.

- Add a button pair at the bottom: "Download WordPress" (primary) and "Browse recommended hosts" (outlined), so readers have clear next steps after understanding the requirements.

All shortcodes ([recommended_php], [recommended_mariadb], [recommended_mysql], [minimum_php]) preserved. Translator comments and i18n calls preserved. No functional changes — visual/content polish only.
@ryelle

ryelle commented Apr 24, 2026

Copy link
Copy Markdown
Contributor

@4thhubbard This page should be edited in WordPress, you can use the post editor to make these changes (and I'd suggest using a wide container for those columns). The content is then synced back to the pattern file, for example #678. Editing the pattern here like this will just be overwritten the next time there's a content update. With superadmin, you should be able to edit the site, or I can add you.

@4thhubbard

Copy link
Copy Markdown
Author

Thanks @ryelle for the catch and @dd32 for the org access. Taking your suggestions — closing this and redoing via the editor with the wider container.

@4thhubbard 4thhubbard closed this May 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants