Skip to content
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.

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

RTL languages translation for NPT #8664

Closed
5 tasks done
kelvinballoo opened this issue May 6, 2024 · 2 comments
Closed
5 tasks done

RTL languages translation for NPT #8664

kelvinballoo opened this issue May 6, 2024 · 2 comments
Labels
P2 Low priority Team M Issues for Squad 2 Type: Enhancement Improvement of an existing feature

Comments

@kelvinballoo
Copy link
Collaborator

kelvinballoo commented May 6, 2024

Bug Description

When testing in RTL language, the 'Powered by Site Kit' is not properly aligned.

Steps to reproduce

  1. Set up the site language with one that is RTL, e.g. Persian, Arabic
  2. To view the Authorize Application screen with the customized styling applied, use the following URL with the hostname of your WP site.
    wp-admin/authorize-application.php?app_name=GoogleServiceIntegration&app_id=123e4567-e89b-12d3-a456-426614174000&success_url=https%3A%2F%2Fpublishers.google.com%2Fsettings%2Fauthorization%2Fwordpress&sitekit=true
  3. See error

Screenshots

Currently, the 'Powered by Site Kit' string is here and I think this should be moved to the left to mirror the WordPress version alignment:
Screenshot 2024-05-06 at 17 00 31

For reference, stock styling looks like this:

Screenshot 2024-05-06 at 17 02 24

Additional Context

  • PHP Version: 8.0
  • OS: MacOS Sonoma
  • Browser: Chrome
  • Plugin Version: 1.126.0
  • Device: Macbook Pro

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

Acceptance criteria

  • Ensure the 'Powered by Site Kit' text aligns correctly when viewed in an RTL (Right-to-Left) language context.
  • The alignment of the 'Powered by Site Kit' custom footer text should mirror the alignment observed in the default WordPress footer when the website is set to an RTL language.

Implementation Brief

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

  • Add RTL specific styles for the .googlesitekit-authorize-application__footer within the html[dir="rtl"] selector:
    • Set left: auto to remove the left positioning.
    • Set right: 0 to align the text to the right.
    • Set margin-right: 36px to reverse the margin applied to the left side in LTR for the smaller screen sizes.
    • For the larger screen sizes ($width-desktop + 1 + px), set margin-right: 160px to reverse the margin applied to the left side in LTR.

Test Coverage

  • No new tests are required for this change.

QA Brief

  • Follow the steps to reproduce the issue.
  • Ensure the 'Powered by Site Kit' text is aligned correctly when viewed in an RTL language context.
  • Ensure the alignment of the 'Powered by Site Kit' custom footer text mirrors the alignment observed in the default WordPress footer when the website is set to an RTL language.

Changelog entry

  • Ensure the "Powered by Site Kit" footer text on the Authorize Application screen is correctly aligned for RTL languages.
@kelvinballoo kelvinballoo added the Type: Enhancement Improvement of an existing feature label May 6, 2024
@ivonac4 ivonac4 added Team M Issues for Squad 2 Next Up Issues to prioritize for definition labels May 6, 2024
@hussain-t hussain-t added the P2 Low priority label May 7, 2024
@hussain-t hussain-t assigned hussain-t and unassigned hussain-t May 7, 2024
@techanvil techanvil self-assigned this May 13, 2024
@techanvil
Copy link
Collaborator

IB ✅

@techanvil techanvil removed their assignment May 13, 2024
@hussain-t hussain-t self-assigned this May 14, 2024
@ivonac4 ivonac4 removed the Next Up Issues to prioritize for definition label May 14, 2024
@hussain-t hussain-t removed their assignment May 15, 2024
@techanvil techanvil assigned techanvil and hussain-t and unassigned techanvil May 23, 2024
@hussain-t hussain-t assigned techanvil and unassigned hussain-t May 24, 2024
techanvil added a commit that referenced this issue Jun 3, 2024
…m-footer

Enhance/#8664 - Fix RTL styles for the Authorize Application screen custom footer
@techanvil techanvil removed their assignment Jun 3, 2024
@kelvinballoo
Copy link
Collaborator Author

QA Update ✅

This is verified good.

  • Just a note that in the ticket description the image having the red arrow towards to left is a bit misleading and should be ignored.
  • In the end, the text 'Powered by Site Kit' should be moved to the right, which is what we've implemented.
  • Tested on Mac OS (Chrome, Safari and Firefox) and Windows 11 (Edge)
  • Verified on Tablet breakpoint (iPad Air)
  • Verified on Mobile breakpoint (iPhone SE) even though there is nothing to verify there since the Powered by Site kit doesn't show on mobile

Moving this to Approval.

Screenshot 2024-06-05 at 16 05 18 Screenshot 2024-06-05 at 16 16 23

@kelvinballoo kelvinballoo removed their assignment Jun 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
P2 Low priority Team M Issues for Squad 2 Type: Enhancement Improvement of an existing feature
Projects
None yet
Development

No branches or pull requests

5 participants