KalobTaulien · October 4, 2019 16:55 · Oct 4, 2019
diff --git a/button-block.css b/button-block.css
@@ -0,0 +1,55 @@
+/* Goes into /static/css/button-block.css */
+
+/**
+ * Add some spacing to the button-section inside of Draftail.
+ */
+ .Draftail-block--button-block {
+    padding-top: 25px;
+    padding-bottom: 15px;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    position: relative;
+}
+
+/**
+ * Add CSS-based text to the top of the Draftail button-block section.
+ */
+.Draftail-block--button-block::before {
+    content: 'Links will turn into buttons.';
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: #555;
+    font-size: 12px;
+}
+
+/**
+ * Make buttons look like Wagtail buttons.
+ */
+.Draftail-block--button-block a[role="button"] {
+    line-height: 1.85em;
+    color: #007d7e;
+    background-color: transparent;
+    padding: 0 .8em;
+    font-size: .95em;
+    border-radius: 3px;
+    font-family: Open Sans,Arial,sans-serif;
+    width: auto;
+    font-weight: 400;
+    vertical-align: middle;
+    display: inline-block;
+    border: 1px solid #007d7e;
+    text-decoration: none;
+    text-transform: uppercase;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    -webkit-font-smoothing: auto;
+}
+    /* Hover state */
+    .Draftail-block--button-block a[role="button"]:hover {
+        background-color: #00676a;
+        color: #fff;
+        border-color: transparent;
+    }
diff --git a/wagtail_hooks.py b/wagtail_hooks.py
@@ -0,0 +1,46 @@
+"""Draftail hooks.
+
+Adds a .css file to the /admin/ and register a Block Element for Draftail.
+"""
+import wagtail.admin.rich_text.editors.draftail.features as draftail_features
+from wagtail.admin.rich_text.converters.html_to_contentstate import BlockElementHandler
+from wagtail.core import hooks
+
+from django.contrib.staticfiles.templatetags.staticfiles import static
+from django.utils.html import format_html
+
+@hooks.register('register_rich_text_features')
+def register_button_section_feature(features):
+    """Register the section of buttons with Draftail."""
+    feature_name = 'button-block'
+    type_ = 'button-block'
+    tag = 'div'
+
+    control = {
+        'type': type_,
+        'label': ' ',
+        'description': 'Button Section',
+        'element': 'div',
+        'icon': 'icon icon-grip',
+    }
+
+    features.register_editor_plugin(
+        'draftail', feature_name, draftail_features.BlockFeature(control)
+    )
+
+    features.register_converter_rule('contentstate', feature_name, {
+        'from_database_format': {tag: BlockElementHandler(type_)},
+        'to_database_format': {'block_map': {type_: {'element': 'div', 'props': {'class': 'rich-text-buttons'}}}},
+
+    })
+    # Auto append feature to Draftail
+    features.default_features.append('button-block')
+
+
+# Register a custom css file for the wagtail admin.
+@hooks.register('insert_global_admin_css', order=100)
+def global_admin_css():
+    """Add /static/css/button-block.css to the Wagtail /admin/."""
+    return format_html(
+        '<link rel="stylesheet" href="{}">',
+        static('css/button-block.css'))
diff --git a/your_frontend_template.html b/your_frontend_template.html
@@ -0,0 +1,11 @@
+{% load wagtailcore_tags %}
+
+<style>
+  .rich-text-buttons a {
+    display: inline-block;
+    border-radius: 3px;
+    border: 1px solid #007d7e;
+  }
+</style>
+
+{{ self.richtextfield|richtext }}
No results found