Create Image + Caption block

[maribedran]

One-line summary

Create a new block to support Image + Captions on blog articles.

Significant changes and points to review

Create the new component, CMS block, and corresponding pattern library entry and tests.

Issue / Bugzilla link

Part of the #1627

Testing

Run ./manage.py load_page_fixtures and check blog articles such as http://localhost:8000/en-US/flare-docs/sample-pages/test-blog-index/test-featured-blog-article-4/

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.91%. Comparing base (8712854) to head (1ff3579).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1658      +/-   ##
==========================================
+ Coverage   87.89%   87.91%   +0.01%     
==========================================
  Files         167      167              
  Lines       11421    11435      +14     
==========================================
+ Hits        10039    10053      +14     
  Misses       1382     1382              

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

Adds a new Wagtail StreamField block to support “Image + Caption” content in blog articles, with accompanying templates, styling, fixtures, and automated coverage (pytest + Playwright visual regression). This aligns with the WordPress import work in #1627 by expanding the set of supported article body blocks.

Changes:

• Introduce ImageCaptionBlock and enable it in BlogArticlePage.body.
• Add rendering templates + pattern-library component for Image + Caption, plus styling in Flare media/blog CSS.
• Extend blog fixtures and tests (pytest block rendering assertions + Playwright visual regression coverage).

Reviewed changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tests/playwright/specs/visual-regression/image-caption.spec.js	Adds visual regression coverage for the new pattern-library component (light + dark).
springfield/cms/tests/test_blog_pages.py	Updates fixture helper import/usage after renaming the blog article factory.
springfield/cms/tests/test_blocks.py	Adds an integration-style test validating rendered <figure>/<figcaption> output and image variant attributes.
springfield/cms/templates/pattern-library/components/flare/media/image_caption.yaml	Provides pattern-library demo context for the Image + Caption component.
springfield/cms/templates/pattern-library/components/flare/media/image_caption.html	Adds pattern-library template wiring for the new component.
springfield/cms/templates/components/image-caption.html	Implements the shared component markup (<figure> + <figcaption>).
springfield/cms/templates/cms/blocks/image-caption.html	Implements the CMS block template (uses richtext + removes wrapping <p>).
springfield/cms/models/pages.py	Registers image_caption as an available block type in BlogArticlePage.body.
springfield/cms/fixtures/blog_fixtures.py	Adds caption fixture content and enables fixtures to produce captioned vs plain image content.
springfield/cms/blocks.py	Defines the new ImageCaptionBlock (image variants + rich text caption).
media/css/cms/pages/flare-blog.css	Adds blog-article-specific sizing for images rendered via the image variants utility.
media/css/cms/components/flare-media.css	Adds component styling for .fl-image-caption and caption text.

[lucianoratamero]

looks good but take a look at the copilot comment, see if it makes sense

[lucianoratamero]

quick question: it's supposed to be square shaped, right?
this is what I'm getting:

[maribedran]

@lucianoratamero for now yes. We can add an option to add a border radius at some point.