Skip to content

Docs: Add an interactive Jetpack homepage hero #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
f wants to merge 5 commits into
base: codex/docs-product-organization
Choose a base branch
from
Draft

Docs: Add an interactive Jetpack homepage hero #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4f7c0f0
Docs: Add an interactive homepage hero
f Jul 31, 2026
2421824
Docs: Remove the homepage hero separator
f Jul 31, 2026
5ad5c7c
Docs: Remove the hero visual overlay
f Jul 31, 2026
7b25217
Docs: Preserve hero label proportions
f Jul 31, 2026
312b6a8
Docs: Simplify the developer homepage
f Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/validate-developer-docs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ jobs:
node --check tools/docspress/jetpack-developer-docs-site/blocks/product-carousel/editor.js
node --check tools/docspress/jetpack-developer-docs-site/blocks/product-carousel/utils.js
node --check tools/docspress/jetpack-developer-docs-site/blocks/product-carousel/view.js
node --check tools/docspress/jetpack-developer-docs-site/blocks/interactive-hero/view.js

- name: Check changed-file whitespace
env:
Expand Down
98 changes: 0 additions & 98 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,101 +65,3 @@ sidebar_collapsed: false
<!-- wp:group {"align":"wide","anchor":"tools","className":"jp-home-section jp-home-tools","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide jp-home-section jp-home-tools" id="tools"><!-- wp:docspress/audience-paths {"align":"wide","compact":true,"eyebrow":"Developer tools","title":"Inspect, test, and troubleshoot Jetpack","description":"Use the same supporting tools the project relies on for UI development, beta testing, debugging, and API exploration.","paths":[{"title":"Jetpack Storybook","description":"Explore UI components and interaction states in isolation.","url":"https://automattic.github.io/jetpack-storybook/","cta":"Open Storybook","icon":"UI","accent":"coral","newTab":true},{"title":"Jetpack Beta Tester","description":"Install development builds and test changes on a WordPress site.","url":"https://jetpack.com/support/beta/","cta":"Get the tester","icon":"β","accent":"green","newTab":true},{"title":"Debug Helper","description":"Inspect Jetpack state and disable modules while troubleshooting.","url":"https://github.com/Automattic/jetpack-debug-helper","cta":"View on GitHub","icon":"FIX","accent":"gold","newTab":true},{"title":"Support & tools","description":"Find diagnostics, status pages, repositories, and escalation paths.","url":"/developer-docs/reference/support-and-tools/","cta":"Open the toolbox","icon":"→","accent":"blue","newTab":false}],"columns":2,"tone":"paper","textAlign":"left","showNumbers":false} /--></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","anchor":"wordpress","className":"jp-home-band jp-home-wordpress","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull jp-home-band jp-home-wordpress" id="wordpress"><!-- wp:group {"align":"wide","className":"jp-home-resource-links","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide jp-home-resource-links"><!-- wp:paragraph {"className":"jp-home-eyebrow"} -->
<p class="jp-home-eyebrow">WordPress developer resources</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Keep the platform source of truth close.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Jetpack builds on WordPress. These handbooks and repositories explain the APIs, standards, editor concepts, and platform behavior underneath every integration.</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"className":"jp-resource-columns"} -->
<div class="wp-block-columns jp-resource-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul class="wp-block-list"><li><a href="https://developer.wordpress.org/block-editor/" target="_blank" rel="noreferrer noopener">Block Editor Handbook ↗</a></li><li><a href="https://developer.wordpress.org/plugins/" target="_blank" rel="noreferrer noopener">Plugin Handbook ↗</a></li><li><a href="https://developer.wordpress.org/themes/" target="_blank" rel="noreferrer noopener">Theme Handbook ↗</a></li><li><a href="https://developer.wordpress.org/rest-api/" target="_blank" rel="noreferrer noopener">REST API Handbook ↗</a></li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul class="wp-block-list"><li><a href="https://developer.wordpress.org/coding-standards/" target="_blank" rel="noreferrer noopener">Coding Standards Handbook ↗</a></li><li><a href="https://developer.wordpress.org/apis/" target="_blank" rel="noreferrer noopener">Common APIs Handbook ↗</a></li><li><a href="https://github.com/WordPress/wordpress-develop" target="_blank" rel="noreferrer noopener">WordPress on GitHub ↗</a></li><li><a href="https://github.com/WordPress/gutenberg" target="_blank" rel="noreferrer noopener">Gutenberg on GitHub ↗</a></li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","anchor":"blog","className":"jp-home-section jp-home-blog","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide jp-home-section jp-home-blog" id="blog"><!-- wp:group {"className":"jp-home-section-heading","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"bottom"}} -->
<div class="wp-block-group jp-home-section-heading"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"jp-home-eyebrow"} -->
<p class="jp-home-eyebrow">From Jetpack.com</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Latest developer posts</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"className":"jp-home-section-link"} -->
<p class="jp-home-section-link"><a href="https://jetpack.com/resources/category/developers/" target="_blank" rel="noreferrer noopener">View all developer resources ↗</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:query {"queryId":42,"query":{"perPage":4,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":{"category":[1359]},"parents":[],"format":[]},"displayLayout":{"type":"flex","columns":4},"align":"wide","className":"jp-home-posts-query"} -->
<div class="wp-block-query alignwide jp-home-posts-query"><!-- wp:post-template {"layout":{"type":"grid","columnCount":4}} -->
<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/10","className":"jp-post-card__image"} /-->

<!-- wp:post-date {"format":"M j, Y","className":"jp-post-card__date"} /-->

<!-- wp:post-title {"isLink":true,"level":3,"className":"jp-post-card__title"} /-->

<!-- wp:post-excerpt {"moreText":"","excerptLength":18,"className":"jp-post-card__excerpt"} /-->
<!-- /wp:post-template -->

<!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p>Developer resources are being prepared. Check back soon.</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","anchor":"agents","className":"jp-home-band jp-home-agents","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull jp-home-band jp-home-agents" id="agents"><!-- wp:columns {"align":"wide","className":"jp-home-agents__grid","verticalAlignment":"center"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center jp-home-agents__grid"><!-- wp:column {"verticalAlignment":"center","width":"48%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:48%"><!-- wp:paragraph {"className":"jp-home-eyebrow"} -->
<p class="jp-home-eyebrow">Agent-friendly by design</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">Built to be read by machines, too.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The same source-aware docs that help people navigate Jetpack are published in a compact format for coding agents.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"jp-button-agent"} -->
<div class="wp-block-button jp-button-agent"><a class="wp-block-button__link wp-element-button" href="/llms.txt">Open llms.txt</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"52%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:52%"><!-- wp:docspress/prompt {"prompt":"Read https://developer.jetpack.com/llms.txt before answering. Then cite the Jetpack documentation and source files you use.","model":"Any coding agent","mode":"agent","thinking":true,"context":"llms.txt, Jetpack monorepo","caption":"A reliable first instruction for Jetpack development work."} /-->

<!-- wp:list {"className":"jp-agent-checklist"} -->
<ul class="wp-block-list jp-agent-checklist"><li>Read <code>llms.txt</code> before answering Jetpack development questions.</li><li>Treat the monorepo as the source of truth for behavior that may have changed.</li><li>Cite the documentation pages and source files used.</li><li>Prefer documented hooks and extension points over brittle overrides.</li><li>Ask before making changes to a production site.</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
132 changes: 132 additions & 0 deletions tools/docspress/jetpack-developer-docs-site/blocks/interactive-hero/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
.homepage-content > .wp-block-docspress-hero.jetpack-developer-docs-hero {
border: 0;
background-image: none;
}

.homepage-content > .wp-block-docspress-hero.jetpack-developer-docs-hero .docspress-hero__copy,
.homepage-content > .wp-block-docspress-hero.jetpack-developer-docs-hero .docspress-hero__visual {
border: 0;
}

.homepage-content > .wp-block-docspress-hero.jetpack-developer-docs-hero .docspress-hero__visual {
min-height: 100%;
padding: 0;
background: transparent;
box-shadow: none;
}

.homepage-content > .wp-block-docspress-hero.jetpack-developer-docs-hero .docspress-hero__visual::before {
display: none;
content: none;
}

.homepage-content > .wp-block-docspress-hero.jetpack-developer-docs-hero + .jetpack-developer-docs-product-carousel {
border-block-start: 0;
}

.jetpack-developer-docs-hero__visual {
--jp-docs-hero-construction: #7b8287;
--jp-docs-hero-point-fill: #fff;
position: relative;
width: 100%;
max-width: none;
height: 100%;
min-height: clamp(500px, 48vw, 680px);
margin: 0;
overflow: hidden;
cursor: grab;
touch-action: none;
}

.jetpack-developer-docs-hero__visual[data-hovering="true"] {
cursor: pointer;
}

.jetpack-developer-docs-hero__visual[data-dragging="true"] {
cursor: grabbing;
}

.jetpack-developer-docs-hero__canvas {
position: absolute;
inset: 0;
z-index: 2;
}

.jetpack-developer-docs-hero__canvas canvas {
display: block;
width: 100%;
height: 100%;
}

.jetpack-developer-docs-hero__visual .docspress-hero__image {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: min(88%, 520px);
height: auto;
opacity: 1;
transform: translate(-50%, -50%);
transition: opacity 180ms ease;
pointer-events: none;
}

.jetpack-developer-docs-hero__visual[data-state="ready"] .docspress-hero__image {
opacity: 0;
}

.jetpack-developer-docs-hero__hint {
position: absolute;
z-index: 3;
inset-inline-end: clamp(16px, 3vw, 34px);
inset-block-end: clamp(16px, 3vw, 30px);
color: var(--dp-muted, #646970);
font-family: var(--dp-font-mono, ui-monospace, monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
pointer-events: none;
transition:
opacity 240ms ease,
transform 240ms ease;
}

.jetpack-developer-docs-hero__visual[data-interacted="true"] .jetpack-developer-docs-hero__hint,
.jetpack-developer-docs-hero__visual[data-state="fallback"] .jetpack-developer-docs-hero__hint {
opacity: 0;
transform: translateY(4px);
}

html[data-theme="dark"] .jetpack-developer-docs-hero__visual {
--jp-docs-hero-construction: #92999e;
--jp-docs-hero-point-fill: #1f2428;
}

@media ( max-width: 780px ) {

.homepage-content > .wp-block-docspress-hero.jetpack-developer-docs-hero .docspress-hero__visual {
min-height: 440px;
border: 0;
}

.jetpack-developer-docs-hero__visual {
min-height: 440px;
}
}

@media ( max-width: 600px ) {

.homepage-content > .wp-block-docspress-hero.jetpack-developer-docs-hero .docspress-hero__visual,
.jetpack-developer-docs-hero__visual {
min-height: 360px;
}
}

@media ( prefers-reduced-motion: reduce ) {

.jetpack-developer-docs-hero__visual .docspress-hero__image,
.jetpack-developer-docs-hero__hint {
transition: none;
}
}
Loading
Loading