Add block previews

bakerydemo/base/blocks.py

@@ -1,3 +1,4 @@
+from django.utils.functional import cached_property
 from wagtail.blocks import (
     CharBlock,
     ChoiceBlock,
@@ -7,6 +8,7 @@
     TextBlock,
 )
 from wagtail.embeds.blocks import EmbedBlock
+from wagtail.images import get_image_model
 from wagtail.images.blocks import ImageChooserBlock
 
 
@@ -20,9 +22,23 @@ class ImageBlock(StructBlock):
     caption = CharBlock(required=False)
     attribution = CharBlock(required=False)
 
+    @cached_property
+    def preview_image(self):
+        # Cache the image object for previews to avoid repeated queries
+        return get_image_model().objects.last()
+
+    def get_preview_value(self):
+        return {
+            **self.meta.preview_value,
+            "image": self.preview_image,
+            "caption": self.preview_image.description,
+        }
+
     class Meta:
         icon = "image"
         template = "blocks/image_block.html"
+        preview_value = {"attribution": "The Wagtail Bakery"}
+        description = "An image with optional caption and attribution"
 
 
 class HeadingBlock(StructBlock):
@@ -45,6 +61,8 @@ class HeadingBlock(StructBlock):
     class Meta:
         icon = "title"
         template = "blocks/heading_block.html"
+        preview_value = {"heading_text": "Healthy bread types", "size": "h2"}
+        description = "A heading with level two, three, or four"
 
 
 class BlockQuote(StructBlock):
@@ -58,6 +76,14 @@ class BlockQuote(StructBlock):
     class Meta:
         icon = "openquote"
         template = "blocks/blockquote.html"
+        preview_value = {
+            "text": (
+                "If you read a lot you're well read / "
+                "If you eat a lot you're well bread."
+            ),
+            "attribute_name": "Willie Wagtail",
+        }
+        description = "A quote with an optional attribution"
 
 
 # StreamBlocks
@@ -68,12 +94,27 @@ class BaseStreamBlock(StreamBlock):
 
     heading_block = HeadingBlock()
     paragraph_block = RichTextBlock(
-        icon="pilcrow", template="blocks/paragraph_block.html"
+        icon="pilcrow",
+        template="blocks/paragraph_block.html",
+        preview_value=(
+            """
+            <h2>Our bread pledge</h2>
+            <p>As a bakery, <b>breads</b> have <i>always</i> been in our hearts.
+            <a href="https://en.wikipedia.org/wiki/Lorem_ipsum">Cat ipsum</a>
+            dolor sit amet, scream for no reason at 4 am. Ptracy roll on the
+            floor purring your whiskers off, for peer out window, chatter at
+            birds, lure them to mouth.</p>
+            """
+        ),
+        description="A rich text paragraph",
     )
     image_block = ImageBlock()
     block_quote = BlockQuote()
     embed_block = EmbedBlock(
         help_text="Insert an embed URL e.g https://www.youtube.com/watch?v=SGJFWirQ3ks",
         icon="media",
         template="blocks/embed_block.html",
+        preview_template="base/preview/static_embed_block.html",
+        preview_value="https://www.youtube.com/watch?v=C8PUlZrngZQ",
+        description="An embedded video or other media",
     )

bakerydemo/recipes/blocks.py

@@ -29,6 +29,13 @@ class Meta:
         icon = "tick"
 
 
