ISBAT use CoBlocks and Gutenslider with no CSS conflict

[zitrusblau]

Describe the bug:

I should be able to use Gutenslider plugin together w/ CoBlocks without issues. There's a side effect due to conflicting styles inserted by CoBlocks which also includes SwiperJS.

This issue on WP forums is closely related: https://wordpress.org/support/topic/slider-image-off-centre/

To reproduce:

1. Install Gutenslider plugin => https://wordpress.org/plugins/gutenslider/
2. add a slide block
3. add some slides with images
4. set gutenslider to full width (applying class ".alignfull").

Expected behavior:

See a full-width slider on site frontend.

Screenshots:

Isolating the problem:

• [ x] This bug happens with no other plugins activated
• [x ] This bug happens with a default WordPress theme active
• [x ] This bug happens without the Gutenberg plugin active
• [x ] I can reproduce this bug consistently using the steps above

WordPress version:

WP 5.9.2

Gutenberg version:

[fjarrett-godaddy]

According to some data we have, GutenSlider is only active alongside CoBlocks 0.04% of the time. As a result, this bug isn't a high priority for us but we welcome any pull requests that may fix the problems described and are happy to review them.

[nigel-maher]

@zitrusblau You can work around this by targeting the ID of the Gutenslider block with CSS as follows (where gutenslider-98bv8xvgl is the ID:

#gutenslider-98bv8xvgl .swiper-slide, #gutenslider-98bv8xvgl .swiper-slide-thumbnail { justify-content: flex-start; }

For me, that fixes the issue in the major browsers.

Unfortunately, I also have another issue where the first slide flashes briefly then does not show for the rest of its duration (no image is visible until the second slide appears). Without wanting to get too offtrack, I'm wondering if it's a clash with how swiper initialises?

@fjarrett-godaddy Gutenslider seems to be getting popular fairly quickly, there aren't currently many sliders that work solely in the editor as it does. Fixing it in CoBlocks is beyond me at this point in time, sorry.

[zitrusblau]

@nigel-maher thanks! using (SCSS) .wp-block-eedee-block-gutenslider { & .swiper-slide, & .swiper-slide-thumbnail { justify-content: initial; } } fixed it for me.

@fjarrett-godaddy there might be other plugins out there using the fairly popular swiperjs library. Suggestion: Maybe only load swiper related styles in coblocks if a block is actually added/used?

[gdandrija]

Hey guys, we have more users reporting this issue on WordPress.org https://wordpress.org/support/topic/conflict-with-gutenberg-slider/