Slideshow block has duplicated caption in the Editor for sites with FSE themes.

[nazilya06]

Impacted plugin

Jetpack

Quick summary

When the Slideshow block images include captions, they appear duplicated in the Editor. However, they display correctly in the preview.

Editor:

Preview:

Steps to reproduce

1. Make sure your site is using the FSE theme.
2. Add a Slideshow block
3. Add captions to the image

A clear and concise description of what you expected to happen.

No response

What actually happened

No response

Impact

Some (< 50%)

Available workarounds?

Yes, difficult to implement

If the above answer is "Yes...", outline the workaround.

For atomic sites, I found that deactivating the Gutenberg plugin fixes it.

Platform (Simple and/or Atomic)

No response

Logs or notes

8751655-zd-a8c

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8751655-zen

[anomiex]

Looks like what's going on here is that the swiper library is loaded asynchronously. Webpack's async loader doesn't know anything about Gutenberg's iframe editor, so swiper.css is only async-loaded at the top level, not in the iframe.

Disabling the Gutenberg plugin seems to also turn off the iframe editor, so the top-level-loaded swiper.css takes effect there.

Looks like the Map block has a hack to work around this (see #19552). Podcast Player is doing something seemingly similar (see #19578), but I think that one is more along the lines of needing to use the 'enqueue_block_assets' hook (now that it exists) rather than async loading from webpack.

[anomiex]

Looking at options, I wonder if we could make use of mini-css-extract-plugin's import option to have it automatically load the styles inside Gutenberg's iframe when the iframe is present.

[jartes]

📌 ACTIONS

• Triaged