CMS about us page

bedrock/mozorg/blocks/common.py

@@ -340,13 +340,23 @@ class ShowcaseBlock(blocks.StructBlock):
     )
 
     sub_heading = blocks.CharBlock(
+        required=False,
         max_length=255,
         help_text="Section sub heading heading. Use sentence case.",
     )
 
+    two_column_layout = blocks.BooleanBlock(
+        required=False,
+        default=False,
+        label="Make it two column layout",
+        inline_form=True,
+        help_text="Make the title and body content into a two-column layout.",
+    )
+
     cta_divider = DividerBlock(label="Call-to-action")
 
     cta_text = blocks.CharBlock(
+        required=False,
         max_length=50,
         label="Link text",
         help_text="Use sentence case (e.g., 'Read the report', 'Read more').",
@@ -486,6 +496,26 @@ class Meta:
         label_format = "{heading} ({width})"
 
 
+class ShowcaseGalleryImageBlock(blocks.StructBlock):
+    """A single image with alt text for the gallery."""
+
+    image = ImageChooserBlock()
+
+    image_alt = blocks.CharBlock(
+        max_length=255,
+        required=False,
+        help_text=(
+            "A concise description of the image for someone who can't see it. "
+            "See <a href='https://mozmeao.github.io/platform-docs/cms/alt-text/' target='_blank'>alt text guidelines</a> for tips."
+        ),
+    )
+
+    class Meta:
+        icon = "image"
+        label = "Showcase Gallery Image"
+        label_format = "{image}"
+
+
 class GalleryBlock(blocks.StructBlock):
     """Block for a gallery section with multiple tiles."""
 
@@ -512,3 +542,78 @@ class Meta:
         icon = "grip"
         label = "Gallery Section"
         label_format = "{heading}"
+
+
+class ShowcaseGalleryBlockSettings(blocks.StructBlock):
+    """Settings for the showcase gallery block."""
+
+    anchor_id = blocks.CharBlock(
+        required=False,
+        max_length=100,
+        help_text="Optional: Add an ID to make this section linkable (e.g., 'news', 'gallery').",
+    )
+
+    background_color = blocks.ChoiceBlock(
+        choices=[
+            ("", "White"),
+            ("m24-t-dark", "Dark"),
+            ("m24-t-green", "Green"),
+            ("m24-t-orange", "Orange"),
+            ("m24-t-pink", "Pink"),
+            ("m24-t-gray", "Gray"),
+        ],
+        required=False,
+        help_text="What color should the background be?",
+    )
+
+    class Meta:
+        icon = "cog"
+        collapsed = True
+        label = "Settings"
+        label_format = "ID: {anchor_id} - Background: {background_color}"
+        form_classname = "compact-form struct-block"
+
+
+class ShowcaseGalleryBlock(blocks.StructBlock):
+    """A showcase block with a gallery as media."""
+
+    settings = ShowcaseGalleryBlockSettings()
+
+    text_divider = DividerBlock(label="Text")
+
+    heading = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        help_text="Use sentence case.",
+    )
+
+    image_divider = DividerBlock(label="Image")
+
+    tiles = blocks.ListBlock(
+        ShowcaseGalleryImageBlock(),
+        min_num=1,
+        help_text="Add gallery tiles. For best results, ensure tile widths add up to 100% per row.",
+    )
+
+    body = blocks.CharBlock(
+        max_length=1000,
+        label="Content for section body",
+        help_text="Use sentence case.",
+    )
+
+    cta_text = blocks.CharBlock(
+        required=False,
+        max_length=50,
+        label="Link text",
+        help_text="Use sentence case (e.g., 'Read the report', 'Read more').",
+    )
+
+    cta_link = LinkBlock(
+        label="Link destination",
+    )
+
+    class Meta:
+        template = "mozorg/cms/blocks/showcase_gallery_block.html"
+        icon = "grip"
+        label = "Showcase Gallery section"
+        label_format = "{heading}"

bedrock/mozorg/fixtures/showcase_gallery_fixtures.py

