Update list / struct / stream block markup to match react-streamfield CSS

wagtail/admin/static_src/wagtailadmin/js/blocks/stream.js

@@ -4,30 +4,30 @@
         Helper object to handle the menu of available block types.
         Options:
         childBlocks: list of block definitions (same as passed to StreamBlock)
-        id: ID of the container element (the one with class="stream-menu")
+        id: ID of the container element (the one around 'c-sf-add-panel')
         onChooseBlock: callback fired when a block type is chosen -
             the corresponding childBlock is passed as a parameter
         */
         var self = {};
         self.container = $('#' + opts.id);
-        self.inner = $('.stream-menu-inner', self.container);
-        self.blocklist = $('ul', self.inner);
+        self.openCloseButton = $('#' + opts.id + '-openclose');
 
         if (self.container.hasClass('stream-menu-closed')) {
-            self.inner.css('height', 0);
+            self.container.hide();
         }
 
         self.show = function() {
-            self.inner.animate({height: self.blocklist.outerHeight()}, 250, 'swing', function() {
-                $(this).height('auto');
-            });
-
+            self.container.slideDown();
             self.container.removeClass('stream-menu-closed');
+            self.container.attr('aria-hidden', 'false');
+            self.openCloseButton.addClass('c-sf-add-button--closed');
         };
 
         self.hide = function() {
-            self.inner.animate({height: 0}, 250)
+            self.container.slideUp();
             self.container.addClass('stream-menu-closed');
+            self.container.attr('aria-hidden', 'true');
+            self.openCloseButton.removeClass('c-sf-add-button--closed');
         };
 
         self.addFirstBlock = function() {
@@ -48,7 +48,7 @@
         };
 
         /* set up show/hide on click behaviour */
-        self.container.on('click', function(e) {
+        self.openCloseButton.on('click', function(e) {
             e.preventDefault();
             self.toggle();
         });
@@ -58,6 +58,7 @@
             var button = self.container.find('.action-add-block-' + childBlock.name);
             button.on('click', function() {
                 if (opts.onChooseBlock) opts.onChooseBlock(childBlock);
+                self.hide();
             });
         });
 

wagtail/admin/templates/wagtailadmin/block_forms/list.html

@@ -1,14 +1,6 @@
 {% extends "wagtailadmin/block_forms/sequence.html" %}
 {% load i18n %}
 
-{% block sequence_type_class %}list{% endblock %}
-
-{% block header %}
-    {% if help_text %}
-        <div class="sequence-member__help help"><span class="icon-help-inverse" aria-hidden="true"></span>{{ help_text }}</div>
-    {% endif %}
-{% endblock %}
-
 {% block footer %}
-    <button type="button" id="{{ prefix }}-add" class="button bicolor icon icon-plus">{% trans "Add another" %}</button>
+    <button type="button" title="Add" id="{{ prefix }}-add" class="c-sf-add-button c-sf-add-button--visible"><i aria-hidden="true">+</i></button>
 {% endblock %}

wagtail/admin/templates/wagtailadmin/block_forms/list_member.html

@@ -2,9 +2,13 @@
 {% load i18n %}
 
 {% block header_controls %}
-    <div class="sequence-controls list-controls button-group button-group-square">
-        <button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="button icon text-replace icon-order-up">{% trans 'Move up' %}</button>
-        <button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="button icon text-replace icon-order-down">{% trans 'Move down' %}</button>
-        <button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="button icon text-replace hover-no icon-bin">{% trans 'Delete' %}</button>
-    </div>
+    <button type="button" id="{{ prefix }}-moveup" class="c-sf-block__actions__single" title="{% trans 'Move up' %}">
+        <i class="icon icon-arrow-up" aria-hidden="true"></i>
+    </button>
+    <button type="button" id="{{ prefix }}-movedown" class="c-sf-block__actions__single" title="{% trans 'Move down' %}">
+        <i class="icon icon-arrow-down" aria-hidden="true"></i>
+    </button>
+    <button type="button" id="{{ prefix }}-delete" class="c-sf-block__actions__single" title="{% trans 'Delete' %}">
+        <i class="icon icon-bin" aria-hidden="true"></i>
+    </button>
 {% endblock %}

wagtail/admin/templates/wagtailadmin/block_forms/sequence.html

@@ -12,7 +12,17 @@
 
 
 {% endcomment %}
-<div class="sequence-container sequence-type-{% block sequence_type_class %}{% endblock %}">
+
+{% if help_text %}
+    <span>
+        <div class="help">
+            <span class="icon-help-inverse" aria-hidden="true"></span>
+            {{ help_text }}
+        </div>
+    </span>
+{% endif %}
+
+<div class="c-sf-container">
     <input type="hidden" name="{{ prefix }}-count" id="{{ prefix }}-count" value="{{ list_members_html|length }}">
 
     {% block header %}{% endblock %}
