OOjs UI/Fixing scripts and gadgets
One of the changes associated with the transition to OOjs UI is unfortunately going to break some old scripts used for editing. This page gives information about how to fix your scripts.
What is changing?
The buttons used to finish an edit are changing. This includes Publish page, Save page, Show preview, Show changes, and Cancel. From the perspective of an editor, the buttons are going to be bigger and more brightly colored. You will still be able to Tab ↹ to the buttons and use the Return key to click the buttons without taking your hands off the keyboard. You can also use the same keyboard shortcuts.
These changes affect the older wikitext editors, including the 2010 WikiEditor that is used by most experienced Wikipedia editors. These changes have already been implemented in VisualEditor, ContentTranslation, and Flow.
Why is it changing?
These changes improve accessibility, make the user experience internally consistent and similar across platforms, and make it easier for developers and local gadget and script writers to write and maintain code. This work is another step in the incremental migration to use the OOjs UI library in MediaWiki software, which was announced in 2014.
This will happen in the next few months. We're staging the deployment so that local users have time to fix their scripts and can learn from how other wikis are fixing their scripts. The schedule has not been finalized, but this is the initial proposal:
- Persian Wikipedia (volunteered) and mediawiki.org Done May 2017
- French, Spanish, Japanese, Russian, Italian, Portuguese Wikipedias and Meta (larger communities with more access to technical skills)
- All other Wikipedias (including the English and German Wikipedias, which have many old scripts that will need to be updated)
- All other WMF sites
How to see it
You can see and test the changes by adding
&ooui=1 to the URL when you edit a page, e.g. https://www.mediawiki.org/wiki/Project:Sandbox?action=edit&veswitched=1&ooui=1.
Although the colour and the size of the buttons is changing, this is not fundamentally an aesthetic change. This is a change to how the button is created in the software. As a result, it is not possible to use local CSS to completely change the appearance of the button to match the old style.
Test if you need to fix anything
Test your scripts by adding
&ooui=1 to the URL when you edit. See if your script behaves as expected. Many scripts (e.g., Twinkle, as far as anyone knows) will work normally.
Borrow fixes from other scripts
If your script doesn't work, then you may want to look at these diffs to see whether any of these repairs might be applicable:
Change how your code interacts with the page
When you are working with the values of the
editform, and you are not really interested in its UI, you can also make use of form access. For instance the value from the input element of the summary is:
document.forms.editform.wpSummary.value. This will be the same in both old and new style of the forms, unlike
$('#wpSummary') (which in the new code, refers to the decorative wrapper around the actual
wpSummary input element).
If you successfully repair a user script or gadget in a different way, then please post the diff here. If you wrote or maintain a script that has been copied to other wikis, then please try to share your updates with those wikis.
Please also consider updating screenshots on help pages to show the new style.