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

bedrock/mozorg/blocks/advertising.py

@@ -2,6 +2,8 @@
 # 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 django.core.exceptions import ValidationError
+
 from wagtail import blocks
 from wagtail.images.blocks import ImageChooserBlock
 from wagtail_link_block.blocks import LinkBlock
@@ -17,19 +19,14 @@
 ]
 
 
-SOCIAL_MEDIA_ICON_CHOICES = [
-    ("linkedin", "LinkedIn"),
-    ("tiktok", "TikTok"),
-    ("spotify", "Spotify"),
-    ("bluesky", "BlueSky"),
-    ("instagram", "Instagram"),
-    ("youtube", "YouTube"),
-]
-
-
 class AdvertisingHeroBlock(blocks.StructBlock):
     """Advertising page hero block."""
 
+    anchor_id = blocks.CharBlock(
+        required=False,
+        max_length=100,
+        help_text="Optional: Add an ID to make this section linkable from navigation (e.g., 'hero', 'overview')",
+    )
     heading_text = blocks.CharBlock(char_max_length=255)
     primary_cta_text = blocks.CharBlock(char_max_length=255)
     primary_cta_link = LinkBlock(label="Primary CTA Link")
@@ -47,17 +44,31 @@ class Meta:
 class SectionHeaderBlock(blocks.StructBlock):
     """Section header block."""
 
