Add CMS-managed HomePage and Donate block (#16980)

Introduce Wagtail CMS support for the homepage, starting with the donate section. This creates the foundation for migrating homepage  content to the CMS.

Changes:
- Add HomePage model StreamField that has DonateBlock in it
- Add DonateBlock with configurable background color and anchor ID
- Add 2:1 aspect ratio fill specs for image renditions
- Duplicate the rest of the m24 homepage content as static content for now

Note: This page exists alongside the current homepage. URL routing migration will be handled separately.

Author: stephaniehobson

bedrock/base/templates/macros-m24.html

@@ -104,3 +104,38 @@
   </a>
 </li>
 {%- endmacro %}
+
+{#
+  Donate Section
+  HTML Import: {% from "macros-m24.html" import m24_donate with context %}
+  CSS Bundle: Requires m24-home CSS bundle
+  Usage: Use with {% call %} block to pass body content.
+  Macro Parameters:
+    heading (Required): String for the section heading.
+    heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling. Defaults to 2.
+    image (Required): Pre-rendered image HTML (from resp_img, srcset_image, or raw img tag).
+    link_new_window: Boolean to open link in new window. Defaults to False.
+    link_text (Required): String for the call-to-action button text.
+    link_url (Required): String URL for the call-to-action button.
+#}
+{% macro m24_donate(
+  heading,
+  image,
+  link_text,
+  link_url,
+  link_new_window=False,
+  heading_level=2
+) -%}
+<div class="m24-c-donate">
+  <h{{ heading_level }} class="m24-c-donate-heading">{{ heading }}</h{{ heading_level }}>
+  <div class="m24-c-donate-body">
+    {{ caller() }}
+  </div>
+  <div class="m24-c-donate-media">
+    {{ image }}
+  </div>
+  <p class="m24-c-donate-cta">
+    <a href="{{ link_url }}" class="m24-c-cta" data-cta-text="{{ link_text|slugify }}"{% if link_new_window %} target="_blank" rel="noopener"{% endif %}>{{ link_text }}</a>
+  </p>
+</div>
+{%- endmacro %}

bedrock/cms/models/base.py

@@ -34,6 +34,10 @@ class AbstractBedrockCMSPage(WagtailBasePage):
         `serve_password_required_response` method, via the @method_decorator above
     """
 
+    # Fluent (.ftl) files for localization. Override in subclasses to specify
+    # page-specific FTL files. If None, only FLUENT_DEFAULT_FILES will be used.
+    ftl_files = None
+
     # Make the `slug` field 'synchronised', so it automatically gets copied over to
     # every localized variant of the page and shouldn't get sent for translation.
     # See https://wagtail-localize.org/stable/how-to/field-configuration/
@@ -67,9 +71,8 @@ def _render_with_fluent_string_support(self, request, *args, **kwargs):
         # can swap that for our Fluent-compatible rendering method
         template = self.get_template(request, *args, **kwargs)
         context = self.get_context(request, *args, **kwargs)
-        # We shouldn't need to spec any special ftl_files param for render()
-        # here because the global spec is in settings.FLUENT_DEFAULT_FILES
-        return l10n_utils.render(request, template, context)
+        # Pass page-specific ftl_files if defined, otherwise only FLUENT_DEFAULT_FILES will be used
+        return l10n_utils.render(request, template, context, ftl_files=self.ftl_files)
 
     def serve(self, request, *args, **kwargs):
         # Need to replicate behaviour in https://github.com/wagtail/wagtail/blob/stable/5.2.x/wagtail/models/__init__.py#L1928

bedrock/cms/models/images.py

@@ -19,6 +19,13 @@
     # regenerate it, if needed, so that the image library is updated locally after
     # downloading images from Dev, Stage or Prod
     "max-165x165",
+    # 2:1 aspect ratio renditions for homepage donate block (and similar uses)
+    "fill-400x200",
+    "fill-600x300",
+    "fill-800x400",
+    "fill-1000x500",
+    "fill-1200x600",
+    "fill-1400x700",
 ]
 
 

bedrock/mozorg/blocks/home.py

@@ -0,0 +1,78 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+from wagtail import blocks
+from wagtail.images.blocks import ImageChooserBlock
+from wagtail_link_block.blocks import LinkBlock
+
+
+class DonateBlockSettings(blocks.StructBlock):
+    """Settings for the donate block."""
+
+    background_color = blocks.ChoiceBlock(
+        choices=[
+            ("pink", "Pink"),
+            ("green", "Green"),
+            ("orange", "Orange"),
+            ("gray", "Gray"),
+        ],
+        required=False,
+        help_text="What color should the background be?",
+    )
+
+    anchor_id = blocks.CharBlock(
+        required=False,
+        max_length=100,
+        help_text=(
+            "Optional: Add an ID to make this section linkable. "
+            "Will be converted to URL-safe format (e.g., 'Donate Section' becomes 'donate-section')."
+        ),
+    )
+
+    class Meta:
+        icon = "cog"
+        collapsed = True
+        label = "Settings"
+        label_format = "Background: {background_color} - ID: {anchor_id}"
+        form_classname = "compact-form struct-block"
+
+
+class DonateBlock(blocks.StructBlock):
+    """Block for the donate section on the homepage."""
+
+    settings = DonateBlockSettings()
+
+    heading = blocks.CharBlock(
+        max_length=255,
+    )
+
+    body = blocks.RichTextBlock(
+        features=["bold", "link"],
+        help_text="Keep this to 2 paragraphs or fewer.",
+    )
+
+    image = ImageChooserBlock(
+        help_text="Ideal image size is 1400 x 700. Image will be cropped to a 2:1 aspect ratio.",
+    )
+
+    image_alt = blocks.CharBlock(
+        max_length=255,
+        required=False,
+        help_text="A concise description of the image for someone who can't see it.",
+    )
+
+    cta_text = blocks.CharBlock(
+        max_length=50,
+        label="Link text",
+    )
+
+    cta_link = LinkBlock(
+        label="Link destination",
+    )
+
+    class Meta:
+        template = "mozorg/cms/home/blocks/donate_block.html"
+        icon = "heart"
+        label = "Donate Section"
+        label_format = "{heading}"

bedrock/mozorg/fixtures/__init__.py

@@ -0,0 +1,3 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.

bedrock/mozorg/fixtures/base_fixtures.py

@@ -0,0 +1,58 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+from io import BytesIO
+
+from django.core.files.base import ContentFile
+
+from PIL import Image
+from wagtail.models import Site
+
+from bedrock.cms.models import BedrockImage, StructuralPage
+
+
+def get_placeholder_image(width=1400, height=700, color=(117, 79, 224)):
+    """Create a placeholder image for testing.
+
+    Args:
+        width: Image width in pixels (default 1400 for 2:1 ratio)
+        height: Image height in pixels (default 700 for 2:1 ratio)
+        color: RGB tuple for fill color
+
+    Returns:
+        BedrockImage instance
+    """
+    image = Image.new("RGB", (width, height), color)
+    image_buffer = BytesIO()
+    image.save(image_buffer, format="PNG")
+    image_buffer.seek(0)
+
+    bedrock_image, _ = BedrockImage.objects.get_or_create(
+        title="Placeholder Image for Testing",
+        defaults={
+            "file": ContentFile(image_buffer.read(), "placeholder_image.png"),
+        },
+    )
+    return bedrock_image
+
+
+def get_test_index_page():
+    """Get or create a test index page for block tests.
+
+    Returns:
+        StructuralPage instance to use as parent for test pages
+    """
+    site = Site.objects.get(is_default_site=True)
+    root_page = site.root_page
+
+    index_page = StructuralPage.objects.filter(slug="block-tests-index").first()
+    if not index_page:
+        index_page = StructuralPage(
+            slug="block-tests-index",
+            title="Block Tests Index Page",
+        )
+        root_page.add_child(instance=index_page)
+        index_page.save_revision().publish()
+
+    return index_page

bedrock/mozorg/fixtures/donate_fixtures.py

@@ -0,0 +1,137 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+
+from bedrock.mozorg.fixtures.base_fixtures import get_placeholder_image, get_test_index_page
+from bedrock.mozorg.models import HomePage
+
+
+def get_donate_variants(image_id: int) -> list[dict]:
+    """Return list of DonateBlock data variants for testing.
+
+    Args:
+        image_id: ID of the placeholder image to use
+
+    Returns:
+        List of block data dictionaries representing different configurations
+    """
+    return [
+        # Variant 1: Default gray background, no anchor
+        {
+            "type": "donate_block",
+            "value": {
+                "settings": {
+                    "background_color": "gray",
+                    "anchor_id": "",
+                },
+                "heading": "Support Mozilla",
+                "body": "<p>Help us build a better internet for everyone.</p>",
+                "image": image_id,
+                "image_alt": "Mozilla community event",
+                "cta_text": "Donate Now",
+                "cta_link": {
+                    "link_to": "custom_url",
+                    "custom_url": "https://foundation.mozilla.org/donate",
+                    "new_window": False,
+                },
+            },
+            "id": "donate-variant-1",
+        },
+        # Variant 2: Pink background
+        {
+            "type": "donate_block",
+            "value": {
+                "settings": {
+                    "background_color": "pink",
+                    "anchor_id": "",
+                },
+                "heading": "Join the Movement",
+                "body": "<p>Your donation powers our mission.</p><p>Every contribution counts.</p>",
+                "image": image_id,
+                "image_alt": "",
+                "cta_text": "Give Today",
+                "cta_link": {
+                    "link_to": "custom_url",
+                    "custom_url": "https://foundation.mozilla.org/give",
+                    "new_window": False,
+                },
+            },
+            "id": "donate-variant-2",
+        },
+        # Variant 3: With anchor_id
+        {
+            "type": "donate_block",
+            "value": {
+                "settings": {
+                    "background_color": "green",
+                    "anchor_id": "donate-section",
+                },
+                "heading": "Make a Difference",
+                "body": "<p>Support open source.</p>",
+                "image": image_id,
+                "image_alt": "Open source illustration",
+                "cta_text": "Contribute",
+                "cta_link": {
+                    "link_to": "custom_url",
+                    "custom_url": "https://foundation.mozilla.org/contribute",
+                    "new_window": False,
+                },
+            },
+            "id": "donate-variant-3",
+        },
+        # Variant 4: With new_window=True
+        {
+            "type": "donate_block",
+            "value": {
+                "settings": {
+                    "background_color": "orange",
+                    "anchor_id": "",
+                },
+                "heading": "Support Our Work",
+                "body": "<p>Opens in a <strong>new window</strong>.</p>",
+                "image": image_id,
+                "image_alt": "",
+                "cta_text": "Donate (New Window)",
+                "cta_link": {
+                    "link_to": "custom_url",
+                    "custom_url": "https://foundation.mozilla.org/external",
+                    "new_window": True,
+                },
+            },
+            "id": "donate-variant-4",
+        },
+    ]
+
+
+def get_donate_test_page() -> HomePage:
+    """Create a HomePage with all donate block variants for testing.
+
+    Returns:
+        HomePage instance with donate blocks populated
+    """
+    # Ensure we have a placeholder image
+    placeholder_image = get_placeholder_image()
+
+    # Get variants with the image ID
+    variants = get_donate_variants(placeholder_image.id)
+
+    # Get the index page as parent
+    index_page = get_test_index_page()
+
+    # Check if test page already exists
+    test_page = HomePage.objects.filter(slug="donate-block-test").first()
+    if test_page:
+        return test_page
+
+    # Create the test page with all variants
+    test_page = HomePage(
+        title="Donate Block Test Page",
+        slug="donate-block-test",
+        donate=variants,
+    )
+
+    index_page.add_child(instance=test_page)
+    test_page.save_revision().publish()
+
+    return test_page