Add block- CSS class in block preview template

This matches the behaviour of {% include_block %} inside a StreamBlock

wagtail/admin/tests/test_block_preview.py

@@ -24,6 +24,7 @@ class TestStreamFieldBlockPreviewView(WagtailTestUtils, TestCase):
             description="A single line of text",
             preview_value="Hello, world!",
         )
+        block.set_name("single_line_text")
         response = self.get(block)
         self.assertEqual(response.status_code, 200)
         soup = self.get_soup(response.content)
@@ -45,6 +46,9 @@ class TestStreamFieldBlockPreviewView(WagtailTestUtils, TestCase):
         self.assertIsNotNone(main)
         self.assertEqual(main.text.strip(), "Hello, world!")
 
+        wrapper = main.select_one("div.block-single_line_text")
+        self.assertIsNotNone(wrapper)
+
     def test_nonexisting_block(self):
         response = self.client.get(reverse("wagtailadmin_block_preview"))
         self.assertEqual(response.status_code, 404)

wagtail/templates/wagtailcore/shared/block_preview.html

@@ -18,7 +18,15 @@
         {% block body %}
             <main>
                 {% block content %}
-                    {% include_block bound_block %}
+                    {% comment %}
+                        StreamBlock renders each child block in a `div` wrapper
+                        like the following. Since we are rendering the block
+                        directly (without a StreamBlock), add the div wrapper
+                        here in case the styles rely on the `block-` CSS class.
+                    {% endcomment %}
+                    <div class="block-{{ block_def.name }}">
+                        {% include_block bound_block %}
+                    </div>
                 {% endblock %}
             </main>