@@ -0,0 +1,140 @@
+# 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 AboutUsPage
+
+
+def get_showcase_gallery_variants(image_id: int) -> list[dict]:
+    """Return list of ShowcaseGalleryBlock 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 white background, no anchor, multiple tiles
+        {
+            "type": "showcase_gallery_block",
+            "value": {
+                "settings": {
+                    "background_color": "",
+                    "anchor_id": "",
+                },
+                "heading": "Working at Mozilla",
+                "tiles": [
+                    {"image": image_id, "image_alt": "Mozilla team working together"},
+                    {"image": image_id, "image_alt": "Mozilla office space"},
+                    {"image": image_id, "image_alt": "Mozilla team event"},
+                    {"image": image_id, "image_alt": ""},
+                ],
+                "body": "Join a team that believes the internet is for everyone.",
+                "cta_text": "See open roles",
+                "cta_link": {
+                    "link_to": "custom_url",
+                    "custom_url": "https://www.mozilla.org/careers",
+                    "new_window": False,
+                },
+            },
+            "id": "showcase-gallery-variant-1",
+        },
+        # Variant 2: Dark background
+        {
+            "type": "showcase_gallery_block",
+            "value": {
+                "settings": {
+                    "background_color": "m24-t-dark",
+                    "anchor_id": "",
+                },
+                "heading": "Our Culture",
+                "tiles": [
+                    {"image": image_id, "image_alt": "Mozilla culture photo"},
+                    {"image": image_id, "image_alt": ""},
+                ],
+                "body": "A mission-driven organization where your work matters.",
+                "cta_text": "Learn about our culture",
+                "cta_link": {
+                    "link_to": "custom_url",
+                    "custom_url": "https://www.mozilla.org/about/culture",
+                    "new_window": False,
+                },
+            },
+            "id": "showcase-gallery-variant-2",
+        },
+        # Variant 3: Green background with anchor_id
+        {
+            "type": "showcase_gallery_block",
+            "value": {
+                "settings": {
+                    "background_color": "m24-t-green",
+                    "anchor_id": "careers-section",
+                },
+                "heading": "Benefits and Perks",
+                "tiles": [
+                    {"image": image_id, "image_alt": "Employee benefits"},
+                    {"image": image_id, "image_alt": "Flexible working"},
+                ],
+                "body": "We offer competitive benefits that support your whole life.",
+                "cta_text": "View benefits",
+                "cta_link": {
+                    "link_to": "custom_url",
+                    "custom_url": "https://www.mozilla.org/careers/benefits",
+                    "new_window": False,
+                },
+            },
+            "id": "showcase-gallery-variant-3",
+        },
+        # Variant 4: Orange background, new_window=True
+        {
+            "type": "showcase_gallery_block",
+            "value": {
+                "settings": {
+                    "background_color": "m24-t-orange",
+                    "anchor_id": "",
+                },
+                "heading": "Join Mozilla",
+                "tiles": [
+                    {"image": image_id, "image_alt": "Mozilla team photo"},
+                    {"image": image_id, "image_alt": "Mozilla campus"},
+                ],
+                "body": "Help us keep the internet open and accessible.",
+                "cta_text": "Apply now",
+                "cta_link": {
+                    "link_to": "custom_url",
+                    "custom_url": "https://www.mozilla.org/careers/apply",
+                    "new_window": True,
+                },
+            },
+            "id": "showcase-gallery-variant-4",
+        },
+    ]
+
+
+def get_showcase_gallery_test_page() -> AboutUsPage:
+    """Create an AboutUsPage with all showcase gallery block variants for testing.
+
+    Returns:
+        AboutUsPage instance with showcase gallery blocks populated
+    """
+    placeholder_image = get_placeholder_image()
+    variants = get_showcase_gallery_variants(placeholder_image.id)
+    index_page = get_test_index_page()
+
+    test_page = AboutUsPage.objects.filter(slug="showcase-gallery-block-test").first()
+    if test_page:
+        return test_page
+
+    test_page = AboutUsPage(
+        title="Showcase Gallery Block Test Page",
+        slug="showcase-gallery-block-test",
+        content=variants,
+    )
+
+    index_page.add_child(instance=test_page)
+    test_page.save_revision().publish()
+
+    return test_page

bedrock/mozorg/models.py

@@ -20,7 +20,7 @@
     SectionBlock,
     TwoColumnDetailBlock,
 )
-from bedrock.mozorg.blocks.common import DonateBlock, GalleryBlock, ShowcaseBlock, SpringboardBlock, TransitionBlock
+from bedrock.mozorg.blocks.common import DonateBlock, GalleryBlock, ShowcaseBlock, ShowcaseGalleryBlock, SpringboardBlock, TransitionBlock
 from bedrock.mozorg.blocks.leadership import LeadershipSectionBlock
 from bedrock.mozorg.blocks.navigation import NavigationLinkBlock
 
@@ -461,3 +461,47 @@ def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, *args, **kwargs)
         context["utm_parameters"] = self.get_utm_parameters()
         return context
+
+
+class AboutUsPage(AbstractBedrockCMSPage):
+    subpage_types = [
+        LeadershipPage,
+    ]
+
+    max_count = 1  # Ensure there's only one instance of this page
+    ftl_files = ["mozorg/about-m24"]
+
+    content = StreamField(
+        [
+            ("donate_block", DonateBlock()),
+            ("gallery_block", GalleryBlock()),
+            ("showcase_block", ShowcaseBlock()),
+            ("showcase_gallery_block", ShowcaseGalleryBlock()),
+            ("transition_block", TransitionBlock()),
+        ],
+        blank=True,
+        null=True,
+        use_json_field=True,
+        help_text="Add content blocks for the homepage. Blocks will render in the order shown.",
+    )
+
+    content_panels = [
+        FieldPanel("title", help_text="Help identify this page for other editors."),
+        FieldPanel("content"),
+    ]
+
+    template = "mozorg/cms/about/about-us.html"
+
+    def get_utm_parameters(self):
+        return {
+            **BASE_UTM_PARAMETERS,
+            "utm_campaign": self.slug or "about-us",
+        }
+
+    def get_context(self, request, *args, **kwargs):
+        context = super().get_context(request, *args, **kwargs)
+        context["utm_parameters"] = self.get_utm_parameters()
+        return context
+
+    class Meta:
+        verbose_name = "About Us Page"

bedrock/mozorg/templates/mozorg/cms/about/about-us.html

@@ -0,0 +1,37 @@
+{#
+ 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/.
+#}
+
+{% extends "base-protocol-mozilla.html" %}
+
+{% block page_title %}{{ ftl('m24-about-page-title') }}{% endblock %}
+{% block page_title_suffix %}{% endblock %}
+
+{% block page_desc %}
+  {{ ftl('m24-about-page-desc') }}
+{% endblock %}
+
+{% block body_id %}about{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('m24-root') }}
+  {{ css_bundle('m24-base') }}
+  {{ css_bundle('m24-about') }}
+{% endblock %}
+
+{% set utm_params = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=m24-about' %}
+
+{% block content %}
+<main>
+  {% include 'mozorg/about/includes/m24/intro.html'%}
+  {% include 'mozorg/about/includes/m24/manifesto.html'%}
+
+  {# CMS managed content blocks #}
+  {% for block in page.content %}
+    {% include_block block %}
+  {% endfor %}
+
+</main>
+{% endblock %}

bedrock/mozorg/templates/mozorg/cms/blocks/showcase_block.html

@@ -10,19 +10,13 @@
 <div class="m24-c-showcase{% if bg_color %} {{ bg_color }}{% endif %}"{% if anchor_id %} id="{{ anchor_id }}"{% endif %}>
 
   <div class="m24-c-content">
-    <header class="m24-c-showcase-text">
+    <header class="m24-c-showcase-text {% if value.two_column_layout %}m24-l-two-columns{% endif %}">
       <h2 class="m24-c-showcase-title">{{ value.heading }}</h2>
       <div class="m24-c-showcase-body">{{ value.body|richtext }}</div>
     </header>
 
     <div class="m24-c-showcase">
       <div class="m24-c-showcase-media">
-        <!-- <img
-          loading="lazy"
-          src="{{ value.image }}"
-          width="1376"
-          height="515"
-          alt="{% if value.image_alt %}{{ value.image_alt }}{% endif %}"> -->
         <figure>
           {{ srcset_image(value.image, "width-1376", class="", sizes="1376px", alt=value.image_alt if value.image_alt else "") }}
         </figure>