Expected UI issues with Wagtail 3.0 release

[thibaudcolas]

Hi there! 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 wagtail-embedvideos, here are the changes we’re expecting to require rework for Wagtail 3.0.

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.

Here is the one match in this repository. label-uppercase can likely be removed.

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/edit.html
39:                            {% include "wagtailadmin/shared/field_as_li.html" with li_classes="label-above label-uppercase" %}

Legacy utility classes

Wagtail’s CSS utilities have never been intended for reuse. Some have been removed, and should be removed from existing code or replaced with alternatives. Here are classes that have been removed. Only one has a replacement currently.

-u-hidden
+w-hidden
# No alternatives:
-u-hidden@sm
-u-hidden@xs
-u-inline@sm
-u-inline@xs
-u-block@sm
-u-block@xs

And where they are used in this package:

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/edit.html
43:                <div class="u-hidden@xs">
67:        <div class="row row-flush nice-padding u-hidden@sm">

Bootstrap tabs

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/chooser/chooser.html
10:    <ul class="tab-nav merged" data-tab-nav>

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

Core templates reuse

We’ve made quite a lot of changes to our base styles and templates, which require case-by-case review. Here are places where wagtail-embedvideos reuses Wagtail templates, and we’d recommend visual checking:

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/index.html
1:{% extends "wagtailadmin/base.html" %}
33:        {% include "wagtailadmin/shared/header.html" with title=ev_str action_url=add_link icon="media" action_text=add_ev_str search_url="wagtail_embed_videos:index" %}
35:        {% include "wagtailadmin/shared/header.html" with title=ev_str icon="media" search_url="wagtal_embed_videos:index" %}
42:                    {% include "wagtailadmin/shared/collection_chooser.html" %}
71:        {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text app_label=app_label model_name=model_name objects=embed_videos parent=current_collection.id %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/add.html
1:{% extends "wagtailadmin/base.html" %}
7:    {% include "wagtailadmin/pages/_editor_js.html" %}
23:    {% include "wagtailadmin/pages/_editor_css.html" %}
29:    {% include "wagtailadmin/shared/header.html" with title=add_str icon="media" %}
32:        {% include "wagtailadmin/shared/non_field_errors.html" %}
41:                        {% include "wagtailadmin/shared/field_as_li.html" with field=field %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/confirm_delete.html
1:{% extends "wagtailadmin/base.html" %}
7:    {% include "wagtailadmin/shared/header.html" with title=del_str icon="media" %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/edit.html
1:{% extends "wagtailadmin/base.html" %}
6:    {% include "wagtailadmin/pages/_editor_css.html" %}
12:    {% include "wagtailadmin/pages/_editor_js.html" %}
27:    {% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=embed_video.title icon="media" usage_object=embed_video %}
28:    {% include "wagtailadmin/shared/non_field_errors.html" %}
39:                            {% include "wagtailadmin/shared/field_as_li.html" with li_classes="label-above label-uppercase" %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/bulk_actions/confirm_bulk_add_tags.html
1:{% extends 'wagtailadmin/bulk_actions/confirmation/base.html' %}
20:    {% include "wagtailadmin/shared/header.html" with title=add_str icon="doc-full-inverse" %}
53:        {% include 'wagtailadmin/bulk_actions/confirmation/form_with_fields.html' %}
55:        {% include 'wagtailadmin/bulk_actions/confirmation/go_back.html' %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/usage.html
1:{% extends "wagtailadmin/base.html" %}
6:    {% include "wagtailadmin/shared/header.html" with title=usage_str subtitle=embed_video.title %}
37:                            {% include "wagtailadmin/shared/page_status_tag.html" with page=page %}
44:    {% include "wagtailadmin/shared/pagination_nav.html" with items=used_by %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/chooser/results.html
35:    {% include "wagtailadmin/shared/pagination_nav.html" with items=embed_videos linkurl='wagtail_embed_videos:chooser_results' %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/chooser/upload_form.html
4:    {% include "wagtailadmin/shared/non_field_errors.html" with form=form %}
12:                    {% include "wagtailadmin/shared/field_as_li.html" with field=field %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/edit_handlers/embed_video_chooser_panel.html
1:{% include "wagtailadmin/shared/field.html" %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/bulk_actions/confirm_bulk_add_to_collection.html
1:{% extends 'wagtailadmin/bulk_actions/confirmation/base.html' %}
8:    {% include "wagtailadmin/shared/header.html" with title=add_str icon="doc-full-inverse" %}
41:        {% include 'wagtailadmin/bulk_actions/confirmation/form_with_fields.html' %}
43:        {% include 'wagtailadmin/bulk_actions/confirmation/go_back.html' %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/results.html
24:                {% include "wagtailadmin/bulk_actions/listing_checkbox_cell.html" with obj_type="embed_video" obj=embed_video aria_labelledby_prefix="select-embed_video-label embed_video_" aria_labelledby=embed_video.pk|unlocalize aria_labelledby_suffix="_title" %}
37:    {% include "wagtailadmin/shared/pagination_nav.html" with items=embed_videos is_searching=is_searching query_string=query_string %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/bulk_actions/list_items_with_no_access.html
1:{% extends 'wagtailadmin/bulk_actions/confirmation/list_items_with_no_access.html' %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/bulk_actions/confirm_bulk_delete.html
1:{% extends 'wagtailadmin/bulk_actions/confirmation/base.html' %}
7:    {% include "wagtailadmin/shared/header.html" with title=del_str icon="doc-full-inverse" %}
44:        {% include 'wagtailadmin/bulk_actions/confirmation/form.html' with action_button_class="serious" %}
46:        {% include 'wagtailadmin/bulk_actions/confirmation/go_back.html' %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/permissions/includes/embedvideo_permissions_formset.html
1:{% extends "wagtailadmin/permissions/includes/collection_member_permissions_formset.html" %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/chooser/chooser.html
4:{% include "wagtailadmin/shared/header.html" with title=choose_str merged=1 tabbed=1 icon="media" %}
21:                    {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
24:                    {% include "wagtailadmin/shared/collection_chooser.html" %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/widgets/embed_video_chooser.html
1:{% extends "wagtailadmin/widgets/chooser.html" %}

---

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.