Add BlogPage.related_posts

[bmispelon]

Link to Ticket

Description of Changes Made

This PR adds a new RelatedBlogPage model which enables editor to select related blog pages that will replace the ones that were automatically generated before.

Acceptance criteria (from ticket)

(✅ means implemented, ❌ means not implemented)

• ✅ Scenario: Selecting up to three related blog posts
• ❌ Scenario: Blog posts list is filtered by division (1)
• ✅ Scenario: No manual selection triggers automatic related posts
• ✅ Scenario: Displaying manually selected blog posts
• ✅ Scenario: Partial manual selection does not trigger auto-fill (2)

(1): I could not figure out how to filter the list, but I think I would know how to implement validation where the admin would get an error when saving, telling them they need to pick a page from the same division

(2) I'm not sure I understood this AC (the title and description seems to contradict each other). I took it to mean that the list of related posts should be padded to always be of length 3. So if I select only 1 related post manually, the system should fill in 2 automatic related posts (and the manually selected one should come first)

How to Test

1. Edit a blog page in the wagtail admin
2. In the promote tab, there's a new "related posts" field where you can select 0-3 (inclusive) blog posts
3. Once the page is published, observe that the selected posts appear at the bottom under the "More" heading
4. If no posts were selected manually, observe that (up to) 3 posts are listed that re fetched from the same division

Screenshots

Expand to see more

MR Checklist

• Add a description of your pull request and instructions for the reviewer to verify your work.
• If your pull request is for a specific ticket, link to it in the description.
• Stay on point and keep it small so the merge request can be easily reviewed.
• Tests and linting passes.

Unit tests

• Added
• Not required

Documentation

• Updated build docs
• Updated editor guidelines (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Updated field spec (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Not required

Browser testing

• I have tested in the following browsers and environments (edit the list as required)
  • Latest version of Chrome on mac
  • Latest version of Firefox on mac
  • Latest version of Safari on mac
  • Safari on last two versions of iOS
  • Chrome on last two versions of Android
• Not required

Data protection

• Not relevant
• This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

• I have tested the changes in both light and dark mode
• The change is not relevant to dark and light mode

Accessibility

• Automated WCAG 2.1 tests pass
• HTML validation passes
• Manual WCAG 2.1 tests completed
• I have tested in a screen reader
• I have tested in high-contrast mode
• Any animations removed for prefers-reduced-motion
• Not required

Sustainability

• Images are optimised and lazy-loading used where appropriate
• SVGs have been optimised
• Performance and transfer of data considered
• If JavaScript is needed alternatives have been considered
• Not required

Pattern library

• The pattern library component for this template displays correctly, and does not break parent templates
• The styleguide is updated if relevant
• Changes are not relevant the pattern library

[SharmaineLim]

Thanks, Baptiste, looking good! Just left a comment on the expected ordering– we might want to check it with Lily.

(1): I could not figure out how to filter the list, but I think I would know how to implement validation where the admin would get an error when saving, telling them they need to pick a page from the same division

Yeah, I don't think that's doable with the current parameters available to PageChooserPanel.

(2) I'm not sure I understood this AC (the title and description seems to contradict each other). I took it to mean that the list of related posts should be padded to always be of length 3. So if I select only 1 related post manually, the system should fill in 2 automatic related posts (and the manually selected one should come first)

I read that AC as well and agree. That's also usually how "related pages" work on our other projects.

[SharmaineLim]

It might be good to mention the "order by date" thing in the help text, but aside from that this LGTM!

[bmispelon]

It might be good to mention the "order by date" thing in the help text, but aside from that this LGTM!

I've added a note in the help_text and squashed all the commits together. I'll deploy to staging now 🚀