Image block inside a column block has broken z-indexes

[benlk]

In this image, a .alignfull six-column column block contains 6 identical image blocks. It is followed by a five-column column block with 5 identical images. An image in the six-column block was clicked, with the result that the image markup

<div class="wp-block-column">
	<figure class="wp-block-image" style="max-width: 100%;">
		<img
			src="https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--771x1184.png"
			alt=""
			class="wp-image-113755"
			srcset="https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--771x1184.png 771w, https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--336x516.png 336w, https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--768x1179.png 768w, https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--1170x1797.png 1170w, https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07-.png 1180w"
			sizes="(max-width: 771px) 100vw, 771px"
		>
	</figure>
	<p>some text</p>
</div>

was modified to the Navis slideshow markup

<div class="wp-block-column">
	<figure class="wp-block-image navis-full" style="max-width: 100%;">
		<span class="navis-before">X</span>
		<img
			src="https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--771x1184.png"
			alt=""
			class="wp-image-113755"
			srcset="https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--771x1184.png 771w, https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--336x516.png 336w, https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--768x1179.png 768w, https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07--1170x1797.png 1170w, https://freshenergy.test/wp-content/uploads/2019/04/Screen-Shot-2019-04-07-at-20.38.07-.png 1180w"
		>
	</figure>
	<p>some text</p>
</div>

Note the following incorrect things in the photo:

• the floating social nav buttons are still visible atop the full-size image (can't be fixed with pure CSS; the FSB and the Navis slideshow are in different stacking contexts, so a modification will need to be made to the Navis JS to check if the FSB is present on a page and, if it is, hide/show it when the slideshow is shown/hidden)
• the following columns block's image overlap the Navis images
• the image is stretched to 100% width by .alignfull img, which could probably be solved with .navis-single.navis-full img {width: auto;} in slides.css
• the navis-slideshow navis-single classes on the figure element don't escape the display: flex; style on the ancestor column block, since that's the nearest containing block.

[joshdarby]

@benlk This is ready inside PR #1685.

• Added conditional to floating social buttons to check if any figure element has navis-full class. If so, don't proceed to show the buttons
• Gave .navis-single.navis-full img width: auto attribute
• On navis slideshow open, hide floating social buttons
• Created no-transform class to add to wp-block-columns
• Created conditional to check if parent wp-block-columns of gallery has alignfull class. If so, add no-transform class on open and remove it on close.
• Created function is_user_logged_in inside navis-slideshow.js. If true, the admin bar will be toggled when the lightbox is open/closed.

Before images:

After images: