Newest Update 2.2.94 from 10/3/2024 Breaks Site Appearance

Hi @industrialweb,
We apologize for the inconvenience. Our team has already fixed the issue and released a new update, version 2.2.95. Could you please update your plugin to the latest version and give it a try? Please let us know if you face any issues. Our active support team will always assist you.

It fixed that issue, but now the blocks carousels are broken.

How it looks in the editor (correct)

How it looks on the website (broken)

Here is an error code console is giving me. This is probably a red herring. When I rolled the site back the carousel displays fine, while the error is pretty much the same cause (but maybe another line?). Here is how the error shows in the new:

Uncaught DOMException: Document.querySelector: '# .next ' is not a valid selector
    initTabs https://--------.wpenginepowered.com/wp-content/plugins/post-grid/assets/block-js/block-scripts.js?ver=6.6.2:1
    <anonymous> https://--------.wpenginepowered.com/wp-content/plugins/post-grid/assets/block-js/block-scripts.js?ver=6.6.2:1
block-scripts.js:1
    initTabs https://--------.wpenginepowered.com/wp-content/plugins/post-grid/assets/block-js/block-scripts.js?ver=6.6.2:1
    <anonymous> https://--------.wpenginepowered.com/wp-content/plugins/post-grid/assets/block-js/block-scripts.js?ver=6.6.2:1

Here is how the error shows in the old (where the carousel is not broken)

Uncaught DOMException: Document.querySelector: '# .next ' is not a valid selector
    initTabs https://--------.wpenginepowered.com/wp-content/plugins/post-grid/assets/block-js/block-scripts.js?ver=6.6.2:1
    <anonymous> https://--------.wpenginepowered.com/wp-content/plugins/post-grid/assets/block-js/block-scripts.js?ver=6.6.2:1
    EventListener.handleEvent* https://--------.wpenginepowered.com/wp-content/plugins/post-grid/assets/block-js/block-scripts.js?ver=6.6.2:1
    <anonymous> https://--------.wpenginepowered.com/wp-content/plugins/post-grid/assets/block-js/block-scripts.js?ver=6.6.2:1
block-scripts.js:1

Please install the latest version 2.2.96. Hopefully, the latest version will resolve your issue. Let us know if the issue is still present.

Same issue. Looking more closely, CSS does not seem to be applying or present when on the front end.

I think it might be this, for the circles. I’d imagine that the same issue happened with the nav arrows, that the CSS has disappeared from the newer versions:

If I inspect the circles, before updating, these are the styles applied

.pg416ffcfcd57c .splide__pagination__page {
padding: undefined undefined undefined undefined;
border: 2px solid #1f2e45;
height: 30px;
width: 30px;
border-radius: 50% 50% 50% 50%;
}

After updating, this is the only set of rules applied to the circles:

.splide__pagination li {
line-height: 1;
list-style-type: none;
pointer-events: auto;
}

With this newer version, also, the carousel shows properly in the editor, but on the front end these styles aren’t loading, or maybe there is a typo, changed class name, something along those lines.

The javascript error from above is still there, but I think that’s a red herring at this point.

When you’re editing the page, first reload it. Then, choose a variation from the block variation panel and click on the ‘apply style‘ button. If this doesn’t help, please share a live URL so we can check it online.
Below is a screenshot for reference:

This won’t help. I can’t see any way of doing what you suggest without creating a *new* slider. I’ve already created different 50 sliders for 50 different pages. Creating one new one does nothing for the problem. Updating the plugin breaks all of them.

I’d say it seems something changed majorly in how a layer or other element is classed or ID’ed. It breaks all of them, but it is only happening on the front end. You have something that is working right on the editor side and working completely wrong on the website side.

Updating to 2.2.97, there is the same issue: It looks just as it should in the block editor and looks just like the pictures above when on the front end.

The website is in a development area. There is password protection over that area. No way I’d show a site that was this busted publicly. I could send you the login and password to view it – but the window has to be relatively small. I have to restore the site to pre-update state before anyone else can continue their work.

This issue, simply put, is that the styles applied on the backend, are not applied on the front.

The first image is how the slideshow looks in the editor (which is as it should)

The second image shows the styles applied to the pagination (which corresponds properly to the first image)

The third image, the slideshow loads as if these stylings are completely ignored.

The fourth image shows the styles that load on the old version of the plugin, *and* this also loads in the editor screen when these are selected.

The fifth image shows the *only* style loading for this element on the front-facing/website side.

This issue with assigned styles is not limited to the pagination, but all the styles applied in the editor – for navigation, navigation wrap, pagination, pagination wrap – they are all being ignored/not loading when looking at the website side of things.

It seems like there might be a cache issue. Could you please try clearing your cache and temporarily deactivating any cache plugins you have installed?

If that doesn’t work, please check if the ‘pg-content-slider’ class is present on the wrapper.

Also, would you be able to copy the content slider block and host the code on gitHub as gist? Sharing the link with us would help us troubleshoot the issue.

I cleared all caching on the hosting side including object caching, disabled the one caching plugin on the website itself, disabled minification, and cleared the Cloudflare cache. I cleared each 3 times before refreshing to be sure, and switched browsers just in case. The CSS declarations set in the editor do not exist on the front end of the website, but they do exist on the content when in the block editor.

I can confirm the pg-content-slider class is declared.

I ditched GitHub back when Microsoft bought it. I do not have a GitHub account.

Below is how the code looks from a broken slider on a broken site (one that has been updated)

