Add "wide" option to Datawrapper (#12867)

* Update datawrapper model, creating structblock container

* Update references to datawrapper to new datawrapper container

* Update datawrapper templates

* Create datawrapper migrations

* linting

* Update migration

* Linting for line too long

* remake migrations

* djlint rules

* Update faker

* Update migration dependency

network-api/networkapi/mozfest/models.py

@@ -139,7 +139,7 @@ class MozfestPrimaryPage(FoundationMetadataPageMixin, FoundationBannerInheritanc
             ("profile_directory", customblocks.ProfileDirectory()),
             ("recent_blog_entries", customblocks.RecentBlogEntries()),
             ("blog_set", customblocks.BlogSetBlock()),
-            ("datawrapper", customblocks.DatawrapperBlock()),
+            ("datawrapper", customblocks.DatawrapperContainerBlock()),
             ("listing", customblocks.ListingBlock()),
             ("profiles", customblocks.ProfileBlock()),
             ("group_listing_block", customblocks.GroupListingBlock()),

network-api/networkapi/utility/faker/streamfield_provider.py

@@ -393,7 +393,9 @@ def generate_typeform_field():
 
 
 def generate_datawrapper_field():
-    return generate_field("datawrapper", "https://datawrapper.dwcdn.net/0rmUn/3/")
+    return generate_field(
+        "datawrapper", {"datawrapper": "https://datawrapper.dwcdn.net/0rmUn/3/", "wide": fake.boolean()}
+    )
 
 
 def generate_dear_internet_letter_field():

network-api/networkapi/wagtailpages/pagemodels/article_fields.py

@@ -11,7 +11,7 @@
 article_fields = [
     ("accordion", customblocks.AccordionBlock()),
     ("airtable", customblocks.AirTableBlock()),
-    ("datawrapper", customblocks.DatawrapperBlock()),
+    ("datawrapper", customblocks.DatawrapperContainerBlock()),
     (
         "callout",
         blocks.RichTextBlock(

network-api/networkapi/wagtailpages/pagemodels/blog/blog.py

@@ -57,7 +57,7 @@
     ("slider", customblocks.FoundationSliderBlock()),
     ("spacer", customblocks.BootstrapSpacerBlock()),
     ("airtable", customblocks.AirTableBlock()),
-    ("datawrapper", customblocks.DatawrapperBlock()),
+    ("datawrapper", customblocks.DatawrapperContainerBlock()),
     ("newsletter_signup", customblocks.BlogNewsletterSignupBlock()),
 ]
 

network-api/networkapi/wagtailpages/pagemodels/buyersguide/article_page.py

@@ -57,7 +57,7 @@ class BuyersGuideArticlePage(BasePage):
             ("slider", customblocks.FoundationSliderBlock()),
             ("spacer", customblocks.BootstrapSpacerBlock()),
             ("airtable", customblocks.AirTableBlock()),
-            ("datawrapper", customblocks.DatawrapperBlock()),
+            ("datawrapper", customblocks.DatawrapperContainerBlock()),
         ),
         null=True,
         blank=False,

network-api/networkapi/wagtailpages/pagemodels/buyersguide/campaign_page.py

@@ -78,7 +78,7 @@ class BuyersGuideCampaignPage(BasePage):
             ("slider", customblocks.FoundationSliderBlock()),
             ("spacer", customblocks.BootstrapSpacerBlock()),
             ("airtable", customblocks.AirTableBlock()),
-            ("datawrapper", customblocks.DatawrapperBlock()),
+            ("datawrapper", customblocks.DatawrapperContainerBlock()),
         ),
         use_json_field=True,
     )

network-api/networkapi/wagtailpages/pagemodels/customblocks/__init__.py

@@ -24,7 +24,7 @@
 from .card_grid import CardGrid, CardGridBlock
 from .cta_aside_block import CTAAsideBlock
 from .current_events_slider_block import CurrentEventsSliderBlock
-from .datawrapper_block import DatawrapperBlock
+from .datawrapper_block import DatawrapperContainerBlock, DatawrapperEmbedBlock
 from .dear_internet_letter_block import DearInternetLetterBlock
 from .foundation_slider_block import FoundationSliderBlock
 from .full_content_rich_text_options import full_content_rich_text_options

network-api/networkapi/wagtailpages/pagemodels/customblocks/accordion_block.py

@@ -1,7 +1,7 @@
 from wagtail import blocks
 
 from ..customblocks.base_rich_text_options import base_rich_text_options
-from .datawrapper_block import DatawrapperBlock
+from .datawrapper_block import DatawrapperContainerBlock
 from .image_block import ImageBlock
 from .video_block import VideoBlock
 
@@ -13,7 +13,7 @@ class AccordionItem(blocks.StructBlock):
     content = blocks.StreamBlock(
         [
             ("rich_text", accordion_rich_text),
-            ("datawrapper", DatawrapperBlock()),
+            ("datawrapper", DatawrapperContainerBlock()),
             ("image", ImageBlock()),
             ("video", VideoBlock()),
         ]

network-api/networkapi/wagtailpages/pagemodels/customblocks/base_fields.py

@@ -34,7 +34,7 @@
     ("recent_blog_entries", customblocks.RecentBlogEntries()),
     ("blog_set", customblocks.BlogSetBlock()),
     ("airtable", customblocks.AirTableBlock()),
-    ("datawrapper", customblocks.DatawrapperBlock()),
+    ("datawrapper", customblocks.DatawrapperContainerBlock()),
     ("listing", customblocks.ListingBlock()),
     ("profiles", customblocks.ProfileBlock()),
     ("article_teaser_block", customblocks.ArticleTeaserBlock()),

network-api/networkapi/wagtailpages/pagemodels/customblocks/datawrapper_block.py

@@ -1,7 +1,8 @@
-from wagtail.embeds import blocks
+from wagtail import blocks
+from wagtail.embeds import blocks as embeds_blocks
 
 
-class DatawrapperBlock(blocks.EmbedBlock):
+class DatawrapperEmbedBlock(embeds_blocks.EmbedBlock):
     """
     Embed block for Datawrapper visualizations.
 
@@ -62,4 +63,24 @@ def deconstruct(self):
 
     class Meta:
         icon = "image"
-        template = "wagtailpages/blocks/datawrapper_block.html"
+        template = "wagtailpages/blocks/datawrapper_embed_block.html"
+
+
+class DatawrapperContainerBlock(blocks.StructBlock):
+    """
+    A custom block that contains the datawrapper embed URL
+    and the option to render it wider than the page body content.
+    """
+
+    datawrapper = DatawrapperEmbedBlock()
+
+    wide = blocks.BooleanBlock(
+        required=False,
+        default=False,
+        help_text="If checked, the table will render wider than the other page body content.",
+    )
+
+    class Meta:
+        icon = "image"
+        label = "Datawrapper"
+        template = "wagtailpages/blocks/datawrapper_container_block.html"

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/datawrapper_container_block.html

@@ -0,0 +1,12 @@
+{% extends "./base_streamfield_block.html" %}
+{% load wagtailembeds_tags %}
+
+{% block streamfield_content_classes %}
+    {% if value.wide %}
+        tw-flex-[0_0_100%] tw-max-w-full
+    {% endif %}
+{% endblock streamfield_content_classes %}
+
+{% block block_content %}
+    {{ value.datawrapper }}
+{% endblock block_content %}

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/datawrapper_embed_block.html

@@ -0,0 +1,5 @@
+{% load wagtailembeds_tags %}
+
+<div class="tw-my-4">
+    {% embed value.url %}
+</div>

pyproject.toml

@@ -128,7 +128,6 @@ ignore="H017"
 "network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/base_streamfield_block.html" = "T003"
 "network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/blog_index_callout_box.html" = "H006,H008,T002"
 "network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/current_events_slider_block.html" = "T002,T003"
-"network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/datawrapper_block.html" = "T003"
 "network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/foundation_slider_block.html" = "T002,T003"
 "network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/group_listing_block.html" = "T003"
 "network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/iframe_block.html" = "T003"