Update AnnotatedImageBlock to use LinkBlock (#12481)

* introduction of LinkBlockWithoutLabel class * add new caption_url linkblock field + migrations + newline * migrations to copy over old data to new linkblock field * removing old captionURL field in place of caption_url * updated template to work with linkblock * combine operations (add new field + copy data + delete old field) in single migration files * updated streamfield provider to account for new caption_url format * formatting python * rename to LinkWithoutLabelBlock to match other block naming * updated tests to account for changes * updated migrations
MozillaFoundation · Jun 20, 2024 · a3ec651 · a3ec651
1 parent ba6aaf6
commit a3ec651
Show file tree

Hide file tree

Showing 8 changed files with 18,367 additions and 40 deletions.
diff --git a/network-api/networkapi/donate/migrations/0012_update_annotatedimageblock_with_linkblock.py b/network-api/networkapi/donate/migrations/0012_update_annotatedimageblock_with_linkblock.py
diff --git a/network-api/networkapi/mozfest/migrations/0052_update_annotatedimageblock_with_linkblock.py b/network-api/networkapi/mozfest/migrations/0052_update_annotatedimageblock_with_linkblock.py
diff --git a/network-api/networkapi/reports/tests/test_block_type_report.py b/network-api/networkapi/reports/tests/test_block_type_report.py
diff --git a/network-api/networkapi/utility/faker/streamfield_provider.py b/network-api/networkapi/utility/faker/streamfield_provider.py
@@ -84,16 +84,17 @@ def generate_image_field():
     image_id = choice(Image.objects.all()).id
     alt_text = " ".join(fake.words(nb=5))
     caption = " ".join(fake.words(nb=5))
-    caption_url = fake.url(schemes=["https"])
+    caption_external_url = [
+        {
+            "link_to": "external_url",
+            "external_url": fake.url(schemes=["https"]),
+            "new_window": True,
+        }
+    ]
 
     return generate_field(
         "image",
-        {
-            "image": image_id,
-            "altText": alt_text,
-            "caption": caption,
-            "captionURL": caption_url,
-        },
+        {"image": image_id, "altText": alt_text, "caption": caption, "caption_url": caption_external_url},
     )
 
 

diff --git a/...-api/networkapi/wagtailpages/migrations/0139_update_annotatedimageblock_with_linkblock.py b/...-api/networkapi/wagtailpages/migrations/0139_update_annotatedimageblock_with_linkblock.py
diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/annotated_image_block.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/annotated_image_block.py
@@ -2,6 +2,7 @@
 from wagtail import blocks
 
 from .image_block import ImageBlock
+from .link_block import LinkWithoutLabelBlock
 
 
 class RadioSelectBlock(blocks.ChoiceBlock):
@@ -12,7 +13,9 @@ def __init__(self, *args, **kwargs):
 
 class AnnotatedImageBlock(ImageBlock):
     caption = blocks.CharBlock(required=False)
-    captionURL = blocks.CharBlock(required=False, help_text="Optional URL that this caption should link out to.")
+    caption_url = blocks.ListBlock(
+        LinkWithoutLabelBlock(), min_num=0, max_num=1, help_text="Optional URL that this caption should link out to."
+    )
     image_width = RadioSelectBlock(
         choices=(
             ("normal", "Normal"),

diff --git a/network-api/networkapi/wagtailpages/pagemodels/customblocks/link_block.py b/network-api/networkapi/wagtailpages/pagemodels/customblocks/link_block.py
@@ -66,3 +66,13 @@ class Meta:
 
 
 register(BaseLinkBlockAdapter(), LinkBlock)
+
+
+class LinkWithoutLabelBlock(LinkBlock):
+    def __init__(self, local_blocks=None, **kwargs):
+        super().__init__(local_blocks, **kwargs)
+        self.child_blocks = self.base_blocks.copy()
+        self.child_blocks.pop("label")
+
+
+register(BaseLinkBlockAdapter(), LinkWithoutLabelBlock)
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html
@@ -23,9 +23,13 @@
         <img src="{{ img.url }}" alt="{{ value.altText }}" class="tw-w-full {% if value.image_width == "full_width" %} tw-object-cover tw-object-center tw-max-h-[400px] large:tw-max-h-[550px] xlarge:tw-max-h-[650px] {% endif %}">
         {% if value.caption %}
             <figcaption class="tw-body-small tw-mt-4 tw-block {% if value.image_width == "full_width" %} tw-pl-6 {% endif %}">
-                {% if value.captionURL %}<a href="{{ value.captionURL }}">{% endif %}
-                {{ value.caption }}
-                {% if value.captionURL %}</a>{% endif %}
+                {% if value.caption_url %}
+                    {% with link=value.caption_url.0 %}
+                        <a href="{{ link.url }}" {% if link.new_window %}target="_blank"{% endif %}>{{ value.caption }}</a>
+                    {% endwith %}
+                {% else %}
+                    {{ value.caption }}
+                {% endif %}
             </figcaption>
         {% endif %}
     </figure>