@@ -23,12 +33,10 @@
         {% endfor %}
     {% endif %}
 
-    <div class="sequence-container-inner">
-        <ul id="{{ prefix }}-list" class="sequence">
-            {% for list_member_html in list_members_html %}
-                {{ list_member_html }}
-            {% endfor %}
-        </ul>
-        {% block footer %}{% endblock %}
+    <div id="{{ prefix }}-list">
+        {% for list_member_html in list_members_html %}
+            {{ list_member_html }}
+        {% endfor %}
     </div>
+    {% block footer %}{% endblock %}
 </div>

wagtail/admin/templates/wagtailadmin/block_forms/sequence_member.html

@@ -12,15 +12,31 @@
 
 
 {% endcomment %}
-<li id="{{ prefix }}-container" class="sequence-member">
+<div id="{{ prefix }}-container" aria-hidden="false">
     <input type="hidden" id="{{ prefix }}-deleted" name="{{ prefix }}-deleted" value="">
     <input type="hidden" id="{{ prefix }}-order" name="{{ prefix }}-order" value="{{ index }}">
-    
     {% block hidden_fields %}{% endblock %}
 
-    {% block header_controls %}{% endblock %}
-
-    <div class="sequence-member-inner {% block sequence_member_inner_classes %}{% endblock %}">{{ child.render_form }}</div>
-
-    {% block footer_controls %}{% endblock %}
-</li>
+    <div>
+        <div class="c-sf-container__block-container">
+            <div class="c-sf-block">
+                <div class="c-sf-block__header">
+                    <span class="c-sf-block__header__icon">
+                        <i class="icon icon-{{ child_block.meta.icon }}"></i>
+                    </span>
+                    <h3 class="c-sf-block__header__title"></h3>
+                    <div class="c-sf-block__actions">
+                        <span class="c-sf-block__type">{% block block_type_label %}{% endblock %}</span>
+                        {% block header_controls %}{% endblock %}
+                    </div>
+                </div>
+                <div class="c-sf-block__content" aria-hidden="false">
+                    <div class="c-sf-block__content-inner">
+                        {{ child.render_form }}
+                    </div>
+                </div>
+            </div>
+            {% block footer_controls %}{% endblock %}
+        </div>
+    </div>
+</div>

wagtail/admin/templates/wagtailadmin/block_forms/stream.html

@@ -1,7 +1,5 @@
 {% extends "wagtailadmin/block_forms/sequence.html" %}
 
-{% block sequence_type_class %}stream{% endblock %}
-
 {% block header %}
     {% if list_members_html %}
         {% include "wagtailadmin/block_forms/stream_menu.html" with menu_id=prefix|add:"-prependmenu" state="closed" %}

wagtail/admin/templates/wagtailadmin/block_forms/stream_member.html

@@ -2,19 +2,22 @@
 {% load i18n %}
 
 {% block hidden_fields %}
-    <input type="hidden" id="{{ prefix }}-type" name="{{ prefix }}-type" value="{{ child.block.name }}">
+    <input type="hidden" id="{{ prefix }}-type" name="{{ prefix }}-type" value="{{ child_block.name }}">
     <input type="hidden" id="{{ prefix }}-id" name="{{ prefix }}-id" value="{{ block_id|default:"" }}">
 {% endblock %}
 
+{% block block_type_label %}{{ child_block.label }}{% endblock %}
+
 {% block header_controls %}
-    <div class="sequence-controls">
-        <h3><label{% if child.id_for_label %} for="{{ child.id_for_label }}"{% endif %}>{{ child.block.label }}</label></h3>
-        <div class="button-group button-group-square">
-            <button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="button icon text-replace icon-order-up">{% trans 'Move up' %}</button>
-            <button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="button icon text-replace icon-order-down">{% trans 'Move down' %}</button>
-            <button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="button icon text-replace hover-no icon-bin">{% trans 'Delete' %}</button>
-        </div>
-    </div>
+    <button type="button" id="{{ prefix }}-moveup" class="c-sf-block__actions__single" title="{% trans 'Move up' %}">
+        <i class="icon icon-arrow-up" aria-hidden="true"></i>
+    </button>
+    <button type="button" id="{{ prefix }}-movedown" class="c-sf-block__actions__single" title="{% trans 'Move down' %}">
+        <i class="icon icon-arrow-down" aria-hidden="true"></i>
+    </button>
+    <button type="button" id="{{ prefix }}-delete" class="c-sf-block__actions__single" title="{% trans 'Delete' %}">
+        <i class="icon icon-bin" aria-hidden="true"></i>
+    </button>
 {% endblock %}
 
 {% block footer_controls %}

wagtail/admin/templates/wagtailadmin/block_forms/stream_menu.html

