Skip to content

Slideshow Block: Block breaks in Editor when set to Full Width #17616

@ockham

Description

@ockham

Steps to reproduce the issue

  1. Enable the Gutenberg plugin (version 9.2.2).
  2. Insert the Slideshow block into the editor, and add a few images.
  3. Set the block to full width.

What I expected

The block to work.

What happened instead

The block disappears; only the left/right slideshow controls remain

Screenshots
slideshow JP

Notes

The bug is not present when the Gutenberg plugin (v9.2.2) isn't enabled. This suggests that it might be related to the recent block-supports rewrite (as issues with block-supports tend to affect blocks that are set to full-width alignment).

Note the inline styling in the browser console in the above screencast: When changing the block layout to 'Full Width', two numeric values (for the width and transform attributes) are assinged weird floating point numbers that probably don't work in CSS 😬

AFAIK, that inline styling is provided by the Swiper library that we use to implement the Slideshow block, and added to the HTML element with the swiper-wrapper class. I suspect that the lib is attempting to read some dimensions from the block but gets them wrong and thus ends up settings those weird values.

Also note that the block toolbar isn't aligned with the block (rather than sitting right on top, it is the very left of the editor; it's more visible on a wide screen). This could be related to the same issue -- some dimensions being incorrectly computed.

This bug also affects WP.com. It has been discussed here: p1603739210304100-slack-C015AL3QL7M

cc/ @TheSteveK @eduardozulian @fullofcaffeine @nosolosw

Metadata

Metadata

Assignees

Labels

Customer Report [LEGACY]Issues or PRs that were reported via Happiness. aka "Happiness Request", or "User Report"[Block] Slideshow[Pri] High[Type] BugWhen a feature is broken and / or not performing as intended

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions