Feature Description

• Develop a responsive HTML email template based on designs.
• Use mock data within the report and test visually within key email apps on mobile and desktop.
• Create a command to serve the template with test data for development.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Base template renders a responsive HTML email using mock data only; no live data or scheduler in this issue.
• Rendered via the reusable Google\Site_Kit\Core\Email_Reporting\Email_Template_Renderer class implemented in Create a reusable Email class #11564.
• Keyed folder structure:
  • template.php - includes/Core/Email_Reporting/templates/email-report/template.php
  • parts/ - includes/Core/Email_Reporting/templates/email-report/parts
• Implement the content skeleton based on Figma mocks:
  • Header with Site Kit branding and site domain placeholder.
  • Is my site helping my business grow? section block with titles, primary metric value, trend, date range placeholders from mock data. All other sections to be defined and implemented in Design email template sections (1/2) #11550 and Design email template sections (2/2) #11551
  • Footer with a dashboard link, thumbs up/down buttons, footer copy text and footer links.
• Email HTML is mobile-first and works in major clients (Gmail web/mobile, Apple Mail, Outlook desktop/web) tested with Email on Acid:
  • Inline styles with minimal head CSS for responsiveness.
  • Explicit alt text and width/height on images used in the template.
• For development, host assets within the plugin assets. Implement email assets infrastructure #11568 will move these assets to cloud hosting.
• Composer dev command exists to view the template in-browser (serves HTML; does not send email):
  • Script name: dev:serve-email email-report in composer.json
  • Command uses the built-in PHP web server to render this template with mock data.

Implementation Brief

Dev/QA note: emails should first be developed using the dev server, following email best practices. Then Email on Acid can be used by copying and pasting in the HTML generated by the dev server, for cross-client testing.

• Update file composer.json — add script dev:serve-email that launches the PHP built-in server via php bin/server-email.php <template-key> (default: email-report) on http://127.0.0.1:8089. Example: composer run dev:serve-email email-report. The script serves HTML in-browser only (no email sending) for rapid preview.
• Create file bin/server-email.php: development entrypoint that accepts a template key argument (default email-report):
  • Sets up the environment for mock data, and starts the PHP built-in server on port 8089, Prints and auto opens the preview URL, can be stopped with Ctrl-C.
  • Renders the selected template key email-report:
    • Loads mock data from related file includes/Core/Email_Reporting/templates/{key}/mock_data.php, Mock values should follow the pattern outlined in Create email reporting data requests classes #11566.
    • Renders the template by passing the mock data to the Email_Template_Renderer class, render method implemented in Create a reusable Email class #11564.
    • Server hosts HTML version of the template.
    • Assets referenced via plugin_url - assets/images/email-development/email-report/
• Create a folder assets/images/email-development/email-report/ — Add all branding assets should be added here for development only, for the release these will be uploaded and hosted on Google Cloud (While working on Design email template sections (2/2) #11551)
• Create file includes/Core/Email_Reporting/templates/email-report/template.php: Implement the Figma mocks: base wrapper div (100% width) with mobile-first, max-width of column 450px, inline styles; includes parts/header.php, parts/section-conversions.php, parts/footer.php. Consumes $data from mock, uses explicit alt/width/height for images, and keeps head CSS minimal for client compatibility.
• Create includes/Core/Email_Reporting/templates/email-report/parts/header.php: Implement the Figma mocks: Site Kit branding, email title and date range with inline styles. Reference Google logo image via plugin_url with explicit alt/width/height.
• Create includes/Core/Email_Reporting/templates/email-report/parts/section-part-conversion-metrics.php and includes/Core/Email_Reporting/templates/email-report/parts/section-header.php: Implement the Figma mocks: "Is my site helping my business grow?" block with titles, metrics with inline styles. Section icon image via plugin_url with explicit alt/width/height. Dashboard CTA link linking to relevant dashboard link. Dashboard link and change badge used for % change, created as reusable parts:
  • Create includes/Core/Email_Reporting/templates/email-report/parts/change-badge.php: Implement a % change badge with positive and negative color backgrounds. Add utility to clamp values to 2D.P.
  • Create includes/Core/Email_Reporting/templates/email-report/parts/dashboard-link.php: Reusable dashboard link that can be reused for each section - can accept different destination URLs.
• Create includes/Core/Email_Reporting/templates/parts/footer.php: Implement the Figma mocks: dashboard CTA link; footer copy and links. Unsubscribe takes the user to the dashboard user settings panel URL: admin.php?page=googlesitekit-dashboard&email-reporting-panel-opened=1

Test Coverage

• No PHP Unit tests required as the email will not yet be integrated with the email reporting infrastructure. We will add tests in Create a reusable Email class #11564
• No E2E tests required. We will add E2E testing in Create E2E email testing infrastructure with email reporting test #11740.

QA Brief

• Get the pre-release version of the tester plugin from @benbowler.
• From the new Email Reporting tab, open the email template preview by clicking the "Launch Report Preview" button:
• 
• Review the template in the browser, comparing it to the Figma designs. It should not be pixel-perfect, but obvious differences should be raised and discussed. Notes:
  • Fonts won't match the design as they will instead use the approved font stack: "Google Sans", Roboto, Arial, sans-serif.
  • A gap has been left in the designs for the "Detected.." badge, which will be added in v1.
  • 
  • All links and data are mock links and data, so no need to test for this ticket.
• Right click and click "View page source" - copy the HTML into Email on Acid and review each client. Again, this should not be pixel-perfect, but obviously broken emails should be flagged.
• Dark mode changes should be added to Update email-report template to support dark mode #11833 to be addressed later.

Changelog entry

• Add a base template for reports sent by Email Reporting.