From 72f9374c036966763dffef3c8873bb9a62a108b7 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Mon, 27 Jun 2022 20:40:55 +0100
Subject: [PATCH] Add image figure block

---
 static/src/scss/_blocks.scss                  |  7 +++++++
 static/src/scss/base.scss                     |  1 +
 website/common/streamfield.py                 | 21 +++++++++++++++++++
 .../common/blocks/image-caption.html          |  8 +++++++
 4 files changed, 37 insertions(+)
 create mode 100644 static/src/scss/_blocks.scss
 create mode 100644 website/common/templates/common/blocks/image-caption.html

diff --git a/static/src/scss/_blocks.scss b/static/src/scss/_blocks.scss
new file mode 100644
index 0000000..3459d01
--- /dev/null
+++ b/static/src/scss/_blocks.scss
@@ -0,0 +1,7 @@
+div.block-image {
+  margin: 0.5rem 0;
+
+  figcaption {
+    font-size: 85%;
+  }
+}
diff --git a/static/src/scss/base.scss b/static/src/scss/base.scss
index 5379b34..f6276bc 100644
--- a/static/src/scss/base.scss
+++ b/static/src/scss/base.scss
@@ -9,6 +9,7 @@
 @import "hero";
 @import "content";
 @import "listing";
+@import "blocks";
 
 html,
 body {
diff --git a/website/common/streamfield.py b/website/common/streamfield.py
index c86c2b2..e63dce0 100644
--- a/website/common/streamfield.py
+++ b/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()),
     ]
 
 
diff --git a/website/common/templates/common/blocks/image-caption.html b/website/common/templates/common/blocks/image-caption.html
new file mode 100644
index 0000000..f0713d6
--- /dev/null
+++ b/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>