AI FSE Landing page

[moyvincent]

Description

The partner reached out and would like to push the template in templates/ai-fse.php inc/block-patterns.php functions.php to production so that they can test this on a new page.

This is for a custom HTML template they created for opensource.org/ai which has been integrated into an FSE: https://open-source-initiative-development.mystagingwebsite.com/ai-fse-2025

Further questions

• The partner will also want guidance in building the patterns due to being unable to change all the resources within Gutenberg.
• Partner would also want to integrate WordPress menus for the Navbars and the Supported CPT for displaying some endorsement quotes. (This could wait a little longer)

Reference

Zendesk

[gin0115]

Hey

Had a good look trough the template made and we can make this into something we can use on the site, but will need to be done in a more WP fashion.

What we probably need to do is the following, as this is an older theme, we have no modern FSE

Create a custom header (for the nav), we can then use this header on some templates to swap it out for an "AI header"
Create a collection of custom or modify existing blocks to match the functionality required
We can then create patterns and sub templates that offer these blocks of functionality.

I will have a look at what is the on the site block wise and attempt to create a version of that page with native blocks and come back when we know what are missing.

[smaffulli]

Thanks Glynn. If migrating to an FSE-enabled theme is easier, we can take that route, too. Just leaving options here, not stating any preference :)

…

On Mon, Mar 3, 2025 at 3:38 PM Glynn Quelch ***@***.***> wrote: Hey Had a good look trough the template made and we can make this into something we can use on the site, but will need to be done in a more WP fashion. What we probably need to do is the following, as this is an older theme, we have no modern FSE Create a custom header (for the nav), we can then use this header on some templates to swap it out for an "AI header" Create a collection of custom or modify existing blocks to match the functionality required We can then create patterns and sub templates that offer these blocks of functionality. I will have a look at what is the on the site block wise and attempt to create a version of that page with native blocks and come back when we know what are missing. — Reply to this email directly, view it on GitHub <#169 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKJJAGXYDOB3ZSVNBK6ZPL2SRSNJAVCNFSM6AAAAABXLXRDT2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOJUGYYTONBVGE> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***> [image: gin0115]*gin0115* left a comment (OpenSourceOrg/dotOrg#169) <#169 (comment)> Hey Had a good look trough the template made and we can make this into something we can use on the site, but will need to be done in a more WP fashion. What we probably need to do is the following, as this is an older theme, we have no modern FSE Create a custom header (for the nav), we can then use this header on some templates to swap it out for an "AI header" Create a collection of custom or modify existing blocks to match the functionality required We can then create patterns and sub templates that offer these blocks of functionality. I will have a look at what is the on the site block wise and attempt to create a version of that page with native blocks and come back when we know what are missing. — Reply to this email directly, view it on GitHub <#169 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKJJAGXYDOB3ZSVNBK6ZPL2SRSNJAVCNFSM6AAAAABXLXRDT2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOJUGYYTONBVGE> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[gin0115]

Hey,

Sorry for the lack of communication—it's been a hectic week.

Moving the site to a full FSE build would be a significant undertaking. Since we have a lot of custom templates and PHP-driven content, it would likely require a full rebuild rather than just a rework.

That said, regarding the rework, the template isn't something that can simply be integrated into a WordPress theme with reusable patterns throughout the site. So, here’s what I’ve done:

Created a custom template called "AI Wide"

This supports a much wider screen size, allowing for full-width cover images and large content blocks. It also includes a custom navigation menu (AI), so any pages using this template can have their own dedicated menu.

Added a "slide-up" animation for headings

When applied, the heading will slide into view as it appears on the screen.

Created a counter block

This allows you to define a start and end value, along with a duration, so the counter animates up or down accordingly. You can also add text before and after the counter to create dynamic content (e.g., Distance Travelled: {0 -> 512} miles).

Added Black & White with Fade style to images. Setting this will show images as black and white on load, but on hover they will revert to color with a slight fade.

Added an "OSI CARD" style for groups

