Add a tangent block

static/src/scss/_blocks.scss

@@ -34,3 +34,10 @@ div.block-embed {
     @include center-block(50%);
   }
 }
+
+div.block-tangent {
+  .inner {
+    margin: math.div($content-block-margin-bottom, 4) 0;
+    padding-left: 1.5rem;
+  }
+}

static/src/scss/_bulma_overrides.scss

@@ -5,3 +5,8 @@ $pre-background: unset;
 $family-code: "Fira Code", monospace;
 $dropdown-content-radius: 0px;
 $dropdown-content-offset: 0px;
+
+$code-background: none;
+$pre-background: none;
+$code-padding: 0px;
+$code: inherit;

static/src/scss/base.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @use "variables" as *;
 @use "bulma_overrides" as *;
 

website/common/streamfield.py

@@ -27,9 +27,20 @@ RICH_TEXT_FEATURES = [
     "strikethrough",
 ]
 
+RICH_TEXT_FEATURES_PLAIN = [
+    "bold",
+    "italic",
+    "link",
+    "document-link",
+    "code",
+    "strikethrough",
+]
+
 RICH_TEXT_FEATURES_SIMPLE = [
     "bold",
     "italic",
+    "ol",
+    "ul",
     "link",
     "document-link",
     "code",
@@ -54,7 +65,7 @@ class LoremBlock(blocks.StructBlock):
 
 class ImageCaptionBlock(blocks.StructBlock):
     image = ImageChooserBlock()
-    caption = blocks.RichTextBlock(features=RICH_TEXT_FEATURES_SIMPLE)
+    caption = blocks.RichTextBlock(features=RICH_TEXT_FEATURES_PLAIN)
 
     class Meta:
         icon = "image"
@@ -62,6 +73,16 @@ class ImageCaptionBlock(blocks.StructBlock):
         template = "common/blocks/image-caption.html"
 
 
+class TangentBlock(blocks.StructBlock):
+    name = blocks.CharBlock(max_length=64)
+    content = blocks.RichTextBlock(features=RICH_TEXT_FEATURES_SIMPLE)
+
+    class Meta:
+        icon = "comment"
+        label = "Tangent"
+        template = "common/blocks/tangent.html"
+
+
 IGNORE_PLAINTEXT_BLOCKS = (blocks.RawHTMLBlock, EmbedBlock, ImageCaptionBlock)
 IGNORE_HEADING_BLOCKS = (*IGNORE_PLAINTEXT_BLOCKS, LoremBlock)
 
@@ -74,6 +95,7 @@ def get_blocks() -> list[tuple[str, blocks.BaseBlock]]:
         ("html", blocks.RawHTMLBlock()),
         ("image", ImageCaptionBlock()),
         ("code", CodeBlock()),
+        ("tangent", TangentBlock()),
     ]
 
 

website/common/templates/common/blocks/tangent.html

@@ -0,0 +1,9 @@
+{% load wagtailcore_tags %}
+
+<code>&lt;{{ value.name }}&gt;</code>
+
+<div class="inner">
+  {{ value.content|richtext }}
+</div>
+
+<code>&lt;/{{ value.name }}&gt;</code>