Expected UI issues with Wagtail 3.0 release

[thibaudcolas]

Hi Neon Jungle! The Wagtail 3.0 first release candidate is out. There are large UI changes in this release, for which we have reviewed expected breakage in third-party UI customisations.

This is beyond what we do with our normal breaking changes policy, since the majority of those changes are on parts of Wagtail that haven’t been publicly supported / documented in any way. To make sure this goes smoothly anyway, I’m here to provide an advance notice of what we’re aware of with this specific package 🙂

In the case of wagtailvideos here are the changes we’re expecting to require rework for Wagtail 3.0.

Modernizr

Usage of Modernizr is likely only in legacy code, with support checks for now-unsupported browsers. Any still-relevant checks should be replaced with modern alternatives. Suggested actions:

• Remove all legacy usage
• Remove filereader class check in particular

wagtail/neon-jungle/wagtailvideos/wagtailvideos/static/wagtailvideos/js/add-multiple.js
2:    // Redirect users that don't support filereader
3:    if (!$('html').hasClass('filereader')) {

Uppercase text

The majority of the Wagtail admin UI no longer uses uppercase text, to improve readability. The exception is the page status (live, draft, etc.). Suggested actions:

• Remove all usage of uppercase text in the CMS, except for page status.
• Aside from CSS, the utility classes u-text-transform-uppercase and label-uppercase no longer exist and shouldn’t be used anymore.

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/videos/edit.html
37:                    {% include "wagtailvideos/videos/_file_field_as_li.html"  with li_classes="label-above label-uppercase" %}
41:                    {% include "wagtailadmin/shared/field_as_li.html" with li_classes="label-above label-uppercase" %}
82:            <h2 class="u-text-transform-uppercase">{% trans "Transcodes" %}</h2>
85:            <h3 class="u-text-transform-uppercase">{% trans "Available Transcodes" %}</h3>
103:            <h3 class="u-text-transform-uppercase">{% trans "Create transcode" %}</h3>
107:                    {% include "wagtailadmin/shared/field_as_li.html" with field=transcode_form.media_format li_classes="label-above label-uppercase" %}
108:                    {% include "wagtailadmin/shared/field_as_li.html" with field=transcode_form.quality li_classes="label-above label-uppercase" %}
119:            <h2 class="u-text-transform-uppercase">{% trans "Tracks" %}</h2>

Core templates reuse

Some of those customisations are officially supported (for example custom report templates), some are not, this needs to be reviewed case-by-case.

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/multiple/edit_form.html
9:                {% include "wagtailadmin/shared/field_as_li.html" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/chooser/results.html
32:    {% include "wagtailadmin/shared/ajax_pagination_nav.html" with items=videos %}

wagtail/neon-jungle/wagtailnews/wagtailnews/templates/wagtailnews/unpublish.html
1:{% extends "wagtailadmin/base.html" %}
8:    {% include "wagtailadmin/shared/header.html" with title=new_str subtitle=newsitem icon="grip" %}
20:    {% include "wagtailadmin/pages/_editor_css.html" %}
23:    {% include "wagtailadmin/pages/_editor_js.html" %}

wagtail/neon-jungle/wagtailnews/wagtailnews/templates/wagtailnews/delete.html
1:{% extends "wagtailadmin/base.html" %}
8:    {% include "wagtailadmin/shared/header.html" with title=new_str subtitle=newsitem icon="grip" %}
28:    {% include "wagtailadmin/pages/_editor_css.html" %}
31:    {% include "wagtailadmin/pages/_editor_js.html" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/multiple/add.html
1:{% extends "wagtailadmin/base.html" %}
12:    {% include "wagtailadmin/shared/header.html" with title=add_str icon="media" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/videos/edit.html
1:{% extends "wagtailadmin/base.html" %}
28:{% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=video.title icon="media" %}
41:                    {% include "wagtailadmin/shared/field_as_li.html" with li_classes="label-above label-uppercase" %}
107:                    {% include "wagtailadmin/shared/field_as_li.html" with field=transcode_form.media_format li_classes="label-above label-uppercase" %}
108:                    {% include "wagtailadmin/shared/field_as_li.html" with field=transcode_form.quality li_classes="label-above label-uppercase" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/permissions/includes/video_permissions_formset.html
1:{% extends "wagtailadmin/permissions/includes/collection_member_permissions_formset.html" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/videos/index.html
1:{% extends "wagtailadmin/base.html" %}
27:    {% include "wagtailadmin/shared/header.html" with title=video_str add_link="wagtailvideos:add_multiple" action_url=add_link icon="media" add_text=add_video_str action_text=add_video_str search_url="wagtailvideos:index" %}
33:                    {% include "wagtailadmin/shared/collection_chooser.html" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/videos/usage.html
1:{% extends "wagtailadmin/base.html" %}
6:    {% include "wagtailadmin/shared/header.html" with title=usage_str subtitle=video.title %}
37:                            {% include "wagtailadmin/shared/page_status_tag.html" with page=page %}
44:    {% include "wagtailadmin/shared/pagination_nav.html" with items=used_by linkurl="-" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/videos/_file_field.html
1:{% extends "wagtailadmin/shared/field.html" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/videos/results.html
33:    {% include "wagtailadmin/shared/pagination_nav.html" with items=videos is_searching=is_searching query_string=query_string linkurl="wagtailvideos:index" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/chooser/chooser.html
3:{% include "wagtailadmin/shared/header.html" with title=choose_str merged=1 tabbed=1 icon="media" %}
17:                    {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
20:                    {% include "wagtailadmin/shared/collection_chooser.html" %}
45:                            {% include "wagtailadmin/shared/field_as_li.html" with field=field %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/videos/confirm_delete.html
1:{% extends "wagtailadmin/base.html" %}
8:    {% include "wagtailadmin/shared/header.html" with title=del_str icon="media" %}

wagtail/neon-jungle/wagtailpolls/wagtailpolls/templates/wagtailpolls/index.html
1:{% extends "wagtailadmin/base.html" %}

wagtail/neon-jungle/wagtailpolls/wagtailpolls/templates/wagtailpolls/create.html
1:{% extends "wagtailadmin/base.html" %}
8:	{% include "wagtailadmin/shared/header.html" with title=new_str subtitle=pollpost_str icon="group" %}
30:	{% include "wagtailadmin/pages/_editor_css.html" %}
33:	{% include "wagtailadmin/pages/_editor_js.html" %}

wagtail/neon-jungle/wagtailpolls/wagtailpolls/templates/wagtailpolls/poll_results.html
1:{% extends "wagtailadmin/base.html" %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/videos/add.html
1:{% extends "wagtailadmin/base.html" %}
20:    {% include "wagtailadmin/shared/header.html" with title=add_str icon="media" %}
30:                        {% include "wagtailadmin/shared/field_as_li.html" with field=field %}

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/widgets/video_chooser.html
1:{% extends "wagtailadmin/widgets/chooser.html" %}

Bootstrap tabs

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/chooser/chooser.html
6:    <ul class="tab-nav merged" data-tab-nav>

Here is our guidance on replacing Bootstrap tabs, and our proposal for a tabs component API.

---

I hope this all makes sense. We’ve made a lot of other styling and template changes that are hard to track down, and for which it’s unclear whether any breakage might be expected or not. As you go through the Wagtail 3.0 compatibility work, please let me know if there are other compatibility issues you come across so we can consider those customisations in Wagtail development in the future, and let others know about those breakages.

[seb-b]

Thanks for this, it's very thorough. Hopefully we'll be able to get onto this before the release of 3.0 if not shortly after

[richdsmith]

Is this being actively worked on? 3.x support would be nice

[seb-b]

not actively no, I was a bit optimistic about getting an update out before 3.0