+class CustomTypedTableBlock(TypedTableBlock):
+    def get_preview_value(self):
+        # Avoid having to construct TypedTable ourselves. This won't be
+        # necessary if https://github.com/wagtail/wagtail/pull/12808 is merged
+        return self.to_python(self.meta.preview_value)
+
+
 class RecipeStreamBlock(StreamBlock):
     """
     Define the custom blocks that `StreamField` will utilize
@@ -39,15 +46,69 @@ class RecipeStreamBlock(StreamBlock):
         icon="pilcrow", template="blocks/paragraph_block.html", group="Content"
     )
     block_quote = BlockQuote(group="Content")
-    table_block = TableBlock(group="Content")
-    typed_table_block = TypedTableBlock(
+    table_block = TableBlock(
+        group="Content",
+        description="A table of data with plain text cells",
+        preview_value={
+            "first_row_is_table_header": "True",
+            "data": [
+                ["Bread type", "Origin"],
+                ["Anpan", "Japan"],
+                ["Crumpet", "United Kingdom"],
+                ["Roti buaya", "Indonesia"],
+            ],
+        },
+    )
+    typed_table_block = CustomTypedTableBlock(
         [
             ("text", CharBlock()),
             ("numeric", FloatBlock()),
             ("rich_text", RichTextBlock()),
             ("image", ImageChooserBlock()),
         ],
         group="Content",
+        description=(
+            "A table of data with cells that can include "
+            "text, numbers, rich text, and images"
+        ),
+        preview_value={
+            "caption": "Nutritional information for 100g of bread",
+            "columns": [
+                {"type": "rich_text", "heading": "Nutrient"},
+                {"type": "numeric", "heading": "White bread"},
+                {"type": "numeric", "heading": "Brown bread"},
+                {"type": "numeric", "heading": "Wholemeal bread"},
+            ],
+            "rows": [
+                {
+                    "values": [
+                        '<a href="https://en.wikipedia.org/wiki/Protein">'
+                        "Protein</a> <b>(g)</b>",
+                        7.9,
+                        7.9,
+                        9.4,
+                    ]
+                },
+                {
+                    "values": [
+                        '<a href="https://en.wikipedia.org/wiki/Carbohydrate">'
+                        "Carbohydrate</a> <b>(g)</b>",
+                        46.1,
+                        42.1,
+                        42,
+                    ]
+                },
+                {
+                    "values": [
+                        '<a href="https://en.wikipedia.org/wiki/Sugar">'
+                        "Total sugars</a> <b>(g)</b>",
+                        3.4,
+                        3.4,
+                        2.8,
+                    ]
+                },
+            ],
+        },
     )
 
     image_block = ImageBlock(group="Media")
@@ -56,6 +117,8 @@ class RecipeStreamBlock(StreamBlock):
         icon="media",
         template="blocks/embed_block.html",
         group="Media",
+        preview_value="https://www.youtube.com/watch?v=C8PUlZrngZQ",
+        description="An embedded video or other media",
     )
 
     ingredients_list = ListBlock(
@@ -64,11 +127,25 @@ class RecipeStreamBlock(StreamBlock):
         max_num=10,
         icon="list-ol",
         group="Cooking",
+        preview_value=["200g flour", "1 egg", "1 cup of sugar"],
+        description=(
+            "A list of ingredients to use in the recipe "
+            "with optional bold, italic, and link options"
+        ),
     )
     steps_list = ListBlock(
         RecipeStepBlock(),
         min_num=2,
         max_num=10,
         icon="tasks",
         group="Cooking",
+        preview_value=[
+            {"text": "An easy step", "difficulty": "S"},
+            {"text": "A difficult step", "difficulty": "L"},
+            {"text": "A medium step", "difficulty": "M"},
+        ],
+        description=(
+            "A list of steps to follow in the recipe, "
+            "with a difficulty rating for each step"
+        ),
     )

bakerydemo/static/css/main.css

@@ -2092,3 +2092,17 @@ input[type='radio'] {
   white-space: nowrap;
   border: 0;
 }
+
+/* Block previews */
+
+.block-preview {
+  padding: 1rem;
+}
+
+.static-block-preview {
+  width: initial;
+  max-width: 100vw;
+  max-height: 100vh;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}

bakerydemo/templates/base/preview/static_embed_block.html

@@ -0,0 +1,6 @@
+{% extends "wagtailcore/shared/block_preview.html" %}
+{% load static %}
+
+{% block content %}
+    <img class="static-block-preview" src="{% static "img/embed-block-preview.png" %}" alt="Preview of an embedded video" />
+{% endblock %}

bakerydemo/templates/wagtailcore/shared/block_preview.html

@@ -0,0 +1,21 @@
+{% extends "wagtailcore/shared/block_preview.html" %}
+{% load static %}
+
+{% block content %}
+    {# Add a wrapper so we can add padding with our own CSS class #}
+    <div class="block-preview">
+        {{ block.super }}
+    </div>
+{% endblock %}
+
+{% block css %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
+    <link rel="stylesheet" href="{% static 'css/font-marcellus.css' %}">
+    <link rel="stylesheet" href="{% static 'css/main.css' %}">
+{% endblock %}
+
+{% block js %}
+    {# None of our blocks need JavaScript at the moment. #}
+    {{ block.super }}
+{% endblock %}