Reading/Web/Desktop Improvements/Features/Breaking changes

Although the Desktop Improvements Project strives to be non-disruptive to editor workflows, some customizations like gadgets and user scripts/styles may break or require updating to continue working with Vector 2022.

If the information below is relevant to your wiki, please consider updating the relevant Wikipedia:Customisation page on your wiki.

My logo is missing!

Vector 2022 utilizes the $wgLogos MediaWiki configuration instead of the traditional $wgLogo configuration. Depending on the design of your logo, you may have to update your image assets since logos appear smaller in Vector 2022.

Below is an example configuration of $wgLogos:

$wgLogos = [
	'1x' => "path/to/1x_version.png",
	'1.5x' => "path/to/1.5x_version.png",
	'2x' => "path/to/2x_version.png",
	'svg' => "path/to/svg_version.svg",
	'icon' => "path/to/icon.png",  // A version of the logo without wordmark and tagline.
	'wordmark' => [
		'src' => "path/to/wordmark_version.png",
		'1x' => "path/to/wordmark_version.svg", // Recommended, but optional SVG logo for browsers with SVG support.
		'width' => 135,
		'height' => 20,
	],
	'tagline' => [
		'src' => "path/to/tagline_version.png",
		'width' => 135,
		'height' => 15,
	],
];

For more information on $wgLogos, visit Manual:$wgLogos page.

My special event logo doesn't work!

The logo on Vector 2022 is now comprised of three images. This means that you may have to create new images with the individual elements in order to update the ones you want. For guidelines on how to create new logos, refer to the Logo creation guidelines task on Phabricator.

The new logo elements now include:

An icon .mw-logo-icon
A wordmark .mw-logo-wordmark
A tagline .mw-logo-tagline

In it's entirely, the HTML now looks like this:

<a href="{{homepage url}}" class="mw-logo">
	<img class="mw-logo-icon" src="{{icon url}}" height="50" width="50">
	<span class="mw-logo-container">
		<img class="mw-logo-wordmark" src="{{wordmark url}}" width="119" height="18">
		<img class="mw-logo-tagline" src="{{tagline url}}" width="115" height="13">
	</span>
</a>

Each one of these images can be replaced individually.

The rationale behind splitting the logo into three piece is that it lets us to use the same logo in Minerva (the mobile skin) which until now, required a separate mobile version containing just the wordmark. Now we can use the same wordmark on the mobile sites as we do on the desktop sites.

A change to this logo requires a configuration change to the site of Manual:$wgLogos and must follow the site request process.

For projects wanting to customize the logo for special events see Skin:Vector/Customizing_the_logo_for_special_events.

CSS selector changes

DOM order changes

Known gadget breakages

Gadgets with skin specific behaviour

If you have a gadget that uses skin specific behaviour e.g.

mw.config.get('skin') === 'vector'

or is restricted to certain skins via MediaWiki:Gadget-definitions it may require updates to support the new Vector skin. See phab:T300987 for more details.