Implement streamfield block previews (added in Wagtail 6.4)

.cr.ini

@@ -0,0 +1,7 @@
+# This is a deployment file for CodeRed Cloud hosting.
+# If you are not using CodeRed Cloud, you can delete this file.
+#
+# https://www.codered.cloud/cli/
+#
+[cr]
+deploy_include = website/static/website/css/custom.css

azure-pipelines.yml

@@ -31,11 +31,11 @@ stages:
         # wagtail we support, for testing purposes.
         py3.9:
           PYTHON_VERSION: '3.9'
-          WAGTAIL_VERSION: '6.3.*'
+          WAGTAIL_VERSION: '6.4.*'
           TEMPLATE: 'basic'
         py3.10:
           PYTHON_VERSION: '3.10'
-          WAGTAIL_VERSION: '6.3.*'
+          WAGTAIL_VERSION: '6.4.*'
           TEMPLATE: 'basic'
         py3.11:
           PYTHON_VERSION: '3.11'

coderedcms/blocks/__init__.py

@@ -60,7 +60,12 @@
 # Collections of blocks commonly used together.
 
 HTML_STREAMBLOCKS = [
-    ("text", RichTextBlock(icon="cr-font")),
+    (
+        "text",
+        RichTextBlock(
+            icon="cr-font",
+        ),
+    ),
     ("button", ButtonBlock()),
     ("image", ImageBlock()),
     ("image_link", ImageLinkBlock()),
@@ -70,6 +75,8 @@
             icon="code",
             form_classname="monospace",
             label=_("HTML"),
+            description="Raw html content.",
+            preview_value="<h1>Raw html</h1><table class='table'><tr><td>Table in html</td></tr></table>",
         ),
     ),
     ("download", DownloadBlock()),
@@ -143,7 +150,11 @@
     (
         "html",
         blocks.RawHTMLBlock(
-            icon="code", form_classname="monospace", label=_("HTML")
+            icon="code",
+            form_classname="monospace",
+            label=_("HTML"),
+            description="Raw html content.",
+            preview_value="<h1>Raw html</h1><table class='table'><tr><td>Table in html</td></tr></table>",
         ),
     ),
 ]

coderedcms/blocks/content_blocks.py

@@ -64,6 +64,15 @@ class Meta:
         template = "coderedcms/blocks/card_foot.html"
         icon = "cr-list-alt"
         label = _("Card")
+        description = (
+            "A component of information with image, text, and buttons."
+        )
+        preview_value = {
+            "settings": {"custom_template": ""},
+            "title": "Preview Card",
+            "subtitle": "Optional Subtitle",
+            "description": "Card content, which is rich text formatable.",
+        }
 
 
 class CarouselBlock(BaseBlock):
@@ -302,6 +311,39 @@ class Meta:
         template = "coderedcms/blocks/pricelist_block.html"
         icon = "cr-usd"
         label = _("Price List")
+        preview_value = {
+            "settings": {"custom_template": ""},
+            "heading": "Example Price List",
+            "items": [
+                (
+                    "item",
+                    {
+                        "settings": {"custom_template": ""},
+                        "name": "Price 1",
+                        "description": "An example price",
+                        "price": "$10/month",
+                    },
+                ),
+                (
+                    "item",
+                    {
+                        "settings": {"custom_template": ""},
+                        "name": "Price 2",
+                        "description": "An example price",
+                        "price": "$100/year",
+                    },
+                ),
+                (
+                    "item",
+                    {
+                        "settings": {"custom_template": ""},
+                        "name": "Price 3",
+                        "description": "An example price",
+                        "price": "$1/day",
+                    },
+                ),
+            ],
+        }
 
 
 class ContentWallBlock(BaseBlock):

coderedcms/blocks/html_blocks.py

@@ -37,6 +37,13 @@ class Meta:
         icon = "cr-hand-pointer-o"
         label = _("Button Link")
         value_class = LinkStructValue
+        preview_value = {
+            "settings": {"custom_template": ""},
+            "button_title": "Example Button",
+            "other_link": "https://www.example.com",
+            "button_style": "btn-primary",
+            "button_size": "",
+        }
 
 
 class DownloadBlock(ButtonMixin, BaseBlock):
@@ -96,6 +103,12 @@ class Meta:
         template = "coderedcms/blocks/google_map.html"
         icon = "cr-map"
         label = _("Google Map")
+        preview_value = {
+            "settings": {"custom_template": ""},
+            "map_title": "Codered Headquarters",
+            "place_id": "ChIJWYxmGn7wMIgRf_Jq3ivHAsM",
+            "map_zoom_level": 14,
+        }
 
 
 class EmbedVideoBlock(BaseBlock):
@@ -131,6 +144,8 @@ class Meta:
         template = "coderedcms/blocks/h1_block.html"
         icon = "cr-header"
         label = _("Heading 1")
+        description = "An <h1> heading."
+        preview_value = "An H1 Heading."
 
 
 class H2Block(BaseBlock):
@@ -147,6 +162,8 @@ class Meta:
         template = "coderedcms/blocks/h2_block.html"
         icon = "cr-header"
         label = _("Heading 2")
+        description = "An <h2> heading."
+        preview_value = "An H2 Heading."
 
 
 class H3Block(BaseBlock):
