Navis Slideshow JS is broken from recent changes in Gutenberg; styles are misapplied

[benlk]

Using https://secure.helpscout.net/conversation/802967329/3453/?folderId=1211654 as an example, if:

• an image is positioned in a story using Gutenberg
• and aligned right or left,
• and imag elinking is set to "none" or "media file",

then if that image is clicked, it pops up into a strange position, and can't be dismissed.

Tyler wrote:

So did some debugging on this:

1. The navis-slideshows code comes with Largo.
2. That code makes it such that if you click on an image in a post, that image gets blown up in a black-background letterbox type thing.
3. The way that works is that Navis's JS file inserts certain classes onto the
   that's the parent of the .
4. PROBLEM: I think this starts with Gutenberg, but now that is contained within a , which in turn is contained by the
   -- that means when the image gets clicked, those extra classes go onto the instead which causes the screwed up view.
5. POSSIBLE SOLUTION? If that intermediate doesn't have a display:table attached to it, I think everything displays normally?

Tyler's solution of removing the display: table works, but I don't understand why.

[benlk]

#1675 didn't go far enough.

The .navis-slideshow.navis-full class needs transform: translateX(-50%); to counter the effects of a .alignfull class, when a full image block is output:

<figure class="wp-block-image alignfull" style="max-width: 100%;">
<img src="http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-1170x780.jpg" alt="" class="wp-image-129823" srcset="http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-1170x780.jpg 1170w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-336x224.jpg 336w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-768x512.jpg 768w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-771x514.jpg 771w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h.jpg 1600w" sizes="(max-width: 1170px) 100vw, 1170px">
<figcaption>This is a full-width image. It should be preceded by a single paragraph tag.</figcaption
</figure>

A similar bug:

We must also must take care of the caption positioning changes in #1671 which have caused the caption to reappear on the slideshow:

.navis-slideshow.navis-full {
 &.aligncenter,
  &.alignleft,
  &.alignright,
  &.is-resized {
    display: block;
    > figcaption {
      display: none;
    }
  }
}

Also note in that image that the global nav is drawing over top of the image. That can be fixed by removing this z-index, added in 5a56ce5 :

https://github.com/INN/largo/blob/395412d158001de0e7332e714aff8d3c5edccb0b/less/inc/header.less#L5-L10

[benlk]

A fix for this should be tested against both C and MST.