Edit buttons split when on MediaWiki 1.40+

[BCMonomial]

Describe the Bug

We assume that some CSS class changes happened in MediaWiki higher than 1.40, causing the edit buttons not combined in Citizen style as before if VisualEditor is activated.

Steps to reproduce: On MediaWiki 1.41.0 (Presumably any version higher than 1.40):

1. Go to 'Special:Preferences'
2. Activate VisualEditor
3. See changes in pages

System

• MediaWiki 1.41.0
• Citizen 2.10.1
• PHP version 8.2.12 (fpm-fcgi)
• VisualEditor 0.1.2

[alistair3149]

Thanks for the report! Do you have a demo page for the issue?

[BCMonomial]

Thanks for the report! Do you have a demo page for the issue?

I'm glad to but I don't want to put our address here publicly, and our wiki has restricted access on editing (users can't edit without logged in, and registration can only be done by admins). If possible can I provide you our address and a test account privately (like via a publicly available email of yours or other ways)?

[alistair3149]

For the section link, it is likely something that changed upstream (T346944).

As for the merged edit buttons, I can't reproduce it on a MW 1.41 wiki. not sure what's going on but it could be related to some upstream changes as well.

For both issue, it will take some time to investigate and fix since I don't have a MW 1.41 dev environment right now and there are a lot of changes on skins in general.

[BCMonomial]

For the section link, it is likely something that changed upstream (T346944).

As for the merged edit buttons, I can't reproduce it on a MW 1.41 wiki. not sure what's going on but it could be related to some upstream changes as well.

For both issue, it will take some time to investigate and fix since I don't have a MW 1.41 dev environment right now and there are a lot of changes on skins in general.

Thanks for the update! Please let me know if there's anything I can be helpful with.

[threddast]

I'm having the same issue, MW 1.41.1 with Visual Editor. For now I solved it with some custom CSS in MediaWiki:Citizen.css, there are still two buttons though

.mw-editsection-visualeditor {
  width:1.875rem;
  height:1.875rem;
  text-indent:-9999px;
  opacity: var(--opacity-icon-base); 
  transition: var(--transition-hover); 
  transition-property: opacity;
  background-image:url(/w/load.php?modules=skins.citizen.icons.wmui&image=edit&format=original&lang=en&skin=citizen&version=1f1y6);
  background-repeat: no-repeat; 
  background-position: center; 
  display: block;
  background-size:1.125rem
}

.mw-ui-icon-wikimedia-edit:before {
  background-image:url(/w/load.php?modules=skins.citizen.icons.wmui&image=wikiText&format=original&lang=en&skin=citizen&version=1f1y6)
}

credits to https://www.mediawiki.org/w/index.php?title=Topic:Xxk4g4gv6qth3reh&topic_showPostId=xxr6tdmprtwo8sfx#flow-post-xxr6tdmprtwo8sfx

[alistair3149]

Okay I finally figured out the issue. This is caused by an upstream bug where extension hooks can run after skin hooks (e.g. VE adds the edit button after Citizen modifies it, so Citizen does not know there is a VE button).

The solution is to load Citizen after all extensions. You can achieve this by putting wfLoadSkin( 'Citizen' ); in your localsettings.php after all the extensions.

[BCMonomial]

Sorry to reopen this issue but... well, something weirder is happening here. We have upgraded to the latest 2.13.2 version, and we moved wfLoadSkin( 'Citizen' ); at the bottom of the localSettings.php.

We see the changes that the section edit buttons are now fixed, but the main edit button is somehow like this.

Have no idea what's going on here. Below is our full list of extensions: