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.

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

Jump to bottom

Make Events site multi-lingual with WPML #866

Draft
wants to merge 15 commits into
base: main
Choose a base branch
from
Draft

Make Events site multi-lingual with WPML #866

wants to merge 15 commits into from

Conversation

cjyabraham
Copy link
Collaborator

@cjyabraham cjyabraham commented Feb 9, 2024 •
edited

Dev instance

Blocks that aren't compatible with WPML Translation Editor and will either need configuring or we just tolerate untranslated text:

  • Countdown labels on Countdown block
  • Text on the Text on Image Block
  • Tab names on Tab Container Block
  • Expiry text on Buttons with Expiry
  • Labels on Sponsors Block
  • Labels on Pricing Block
  • "Show more" and other labels on Photonic Gallery block
  • Bios, names and title of speakers in Speakers Block
  • All text on Newsletter in footer

Other issues:

  • Foreign language pages redirect to wrong url
  • We need a better language switcher integrated into the Event topnav and/or footer
  • Parent properties aren't available in translation of a subpage; this is because the translated version is its own post and doesn't have any of the meta fields of the original post; try using this filter to get the original post
  • Topnav available pages is not being constructed correctly for foreign language
  • Sponsors don't show at the bottom of an Event when the WPML plugins are active; I've started an inquiry with WPML support to see if WPML is interfering with this query somehow
  • Prevent slugs from being translated; support issue
  • After I do a few things my lfeventsci.lndo.site seems to start producing at 500 error in wp-admin after which I need to clear my local browser cookies for that site
  • Add languages selector to the footer
  • Show presence indicator of current language in selector
  • Speakers not picking up correct colors; also Headers with event gradient not getting gradient colors on translation pages
  • Warnings at the top of this admin screen
  • Sponsors still not showing on Japanese translations of pages; see support issue.

Resources:

Notes:

  • after changing the wpml-config.xml file, you need to go here and rescan the theme for it to get picked up. Then purge the cache.

On deploy:

  • use SFTP to go in and create /files/languages/ directory
  • copy over settings for language selectors etc.
  • track the WPML but and remove this workaround when it is resolved

@cjyabraham
Add WPML plugins
1974c86 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
Don't ignore icons
09577bd 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
set language directory for WPML on Pantheon
238dbd2 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
try enforcing https via pantheon yaml
77c9ecb 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
Merge branch 'main' into wpml
22f689e
@cjyabraham
Add wpml-config file
bc30f85 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
Add more blocks to the WPML config
1e97660 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham cjyabraham marked this pull request as draft February 14, 2024 08:46
@cjyabraham cjyabraham changed the title Add WPML plugins Make Events site multi-lingual with WPML Feb 14, 2024
@cjyabraham
Adds language selector to the Event topnav
366387e 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
Shows language selector only when there is a translation
3755a1c 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
Fixes getting the parent on translation pages
d529e37 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
Differentiates between the immediate parent and english-lang parent o…
deddf3b 
…f a post

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
fix sniffs
327f7d1 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
Added nice icon for the languages menu
8b45775 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@thetwopct
Copy link
Collaborator

I can see this is a work in progress. But a few things I noticed:

Language Menu - a small thing, but could we order these so the active language is not first in the list? If the menu title is X language, the first item in the menu being English seems strange to me.

Mobile Menu - The "view all events" seems to be expanded by default which makes the language selector look a bit disconnected from the rest of the menu.

Footer - should we add the language selector there too?

Slugs - the slugs are being translated; I would not recommend introducing IRIs due to the complexity it introduces (when processing URLs), the compatibility across browsers/platforms, the compatibility with link sharing and social sharing software and utilities, SEO, and for reasons of user confusion.