@@ -163,6 +180,8 @@ class Meta:
         template = "coderedcms/blocks/h3_block.html"
         icon = "cr-header"
         label = _("Heading 3")
+        description = "An <h3> heading."
+        preview_value = "An H3 Heading."
 
 
 class TableBlock(BaseBlock):
@@ -237,6 +256,17 @@ class Meta:
         template = "coderedcms/blocks/pagelist_block.html"
         icon = "list-ul"
         label = _("Latest Pages")
+        description = "Renders a preview of selected pages."
+        preview_value = {"settings": {"custom_template": ""}}
+
+    def get_preview_value(self):
+        from wagtail.models import Page
+
+        val = super().get_preview_value()
+        val["indexed_by"] = Page.objects.live().first()
+        val["num_posts"] = 3
+
+        return val
 
     def get_context(self, value, parent_context=None):
         context = super().get_context(value, parent_context=parent_context)
@@ -286,6 +316,26 @@ class Meta:
         template = "coderedcms/blocks/pagepreview_block.html"
         icon = "doc-empty-inverse"
         label = _("Page Preview")
+        description = "Renders a preview of a specific page."
+        preview_value = ""
+        preview_template = (
+            "coderedcms/previews/blocks/pagepreview_block_preview.html"
+        )
+
+    def get_preview_value(self):
+        from wagtail.models import Page
+
+        return {
+            "settings": {"custom_template": ""},
+            "page": Page.objects.live().first(),
+        }
+
+    def get_preview_context(self, value, parent_context=None):
+        ctx = super().get_preview_context(value, parent_context)
+        value = self.get_preview_value()
+        ctx["page"] = value.get("page")
+
+        return ctx
 
 
 class QuoteBlock(BaseBlock):
@@ -308,8 +358,16 @@ class Meta:
         template = "coderedcms/blocks/quote_block.html"
         icon = "openquote"
         label = _("Quote")
+        description = "A <blockquote>."
+        preview_value = {
+            "settings": {"custom_template": ""},
+            "text": "A block quote example.",
+            "author": "Codered",
+        }
 
 
 class RichTextBlock(blocks.RichTextBlock):
     class Meta:
         template = "coderedcms/blocks/rich_text_block.html"
+        description = ("Rich text content.",)
+        preview_value = "<h1>Some Sample Text!</h1><br><p>It is able to be <i>Italic</i> and <b>bold</b> as well."

coderedcms/blocks/layout_blocks.py

@@ -34,6 +34,15 @@ class Meta:
         template = "coderedcms/blocks/column_block.html"
         icon = "placeholder"
         label = "Column"
+        description = "Renders the content in a column."
+        preview_value = (
+            {
+                "settings": {
+                    "custom_template": "",
+                },
+                "content": [("text", "<h1>This is a column!</h1>")],
+            },
+        )
 
 
 class GridBlock(BaseLayoutBlock):
@@ -50,6 +59,32 @@ class Meta:
         template = "coderedcms/blocks/grid_block.html"
         icon = "cr-columns"
         label = _("Responsive Grid Row")
+        description = "Renders a row of columns."
+        preview_value = {
+            "settings": {
+                "custom_template": "",
+            },
+            "content": [
+                (
+                    "content",
+                    {
+                        "settings": {
+                            "custom_template": "",
+                        },
+                        "content": [("text", "<h1>This is a row block!</h1>")],
+                    },
+                ),
+                (
+                    "content",
+                    {
+                        "settings": {
+                            "custom_template": "",
+                        },
+                        "content": [("text", "<h1>With Two Columns!</h1>")],
+                    },
+                ),
+            ],
+        }
 
     def __init__(self, local_blocks=None, **kwargs):
         super().__init__(local_blocks=[("content", ColumnBlock(local_blocks))])
@@ -69,6 +104,33 @@ class Meta:
         template = "coderedcms/blocks/cardgrid_deck.html"
         icon = "cr-th-large"
         label = _("Card Grid")
+        description = "Renders a row of cards."
+        preview_value = {
+            "settings": {"custom_template": ""},
+            "content": [
+                (
+                    "card",
+                    {
+                        "settings": {"custom_template": ""},
+                        "title": "Card 1",
+                    },
+                ),
+                (
+                    "card",
+                    {
+                        "settings": {"custom_template": ""},
+                        "title": "Card 2",
+                    },
+                ),
+                (
+                    "card",
+                    {
+                        "settings": {"custom_template": ""},
+                        "title": "Card 3",
+                    },
+                ),
+            ],
+        }
 
 
 class HeroBlock(BaseLayoutBlock):
@@ -111,3 +173,34 @@ class Meta:
         template = "coderedcms/blocks/hero_block.html"
         icon = "cr-newspaper-o"
         label = "Hero Unit"
+        description = "Wrapper with color and image background options."
+        preview_value = {
+            "settings": {
+                "custom_template": "",
+            },
+            "background_color": "#ff0011",
+            "foreground_color": "#ffffff",
+            "content": [
+                (
+                    "row",
+                    {
+                        "settings": {
+                            "custom_template": "",
+                        },
+                        "content": [
+                            (
+                                "content",
+                                {
+                                    "settings": {
+                                        "custom_template": "",
+                                    },
+                                    "content": [
+                                        ("text", "<h1>This is a hero block!")
+                                    ],
+                                },
+                            )
+                        ],
+                    },
+                )
+            ],
+        }