WT-334 - Build CMS Components For Advertising Pages - Part 2

bedrock/mozorg/blocks/advertising.py

@@ -116,6 +116,53 @@ class Meta:
         form_classname = "compact-form struct-block"
 
 
+class ListItemBlock(blocks.StructBlock):
+    """Feature list item block."""
+
+    heading_text = blocks.CharBlock(char_max_length=255)
+    supporting_text = blocks.RichTextBlock(
+        features=["bold", "italic", "link"],
+    )
+
+    class Meta:
+        label = "List Item"
+        label_format = "{heading_text}"
+        template = "mozorg/cms/advertising/blocks/list_item_block.html"
+        form_classname = "compact-form struct-block"
+
+
+class ListBlock(blocks.StructBlock):
+    """A block containing a list of items."""
+
+    list_items = blocks.ListBlock(ListItemBlock())
+
+    class Meta:
+        icon = "list-ul"
+        label = "List"
+        label_format = "List"
+        template = "mozorg/cms/advertising/blocks/list_block.html"
+        form_classname = "compact-form struct-block"
+
+
+class TwoColumnDetailBlock(blocks.StructBlock):
+    """Feature list item block."""
+
+    heading_text = blocks.CharBlock(char_max_length=255)
+    subheading = blocks.TextBlock()
+    second_column = blocks.StreamBlock(
+        [
+            ("list", ListBlock()),
+        ],
+        required=False,
+    )
+
+    class Meta:
+        label = "Two Column Detail"
+        label_format = "{heading_text}"
+        template = "mozorg/cms/advertising/blocks/two_column_detail_block.html"
+        form_classname = "compact-form struct-block"
+
+
 class LinkWithIcon(blocks.StructBlock):
     """Link with an icon."""
 
@@ -133,7 +180,15 @@ class Meta:
 class NotificationBlock(blocks.StructBlock):
     notification_text = blocks.RichTextBlock(
         char_max_length=255,
-        features=["bold", "italic", "superscript", "subscript", "strikethrough", "code", "link"],
+        features=[
+            "bold",
+            "italic",
+            "superscript",
+            "subscript",
+            "strikethrough",
+            "code",
+            "link",
+        ],
     )
     links = blocks.StreamBlock(
         [

bedrock/mozorg/migrations/0011_advertisingprinciplespage.py

@@ -0,0 +1,54 @@
+# Generated by Django 5.2.7 on 2025-10-16 21:03
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("mozorg", "0010_alter_advertisingindexpage_notifications"),
+        ("wagtailcore", "0094_alter_page_locale"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="TwoColumnSubpage",
+            fields=[
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.page",
+                    ),
+                ),
+                (
+                    "content",
+                    wagtail.fields.StreamField(
+                        [("two_column_block", 7)],
+                        blank=True,
+                        block_lookup={
+                            0: ("wagtail.blocks.CharBlock", (), {"char_max_length": 255}),
+                            1: ("wagtail.blocks.TextBlock", (), {}),
+                            2: ("wagtail.blocks.RichTextBlock", (), {"features": ["bold", "italic", "link"]}),
+                            3: ("wagtail.blocks.StructBlock", [[("heading_text", 0), ("supporting_text", 2)]], {}),
+                            4: ("wagtail.blocks.ListBlock", (3,), {}),
+                            5: ("wagtail.blocks.StructBlock", [[("list_items", 4)]], {}),
+                            6: ("wagtail.blocks.StreamBlock", [[("list", 5)]], {"required": False}),
+                            7: ("wagtail.blocks.StructBlock", [[("heading_text", 0), ("subheading", 1), ("second_column", 6)]], {}),
+                        },
+                        null=True,
+                    ),
+                ),
+            ],
+            options={
+                "abstract": False,
+            },
+            bases=("wagtailcore.page",),
+        ),
+    ]

bedrock/mozorg/migrations/0012_rename_twocolumnsubpage_advertisingtwocolumnsubpage.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.2.8 on 2025-11-24 17:40
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("mozorg", "0011_advertisingprinciplespage"),
+        ("wagtailcore", "0095_groupsitepermission"),
+    ]
+
+    operations = [
+        migrations.RenameModel(
+            old_name="TwoColumnSubpage",
+            new_name="AdvertisingTwoColumnSubpage",
+        ),
+    ]

bedrock/mozorg/models.py

@@ -13,7 +13,14 @@
 from wagtail.snippets.models import register_snippet
 
 from bedrock.cms.models.base import AbstractBedrockCMSPage
