feat: use wordpress for static pages

[4nt0ineB]

What

Experience of using Wordpress as a CMS for static pages. Page content is retrieved from the API.
The goal is to render the page as close as it is displayed in the Gutenberg editor.

• WPML set up
• Procedure to migrate off-web pages to wordpress
• Enable handling redirects in openfoodfacts-web #10539
• Crowdin integration

Screenshot

Related issue(s) and discussion

• Fixes Experiment: Try to integrate a wordpress page into the main site #7983
• Fixes Enable handling redirects in openfoodfacts-web #10539

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 28.85906% with 106 lines in your changes missing coverage. Please review.

Project coverage is 49.08%. Comparing base (dc04d18) to head (6d48edf).
Report is 613 commits behind head on main.

Files	Patch %	Lines
lib/ProductOpener/CMS.pm	38.20%	46 Missing and 9 partials ⚠️
lib/ProductOpener/Routing.pm	4.16%	23 Missing ⚠️
lib/ProductOpener/Display.pm	17.39%	19 Missing ⚠️
lib/ProductOpener/Index.pm	0.00%	9 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #10596      +/-   ##
==========================================
- Coverage   49.54%   49.08%   -0.46%     
==========================================
  Files          67       78      +11     
  Lines       20650    22226    +1576     
  Branches     4980     5302     +322     
==========================================
+ Hits        10231    10910     +679     
- Misses       9131     9981     +850     
- Partials     1288     1335      +47     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[stephanegigandet]

Looks great to me, thank you!

[alexgarel]

First thanks for this great work !

I would prefer the cache to be handled differently, I think this way is problematic.

@4nt0ineB it would be important also to write a procedure on how to migrate from openfoodfacts-web to wordpress content progressively (how to replace a page). I think it could go with implementing #10539 (so basically, you would create page in wordpress and publish, then put a redirect to content/new-page in openfoodfacts-web).

[teolemon]

Would it be possible to have the WordPress id and/or slug and/or custom properties exposed to ProductOpener so that we can create deep links like: "Help translate this article on Crowdin" or "Help translate the 2 associated visuals on Canva".
page_wp_id:17
or crowdin_page_wp_id:345
page_visual_1_translate_url:http://
page_visual_2_translate_url:http://

[4nt0ineB]

Would it be possible to have the WordPress id and/or slug and/or custom properties exposed to ProductOpener so that we can create deep links like: "Help translate this article on Crowdin" or "Help translate the 2 associated visuals on Canva". page_wp_id:17 or crowdin_page_wp_id:345 page_visual_1_translate_url:http:// page_visual_2_translate_url:http://

I haven't looked into Crowdin integration yet. But if a crowdin_id field is stored and exposed in the WPML api then I guess its possible.

[stephanegigandet]

I think what's missing in the PR is how we handle the different URLs slugs that are translated.

e.g. if we create a page "A new page", we want it to be available at world.openfoodfacts.org/content/a-new-page but also fr.openfoodfacts.org/content/a-new-page

when a new French translation is added, we want it to be available at fr.openfoodfacts.org/content/une-nouvelle-page , and fr.openfoodfacts.org/content/a-new-page should redirect to it.

but we shouldn't have to edit the .redirect file (as described here: https://wiki.openfoodfacts.org/Open_Food_Facts_Contents ) each time someone adds a translation..

am I missing something?

Ideally PO should find out from wordpress which pages are available, which are translated and what are their urls. Then we use that in the routing and displaying of the translated content if available, and the English content if not.

We could then automatically replace things like <content_url:a-new-page> to https://fr.openfoodfacts.org/content/une-nouvelle-page

[4nt0ineB]

I think what's missing in the PR is how we handle the different URLs slugs that are translated.

e.g. if we create a page "A new page", we want it to be available at world.openfoodfacts.org/content/a-new-page but also fr.openfoodfacts.org/content/a-new-page

when a new French translation is added, we want it to be available at fr.openfoodfacts.org/content/une-nouvelle-page , and fr.openfoodfacts.org/content/a-new-page should redirect to it.

but we shouldn't have to edit the .redirect file (as described here: https://wiki.openfoodfacts.org/Open_Food_Facts_Contents ) each time someone adds a translation..

am I missing something?

Ideally PO should find out from wordpress which pages are available, which are translated and what are their urls. Then we use that in the routing and displaying of the translated content if available, and the English content if not.

We could then automatically replace things like <content_url:a-new-page> to https://fr.openfoodfacts.org/content/une-nouvelle-page

Yes what I did is that PO fetches all the available translations. I think the redirection was done for SEO purposes.

[sonarcloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[john-gom]

Sorry for coming late to this but should we consider loading the wordpress content from the browser so that we are reducing the amount of traffic that flows through ProductOpener?

[alexgarel]

Sorry for coming late to this but should we consider loading the wordpress content from the browser so that we are reducing the amount of traffic that flows through ProductOpener?

Yes it was considered, but we didn't want to maintain a specific layout on wordpress, and we wanted to have the menu and so on…

[john-gom]

Sorry for coming late to this but should we consider loading the wordpress content from the browser so that we are reducing the amount of traffic that flows through ProductOpener?

Yes it was considered, but we didn't want to maintain a specific layout on wordpress, and we wanted to have the menu and so on…

You can use module federation with a micro frontend to achieve this

[alexgarel]

Closing in favour of #10992