@@ -1,14 +1,23 @@
-<div class="stream-menu {% if state == 'closed' %}stream-menu-closed{% endif %}" id="{{ menu_id }}">
-    <a href="#" class="toggle"><span>Insert block</span></a>
-    <div class="stream-menu-inner">
+<button type="button" title="Add" class="c-sf-add-button c-sf-add-button--visible {% if state == 'open' %}c-sf-add-button--closed{% endif %}" id="{{ menu_id }}-openclose">
+    <i aria-hidden="true">+</i>
+</button>
+<div aria-hidden="{% if state == 'closed' %}true{% else %}false{% endif %}" {% if state == 'closed' %}class="stream-menu-closed"{% endif %} id="{{ menu_id }}">
+    <div class="c-sf-add-panel">
         {% regroup child_blocks by meta.group as grouped_child_blocks %}
         {% for child_blocks in grouped_child_blocks %}
-            {% if child_blocks.grouper %}<h3>{{child_blocks.grouper}}</h3>{% endif %}
-            <ul>
+            {% if child_blocks.grouper %}
+                <h4 class="c-sf-add-panel__group-title">{{ child_blocks.grouper }}</h4>
+            {% endif %}
+            <div class="c-sf-add-panel__grid">
                 {% for child_block in child_blocks.list %}
-                    <li><button type="button" class="button action-add-block-{{ child_block.name }} icon icon-{{ child_block.meta.icon }}"><span>{{ child_block.label }}</span></button></li>
+                    <button type="button" class="c-sf-button action-add-block-{{ child_block.name }}">
+                        <span class="c-sf-button__icon">
+                            <i class="icon icon-{{ child_block.meta.icon }}"></i>
+                        </span>
+                        <span class="c-sf-button__label">{{ child_block.label }}</span>
+                    </button>
                 {% endfor %}
-            </ul>
+            </div>
         {% endfor %}
     </div>
 </div>

wagtail/admin/templates/wagtailadmin/block_forms/struct.html

@@ -1,16 +1,19 @@
 <div class="{{ classname }}">
     {% if help_text %}
-        <div class="sequence-member__help help"><span class="icon-help-inverse" aria-hidden="true"></span>{{ help_text }}</div>
+        <span>
+            <div class="help">
+                <span class="icon-help-inverse" aria-hidden="true"></span>
+                {{ help_text }}
+            </div>
+        </span>
     {% endif %}
 
-    <ul class="fields">
-        {% for child in children.values %}
-            <li{% if child.block.required %} class="required"{% endif %}>
-                {% if child.block.label %}
-                    <label{% if child.id_for_label %} for="{{ child.id_for_label }}"{% endif %}>{{ child.block.label }}:</label>
-                {% endif %}
-                {{ child.render_form }}
-            </li>
-        {% endfor %}
-    </ul>
+    {% for child in children.values %}
+        <div class="field {% if child.block.required %}required{% endif %}">
+            {% if child.block.label %}
+                <label class="field__label" {% if child.id_for_label %}for="{{ child.id_for_label }}"{% endif %}>{{ child.block.label }}</label>
+            {% endif %}
+            {{ child.render_form }}
+        </div>
+    {% endfor %}
 </div>

wagtail/core/blocks/list_block.py

@@ -43,6 +43,7 @@ class ListBlock(Block):
         """
         child = self.child_block.bind(value, prefix="%s-value" % prefix, errors=errors)
         return render_to_string('wagtailadmin/block_forms/list_member.html', {
+            'child_block': self.child_block,
             'prefix': prefix,
             'child': child,
             'index': index,

wagtail/core/blocks/stream_block.py

@@ -64,7 +64,7 @@ class BaseStreamBlock(Block):
 
     def render_list_member(self, block_type_name, value, prefix, index, errors=None, id=None):
         """
-        Render the HTML for a single list item. This consists of an <li> wrapper, hidden fields
+        Render the HTML for a single list item. This consists of a container, hidden fields
         to manage ID/deleted state/type, delete/reorder buttons, and the child block's own HTML.
         """
         child_block = self.child_blocks[block_type_name]
@@ -72,6 +72,7 @@ class BaseStreamBlock(Block):
         return render_to_string('wagtailadmin/block_forms/stream_member.html', {
             'child_blocks': self.sorted_child_blocks(),
             'block_type_name': block_type_name,
+            'child_block': child_block,
             'prefix': prefix,
             'child': child,
             'index': index,
@@ -143,6 +144,7 @@ class BaseStreamBlock(Block):
 
         return render_to_string('wagtailadmin/block_forms/stream.html', {
             'prefix': prefix,
+            'help_text': getattr(self.meta, 'help_text', None),
             'list_members_html': list_members_html,
             'child_blocks': self.sorted_child_blocks(),
             'header_menu_prefix': '%s-before' % prefix,