Page MenuHomePhabricator

Flow doesn't render <gallery> correctly
Open, Needs TriagePublic

Description

Entering a <gallery> in a Flow post using the wikitext interface doesn't result in a normal gallery as in a real wikitext page. Instead, a bullet list of images is rendered.

See https://ca.wikipedia.org/wiki/Tema:Sx96np1zzs34urbk

Event Timeline

QuimGil raised the priority of this task from to Needs Triage.
QuimGil updated the task description. (Show Details)
QuimGil added a project: StructuredDiscussions.
QuimGil added a subscriber: QuimGil.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald Transcript

Thanks! Should this task be blocked by T110910, then?

Just in case it helps, there seems to be also a problem with tables, see https://meta.wikimedia.org/wiki/User_talk:Qgil-WMF#Getting_a_message_to_Catalan_Wikipedia_with_Flow

@ssastry @QuimGil is this fixed and if so, would you please close?

Trizek-WMF added a subscriber: Trizek-WMF.

Tested and it looks good. If there is still a problem, please reopen.

I still get bullet lists instead of normal galleries. See https://ca.wikipedia.org/wiki/Tema:Tx4spteb40fcuo1t

I still get bullet lists instead of normal galleries. See https://ca.wikipedia.org/wiki/Tema:Tx4spteb40fcuo1t

I've checked to reproduce it and get a strange bug:

  1. you are on the page where you have bulleted galleries
  2. click on the reply form at the bottom
    1. if the reply form is set to visual mode, the galleries are rendered correctly
    2. if the reply form is set to wikitext mode, the galleries are not rendered correctly. Switch to visual.

Given the fact that setting visual mode or wikitext mode is memorized, I haven't seen the problem when I've visited the link provided into the description because visual mode was set.

The problem seems to be that gallery.css is only loaded when you enter visual editing mode.

When you click it, you can see a style element injected into the head, that beings like,

<style>
.ve-init-mw-editSwitch{float:right}.ve-init-mw-editSwitch .oo-ui-toolbar-bar{background:transparent;box-shadow:none;border:0}.ve-init-mw-editSwitch .oo-ui-popupToolGroup{height:32px;border:0;margin:0;border-radius:0}.ve-init-mw-editSwitch .oo-ui-popupToolGroup-handle{height:24px}.ve-init-mw-editSwitch .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon{height:auto}.ve-init-mw-editSwitch .oo-ui-popupToolGroup .oo-ui-toolGroup-tools{top:32px}.ve-init-mw-editSwitch .oo-ui-popupWidget-head{font-weight:bold} .ve-init-mw-switchPopupWidget{white-space:normal;z-index:4}.ve-init-mw-switchPopupWidget .oo-ui-popupWidget-anchor{margin-left:1.25em}.ve-init-mw-switchPopupWidget .oo-ui-popupWidget-head{font-weight:bold} .wikiEditor-ui-toolbar .ve-init-mw-editSwitch{font-size:0.9143em}.ve-init-mw-editSwitch .oo-ui-buttonElement-button{padding:0.3em}
.oo-ui-icon-userActive,.mw-ui-icon-userActive:before{background-image:url(/w/load.php?modules=oojs-ui.styles.icons-user&image=userActive&format=rasterized&lang=ca&skin=vector&version=04d8ffh);background-image:linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16%205H4v12c0%201.
...

Flow needs to ship that resource by default for the galleries to be styled properly. The html structure seems fine.