Feature Description

The Key Metrics setup screen will be updated to place the Complete setup button near to the questions or in a sticky footer depending on the viewport height.

For reference, see the Key Metrics setup screen section in the design doc, and the Figma design.

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

Acceptance Criteria

• For taller viewports which can accommodate the list of questions and CTA, the CTA should appear inline below the list of questions. The WordPress footer should be visible.
• For shorter viewports, the CTA footer should be sticky and overlay the WordPress footer.
• For the sticky footer, the CTA should be left-aligned with the questions.

Implementation Brief

See the implementation guide in the design doc.

Note: The changes can be seen in this diff, this branch can be used as a reference for implementation.

• In assets/js/components/key-metrics-setup/AdaptiveFooterLayout.js

  • Create a reusable AdaptiveFooterLayout component to encapsulate adaptive CTA placement logic.
  • Import useLayoutEffect, useRef, and useState from @wordpress/element to manage viewport-fit calculation and element measurements.
  • Add contentRef and footerRef to measure content bottom and footer height.
  • Add local state footerInline (default false) to toggle inline vs sticky footer mode.
  • In useLayoutEffect, compute:
    • contentBottom from contentRef.current.getBoundingClientRect().bottom.
    • footerHeight from footerRef.current.offsetHeight.
    • Inline mode condition: contentBottom + footerHeight <= view.innerHeight.
  • Add resize handling using ownerDocument.defaultView (instead of global window) to satisfy linting requirements.
  • Expose class-based customization via props:
    • className
    • inlineClassName
    • footerClassName
    • footer
    • children

• In assets/js/components/key-metrics-setup/KeyMetricsSetupApp.js

  • Extract CTA buttons into a footer fragment and pass it into AdaptiveFooterLayout via the footer prop.
  • Render main setup content inside AdaptiveFooterLayout children.
  • Configure reusable component with key-metrics-specific classnames:
    • className="googlesitekit-key-metrics-setup__content"
    • inlineClassName="googlesitekit-key-metrics-setup__content--footer-inline"
    • footerClassName="googlesitekit-user-input__footer googlesitekit-key-metrics-setup__footer"
  • Add namespaced class to error notices to avoid behavior styling through shared selectors:
    • googlesitekit-key-metrics-setup__error

• In assets/sass/components/key-metrics/_googlesitekit-key-metrics-setup-screen.scss

  • Move behavior-specific styling to key-metrics-scoped selectors:
    • .googlesitekit-key-metrics-setup__footer
    • .googlesitekit-key-metrics-setup__content--footer-inline
    • .googlesitekit-key-metrics-setup__error
  • Keep sticky-footer alignment with title column in sticky mode using CSS-only values, these values can be adjusted to best match Figma design:
    • padding-left: 42px
    • padding-left: 56px for (min-width: $bp-desktop)
  • In inline mode (.googlesitekit-key-metrics-setup__content--footer-inline), make CTA part of normal flow where it should appear below the list of questions for larger viewport.
    • position: static
    • margin: 32px 0 0
    • background-color: transparent
    • border-top: none
    • reset fixed-position properties (left, right, bottom, z-index)

Test Coverage

• Run and update KeyMetricsSetupApp tests and snapshots.
• Add tests for AdaptiveFooterLayout

QA Brief

1. Setup the SK and go upto key metrics setup screen.
2. On the larger viewport, the CTA should appear inline below the list of questions as can be seen in the screenshot in PR description.
3. On the smaller screen, where list of questions and CTA cannot be accommodated in the viewport, the CTA footer will be sticky and overlay the WordPress footer such that WordPress footer would not be visible. Please refer the screenshot in PR description.
4. When the footer is sticky, the CTA should be left-aligned with the list of questions.

Changelog entry

• Use dynamic positioning for the Key Metric setup screen's "Complete setup" button, placing it in a sticky footer for shorter viewports.