thibaudcolas/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Community projects analysis: Wagtail 4.0 UI customisations


For context, read Wagtail 2.16 and upcoming breaking changes. For projects updating from Wagtail version 2, have a look at our Wagtail 3.0 analysis first.


Live version: https://gist.github.com/thibaudcolas/b6341dcb51e648fe24d781798c598661
Spreadsheet overview: Wagtail packages on PyPI, 2022-09-02, update status

Changes in Wagtail 4.0


Removal of unused UI components

We have removed a lot of UI components either unused in Wagtail core, or only used in very few cases.
Code search: (c-dropdown__divider|button-filter|media-placeholder|no-float|plain-checkbox-label|switch--teal-background)


Removal of button-group component

See above.
Code search: ["']button-group[\s"']


Prefixing of Wagtail classes

Refactoring of a class name only meant to be used internally. field-row renamed to w-field-row, human-readable-date -> w-human-readable-date
Code search: (field-row|human-readable-date)


Refactoring of legacy fields markup

The form fields markup has heavily changed.
Code search: (iconfield|text_input|field-small|field-col|field-content|label-above|field-comment-control)


Renaming of per-field-type classes

We have renamed classes to be more predictable.
Code search: [\s\"'](collection_choice_field|choice_field|model_choice_field|typed_choice_field|boolean_field|date_field|time_field|date_time_field|char_field|url_field|daterange_field|block_field|widget-)


Refactoring of forms panels

The form panels markup has heavily changed.
Code search: (object-help|object-layout)


Refactoring of InlinePanel markup

The HTML markup has heavily changed.
Code search: <ul class="multiple"


Breadcrumb template inclusion

We have heavily refactored breadcrumbs in Wagtail, now using a single wagtailadmin/shared/breadcrumbs.html template
Code search: (breadcrumb-next.html|breadcrumb.html|modeladmin/includes/breadcrumb.html|modeladmin/includes/header_with_breadcrumb.html)


Core templates refactorings

We refactored a lot of Wagtail’s internal templates, some niche, some widely relied on
Code search: (_privacy_switch.html|privacy_switch_panel.html|set_privacy.html|_list_choose.html|_list_move.html|_navigation_choose.html|_navigation_move.html|_page_parent_page_title_choose.html|_page_title_choose.html|_page_title_move.html|_parent_page_title_explore.html|field_panel_field.html|field_row_panel.html|single_field_panel.html|multi_field_panel.html|object_list.html|chooser_breadcrumb.html|move_breadcrumb.html|widgets/page_chooser.html|modeladmin/includes/search_form.html|wagtailredirects/index.html|wagtailsettings/edit.html|/multiple/add.html|wagtaildocs/chooser/|wagtailimages/chooser/|wagtailsnippets/snippets/index.html|wagtailsnippets/snippets/|wagtailusers/groups/|wagtailadmin/account/|wagtaildocs/documents/)


jQuery UI

Unused jQuery UI image assets are no longer available in Wagtail
Code search: N/A, most likely unused by third parties.


Editor CSS loading

We removed the need for separate loading of editor CSS. Editor CSS is now loaded everywhere.
Code search: _editor_css.html


Direct loading of Wagtail CSS

Almost all of Wagtail admin CSS is now in a single stylesheet.
Code search: (modeladmin|simple_translation|table_block|typed_table_block|wagtailadmin|wagtailcore|wagtaildocs|wagtailembeds|wagtailforms|wagtailimages|wagtaillocales|wagtailredirects|wagtailsearch|wagtailsearchpromotions|wagtailsettings|wagtailsites|wagtailsnippets|wagtailstyleguide|wagtailusers)\/css


Changes expected in future releases


jQuery Datetimepicker

Current plan: Removed in November 2022 release, with replacement
Code search: (\.datetimepicker|xdsoft_datetimepicker|jquery\.datetimepicker)


jQuery Autosize

Current plan: TBC
Code search: jquery\.autosize


Bootstrap tooltips

Current plan: Removed in future release, with replacement
Code search: (data-wagtail-tooltip|\.tooltip\()


Bootstrap transitions

Current plan: Removed in future release, with replacement
Code search: bootstrap-transition


Icon font

Current plan: Removed in November 2022 release, with replacement
Code search: icon icon-


Editor JS loading

Current plan: load editor JS everywhere rather, so it doesn’t need to be manually loaded anymore
Code search: _editor_js\.html


Direct loading of Wagtail JS

Current plan: Expected changes, requires case-by-case review
Code search: (modeladmin|simple_translation|table_block|typed_table_block|wagtailadmin|wagtailcore|wagtaildocs|wagtailembeds|wagtailforms|wagtailimages|wagtaillocales|wagtailredirects|wagtailsearch|wagtailsearchpromotions|wagtailsettings|wagtailsites|wagtailsnippets|wagtailstyleguide|wagtailusers)\/(js|css)


Tagit

Current plan: Removed in a future release, with replacement
Code search: (jquery\.tagit|.tagit\(|tag-it)


jQuery UI

Current plan: full removal of the library
Code search: (jquery-ui|ui-)


Summary: Wagtail 4.0 release

Packages affected by changes in Wagtail 4.0 compared to Wagtail 3.0, reviewed across 155 packages:


Package
Detected patterns


wagtail:


wagtail-airtable
Refactoring of legacy fields markup, Core templates refactorings


wagtail-hallo
Refactoring of legacy fields markup


wagtail-localize
Refactoring of legacy fields markup, Renaming of per-field-type classes, Breadcrumb template inclusion, Editor CSS loading


wagtail-review
Refactoring of legacy fields markup, Renaming of per-field-type classes


wagtail-transfer
Prefixing of Wagtail classes, Refactoring of legacy fields marku, Renaming of per-field-type classes, Editor CSS loading


wagtailtrans
Breadcrumb template inclusion, Editor CSS loading


cookiecutter-wagtail-package
None


wagtail
None


wagtail-algolia-search
None


wagtail-autocomplete
None


wagtail-bakery
None


wagtail-condensedinlinepanel
None


wagtail-editable-help
None


wagtail-factories
None


wagtail-generic-chooser
None


wagtail-live
None


wagtail-localize-git
None


wagtail-personalisation
None


wagtail-review-ui
None


wagtail-whatsapp-poc
None


wagtail-whoosh
None


APSL:


puput
Direct loading of Wagtail CSS


FlipperPA:


wagtailcodeblock
Refactoring of forms panels


LilJack118:


wagtail_icons
Direct loading of Wagtail CSS


JamesRamm:


longclaw
Core templates refactorings, Editor CSS loading


wagtailmath
None


Aleksi44:


wagtailyoast
Refactoring of forms panels, Core templates refactorings


wagtail-lottie
None


wagtail-metrics
None


wagtailsvg
None


bashu:


wagtail-embedvideos
Refactoring of legacy fields markup, Editor CSS loading


wagtail-metadata-mixin
None


benjaoming:


django-modeltranslation-wagtail
Refactoring of legacy fields markup


cfpb:


wagtail-flags
Removal of button-group component, Refactoring of legacy fields markup


wagtail-inventory
Refactoring of legacy fields markup


wagtail-sharing
None


wagtail-treemodeladmin
None


coderedcorp:


coderedcms
Prefixing of Wagtail classes, Refactoring of legacy fields markup


wagtail-cache
None


wagtail-seo
None


developersociety:


wagtail-link-block
Renaming of per-field-type classes


donhauser:


wagtail-photo-gallery
Refactoring of legacy fields markup


jacobtoppm:


wagtail-image-import
Refactoring of legacy fields markup, Direct loading of Wagtail CSS


wagtail_draftail_anchors
None


jazzband:


wagtailmenus
Refactoring of legacy fields markup, Editor CSS loading


jberghoef:


wagtail-tag-manager
Removal of button-group component, Refactoring of legacy fields markup, Refactoring of forms panels


jonny5532:


wagtail-liveedit
Refactoring of legacy fields markup, Renaming of per-field-type classes, Editor CSS loading


labd:


wagtail-2fa
Refactoring of legacy fields markup, Renaming of per-field-type classes


wagtailstreamforms
Removal of unused UI components, Prefixing of Wagtail classes, Refactoring of legacy fields markup, Renaming of per-field-type classes


meeting-guide:


wagtail-meeting-guide
Core templates refactorings


neon-jungle:


wagtail-linkchecker
Editor CSS loading


wagtailmodelchooser
Refactoring of legacy fields markup,


wagtailnews
Refactoring of legacy fields markup, Renaming of per-field-type classes, Editor CSS loading


wagtailpolls
Prefixing of Wagtail classes


wagtailvideos
Refactoring of legacy fields markup, Editor CSS loading, Direct loading of Wagtail CSS


wagtail-accessibility
None


wagtail-annotations
None


wagtail-birdsong
None


wagtail-metadata
None


wagtail-schema.org
None


nickmoreton:


wagtail-qrcode
Refactoring of legacy fields markup


spamz23:


wagtail-social-share
Refactoring of legacy fields markup


spapas:


wagtail-multi-upload
Refactoring of legacy fields markup, Refactoring of InlinePanel markup, Core templates refactorings


takeflight:


wagtailmodelchooser
Refactoring of legacy fields markup


wagtailnews
Refactoring of legacy fields markup, Renaming of per-field-type classes, Editor CSS loading


tomdyson:


wagalytics
Refactoring of legacy fields markup, Renaming of per-field-type classes, Editor CSS loading


wagtail-purge
None


thelabnyc:


wagtail_blog
Refactoring of legacy fields markup


wagtail-links
None


wagtail-nav-menus
None


wagtail-spa-integration
None


wagtailcloudinary
None


torchbox:


wagtail-content-import
Refactoring of legacy fields markup


wagtailmedia
Prefixing of Wagtail classes, Refactoring of legacy fields markup


wagtail-bucketav
None


wagtail-footnotes
None


wagtail-grapple
None


wagtail-headless-preview
None


wagtail-markdown
None


wagtail-storages
None


wagtail-torchbox
None


wagtail-webstories
None


wagtailapi
None


wagtailapidemo
None


truetug:


wagtail-typograf
None


vixdigital:


wagtail-readinglevel
None


wharton:


wagtailgridder
None


xeroticikot:


wagtail-icon-picker
None


octavenz:


wagtail-favicon
None


wagtailextraicons
None


oliviermialon:


wagtailtwbsicons
None


GrappleGQL:


wagtail-grapple
None


Nefonfo:


wagtailiconify
None


abahnihi:


django-fsm-wagtail
None


adinhodovic:


wagtail-resume
None


bengosney:


wagtail-picture-tag
None


besarbertasholli:


wagtail-import-export-updated
None


cursive-works:


wagtail-json-widget
None


didorothy:


wagtail-altstreamfield
None


elton2048:


wagtail-orderable
None


frojd:


Wagtail-Pipit
None


wagtail-geo-widget
None


wagtail-trash
None


ghettoDdOS:


pve-utils
None


honeylogic-io:


wagtail-code-blog
None


icpac-igad:


wagtail-leaflet-widget
None


infoportugal:


wagtail-modeltranslation
None


ixc:


wagtail-instance-selector
None


kevinhowbrook:


wagtail-jotform
None


wagtail-makeup
None


wagtailguide
None


wagtailquickcreate
None


kingsdigitallab:


django-kdl-wagtail
None


kpsaurus:


wagtail-uikitblocks
None


marteinn:


wagtail-alt-generator
None


wagtail-color-panel
None


moorinteractive:


wagtail-themes
None


mwesterhof:


wagtail_app_pages
None


themotleyfool:


wagtail-automatic-redirects
None


wagtail-draftail-snippet
None


tm-kn:


wagtail-azure-cdn
None


olksndrdevhub:


wagtail-embed-videos3
None


ongchi:


wagtail-katex
None


overcast:


wagtailcharts
None


wagtailtables
None


peterjochum:


wagtail-audio-embed
None


praekeltfoundation:


wagtail-personalisation
None


red-pepper-services:


wagtail-rps-template
None


rinti:


wagtail-meta-preview
None


softbutterfly:


wagtail-sb-socialnetworks
None


specialunderwear:


wagtail-extendedsearch
None


springload:


wagtail-django-recaptcha
None


squareweave:


wagtailcolumnblocks
None


Packages where no issues were identified

Unsupported customizations

Removal of unused UI components

We have removed a lot of UI components either unused in Wagtail core, or only used in very few cases.
labd/wagtailstreamforms

labd/wagtailstreamforms/wagtailstreamforms/templates/streamforms/index_submissions.html
83:                                <button name="action" value="filter" class="button button-filter">{% trans 'Filter' %}</button>


Removal of button-group component

See above.
Code search: ["']button-group[\s"']
jberghoef/wagtail-tag-manager

jberghoef/wagtail-tag-manager/src/wagtail_tag_manager/templates/wagtail_tag_manager/admin/cookie_declaration_index.html
9:                <div class="button-group"

cfpb/wagtail-flags

cfpb/wagtail-flags/wagtailflags/templates/wagtailflags/includes/flag_index.html
35:                        <div class="button-group">


Prefixing of Wagtail classes

Refactoring of a class name only meant to be used internally. field-row renamed to w-field-row, human-readable-date -> w-human-readable-date
Code search: (field-row|human-readable-date)
coderedcorp/coderedcms

wagtail/coderedcorp/coderedcms/coderedcms/templates/coderedcms/widgets/checkbox_classifiers.html
3:<div class="field-row {{ widget.attrs.class }}" {% if id %}id="{{ id }}"{% endif %}

wagtail/wagtail-transfer

wagtail/wagtail/wagtail-transfer/wagtail_transfer/static_src/chooser/PageChooserResult.js
66:            className="human-readable-date

torchbox/wagtailmedia

wagtail/torchbox/wagtailmedia/src/wagtailmedia/templates/wagtailmedia/media/legacy/list.html
58:                <td><div class="human-readable-date" title="{{ media_file.created_at|date:"d M Y H:i" }}">{{ media_file.created_at|timesince }} ago</div></td

labd/wagtailstreamforms

wagtail/labd/wagtailstreamforms/example/scss/module/_form.scss
8:form .field-row {

wagtail/labd/wagtailstreamforms/example/static/css/karma.css
1516:form .field-row ul {

wagtail/labd/wagtailstreamforms/example/templates/streamforms/partials/form_field.html
1:<div class="field-row {% if field.errors %}has-error{% endif %}">

wagtail/labd/wagtailstreamforms/wagtailstreamforms/templates/streamforms/partials/form_field.html
1:<div class="field-row"

neon-jungle/wagtailpolls

wagtail/neon-jungle/wagtailpolls/wagtailpolls/templates/wagtailpolls/poll_list.html
27:						<div class="human-readable-date" title="{{ poll.date_created|date:"SHORT_DATETIME_FORMAT"}}">


Refactoring of legacy fields markup

The form fields markup has heavily changed.
Code search: (iconfield|text_input|field-small|field-col|field-content|label-above|field-comment-control)
takeflight/wagtailmodelchooser

wagtail/takeflight/wagtailmodelchooser/wagtailmodelchooser/templates/wagtailmodelchooser/modal.html
20:				<div class="field-content"

takeflight/wagtailnews

wagtail/takeflight/wagtailnews/wagtailnews/templates/wagtailnews/index.html
15:                            <div class="field char_field text_input field-small iconfield">
19:                                <div class="field-content"

coderedcorp/coderedcms

wagtail/coderedcorp/coderedcms/coderedcms/models/page_models.py
1257: classname="label-above",

wagtail/coderedcorp/coderedcms/coderedcms/templates/coderedcms/widgets/checkbox_classifiers.html
6: <div class="field-col col4">

jberghoef/wagtail-tag-manager

wagtail/jberghoef/wagtail-tag-manager/frontend/admin/widgets/checkbox_select_multiple.scss
1:.field.horizontal_checkbox_select_multiple .field-content .input > div {

wagtail/jberghoef/wagtail-tag-manager/frontend/admin/widgets/codearea.scss
3:.object .codearea .field-content .input {

wagtail/jberghoef/wagtail-tag-manager/src/wagtail_tag_manager/static/wagtail_tag_manager/codearea.bundle.css
346:.object .codearea .field-content .input .CodeMirror{height:auto;min-height:240px;width:100%;padding:2em 30px;background-color:#fafafa;border-right:1px solid #e6e6e6;border-left:1px solid #e6e6e6;transition:background-color 0.2s ease;overflow:hidden}.object .codearea .field-content .input .CodeMirror-focused{background-color:#f4fcfc;border-color:#54d0d0;outline:none}.object .codearea .field-content .input .CodeMirror \*{font-size:0.9rem;line-height:1.4rem}@media screen and (max-width: 799px){.object .codearea .field-content .input .CodeMirror{border:1px solid #e6e6e6}}.object.code .object-layout_big-part fieldset{width:100% !important;max-width:unset !important}.object.code .object-layout_big-part fieldset .input>div{display:flex;width:100%}.object.code .object-layout_big-part fieldset .input>div .panel{width:200px;height:100%;padding:10px;overflow-x:scroll}

wagtail/jberghoef/wagtail-tag-manager/src/wagtail_tag_manager/static/wagtail_tag_manager/checkbox_select_multiple.bundle.css
1:.field.horizontal_checkbox_select_multiple .field-content .input>div{display:flex;flex-wrap:wrap}.field.horizontal_checkbox_select_multiple .field-content .input>div div{width:25%;min-width:280px}.field.horizontal_checkbox_select_multiple .field-content .input>div div label{width:100%}

bashu/wagtail-embedvideos

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/static/wagtail_embed_videos/js/embed-video-chooser-modal.js
9: $('#id_embed_video-chooser-upload-title', modal.body).closest('.field-content').append('<p class="error-message"><span>This field is required.</span></p>')

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" %}

nickmoreton/wagtail-qrcode

wagtail/nickmoreton/wagtail-qrcode/wagtail_qrcode/templates/wagtail_qrcode/admin/field_panel.html
14: <div class="field-comment-control field-comment-control--object">

wagtail/nickmoreton/wagtail-qrcode/wagtail_qrcode/templates/wagtail_qrcode/admin/field.html
5: <div class="field-content">
32: <div class="field-comment-control">

wagtail/nickmoreton/wagtail-qrcode/wagtail_qrcode/templates/wagtail_qrcode/admin/usage_field.html
5: <div class="field-content">
32: <div class="field-comment-control">

wagtail/nickmoreton/wagtail-qrcode/wagtail_qrcode/templates/wagtail_qrcode/admin/usage_field_panel.html
14: <div class="field-comment-control field-comment-control--object">

thelabnyc/wagtail_blog

wagtail/thelabnyc/wagtail_blog/blog/abstract.py
148: ], classname="label-above"),

wagtail/wagtail-transfer

wagtail/wagtail/wagtail-transfer/wagtail_transfer/static_src/chooser/PageChooserHeader.js
22: <div className="field char_field text_input field-small iconfield">
24: <div className="field-content">

wagtail/wagtail-localize

wagtail/wagtail/wagtail-localize/wagtail_localize/templates/wagtail_localize/admin/update_translations.html
43: <div class="field-content">

wagtail/wagtail-review

wagtail/wagtail/wagtail-review/wagtail_review/static/wagtail_review/js/submit.js
41: autocompleteField.closest('.field-content').append(autocompleteErrorMessage);

wagtail/wagtail/wagtail-review/wagtail_review/templates/wagtail_review/create_review.html
18: <div class="field char_field text_input">
20: <div class="field-content">

wagtail/wagtail-airtable

wagtail/wagtail/wagtail-airtable/wagtail_airtable/templates/wagtailsnippets/snippets/type_index.html
17: {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" input_classes="icon-search" %}

wagtail/wagtail-condensedinlinepanel

wagtail/wagtail/wagtail-condensedinlinepanel/condensedinlinepanel/static/condensedinlinepanel/src/components/FormContainer.tsx
65: let fieldContent = fieldWrapperElement.getElementsByClassName('field-content')[0] || fieldWrapperElement;

wagtail/wagtail-hallo

wagtail/wagtail/wagtail-hallo/wagtail_hallo/static/css/hallo.css
83:.field-small .halloeditor {

donhauser/wagtail-photo-gallery

wagtail/donhauser/wagtail-photo-gallery/wagtail_photo_gallery/static/photo_gallery_admin.css
116:ul.select-and-sort .field-content {

jacobtoppm/wagtail-image-import

wagtail/jacobtoppm/wagtail-image-import/wagtail_image_import/static_src/wagtail_image_import/js/importer.js
77: <div class="field-content">

wagtail/jacobtoppm/wagtail-image-import/wagtail_image_import/templates/wagtailimages/images/index.html
20: {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" input_classes="icon-search" %}

cfpb/wagtail-flags

wagtail/cfpb/wagtail-flags/wagtailflags/templates/wagtailflags/flags/edit_condition.html
26: <div class="field-content">

wagtail/cfpb/wagtail-flags/wagtailflags/templates/wagtailflags/flags/create_flag.html
23: <div class="field-content">

cfpb/wagtail-inventory

wagtail/cfpb/wagtail-inventory/wagtailinventory/templates/wagtailinventory/search.html
25: .wagtail-inventory-select .field-content {

rkhleics/wagtailmenus

wagtail/rkhleics/wagtailmenus/wagtailmenus/static/wagtailmenus/css/menu-edit.css
18: .field-content {
44: .multiple .field-content {
55: .multiple .field-content {

torchbox/wagtailmedia

wagtail/torchbox/wagtailmedia/src/wagtailmedia/static/wagtailmedia/js/media-chooser-modal.js
81: $('#id_title', modal.body).closest('.field-content').append('<p class="error-message"><span>This field is required.</span></p>')

wagtail/torchbox/wagtailmedia/src/wagtailmedia/templates/wagtailmedia/media/legacy/index.html
35: {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" input_classes="icon-search" %}

torchbox/wagtail-content-import

wagtail/torchbox/wagtail-content-import/wagtail_content_import/pickers/google/templates/wagtail_content_import/google_doc_import_chooser.html
29: {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" input_classes="icon-search" %}

labd/wagtail-2fa

wagtail/labd/wagtail-2fa/src/wagtail_2fa/templates/wagtail_2fa/device_form.html
50: <div class="field char_field text_input">
52: <div class="field-content">

wagtail/labd/wagtail-2fa/src/wagtail_2fa/templates/wagtail_2fa/otp_form.html
41: <div class="field iconfield">
53: <div class="field iconfield">

labd/wagtailstreamforms

wagtail/labd/wagtailstreamforms/wagtailstreamforms/templates/streamforms/index_submissions.html
80: {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small" li_classes="col4" %}

jazzband/wagtailmenus

wagtail/jazzband/wagtailmenus/wagtailmenus/static/wagtailmenus/css/menu-edit.css
18: .field-content {
44: .multiple .field-content {
55: .multiple .field-content {

tomdyson/wagalytics

wagtail/tomdyson/wagalytics/wagalytics/templates/wagalytics/dashboard.html
74: <div class="field date_field admin_date_input field-small">
76: <div class="field-content">
84: <div class="field date_field admin_date_input field-small">
86: <div class="field-content">

jonny5532/wagtail-liveedit

wagtail/jonny5532/wagtail-liveedit/liveedit/templates/liveedit/edit_panel.html
28: <div class="field-content">

infoportugal/wagtail-modeltranslation

wagtail/infoportugal/wagtail-modeltranslation/wagtail_modeltranslation/static/wagtail_modeltranslation/js/copy_stream_fields.js
54: var streamFieldDiv = $(currentStreamField).find('.field-content')[0];
58: var streamFieldInput = $(currentStreamField).find('.field-content input')[0];

wagtail/infoportugal/wagtail-modeltranslation/wagtail_modeltranslation/static/wagtail_modeltranslation/js/language_toggles.js
61: // also note that "field-col" elements may now look horribly
159:var columnCSS = [`field-col`];

spamz23/wagtail-social-share

wagtail/spamz23/wagtail-social-share/wagtail_social_share/edit_handlers.py
45: '<div class="field-content">{}</div>'

neon-jungle/wagtailmodelchooser

wagtail/neon-jungle/wagtailmodelchooser/wagtailmodelchooser/templates/wagtailmodelchooser/modal.html
20: <div class="field-content">

neon-jungle/wagtailnews

wagtail/neon-jungle/wagtailnews/wagtailnews/templates/wagtailnews/index.html
15: <div class="field char_field text_input field-small iconfield">
19: <div class="field-content">

neon-jungle/wagtailvideos

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/multiple/add.html
28: <div class="field-content">

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" %}
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" %}

spapas/wagtail-multi-upload

wagtail/spapas/wagtail-multi-upload/wagtail_multi_upload/templates/wagtail_multi_upload/edit_handlers/multiple_images_panel.html
30: <div class="field-content">


Renaming of per-field-type classes

We have renamed classes to be more predictable.
Code search: [\s\"'](collection_choice_field|choice_field|model_choice_field|typed_choice_field|boolean_field|date_field|time_field|date_time_field|char_field|url_field|daterange_field|block_field|widget-)
takeflight/wagtailnews

wagtail/takeflight/wagtailnews/wagtailnews/templates/wagtailnews/index.html
15:                            <div class="field char_field text_input field-small iconfield">

wagtail/wagtail-transfer

wagtail/wagtail/wagtail-transfer/wagtail_transfer/static_src/chooser/PageChooserHeader.js
22:              <div className="field char_field text_input field-small iconfield">

wagtail/wagtail-localize

wagtail/wagtail/wagtail-localize/wagtail_localize/templates/wagtail_localize/admin/update_translations.html
42:                                <div class="field boolean_field checkbox_input">

wagtail/wagtail/wagtail-localize/wagtail_localize/views/edit_translation.py
487:            block_field_name = content_components.pop(0)
501:            block_field_name = field_path_components[2]
502:            block_field = block_type.child_blocks[block_field_name].label
505:            block_field = None
514:            "subField": block_field,

wagtail/wagtail-review

wagtail/wagtail/wagtail-review/wagtail_review/templates/wagtail_review/create_review.html
18:                <div class="field char_field text_input">

labd/wagtail-2fa

wagtail/labd/wagtail-2fa/src/wagtail_2fa/templates/wagtail_2fa/device_form.html
50:                    <div class="field char_field text_input">

labd/wagtailstreamforms

wagtail/labd/wagtailstreamforms/wagtailstreamforms/models/form.py
89:        FieldPanel("process_form_submission_hooks", classname="choice_field"),

tomdyson/wagalytics

wagtail/tomdyson/wagalytics/wagalytics/templates/wagalytics/dashboard.html
73:                    <li class="date_field col6">
74:                        <div class="field date_field admin_date_input field-small">
83:                    <li class="date_field col6">
84:                        <div class="field date_field admin_date_input field-small">

developersociety/wagtail-link-block

wagtail/developersociety/wagtail-link-block/wagtail_link_block/blocks.py
78:        classname="custom_url_link url_field",

jonny5532/wagtail-liveedit

wagtail/jonny5532/wagtail-liveedit/liveedit/templates/liveedit/edit_panel.html
27:                                <div class="field block_field block_widget " >

jungle/wagtailnews

wagtail/neon-jungle/wagtailnews/wagtailnews/templates/wagtailnews/index.html
15:                            <div class="field char_field text_input field-small iconfield">


Refactoring of forms panels

The form panels markup has heavily changed.
Code search: (object-help|object-layout)
jberghoef/wagtail-tag-manager

wagtail/jberghoef/wagtail-tag-manager/frontend/admin/widgets/codearea.scss
33:  .object-layout {

wagtail/jberghoef/wagtail-tag-manager/src/wagtail_tag_manager/static/wagtail_tag_manager/codearea.bundle.css
346:.object .codearea .field-content .input .CodeMirror{height:auto;min-height:240px;width:100%;padding:2em 30px;background-color:#fafafa;border-right:1px solid #e6e6e6;border-left:1px solid #e6e6e6;transition:background-color 0.2s ease;overflow:hidden}.object .codearea .field-content .input .CodeMirror-focused{background-color:#f4fcfc;border-color:#54d0d0;outline:none}.object .codearea .field-content .input .CodeMirror *{font-size:0.9rem;line-height:1.4rem}@media screen and (max-width: 799px){.object .codearea .field-content .input .CodeMirror{border:1px solid #e6e6e6}}.object.code .object-layout_big-part fieldset{width:100% !important;max-width:unset !important}.object.code .object-layout_big-part fieldset .input>div{display:flex;width:100%}.object.code .object-layout_big-part fieldset .input>div .panel{width:200px;height:100%;padding:10px;overflow-x:scroll}

Aleksi44/wagtailyoast

wagtail/Aleksi44/wagtailyoast/wagtailyoast/templates/wagtailyoast/edit_handlers/yoast_list.html
7:        <div class="object-layout">
8:            <div id="yoast_{{ list_id }}" class="object-layout_big-part">

FlipperPA/wagtailcodeblock

wagtail/FlipperPA/wagtailcodeblock/wagtailcodeblock/templates/wagtailcodeblock/code_block_form.html
5:        <div class="object-help help">


Refactoring of InlinePanel markup

The HTML markup has heavily changed.
Code search: <ul class="multiple"
spapas/wagtail-multi-upload

wagtail/spapas/wagtail-multi-upload/wagtail_multi_upload/templates/wagtail_multi_upload/edit_handlers/custom_inline_panel.html
8:<ul class="multiple" id="id_{{ self.formset.prefix }}-FORMS">


Breadcrumb template inclusion

We have heavily refactored breadcrumbs in Wagtail, now using a single wagtailadmin/shared/breadcrumbs.html template
Code search: (breadcrumb-next.html|breadcrumb.html|modeladmin/includes/breadcrumb.html|modeladmin/includes/header_with_breadcrumb.html)
wagtail/wagtailtrans

wagtail/wagtail/wagtailtrans/src/wagtailtrans/templates/wagtailtrans/translation/add.html
11:        {% include "wagtailadmin/shared/breadcrumb.html" with page=parent_page include_self=1 %}

wagtail/wagtail-localize

wagtail/wagtail/wagtail-localize/wagtail_localize/modeladmin/templates/wagtail_localize/modeladmin/includes/header_with_breadcrumb.html
4:  {% include "modeladmin/includes/breadcrumb.html" %}


Core templates refactorings

We refactored a lot of Wagtail’s internal templates, some niche, some widely relied on
Code search: (_privacy_switch.html|privacy_switch_panel.html|set_privacy.html|_list_choose.html|_list_move.html|_navigation_choose.html|_navigation_move.html|_page_parent_page_title_choose.html|_page_title_choose.html|_page_title_move.html|_parent_page_title_explore.html|field_panel_field.html|field_row_panel.html|single_field_panel.html|multi_field_panel.html|object_list.html|chooser_breadcrumb.html|move_breadcrumb.html|widgets/page_chooser.html|modeladmin/includes/search_form.html|wagtailredirects/index.html|wagtailsettings/edit.html|/multiple/add.html|wagtaildocs/chooser/|wagtailimages/chooser/|wagtailsnippets/snippets/index.html|wagtailsnippets/snippets/|wagtailusers/groups/|wagtailadmin/account/|wagtaildocs/documents/)
JamesRamm/longclaw

wagtail/JamesRamm/longclaw/longclaw/contrib/productrequests/templates/productrequests/requests_admin.html
23:                {% include "wagtailadmin/pages/_privacy_switch.html" with page=page page_perms=page_perms only %}

wagtail/wagtail-airtable

wagtail/wagtail/wagtail-airtable/wagtail_airtable/templates/wagtailsnippets/snippets/type_index.html
1:{% extends "wagtailsnippets/snippets/type_index.html" %}
48:            {% include "wagtailsnippets/snippets/results.html" %}

Aleksi44/wagtailyoast

wagtail/Aleksi44/wagtailyoast/wagtailyoast/templates/wagtailyoast/edit_handlers/yoast_panel.html
5:    {% include 'wagtailadmin/edit_handlers/object_list.html' %}

meeting-guide/wagtail-meeting-guide

wagtail/meeting-guide/wagtail-meeting-guide/meeting_guide/templates/wagtailadmin/pages/listing/_page_title_move_AFTER_WAGTAIL_PR_IN_CODERED.html
1:{% extends "wagtailadmin/pages/listing/_page_title_move.html" %}

neon-jungle/wagtailvideos

wagtail/neon-jungle/wagtailvideos/wagtailvideos/views/multiple.py
91:    return render(request, 'wagtailvideos/multiple/add.html', {

spapas/wagtail-multi-upload

wagtail/spapas/wagtail-multi-upload/wagtail_multi_upload/views.py
111:    return render(request, 'wagtailimages/multiple/add.html', {


jQuery UI

Unused jQuery UI image assets are no longer available in Wagtail
Code search: N/A, most likely unused by third parties.


Editor CSS loading

We removed the need for separate loading of editor CSS. Editor CSS is now loaded everywhere.
Code search: _editor_css.html
takeflight/wagtailnews

wagtail/takeflight/wagtailnews/wagtailnews/templates/wagtailnews/create.html
42:    {% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/takeflight/wagtailnews/wagtailnews/templates/wagtailnews/unpublish.html
20:    {% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/takeflight/wagtailnews/wagtailnews/templates/wagtailnews/delete.html
28:    {% include "wagtailadmin/pages/_editor_css.html" %}

bashu/wagtail-embedvideos

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/edit.html
6:    {% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/bashu/wagtail-embedvideos/wagtail_embed_videos/templates/wagtail_embed_videos/embed_videos/add.html
23:    {% include "wagtailadmin/pages/_editor_css.html" %}

JamesRamm/longclaw

wagtail/JamesRamm/longclaw/longclaw/contrib/productrequests/templates/productrequests/requests_admin.html
49:{% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/wagtailtrans

wagtail/wagtail/wagtailtrans/src/wagtailtrans/templates/wagtailtrans/translation/add.html
49:    {% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/wagtail-transfer

wagtail/wagtail/wagtail-transfer/wagtail_transfer/templates/wagtail_transfer/choose_page.html
8:        {% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/wagtail-localize

wagtail/wagtail/wagtail-localize/wagtail_localize/templates/wagtail_localize/admin/edit_translation.html
17:        {% include "wagtailadmin/pages/_editor_css.html" %}

jazzband/wagtailmenus

wagtail/jazzband/wagtailmenus/wagtailmenus/templates/wagtailmenus/mainmenu_edit.html
4:    {% include "wagtailadmin/pages/_editor_css.html" %}

tomdyson/wagalytics

wagtail/tomdyson/wagalytics/wagalytics/templates/wagalytics/dashboard.html
5:    {% include "wagtailadmin/pages/_editor_css.html" %}

jonny5532/wagtail-liveedit

wagtail/jonny5532/wagtail-liveedit/liveedit/templates/liveedit/edit_panel.html
6:    {% include "wagtailadmin/pages/_editor_css.html" %}

neon-jungle/wagtail-linkchecker

wagtail/neon-jungle/wagtail-linkchecker/wagtaillinkchecker/templates/wagtaillinkchecker/delete.html
19:	{% include "wagtailadmin/pages/_editor_css.html" %}

neon-jungle/wagtailnews

wagtail/neon-jungle/wagtailnews/wagtailnews/templates/wagtailnews/create.html
42:    {% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/neon-jungle/wagtailnews/wagtailnews/templates/wagtailnews/unpublish.html
20:    {% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/neon-jungle/wagtailnews/wagtailnews/templates/wagtailnews/delete.html
28:    {% include "wagtailadmin/pages/_editor_css.html" %}

neon-jungle/wagtailpolls

wagtail/neon-jungle/wagtailpolls/wagtailpolls/templates/wagtailpolls/create.html
30:	{% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/neon-jungle/wagtailpolls/wagtailpolls/templates/wagtailpolls/edit.html
30:	{% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/neon-jungle/wagtailpolls/wagtailpolls/templates/wagtailpolls/delete.html
20:	{% include "wagtailadmin/pages/_editor_css.html" %}

wagtail/neon-jungle/wagtailpolls/wagtailpolls/templates/wagtailpolls/copy.html
20:	{% include "wagtailadmin/pages/_editor_css.html" %}


Direct loading of Wagtail CSS

Almost all of Wagtail admin CSS is now in a single stylesheet.
Code search: (modeladmin|simple_translation|table_block|typed_table_block|wagtailadmin|wagtailcore|wagtaildocs|wagtailembeds|wagtailforms|wagtailimages|wagtaillocales|wagtailredirects|wagtailsearch|wagtailsearchpromotions|wagtailsettings|wagtailsites|wagtailsnippets|wagtailstyleguide|wagtailusers)\/css
LilJack118/wagtail_icons

wagtail/LilJack118/wagtail_icons/wagtail_icons/templates/wagtail_icons/icons_page/edit.html
6:<link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/add-multiple.css' %}" type="text/css" />

wagtail/LilJack118/wagtail_icons/wagtail_icons/templates/wagtail_icons/icons_page/add.html
7:    <link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/add-multiple.css' %}" type="text/css" />

jacobtoppm/wagtail-image-import

wagtail/jacobtoppm/wagtail-image-import/wagtail_image_import/templates/wagtail_image_import/import.html
12:    <link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/add-multiple.css' %}" type="text/css" />

APSL/puput

wagtail/APSL/puput/puput/templates/wagtailadmin/pages/_editor_css.html
7:<link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/page-editor.css' %}" type="text/css" />
8:<link rel="stylesheet" href="{% static 'wagtailadmin/css/panels/rich-text.css' %}" type="text/css" />

neon-jungle/wagtailvideos

wagtail/neon-jungle/wagtailvideos/wagtailvideos/templates/wagtailvideos/multiple/add.html
7:    <link rel="stylesheet" href="{% static 'wagtailimages/css/add-multiple.css' %}" type="text/css" />
Package	Detected patterns
wagtail:
wagtail-airtable	Refactoring of legacy fields markup, Core templates refactorings
wagtail-hallo	Refactoring of legacy fields markup
wagtail-localize	Refactoring of legacy fields markup, Renaming of per-field-type classes, Breadcrumb template inclusion, Editor CSS loading
wagtail-review	Refactoring of legacy fields markup, Renaming of per-field-type classes
wagtail-transfer	Prefixing of Wagtail classes, Refactoring of legacy fields marku, Renaming of per-field-type classes, Editor CSS loading
wagtailtrans	Breadcrumb template inclusion, Editor CSS loading
cookiecutter-wagtail-package	None
wagtail	None
wagtail-algolia-search	None
wagtail-autocomplete	None
wagtail-bakery	None
wagtail-condensedinlinepanel	None
wagtail-editable-help	None
wagtail-factories	None
wagtail-generic-chooser	None
wagtail-live	None
wagtail-localize-git	None
wagtail-personalisation	None
wagtail-review-ui	None
wagtail-whatsapp-poc	None
wagtail-whoosh	None
APSL:
puput	Direct loading of Wagtail CSS
FlipperPA:
wagtailcodeblock	Refactoring of forms panels
LilJack118:
wagtail_icons	Direct loading of Wagtail CSS
JamesRamm:
longclaw	Core templates refactorings, Editor CSS loading
wagtailmath	None
Aleksi44:
wagtailyoast	Refactoring of forms panels, Core templates refactorings
wagtail-lottie	None
wagtail-metrics	None
wagtailsvg	None
bashu:
wagtail-embedvideos	Refactoring of legacy fields markup, Editor CSS loading
wagtail-metadata-mixin	None
benjaoming:
django-modeltranslation-wagtail	Refactoring of legacy fields markup
cfpb:
wagtail-flags	Removal of `button-group` component, Refactoring of legacy fields markup
wagtail-inventory	Refactoring of legacy fields markup
wagtail-sharing	None
wagtail-treemodeladmin	None
coderedcorp:
coderedcms	Prefixing of Wagtail classes, Refactoring of legacy fields markup
wagtail-cache	None
wagtail-seo	None
developersociety:
wagtail-link-block	Renaming of per-field-type classes
donhauser:
wagtail-photo-gallery	Refactoring of legacy fields markup
jacobtoppm:
wagtail-image-import	Refactoring of legacy fields markup, Direct loading of Wagtail CSS
wagtail_draftail_anchors	None
jazzband:
wagtailmenus	Refactoring of legacy fields markup, Editor CSS loading
jberghoef:
wagtail-tag-manager	Removal of `button-group` component, Refactoring of legacy fields markup, Refactoring of forms panels
jonny5532:
wagtail-liveedit	Refactoring of legacy fields markup, Renaming of per-field-type classes, Editor CSS loading
labd:
wagtail-2fa	Refactoring of legacy fields markup, Renaming of per-field-type classes
wagtailstreamforms	Removal of unused UI components, Prefixing of Wagtail classes, Refactoring of legacy fields markup, Renaming of per-field-type classes
meeting-guide:
wagtail-meeting-guide	Core templates refactorings
neon-jungle:
wagtail-linkchecker	Editor CSS loading
wagtailmodelchooser	Refactoring of legacy fields markup,
wagtailnews	Refactoring of legacy fields markup, Renaming of per-field-type classes, Editor CSS loading
wagtailpolls	Prefixing of Wagtail classes
wagtailvideos	Refactoring of legacy fields markup, Editor CSS loading, Direct loading of Wagtail CSS
wagtail-accessibility	None
wagtail-annotations	None
wagtail-birdsong	None
wagtail-metadata	None
wagtail-schema.org	None
nickmoreton:
wagtail-qrcode	Refactoring of legacy fields markup
spamz23:
wagtail-social-share	Refactoring of legacy fields markup
spapas:
wagtail-multi-upload	Refactoring of legacy fields markup, Refactoring of InlinePanel markup, Core templates refactorings
takeflight:
wagtailmodelchooser	Refactoring of legacy fields markup
wagtailnews	Refactoring of legacy fields markup, Renaming of per-field-type classes, Editor CSS loading
tomdyson:
wagalytics	Refactoring of legacy fields markup, Renaming of per-field-type classes, Editor CSS loading
wagtail-purge	None
thelabnyc:
wagtail_blog	Refactoring of legacy fields markup
wagtail-links	None
wagtail-nav-menus	None
wagtail-spa-integration	None
wagtailcloudinary	None
torchbox:
wagtail-content-import	Refactoring of legacy fields markup
wagtailmedia	Prefixing of Wagtail classes, Refactoring of legacy fields markup
wagtail-bucketav	None
wagtail-footnotes	None
wagtail-grapple	None
wagtail-headless-preview	None
wagtail-markdown	None
wagtail-storages	None
wagtail-torchbox	None
wagtail-webstories	None
wagtailapi	None
wagtailapidemo	None
truetug:
wagtail-typograf	None
vixdigital:
wagtail-readinglevel	None
wharton:
wagtailgridder	None
xeroticikot:
wagtail-icon-picker	None
octavenz:
wagtail-favicon	None
wagtailextraicons	None
oliviermialon:
wagtailtwbsicons	None
GrappleGQL:
wagtail-grapple	None
Nefonfo:
wagtailiconify	None
abahnihi:
django-fsm-wagtail	None
adinhodovic:
wagtail-resume	None
bengosney:
wagtail-picture-tag	None
besarbertasholli:
wagtail-import-export-updated	None
cursive-works:
wagtail-json-widget	None
didorothy:
wagtail-altstreamfield	None
elton2048:
wagtail-orderable	None
frojd:
Wagtail-Pipit	None
wagtail-geo-widget	None
wagtail-trash	None
ghettoDdOS:
pve-utils	None
honeylogic-io:
wagtail-code-blog	None
icpac-igad:
wagtail-leaflet-widget	None
infoportugal:
wagtail-modeltranslation	None
ixc:
wagtail-instance-selector	None
kevinhowbrook:
wagtail-jotform	None
wagtail-makeup	None
wagtailguide	None
wagtailquickcreate	None
kingsdigitallab:
django-kdl-wagtail	None
kpsaurus:
wagtail-uikitblocks	None
marteinn:
wagtail-alt-generator	None
wagtail-color-panel	None
moorinteractive:
wagtail-themes	None
mwesterhof:
wagtail_app_pages	None
themotleyfool:
wagtail-automatic-redirects	None
wagtail-draftail-snippet	None
tm-kn:
wagtail-azure-cdn	None
olksndrdevhub:
wagtail-embed-videos3	None
ongchi:
wagtail-katex	None
overcast:
wagtailcharts	None
wagtailtables	None
peterjochum:
wagtail-audio-embed	None
praekeltfoundation:
wagtail-personalisation	None
red-pepper-services:
wagtail-rps-template	None
rinti:
wagtail-meta-preview	None
softbutterfly:
wagtail-sb-socialnetworks	None
specialunderwear:
wagtail-extendedsearch	None
springload:
wagtail-django-recaptcha	None
squareweave:
wagtailcolumnblocks	None