-    has_top_divider = blocks.BooleanBlock(
-        default=False,
+    anchor_id = blocks.CharBlock(
         required=False,
-        label="Should the section have a divider line on top?",
-        inline_form=True,
+        max_length=100,
+        help_text="Optional: Add an ID to make this section linkable from navigation (e.g., 'solutions', 'why-mozilla')",
     )
     superheading_text = blocks.CharBlock(char_max_length=255, required=False)
-    heading_text = blocks.CharBlock(char_max_length=255)
+    heading_text = blocks.CharBlock(char_max_length=255, required=False)
     subheading_text = blocks.CharBlock(char_max_length=255, required=False)
     image = ImageChooserBlock(required=False)
 
+    def clean(self, value):
+        errors = {}
+
+        superheading = value.get("superheading_text", "").strip()
+        heading = value.get("heading_text", "").strip()
+        subheading = value.get("subheading_text", "").strip()
+
+        if not superheading and not heading and not subheading:
+            errors["heading_text"] = ValidationError("You must provide either superheading, or heading, or subheading.")
+
+        if errors:
+            raise blocks.StructBlockValidationError(errors)
+
+        return super().clean(value)
+
     class Meta:
         icon = "title"
         label = "Section Heading"
@@ -69,8 +80,13 @@ class Meta:
 class FigureWithStatisticBlock(blocks.StructBlock):
     """Figure with a statistic block."""
 
+    anchor_id = blocks.CharBlock(
+        required=False,
+        max_length=100,
+        help_text="Optional: Add an ID to make this section linkable from navigation",
+    )
     image = ImageChooserBlock(required=False)
-    image_caption = blocks.RichTextBlock(char_max_length=255)
+    image_caption = blocks.RichTextBlock(char_max_length=255, required=False)
     statistic_value = blocks.CharBlock(char_max_length=255)
     statistic_label = blocks.CharBlock(char_max_length=255)
     align_image_on_right = blocks.BooleanBlock(
@@ -79,8 +95,6 @@ class FigureWithStatisticBlock(blocks.StructBlock):
         label="Position the image to the right of the statistic",
         inline_form=True,
     )
-    cta_text = blocks.CharBlock(char_max_length=255, required=False)
-    cta_link = LinkBlock(label="Link", required=False)
 
     class Meta:
         icon = "decimal"
@@ -93,8 +107,8 @@ class Meta:
 class FeatureListItemBlock(blocks.StructBlock):
     """Feature list item block."""
 
-    heading_text = blocks.CharBlock(char_max_length=255)
-    supporting_text = blocks.TextBlock()
+    heading_text = blocks.TextBlock()
+    supporting_text = blocks.RichTextBlock(features=["bold", "italic", "link"])
 
     class Meta:
         label = "Feature Item"
@@ -106,6 +120,11 @@ class Meta:
 class FeatureListBlock(blocks.StructBlock):
     """Feature list block."""
 
+    anchor_id = blocks.CharBlock(
+        required=False,
+        max_length=100,
+        help_text="Optional: Add an ID to make this section linkable from navigation",
+    )
     feature_list_items = blocks.ListBlock(FeatureListItemBlock(), min_num=1)
 
     class Meta:
@@ -144,6 +163,103 @@ class Meta:
         form_classname = "compact-form struct-block"
 
 
+class StatisticBlock(blocks.StructBlock):
+    """Statistic block."""
+
+    statistic_superlabel = blocks.CharBlock(char_max_length=255, required=False)
+    statistic_value = blocks.CharBlock(char_max_length=255)
+    statistic_label = blocks.CharBlock(char_max_length=255)
+
+    class Meta:
+        icon = "decimal"
+        label = "Statistic Block"
+        label_format = "{statistic_value} {statistic_label}"
+        template = "mozorg/cms/advertising/blocks/statistic_block.html"
+        form_classname = "compact-form struct-block"
+
+
+class StatisticCalloutBlock(blocks.StructBlock):
+    """Block for statistics with a callout."""
+
+    anchor_id = blocks.CharBlock(
+        required=False,
+        max_length=100,
+        help_text="Optional: Add an ID to make this section linkable from navigation",
+    )
+    heading_text = blocks.CharBlock(char_max_length=255)
+    statistics = blocks.ListBlock(StatisticBlock(), min_num=1)
+
+    class Meta:
+        icon = "decimal"
+        label = "Statistic Callout Block"
+        label_format = "{heading_text}"
+        template = "mozorg/cms/advertising/blocks/statistic_callout_block.html"
+        form_classname = "compact-form struct-block"
+
+
+class FigureBlock(blocks.StructBlock):
+    """Figure block."""
+
+    image = ImageChooserBlock(required=False)
+    image_caption_heading = blocks.TextBlock(char_max_length=255, required=False)
+    image_caption_text = blocks.TextBlock(char_max_length=255, required=False)
+
+    class Meta:
+        label = "Feature Item"
+        label_format = "{image_caption}"
+        form_classname = "compact-form struct-block"
+
+
+class FeatureItemWithModalBlock(blocks.StructBlock):
+    """Block for a feature item with a modal."""
+
+    heading_text = blocks.CharBlock(char_max_length=255)
+    figures = blocks.ListBlock(FigureBlock(), min_num=1)
+    cta_text = blocks.CharBlock(char_max_length=255, required=False)
+    cta_link = LinkBlock(label="CTA Link", required=False)
+
+    class Meta:
+        label = "Feature Item"
+        label_format = "{heading_text}"
+        template = "mozorg/cms/advertising/blocks/feature_item_with_modal_block.html"
+        form_classname = "compact-form struct-block"
+
+
+class FeatureListWithModalsBlock(blocks.StructBlock):
+    """A block for a list of features, each with a modal."""
+
+    anchor_id = blocks.CharBlock(
+        required=False,
+        max_length=100,
+        help_text="Optional: Add an ID to make this section linkable from navigation",
+    )
+    heading_text = blocks.CharBlock(char_max_length=255)
+    supporting_text = blocks.TextBlock()
+    feature_list_items = blocks.ListBlock(FeatureItemWithModalBlock(), min_num=1)
+
+    class Meta:
+        icon = "list-ul"
+        label = "Feature List With Modals Block"
+        label_format = "{heading_text}"
+        template = "mozorg/cms/advertising/blocks/feature_list_with_modals_block.html"
+        form_classname = "compact-form struct-block"
+
+
+class RowTextAndLinkBlock(blocks.StructBlock):
+    """Block for text and a link."""
+
+    text = blocks.CharBlock(char_max_length=255, required=False)
+    link_text = blocks.CharBlock(char_max_length=255)
+    link = LinkBlock(label="Link")
+
+    class Meta:
+        icon = "doc-full"
+        label = "Text and Link Block"
+        label_format = "{text}"
+        template = "mozorg/cms/advertising/blocks/row_text_and_link_block.html"
+        form_classname = "compact-form struct-block"
+
+
 class TwoColumnDetailBlock(blocks.StructBlock):
     """Feature list item block."""
 
@@ -163,39 +279,49 @@ class Meta:
         form_classname = "compact-form struct-block"
 
 
-class LinkWithIcon(blocks.StructBlock):
-    """Link with an icon."""
-
-    icon = blocks.ChoiceBlock(required=False, choices=SOCIAL_MEDIA_ICON_CHOICES, inline_form=True)
-    link = LinkBlock()
+class SectionSettings(blocks.StructBlock):
+    anchor_id = blocks.CharBlock(
+        required=False,
+        max_length=100,
+        help_text="Optional: Add an ID to make this section linkable from navigation (e.g., 'solutions', 'why-mozilla')",
+    )
+    has_top_divider = blocks.BooleanBlock(
+        default=False,
+        required=False,
+        label="Should the section have a divider line on top?",
+        inline_form=True,
+    )
+    display_on_dark_background = blocks.BooleanBlock(
+        default=False,
+        required=False,
+        label="Should the section have a dark background?",
+        inline_form=True,
+    )
 
     class Meta:
-        icon = "link"
-        label = "Link With Icon"
-        label_format = "Link With Icon"
-        template = "mozorg/cms/advertising/blocks/link_with_icon_block.html"
+        icon = "cog"
+        collapsed = True
+        label = "Settings"
+        label_format = "ID: {anchor_id} - Divider: {has_top_divider} - Dark background: {display_on_dark_background}"
         form_classname = "compact-form struct-block"
 
 
-class NotificationBlock(blocks.StructBlock):
-    notification_text = blocks.RichTextBlock(
-        char_max_length=255,
-        features=[
-            "bold",
-            "italic",
-            "superscript",
-            "subscript",
-            "strikethrough",
-            "code",
-            "link",
-        ],
-    )
-    links = blocks.StreamBlock(
+class SectionBlock(blocks.StructBlock):
+    settings = SectionSettings()
+
+    header = SectionHeaderBlock()
+    content = blocks.StreamBlock(
         [
-            ("link_with_icon", LinkWithIcon()),
-        ],
-        required=False,
+            ("section_header_block", SectionHeaderBlock()),
+            ("figure_with_statistic_block", FigureWithStatisticBlock()),
+            ("statistic_callout_block", StatisticCalloutBlock()),
+            ("features_with_modals", FeatureListWithModalsBlock()),
+            ("feature_list_block", FeatureListBlock()),
+        ]
     )
+    call_to_action = blocks.ListBlock(RowTextAndLinkBlock(), min_num=0, max_num=1, default=[], label="Call to Action")
 
     class Meta:
-        template = "mozorg/cms/advertising/blocks/notification_block.html"
+        template = "mozorg/cms/advertising/blocks/section.html"
+        label = "Section"
+        label_format = "{header}"

bedrock/mozorg/blocks/navigation.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 django.core.exceptions import ValidationError
+
+from wagtail import blocks
+from wagtail.blocks import StructValue
+from wagtail_link_block.blocks import LinkBlock
+
+
+class NavigationLinkValue(StructValue):
+    """Custom StructValue for NavigationLinkBlock with URL resolution."""
+
+    def get_resolved_url(self, anchor_page_url=""):
+        """Return the resolved URL for this navigation link."""
+        link = self.get("link")
+        if link.get("link_to") == "anchor":
+            return f"{anchor_page_url}{link.get_url()}"
+        elif link:
+            return link.get_url()
+        return None
+
+
+class NavigationLinkBlock(blocks.StructBlock):
+    """A navigation link for sub-navigation menu."""
+
+    link_text = blocks.CharBlock(
+        max_length=50,
+        help_text="Text to display for this navigation link",
+    )
+
+    link = LinkBlock()
+
+    has_button_appearance = blocks.BooleanBlock(
+        required=False,
+        default=False,
+        help_text="This link should look like a button",
+    )
+
+    def clean(self, value):
+        errors = {}
+        link = value.get("link", {})
+
+        # Validate that the appropriate field is filled based on link_type
+        if link.get("link_to") == "anchor":
+            if not link.get("anchor"):
+                errors["link"] = ValidationError("Section anchor is required when linking to a section")
+
+        if errors:
+            raise blocks.StructBlockValidationError(errors)
+
+        return super().clean(value)
+
+    class Meta:
+        icon = "link"
+        label = "Navigation Link"
+        value_class = NavigationLinkValue