thetwopct
thetwopct reviewed Feb 20, 2024
View reviewed changes
web/wp-content/themes/lfevents/library/lfe-functions.php Outdated
@@ -770,7 +770,9 @@ function lfe_get_language_selector( $background_style, $menu_text_color ) {
$my_current_lang = apply_filters( 'wpml_translated_language_name', null, $my_current_lang, false );

echo '<li class="page_item page_item_has_children language-selector">';
echo '<a href="#">' . esc_html( $my_current_lang ) . '</a>';
echo '<a href="#">';
echo '<svg viewBox="0 0 24 24" width=32 ><path fill="currentColor" d="m11.62965 16.61452c-1.13922-.692-3.111-2.36313-3.153-2.32718a28.32942 28.32942 0 0 1 -3.30095 2.26177c-.68823.39708-1.38892.49615-1.82064-.09139a.992.992 0 0 1 .26656-1.40406c.00852-.00391 2.44665-1.594 3.25973-2.29678a11.64387 11.64387 0 0 1 -2.23281-3.53521 1.07774 1.07774 0 0 1 .52716-1.36835c.52715-.22205 1.049-.12664 1.48663.61989a10.33341 10.33341 0 0 0 1.8143 2.89517 10.853 10.853 0 0 0 2.1563-4.3469l-7.63293-.02148v-2.00685h4.8124v-.99406a.98574.98574 0 1 1 1.9713 0v.99406h5.1703v2.00685h-2.08646a17.03869 17.03869 0 0 1 -2.64065 5.75689 15.88157 15.88157 0 0 0 2.30149 1.66068l2.3092-5.66617a1.162 1.162 0 0 1 2.1802.01591l3.01041 7.389 1.85638 4.385h-2.47393l-1.08252-2.53924h-4.84082l-.888 2.53924h-2.5993l.287-.69166zm4.31307-5.16715-1.67531 4.55419h3.35059z"></path></svg>';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't valid in the SVG? - width=32

<svg viewBox="0 0 24 24" width="32"><path fill="currentColor" d="m11.62965 16.61452c-1.13922-.692-3.111-2.36313-3.153-2.32718a28.32942 28.32942 0 0 1 -3.30095 2.26177c-.68823.39708-1.38892.49615-1.82064-.09139a.992.992 0 0 1 .26656-1.40406c.00852-.00391 2.44665-1.594 3.25973-2.29678a11.64387 11.64387 0 0 1 -2.23281-3.53521 1.07774 1.07774 0 0 1 .52716-1.36835c.52715-.22205 1.049-.12664 1.48663.61989a10.33341 10.33341 0 0 0 1.8143 2.89517 10.853 10.853 0 0 0 2.1563-4.3469l-7.63293-.02148v-2.00685h4.8124v-.99406a.98574.98574 0 1 1 1.9713 0v.99406h5.1703v2.00685h-2.08646a17.03869 17.03869 0 0 1 -2.64065 5.75689 15.88157 15.88157 0 0 0 2.30149 1.66068l2.3092-5.66617a1.162 1.162 0 0 1 2.1802.01591l3.01041 7.389 1.85638 4.385h-2.47393l-1.08252-2.53924h-4.84082l-.888 2.53924h-2.5993l.287-.69166zm4.31307-5.16715-1.67531 4.55419h3.35059z"></path></svg>

Why is Japanese symbol suitable to mean "translations"?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure but it seems to be the standard icon for "translations".

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't even realise the 2nd character was an A as it was joined. Joining the characters together seems to be the exception rather than the rule. We can do better.

Screenshot-2024-02-20 --14 52 06

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I kinda like it. I stole it from jetbrains.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could place the current language after the icon in the topnav, to make it more clear. I had it this way initially but figured it wasn't worth the space.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally I always find it a weird design pattern to inform the user what language is currently displayed so I don't see any benefit in it.

thetwopct
thetwopct reviewed Feb 20, 2024
View reviewed changes
web/wp-content/themes/lfevents/library/lfe-functions.php Outdated

echo '<li class="page_item page_item_has_children language-selector">';
echo '<a>Language</a>';
echo '<a href="#">Language</a>';
Copy link
Collaborator

@thetwopct thetwopct Feb 20, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This introduces accessibility and SEO issues. A <button> should be used.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But I realise we use this pattern everywhere so probably ok to leave for now. I should probably update all of our menus

@cjyabraham
WPML workaround to get sponsors showing again
280f454 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
@cjyabraham
Fixed legal links
f3e8ee5 
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thetwopct thetwopct thetwopct left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@cjyabraham @thetwopct @LFCIBot