Add image figure block

static/src/scss/_blocks.scss

@@ -0,0 +1,7 @@
+div.block-image {
+  margin: 0.5rem 0;
+
+  figcaption {
+    font-size: 85%;
+  }
+}

static/src/scss/base.scss

@@ -9,6 +9,7 @@
 @import "hero";
 @import "content";
 @import "listing";
+@import "blocks";
 
 html,
 body {

website/common/streamfield.py

@@ -5,6 +5,7 @@ from django.utils.html import format_html_join, strip_tags
 from django.utils.text import smart_split
 from wagtail import blocks
 from wagtail.embeds.blocks import EmbedBlock
+from wagtail.images.blocks import ImageChooserBlock
 
 IGNORE_PLAINTEXT_BLOCKS = (blocks.RawHTMLBlock, EmbedBlock)
 
@@ -25,6 +26,15 @@ RICH_TEXT_FEATURES = [
     "strikethrough",
 ]
 
+RICH_TEXT_FEATURES_SIMPLE = [
+    "bold",
+    "italic",
+    "link",
+    "document-link",
+    "code",
+    "strikethrough",
+]
+
 
 class LoremBlock(blocks.StructBlock):
     paragraphs = blocks.IntegerBlock(min_value=1)
@@ -41,12 +51,23 @@ class LoremBlock(blocks.StructBlock):
         label = "Lorem Ipsum"
 
 
+class ImageCaptionBlock(blocks.StructBlock):
+    image = ImageChooserBlock()
+    caption = blocks.RichTextBlock(features=RICH_TEXT_FEATURES_SIMPLE)
+
+    class Meta:
+        icon = "image"
+        label = "Image with caption"
+        template = "common/blocks/image-caption.html"
+
+
 def get_blocks() -> list[tuple[str, blocks.BaseBlock]]:
     return [
         ("embed", EmbedBlock()),
         ("rich_text", blocks.RichTextBlock(features=RICH_TEXT_FEATURES)),
         ("lorem", LoremBlock()),
         ("html", blocks.RawHTMLBlock()),
+        ("image", ImageCaptionBlock()),
     ]
 
 

website/common/templates/common/blocks/image-caption.html

@@ -0,0 +1,8 @@
+{% load wagtailimages_tags wagtailcore_tags %}
+
+<figure>
+  <img src="{% image_url value.image 'width-1500' %}" alt="" />
+  <figcaption>
+    {{ value.caption|richtext }}
+  </figcaption>
+</figure>