-from bedrock.mozorg.blocks.advertising import AdvertisingHeroBlock, FeatureListBlock, FigureWithStatisticBlock, NotificationBlock, SectionHeaderBlock
+from bedrock.mozorg.blocks.advertising import (
+    AdvertisingHeroBlock,
+    FeatureListBlock,
+    FigureWithStatisticBlock,
+    NotificationBlock,
+    SectionHeaderBlock,
+    TwoColumnDetailBlock,
+)
 from bedrock.mozorg.blocks.leadership import LeadershipSectionBlock
 
 
@@ -24,7 +31,10 @@ def process_md_file(file_path):
             input = f.read()
 
         md = markdown.Markdown(
-            extensions=["markdown.extensions.attr_list", TocExtension(permalink=True, baselevel=2, toc_depth="2-3", separator="")],
+            extensions=[
+                "markdown.extensions.attr_list",
+                TocExtension(permalink=True, baselevel=2, toc_depth="2-3", separator=""),
+            ],
             output_format="html5",
         )
         content = md.convert(input)
@@ -134,7 +144,7 @@ class LeadershipPage(AbstractBedrockCMSPage):
 
 
 class AdvertisingIndexPage(AbstractBedrockCMSPage):
-    subpage_types = []  # This page type cannot have any children
+    subpage_types = ["AdvertisingTwoColumnSubpage"]
 
     content = StreamField(
         [
@@ -169,3 +179,23 @@ class AdvertisingIndexPage(AbstractBedrockCMSPage):
     ]
 
     template = "mozorg/cms/advertising/advertising_index_page.html"
+
+
+class AdvertisingTwoColumnSubpage(AbstractBedrockCMSPage):
+    parent_page_types = ["AdvertisingIndexPage"]
+    subpage_types = []  # This page type cannot have any children
+
+    content = StreamField(
+        [
+            ("two_column_block", TwoColumnDetailBlock()),
+        ],
+        blank=True,
+        null=True,
+        collapsed=True,
+    )
+
+    content_panels = AbstractBedrockCMSPage.content_panels + [
+        FieldPanel("content"),
+    ]
+
+    template = "mozorg/cms/advertising/two_column_subpage.html"

bedrock/mozorg/templates/mozorg/advertising/includes/home-ads-notification.html

@@ -15,9 +15,5 @@
       <li><a class="youtube" href="https://www.youtube.com/@mozilla_ads" data-link-position="ads-section-banner" data-link-text="Youtube (@mozilla_ads)">TikTok<span> (@mozilla_ads)</span></a></li>
 
     </ul>
-
-
-
-
   </div>
 </div>

bedrock/mozorg/templates/mozorg/advertising/principles.html

@@ -22,7 +22,7 @@ <h1>Principles</h1>
   <section class="m24-c-content">
     <div class="mza-half-grid">
       <div class="two-column-intro">
-        <h2 class="mza-section-heading">Ads that work for you </h2>
+        <h2 class="mza-section-heading">Ads that work for you </h2>
         <p class="mza-section-text-lg">The internet relies on advertising to fund the sites and apps people care about, but today’s system favors big tech—often at the expense of your privacy. We’re building a new approach to advertising that is a fair deal for everyone.</p>
 
       </div>

bedrock/mozorg/templates/mozorg/cms/advertising/blocks/feature_list_item_block.html

@@ -4,7 +4,6 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<li class="mza-half-grid is-list-item">
-  <h3 class="mza-home-why-moz-list-heading">{{ value.heading_text }}</h3>
-  <p class="mza-home-why-moz-list-text">{{ value.supporting_text }}</p>
-</li>
+{% with li_class='mza-half-grid is-list-item', h3_class='mza-home-big-list-heading', p_class='mza-home-big-list-text' %}
+  {% include 'mozorg/cms/advertising/includes/list_item.html' %}
+{% endwith %}

bedrock/mozorg/templates/mozorg/cms/advertising/blocks/figure_with_statistic_block.html

@@ -13,7 +13,7 @@
         </span>
       </div>
       <figure class="mza-figure">
-        {{ srcset_image(value.image, "width-{800,1000,1200,1400}", class="", loading="lazy", alt=value.image.description) }}
+        {{ srcset_image(value.image, "width-{1000,1200,1400}", class="", loading="lazy", alt=value.image.description) }}
         <figcaption class="mza-figcaption">
           {{ value.image_caption }}
         </figcaption>
@@ -26,4 +26,4 @@
       </div>
     {% endif %}
 
-</section>
+</section>

bedrock/mozorg/templates/mozorg/cms/advertising/blocks/list_block.html

@@ -0,0 +1,11 @@
+{#
+ 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/.
+#}
+
+<ul class="two-column-detail-list">
+  {% for item in value.list_items %}
+    {% include_block item %}
+  {% endfor %}
+</ul>

bedrock/mozorg/templates/mozorg/cms/advertising/blocks/list_item_block.html

@@ -0,0 +1,9 @@
+{#
+ 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/.
+#}
+
+{% with li_class='', h3_class='mza-section-subheading', p_class='' %}
+  {% include 'mozorg/cms/advertising/includes/list_item.html' %}
+{% endwith %}

bedrock/mozorg/templates/mozorg/cms/advertising/blocks/section_heading_block.html

@@ -4,16 +4,18 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<section class="mza-c-home-solutions m24-c-content has-scroll-padding" id="solutions">
-  <div class="{% if value.image %}mza-half-grid{% if value.has_top_divider %} has-border-top{% endif %}{% elif value.has_top_divider %} section-has-border-top{% endif %}">
+<section class="mza-c-home-solutions m24-c-content extra-top-padding has-scroll-padding" id="solutions">
+  <div class="has-margin-bottom{% if value.image %} mza-half-grid{% if value.has_top_divider %} has-border-top{% endif %}{% elif value.has_top_divider %} section-has-border-top{% endif %}">
     <hgroup class="mza-hgroup">
       {% if value.superheading_text %}<p class="mza-eyebrow">{{ value.superheading_text }}</p>{% endif %}
-      <h2 class="mza-section-heading">{{ value.heading_text }}</h2>
-      {% if value.subheading_text %}<p class="mza-section-subheading">{{ value.subheading_text }}</p>{% endif %}
+        <h2 class="mza-section-heading">{{ value.heading_text }}</h2>
+      {% if value.subheading_text %}<p class="mza-section-text-lg">{{ value.subheading_text }}</p>{% endif %}
     </hgroup>
 
     {% if value.image %}
-      {{ srcset_image(value.image, "width-{1200,1400,1600}", class="mza-figure", alt=value.image.description) }}
+      <figure class="mza-figure">
+        {{ srcset_image(value.image, "width-{1200,1400,1600}", class="", alt=value.image.description) }}
+      </figure>
     {% endif %}
   </div>
-</section>
+</section>

bedrock/mozorg/templates/mozorg/cms/advertising/blocks/two_column_detail_block.html

@@ -0,0 +1,19 @@
+{#
+ 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/.
+#}
+
+<div class="{% if value.second_column %}mza-half-grid{% endif %}">
+  <div class="two-column-intro">
+    <h2 class="mza-section-heading">{{ value.heading_text }}</h2>
+    <p class="mza-section-text-lg">{{ value.subheading }}</p>
+  </div>
+
+  {% if value.second_column %}
+    {% for item in value.second_column %}
+      {% include_block item %}
+    {% endfor %}
+  {% endif %}
+
+</div>

bedrock/mozorg/templates/mozorg/cms/advertising/includes/list_item.html

@@ -0,0 +1,10 @@
+{#
+ 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/.
+#}
+
+<li class="{{ li_class }}">
+  <h3 class="{{ h3_class }}">{{ value.heading_text }}</h3>
+  <div class="{{ p_class }}">{{ value.supporting_text|richtext }}</div>
+</li>

bedrock/mozorg/templates/mozorg/cms/advertising/two_column_subpage.html

@@ -0,0 +1,44 @@
+{#
+ 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" %}
+
+{% if page.seo_title %}
+  {% set meta_title = page.seo_title %}
+{% else %}
+  {% set meta_title = page.title %}
+{% endif %}
+
+{% block page_title %}{{ meta_title }}{% endblock %}
+{% block page_desc %}{{ page.search_description }}{% endblock %}
+{% block body_class %}{{ super() }} advertising{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('protocol-callout') }}
+  {{ css_bundle('protocol-card') }}
+  {{ css_bundle('protocol-picto') }}
+  {{ css_bundle('mozilla-ads') }}
+{% endblock %}
+
+{% block sub_navigation %}
+  {% include 'mozorg/advertising/includes/sub-nav.html' %}
+{% endblock %}
+
+{% block content %}
+<main id="mza-main">
+  <header class="mza-subpage-header">
+    <div class="m24-c-content">
+      <h1>{{ page.title }}</h1>
+    </div>
+  </header>
+
+  <section class="m24-c-content">
+    {% for block in page.content %}
+      {% include_block block %}
+    {% endfor %}
+  </section>
+</main>
+{% endblock %}