<!-- wp:post-grid/content-slider {"wrapper":{"styles":{"margin":{"Desktop":"0px 0px 0px 0px"}},"options":{"class":"pg-content-slider industrypage"}},"item":{"options":{"tag":"div","class":"pg-content-slider-item"},"styles":{"textAlign":{"Desktop":"center","Mobile":""},"padding":{"Mobile":"10px 10px 10px 10px"},"display":{"Desktop":"flex"},"justifyContent":[],"color":{"Desktop":"#000000"},"alignItems":{"Desktop":"center"}},"after":{"position":[],"height":[],"width":[],"top":[],"left":[]},"before":{"position":[],"height":[],"width":[],"top":[],"left":[]}},"navsWrap":{"options":{"class":"nav-wrap"},"styles":{"display":{"Desktop":"none"},"width":{"Desktop":"100%"},"alignItems":{"Desktop":"center"},"position":{"Desktop":"absolute !important"},"top":{"Desktop":"2px"},"left":{"Desktop":"20px"},"gap":{"Desktop":"2px"}}},"prev":{"options":{"text":"","class":""},"styles":{"fontSize":{"Desktop":"18px"},"fontFamily":{"Desktop":"Poppins"},"fontStyle":{"Desktop":"normal"},"fontWeight":{"Desktop":"400"},"textAlign":{"Desktop":"center"},"color":{"Desktop":"#87e5e2"},"borderRadius":{"Desktop":"50px 50px 50px 50px"},"height":{"Desktop":"50px"},"lineHeight":{"Desktop":"50px"},"width":{"Desktop":"50px"},"display":{"Desktop":"inline-block"},"border":{"Desktop":"1px solid #87e5e2"},"margin":{"Desktop":"0px 0px 0px 0px"}}},"next":{"options":{"text":"","class":""},"styles":{"fontSize":{"Desktop":"18px"},"fontFamily":{"Desktop":"Poppins"},"fontStyle":{"Desktop":"normal"},"fontWeight":{"Desktop":"400"},"textAlign":{"Desktop":"center"},"color":{"Desktop":"#87e5e2"},"borderRadius":{"Desktop":"50px 50px 50px 50px"},"height":{"Desktop":"50px"},"lineHeight":{"Desktop":"50px"},"width":{"Desktop":"50px"},"display":{"Desktop":"inline-block"},"border":{"Desktop":"1px solid #87e5e2"},"margin":{"Desktop":"0px 0px 0px 0px"}}},"paginationWrap":{"options":{"tag":"ul","class":""},"styles":{"display":{"Desktop":"flex"},"justifyContent":{"Desktop":"center"},"padding":{"Desktop":"3px 0px 0px 0px"},"gap":{"Desktop":".5em"}}},"pagination":{"options":{"tag":"span","class":""},"styles":{"border":{"Desktop":"2px solid #1f2e45"},"backgroundColor":{"Desktop":"#f1f7f9"},"height":{"Desktop":"22px"},"width":{"Desktop":"22px"},"borderRadius":{"Desktop":"50%"}}},"sliderOptions":{"perPage":"1","perMove":"1","gap":"1em","autoplay":1,"type":"loop"},"blockId":"pg7358f3cb015c","blockCssY":{"items":{".pg7358f3cb015c .splide":{"margin":{"Desktop":"0px 0px 0px 0px"}},".pg7358f3cb015c .pg-content-slider-item":{"text-align":{"Desktop":"center","Mobile":""},"padding":{"Mobile":"10px 10px 10px 10px"},"display":{"Desktop":"flex"},"color":{"Desktop":"#000000"},"align-items":{"Desktop":"center"}},".pg7358f3cb015c .splide__arrow\u002d\u002dnext":{"font-size":{"Desktop":"18px"},"font-family":{"Desktop":"Poppins"},"font-style":{"Desktop":"normal"},"font-weight":{"Desktop":"400"},"text-align":{"Desktop":"center"},"color":{"Desktop":"#87e5e2"},"border-radius":{"Desktop":"50px 50px 50px 50px"},"height":{"Desktop":"50px"},"line-height":{"Desktop":"50px"},"width":{"Desktop":"50px"},"display":{"Desktop":"inline-block"},"border":{"Desktop":"1px solid #87e5e2"},"margin":{"Desktop":"0px 0px 0px 0px"}},".pg7358f3cb015c .splide__arrow\u002d\u002dprev":{"font-size":{"Desktop":"18px"},"font-family":{"Desktop":"Poppins"},"font-style":{"Desktop":"normal"},"font-weight":{"Desktop":"400"},"text-align":{"Desktop":"center"},"color":{"Desktop":"#87e5e2"},"border-radius":{"Desktop":"50px 50px 50px 50px"},"height":{"Desktop":"50px"},"line-height":{"Desktop":"50px"},"width":{"Desktop":"50px"},"display":{"Desktop":"inline-block"},"border":{"Desktop":"1px solid #87e5e2"},"margin":{"Desktop":"0px 0px 0px 0px"}},".pg7358f3cb015c .splide__arrow\u002d\u002dnext .icon":{"padding":{"Desktop":"0px 0px 0px 10px"},"font-size":{"Desktop":"16px"}},".pg7358f3cb015c .splide__arrow\u002d\u002dprev .icon":{"padding":{"Desktop":"0px 10px 0px 0px"},"font-size":{"Desktop":"16px"}},".pg7358f3cb015c .splide__arrows":{"display":{"Desktop":"none"},"width":{"Desktop":"100%"},"align-items":{"Desktop":"center"},"position":{"Desktop":"absolute !important"},"top":{"Desktop":"2px"},"left":{"Desktop":"20px"},"gap":{"Desktop":"2px"}},".pg7358f3cb015c .splide__pagination":{"display":{"Desktop":"flex"},"justify-content":{"Desktop":"center"},"padding":{"Desktop":"3px 0px 0px 0px"},"gap":{"Desktop":".5em"}},".pg7358f3cb015c .splide__pagination__page":{"border":{"Desktop":"2px solid #1f2e45"},"background-color":{"Desktop":"#f1f7f9"},"height":{"Desktop":"22px"},"width":{"Desktop":"22px"},"border-radius":{"Desktop":"50%"}},".pg7358f3cb015c .splide__pagination__page.is-active":{"background-color":{"Desktop":"#1f2e45"}}}}} -->
<!-- wp:post-grid/content-slider-item {"blockId":"pg80838256d59a","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1406,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/08/Lathe-VMC-Cell-Machining-Segment-Gear-for-Aerospace-Part.png" alt="Lathe VMC Cell Machining - Segment Gear for Aerospace Part" class="wp-image-1406" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pgec1b2548f6d8","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1404,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/08/Lathe-VMC-Machining-Flanged-Bushing-for-Aerospace-Part.png" alt="Lathe VMC Machining - Flanged Bushing for Aerospace Part" class="wp-image-1404" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg31039a2ac4b5","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1403,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/08/Lathe-Machining-Sleeve-for-Aerospace-Part.png" alt="Lathe Machining - Sleeve for Aerospace Part" class="wp-image-1403" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pged989da51217","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1400,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/08/Lathe-VMC-Machining-Flange-Boss-for-Aerospace-Part.png" alt="Lathe VMC Machining - Flange Boss for Aerospace Part" class="wp-image-1400" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg3ed244b9c76a","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1394,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/08/Lathe-Machining-Piston-for-Firearm-Part.png" alt="Lathe Machining - Piston for Firearm Part" class="wp-image-1394" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg246ac2648bcc","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1279,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/Vi-cas-79085-fitting-industrial-OEM-equipment-manufacturing-example-1.png" alt="Vi-cas-79085 fitting industrial OEM equipment manufacturing example 1" class="wp-image-1279" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pgb17e528b4d9d","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1277,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-industrial-OEM-equipment-manufacturing-example-oriffice-holder.png" alt="CTS-530 industrial OEM equipment manufacturing example oriffice holder" class="wp-image-1277" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pgb26b33d56dc3","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1276,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-industrial-OEM-equipment-manufacturing-example-oriffice-holder-3.png" alt="CTS-530 industrial OEM equipment manufacturing example oriffice holder 3" class="wp-image-1276" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg6cdf5ba4c180","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1275,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-industrial-OEM-equipment-manufacturing-example-oriffice-holder-2.png" alt="CTS-530 industrial OEM equipment manufacturing example oriffice holder 2" class="wp-image-1275" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg59f962e2113b","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1274,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-fitting-industrial-OEM-equipment-manufacturing-example.png" alt="CTS-530 fitting industrial OEM equipment manufacturing example" class="wp-image-1274" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pge43d9d0a8e40","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1273,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-fitting-industrial-OEM-equipment-manufacturing-example-e.png" alt="CTS-530 fitting industrial OEM equipment manufacturing example e" class="wp-image-1273" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg1d43a8c12261","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1272,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-fitting-industrial-OEM-equipment-manufacturing-example-d.png" alt="CTS-530 fitting industrial OEM equipment manufacturing example d" class="wp-image-1272" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg95e141f67648","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1271,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-fitting-industrial-OEM-equipment-manufacturing-example-c.png" alt="CTS-530 fitting industrial OEM equipment manufacturing example c" class="wp-image-1271" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pgae82748ab75a","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1270,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-fitting-industrial-OEM-equipment-manufacturing-example-b.png" alt="CTS-530 fitting industrial OEM equipment manufacturing example b" class="wp-image-1270" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg7393dc1373ef","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1269,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-fitting-industrial-OEM-equipment-manufacturing-example-a.png" alt="CTS-530 fitting industrial OEM equipment manufacturing example a" class="wp-image-1269" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pgcb1e798443c6","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1268,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-fitting-industrial-OEM-equipment-manufacturing-example-3.png" alt="CTS-530 fitting industrial OEM equipment manufacturing example 3" class="wp-image-1268" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg4a8c9ab4cd36","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1267,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/CTS-530-fitting-industrial-OEM-equipment-manufacturing-example-2.png" alt="CTS-530 fitting industrial OEM equipment manufacturing example 2" class="wp-image-1267" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pgf533c96a40fe","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1265,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/Industrial-OEM-Manufacturing-CTS-530-MSEAL-e1717547094409.png" alt="Industrial OEM Manufacturing parts example: CTS-530-MSEAL" class="wp-image-1265" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pge35c102aff97","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":1263,"aspectRatio":"4/3","scale":"contain","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://xxxxx.com/wp-content/uploads/2024/06/industrial-products.jpg" alt="Photo of Industrial OEM Parts and Assembled Products" class="wp-image-1263" style="aspect-ratio:4/3;object-fit:contain"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->
<!-- /wp:post-grid/content-slider -->

Now here is how code copied from a working slider on a working site (not updated past 2.2.93) reads. This is a nearly identical slider as each site started from the same general template and content.

<!-- wp:post-grid/content-slider {"wrapper":{"options":{"class":"pg-content-slider"},"styles":{"backgroundColor":{}}},"navsWrap":{"options":{"class":"nav-wrap"},"styles":{"display":{"Desktop":"none"},"width":{"Desktop":"100%"},"justifyContent":{"Desktop":"space-between"},"alignItems":{"Desktop":"center"},"position":{"Desktop":"absolute !important"},"top":{"Desktop":"50%"},"transform":{"Desktop":"translateY(-50%)"},"zIndex":{}}},"pagination":{"options":{"tag":"span","class":""},"styles":{"padding":{"Desktop":"undefined undefined undefined undefined"},"border":{"Desktop":"2px solid #1f2e45"},"height":{"Desktop":"30px"},"width":{"Desktop":"30px"},"borderRadius":{"Desktop":"50% 50% 50% 50%"}}},"sliderOptions":{"perPage":"1","perMove":"1","arrows":"0","pagination":1},"blockId":"pg3a3212fde516","blockCssY":{"items":{".pg3a3212fde516 .splide__arrow\u002d\u002dnext":{"font-size":{"Desktop":"18px"},"font-family":{"Desktop":"Poppins"},"font-style":{"Desktop":"normal"},"font-weight":{"Desktop":"400"},"text-align":{"Desktop":"right"},"color":{"Desktop":"#ffffff"},"background-color":{"Desktop":"#1F2E45"},"border-radius":{"Desktop":"50px"},"padding":{"Desktop":"5px 20px 5px 20px"}},".pg3a3212fde516 .splide__arrow\u002d\u002dprev":{"font-size":{"Desktop":"18px"},"font-family":{"Desktop":"Poppins"},"font-style":{"Desktop":"normal"},"font-weight":{"Desktop":"400"},"text-align":{"Desktop":"left"},"color":{"Desktop":"#ffffff"},"background-color":{"Desktop":"#1F2E45"},"border-radius":{"Desktop":"50px"},"padding":{"Desktop":"5px 20px 5px 20px"}},".pg3a3212fde516 .splide__arrow\u002d\u002dnext .icon":{"padding":{"Desktop":"0px 0px 0px 10px"},"font-size":{"Desktop":"16px"}},".pg3a3212fde516 .splide__arrow\u002d\u002dprev .icon":{"padding":{"Desktop":"0px 10px 0px 0px"},"font-size":{"Desktop":"16px"}},".pg3a3212fde516 .splide__arrows":{"display":{"Desktop":"none"},"width":{"Desktop":"100%"},"justify-content":{"Desktop":"space-between"},"align-items":{"Desktop":"center"},"position":{"Desktop":"absolute !important"},"top":{"Desktop":"50%"},"transform":{"Desktop":"translateY(-50%)"}},".pg3a3212fde516 .splide__pagination":{"display":{"Desktop":"flex"},"justify-content":{"Desktop":"center"},"padding":{"Desktop":"30px 0px 0px 0px"},"gap":{"Desktop":"1em"}},".pg3a3212fde516 .splide__pagination__page":{"padding":{"Desktop":"undefined undefined undefined undefined"},"border":{"Desktop":"2px solid #1f2e45"},"height":{"Desktop":"30px"},"width":{"Desktop":"30px"},"border-radius":{"Desktop":"50% 50% 50% 50%"}},".pg3a3212fde516 .splide__pagination__page.is-active":{"background-color":{"Desktop":"#1f2e45"}}}}} -->
<!-- wp:post-grid/content-slider-item {"blockId":"pgd06aff5cf564","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":9168,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://yyyyyyyy.com/wp-content/uploads/2024/02/Agri-Press-AGP-800-Screw-Press-2-1024x512.jpg" alt="Agri-Press AGP-800 Screw Press" class="wp-image-9168"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pgd57fa5a8900c","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":9167,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://yyyyyyyy.com/wp-content/uploads/2024/02/Agri-Press-AGP-800-Agricultural-Screw-Press-2.jpg" alt="AGP 800 Agricultural Screw Press" class="wp-image-9167"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pgeb4ca109db45","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":9099,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://yyyyyyyy.com/wp-content/uploads/2024/02/industrial-thickener-1024x768.jpg" alt="Industrial thickener machine" class="wp-image-9099"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg31d6def22b1a","blockCssY":{"items":{}}} -->
<!-- wp:image {"id":181,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://yyyyyyyy.com/wp-content/uploads/2015/10/screw-press-industrial-agricultural-dewatering.jpg" alt="Industrial and Agricultural Screw Press" class="wp-image-181"/></figure>
<!-- /wp:image -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg2be911b3dd79","blockCssY":{"items":{}}} -->
<!-- wp:embed {"url":"https://www.youtube.com/watch?v=mNUeRbM1dz8","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=mNUeRbM1dz8
</div></figure>
<!-- /wp:embed -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pg4a82c4aef5bc","blockCssY":{"items":{}}} -->
<!-- wp:embed {"url":"https://www.youtube.com/watch?v=wn6Xp6UzFK0","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=wn6Xp6UzFK0
</div></figure>
<!-- /wp:embed -->
<!-- /wp:post-grid/content-slider-item -->

<!-- wp:post-grid/content-slider-item {"blockId":"pgc4366fc297ae","blockCssY":{"items":{}}} -->
<!-- wp:embed {"url":"https://www.youtube.com/watch?v=bxf0Nehz5nE","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=bxf0Nehz5nE
</div></figure>
<!-- /wp:embed -->
<!-- /wp:post-grid/content-slider-item -->
<!-- /wp:post-grid/content-slider -->

So, if I don’t update the plugin, this code shows:

.pg3a3212fde516 .splide__pagination__page":{"padding":{"Desktop":"undefined undefined undefined undefined"},"border":{"Desktop":"2px solid #1f2e45"},"height":{"Desktop":"30px"},"width":{"Desktop":"30px"},"border-radius":{"Desktop":"50% 50% 50% 50%"}},

Otherwise it shows as:

.pg7358f3cb015c .splide__pagination__page":{"border":{"Desktop":"2px solid #1f2e45"},"background-color":{"Desktop":"#f1f7f9"},"height":{"Desktop":"22px"},"width":{"Desktop":"22px"},"border-radius":{"Desktop":"50%"}},

Either way, the bullet points have a height and width, background color, and border-radius when viewed in the Block Editor. On the site that is updated past 2.2.96, these styles are not present on the actual website, but they are still there in the Block Editor.

If the pagination style works in the editor, it should definitely work on the front end as well. Could you please open the page in question, make no changes, just hit save, and check if it fixes the issue?

We’ve tested the block you shared, and it works on our end. Please take a look at this YouTube video: https://youtu.be/78ePT8EiZXs?si=JusHNNw-ewQ8qlHQ

It would be helpful if you could create a temporary test site with the block and share the link with us.

The update causes this, and that is why I cannot update.

THAT is what I have been trying to communicate to you all this time.

I hope you see how inconvenient it would be for me to have to copy every slideshow before I update, update, then paste in slideshow for each of 50 pages times 4 websites. [EDIT: This did not work to fix the issue anyway]

I was sort of hoping you would make it so that the update does not break people’s old/existing sliders so that I could apply an update.

I’ve been stuck on 2.2.93 a month now hoping than an update would be stable and not break the site. I’d rather not have to copy every single working slider from the 2.2.92 site, update to 2.2.96, then paste every single one. That is a huge job.

I am going to give this a try for a few, but doing it for all of them will be a big job.

• This reply was modified 3 weeks, 6 days ago by industrialweb.

So I tried this pasting, and the issue is still happening, whether I paste the working or the broken slider.

For testing, I disabled every plugin.

WordPress version is 6.6.2. PHP version is 8.2.

I am using the PRO version of this plugin.

I switched from the Twenty Twenty Four theme to the Twenty Twenty Three theme. These are un-modified.

I turned off the object cache, disabled the caching plugin with all the others, cleared server side caches, cleared cloudflare cache. Repeated this 3 times, switched browsers (from Firefox to Chrome).

The issue is still happening. The only thing that changes to get to where things are broken is that the plugin is updated anything above 2.2.93

Could you please tell me what theme and which PHP version you are testing this in?

Further testing, on another site, another server, another host – disabling every plugin, using plain Twenty Twenty Four theme, no caching, the issue still happens.

I have painstakingly gone through the source code, for the sites when the plugin is updated and non-updated, and found that when the plugin is updated, the inline CSS the plugin is supposed to generate, is just not present in the outputted HTML. The plugin is just not adding the css styles to the pages.

The line below present before the plugin is updated, gone after updated.

This is not just breaking the Content Sliders, but any other elements from this plugin.

<style>
      .pg5052d7d313db .splide{margin:0px 0px 0px 0px;}.pg5052d7d313db .pg-content-slider-item{text-align:center;display:flex;color:#000000;align-items:center;}.pg5052d7d313db .splide__arrow--next{font-size:18px;font-family:Poppins;font-style:normal;font-weight:400;text-align:center;color:#87e5e2;border-radius:50px 50px 50px 50px;height:50px;line-height:50px;width:50px;display:inline-block;border:1px solid #87e5e2;margin:0px 0px 0px 0px;}.pg5052d7d313db .splide__arrow--prev{font-size:18px;font-family:Poppins;font-style:normal;font-weight:400;text-align:center;color:#87e5e2;border-radius:50px 50px 50px 50px;height:50px;line-height:50px;width:50px;display:inline-block;border:1px solid #87e5e2;margin:0px 0px 0px 0px;}.pg5052d7d313db .splide__arrow--next .icon{padding:0px 0px 0px 10px;font-size:16px;}.pg5052d7d313db .splide__arrow--prev .icon{padding:0px 10px 0px 0px;font-size:16px;}.pg5052d7d313db .splide__arrows{display:none;width:100%;align-items:center;position:absolute !important;top:2px;left:20px;gap:2px;}.pg5052d7d313db .splide__pagination{display:flex;justify-content:center;padding:3px 0px 0px 0px;gap:.5em;}.pg5052d7d313db .splide__pagination__page{border:1px solid #1f2e45;background-color:#f1f7f9;height:22px;width:22px;border-radius:50%;}.pg5052d7d313db .splide__pagination__page.is-active{background-color:#1f2e45;}@media(max-width:767px){.pg5052d7d313db .pg-content-slider-item{padding:10px 10px 10px 10px;}}    </style>

Hi,
Since you’re using our pro version, could you please create a support ticket on our forum?
Here is the URL: https://pickplugins.com/support/

Thank you so much for your patience.

This has been fixed in the newest version, 2.2.9.8