Incorporate Custom Footer Text on the Authorize Application Screen

[hussain-t]

Feature Description

Custom footer text should be implemented for the enhanced Authorize Application screen. The custom footer should include a "Powered by Site Kit" message and be styled according to the Figma design.

Refer to the Adding Custom Footer Text section in the design doc.

---

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

Acceptance criteria

• Conditional Display Based on success_url Domain:
  • The custom footer text "Powered by Site Kit" should be implemented only when the user is on the Authorize Application screen, and the success_url query parameter includes the .google.com domain.
• Implementation and Styling:
  • The footer text must be implemented using the admin_footer action hook, ensuring it is added just below the default WordPress footer text.
  • The text "Powered by Site Kit" should match the font size, color, and alignment specified in the Figma design.

Implementation Brief

In includes/Core/Admin/Authorize_Application.php:

• Create render_footer_text Method:
  • Check that the current screen is the authorize_application using the is_authorize_application_screen method.
  • Check that the success_url query parameter contains a .google.com domain using the is_google_service method.
  • If both conditions are met, echo the footer text "Powered by Site Kit". Wrap this text in a <div> with a <p> tag styled via custom selectors.
• Hook Registration:
  • Locate the Authorize_ApplicationTest::register method.
  • Register the render_footer_text method to the admin_footer action.

In assets/sass/authorize-application/_googlesitekit-authorize-application.scss:

• Custom Styles Application:
  • Apply the custom styles for the "Powered by Site Kit" footer text.
  • The footer text should match the font size, color, and alignment specified in the Figma design.

Test Coverage

In tests/phpunit/integration/Core/Admin/Authorize_ApplicationTest.php:

• Add a test case to verify the custom footer text is rendered on the Authorize Application screen when the success_url query parameter includes the .google.com domain.
• Add a test case to verify the custom footer text is not rendered on the Authorize Application screen when the success_url query parameter does not include the .google.com domain.
• Add a test case to verify that the custom footer text is not rendered on screens other than the Authorize Application screen.

QA Brief

• Ensure that Site Kit is installed and activated on your WordPress installation.
• Navigate to the following URL on your WordPress site, replacing example.com with your actual site domain:

https://example.com/wp-admin/authorize-application.php?app_name=GoogleServiceIntegration&app_id=123e4567-e89b-12d3-a456-426614174000&success_url=https%3A%2F%2Fexample.google.com%2Fsettings%2Fauthorization%2Fwordpress&sitekit=true

• Verify that the custom footer text "Powered by Site Kit" is displayed below the default footer text on the Authorize Application screen.
• Modify the success_url Domain: Change the success_url to a non-Google domain and access the same URL:

https://example.com/wp-admin/authorize-application.php?app_name=GoogleServiceIntegration&app_id=123e4567-e89b-12d3-a456-426614174000&success_url=https%3A%2F%2Fexample.com%2Fsettings%2Fauthorization%2Fwordpress&sitekit=true

• Verify that the custom footer text is not displayed on the Authorize Application screen.
• Deactivate Site Kit.
• Access the URL again with the original success_url pointing to a Google domain:

https://example.com/wp-admin/authorize-application.php?app_name=GoogleServiceIntegration&app_id=123e4567-e89b-12d3-a456-426614174000&success_url=https%3A%2F%2Fexample.google.com%2Fsettings%2Fauthorization%2Fwordpress&sitekit=true

• Verify that the custom footer text is not displayed on the Authorize Application screen.
• Note: The footer content was placed just below the form content in the Figma design. However, the current implementation places it at the bottom of the page to maintain the existing footer structure.

Changelog entry

• Add "Powered by Site Kit" to the Authorize Application screen footer when authorizing a Google application.

[techanvil]

IB ✅

[kelvinballoo]

QA Update ❌

This is tested good overall.

• The text 'Powered by Site Kit' appears accordingly when the Site Kit plugin is active and there is a google domain ✅
  The text also follows figma accordingly.

  

• When plugin is deactivated or it's active and using a non-google domain, the text doesn't appear. ✅

  

• One minor point of clarification: ⚠️
  I understand that we are preserving the footer structure as much as possible.
  I only noticed the gap from the bottom to the text on figma as 60px.
  I am thinking if we kept it at 20px also to preserve the footer structure?

  Figma:

  Implementation: 20px
  

• On breakpoints below 783 px, the text doesn't appear. Neither do the other wordings like the WordPress version and 'Thank you for creating with WordPress' ❌
  Is there any special requirements for those breakpoints?

  

[hussain-t]

Hi @kelvinballoo. Regarding your observations:

One minor point of clarification: ⚠️
I understand that we are preserving the footer structure as much as possible.
I only noticed the gap from the bottom to the text on figma as 60px.
I am thinking if we kept it at 20px also to preserve the footer structure?

Yes, that's to maintain the default footer structure. If you see the default one, it has only 10px padding. However, with the slightly larger custom footer, it is better to increase it slightly. Hence, I set it to 20px, which is fine.

On breakpoints below 783 px, the text doesn't appear. Neither do the other wordings like the WordPress version and 'Thank you for creating with WordPress' ❌
Is there any special requirements for those breakpoints?

That's the default functionality. We only display the custom footer only when the default one is shown. Please check the default one for clarity.

[kelvinballoo]

Noted on that @hussain-t .

All good.
Moving this ticket to Approval.