Automattic / Automattic/jetpack

Slideshow Block: Wrap Swiper's CSS in our CSS selector

Open
#11,839 0 comments 0 reactions 0 assignees View on GitHub
[Block] Slideshow [Type] Question
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

Continuing discussion from https://github.com/Automattic/wp-calypso/pull/30352#discussion_r254273084.

TODO:
- [ ] Make Swiper styling import static
- [ ] `@import` in our SASS file, wrap in our selector:

> ```scss
> .wp-block-jetpack-slideshow {
> @import '......./slider.css';
> }
> ```

Relevant bits from the previous conversation:

https://github.com/Automattic/wp-calypso/pull/30352#discussion_r254273084 (@simison):

> Should we use nested imports to wrap Slider's CSS with our CSS selector?
>
> ```scss
> .wp-block-jetpack-slideshow {
> @import '......./slider.css';
> }
> ```
>
> Results in:
>
> ```css
> .wp-block-jetpack-slideshow .swiper-container { }
> ```
>
> http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_import
>
> Wouldn't that mostly solve the problems around our CSS leaking into any other implementation of Slider on the same page?
>
> As the term "slider" is pretty generic already and Gutenberg has great deprecation transforms in case we want to change it later, I wouldn't be so worried about having the term in the block output per se.

https://github.com/Automattic/wp-calypso/pull/30352#discussion_r254275318 (@jeffersonrabb):

> It's `swiper` not `slider`, but your point still stands :-). Currently we're loading Swiper's stylesheet dynamically, so wrapping it isn't possible:
>
> https://github.com/Automattic/wp-calypso/blob/713a6a5e7cc27f4467af5bd97b191d5f1dbbcbbd/client/gutenberg/extensions/slideshow/create-swiper.js#L47
>
> Line 47 in [713a6a5](/Automattic/wp-calypso/commit/713a6a5e7cc27f4467af5bd97b191d5f1dbbcbbd)
>
> However, the main win in the dynamic loading is the large Javascript library, so we could include the stylesheet as you're suggesting without too much pain. I guess this becomes a trade-off between CSS leakage and lazy loading.

Contributor guide

Open the contributing guide

Research direction

Start with client/gutenberg/extensions/slideshow/create-swiper.js at the referenced stylesheet-loading code, then locate the Slideshow block's SASS file and the imported slider.css. Make the Swiper styling import static and scope its rules under .wp-block-jetpack-slideshow; verify that the generated selectors no longer leak to other Slider implementations.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, scss
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.