This applies the same rounded look and drop shadow as seen in the mockup page.

Introduced a "Round Logo with Border" image style

Selecting this option will add a ring around images, as seen in the card example above.

---

Additional CSS Adjustments

• The round groups in the endorsement panel can now be displayed as 300x300 circles with overflow hidden by adding the class small-round-details.
• The tabs block now has a custom style—applying button-tabs to additional classes will render them with green and white buttons.
• The slider is from CoBlocks, and we’ll likely need to tweak its CSS for better styling.

Feel free to experiment with the page. The main updates are the new template and block tweaks, but you have flexibility in how you build the page. Hopefully, this provides everything needed to align with the mockup!

If you want to do any customisations in the customizer, you can target this template only with body.page-template-ai-wide

[gin0115]

You can see the page here
https://open-source-initiative-development.mystagingwebsite.com/?page_id=23234&preview=true&aiEnableCheckShortcode=true
(its in draft, so you will need to be logged in to see)

[moyvincent]

Hi @gin0115,

Here is some feedback from the partner:

• Remove breadcrumbs:
  

• The dots in the carousel gallery look stretched. The gallery should be the same as in /ai/endorsements

• These numbers are not getting populated:
  

• The styling in this section should be improved to look like /ai-fse-2025
  

Please let me know if you have questions about this. Thank you!

[gin0115]

Hey

Ive got this pencilled in for next week, this all should be doable. However in regards this section

is this something that needs to be reusable? Its a weird setup, i can just do it with a class (like it is now) or we can look at making this a block/variation that can be reused. Although how customisable does it need to be, if it was resusable?

[moyvincent]

Hi @gin0115,

is this something that needs to be reusable? Its a weird setup, i can just do it with a class (like it is now) or we can look at making this a block/variation that can be reused. Although how customisable does it need to be, if it was resusable?

The partner confirmed that the block probably wouldn’t be reused, but they would need to be able to edit the text and images inside.

Thank you!

[gin0115]

OK i will leave it as it is and try to get the styling to match more.

[gin0115]

Counter was not working as the plugin had been removed and replaced with another that caused a fatal error when activating. When i looked at this plugin it seemed lots of its files were missing. Ive uploaded a copy if we need it.

Will address the rest on monday, run out of hours this week

counter.zip

[moyvincent]

Hi @gin0115!

Wanted to follow up with you on this.

Thank you!

[ajolo2ky]

Hi team, any news on this? Thanks,

[gin0115]

Hey

I have got the template mostly finished off and uploaded. I still need to fight the breakpoints on mobile to make them act like the mockup, but hopefully were almost there?

[gin0115]

I have some tweaks for mobile sytling. A lot of spacing between sections etc can all be changed via the editor. There are some new things that can be done.

Adding is-style-spin-green to a nav item (on the AI template menu), will turn that link into the spinning green button (you can also add is-style-spin-white for the white one).

You can apply these 2 styles to any button, but selecting either of the 2 options

Just be sure to remove any background colour, or it will act a bit odd.

Counter block now has a custom style, this will add the % symbol after a number

The slider is still not perfect, its pretty restrictive in what you can and cant do. I wasnt able to make this be responsive in regards the item size. Not sure if you want to try another block.

Ive added various break points in and ive done my best with the very irregular Research, Co-Design and Endorsements feature, not sure whats best here, but hopefully it looks ok.

The footer section has the links hard coded, not sure how much control you want on these? They can be turned into menus.

---

There is an issue where the counter plugin keeps being removed, this is due to a name conflict and its trying to replace with a different plugin, ive added a temp fix for this, but will reflect upstream in our code repos.

[moyvincent]

Thanks a lot @gin0115 !

I will also reach out to the partner in Zendesk.

I did notice a small issue with the accordion icon in this section on mobile design:

Setting the width from 100% to 5% for the this class .plethoraplugins-accordion.plethoraplugins-theme__minimal .pds-accordion__icon svg fixes it(this was done using browser inspect):

.

Will update back here once I get feedback from the partner on the recent changes.