Image Block: Media Sources Menu Inserted When Adding Caption

[taipeicoder]

Impacted plugin

Jetpack

Quick summary

When adding a caption to an image, the media sources menu is unexpectedly inserted between the image and the caption. See screenshot for reference:

Or a recording:

Screen.Capture.on.2024-06-19.at.11-02-38.mp4

Notes:

• This also happens in the Gallery block.
• Clicking on the menu items results in the media sources menu to be removed.
• This happens in Gutenberg 18.5, downgrading to 18.4.1 and the issue is not reproducible.
• This issue does not happen if Jetpack is disabled.

Steps to reproduce

1. Create a new JN sites.
2. Install Gutenberg 18.5.
3. Connect Jetpack.
4. Head to the Site Editor, and add an image block.
5. Click on the Add caption button, and observe the issue described above.

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

For the image caption input field to be displayed.

What actually happened

The image caption input field was displayed, but also the media sources menus is rendered along with it.

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Atomic, Self-hosted

Logs or notes

8351984-zd-a8c
8354098-zd-a8c
8354676-zd-a8c

[github-actions]

Support References

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

• 8351984-zen
• 8354098-zen
• 8354676-zen

[jeherve]

I'm thinking this may be related to the recent work on block bindings in core. @Automattic/frontity Is that something that's come up in your work in the past few weeks?

Those media sources are added by Jetpack by hooking into blocks.registerBlockType:

jetpack/projects/plugins/jetpack/extensions/shared/external-media/index.js

Lines 9 to 18 in 9212d2f

	function insertExternalMediaBlocks( settings, name ) {
	if ( name !== 'core/image' ) {
	return settings;
	}
	return {
	...settings,
	keywords: [ ...settings.keywords, ...mediaSources.map( source => source.keyword ) ],
	};
	}

[SantosGuillamot]

I'm thinking this may be related to the recent work on block bindings in core. Is that something that's come up in your work in the past few weeks?

I don't think any of the changes we added in that release should affect this functionality. We are working on the image caption now, but it hasn't been merged into Gutenberg yet.

I can try to help if I am able to reproduce the error in a local instance of the Gutenberg repo. Which is the best way to test this extension? Can I install it somehow to my local site?

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Local site - No

📌 FINDINGS/SCREENSHOTS/VIDEO
Atomic with GB 18.5
https://github.com/Automattic/jetpack/assets/14153300/c9f29820-bbb8-44ec-b8ce-5eb1bce0e696

Atomic without GB 18.5 but with WordPress 6.6 beta 3

Dotcom Simple

Local site with WordPress 6.6 Beta 3 + GB 18.5

CleanShot.2024-06-19.at.11.51.47.mp4

📌 ACTIONS

• Triaged

[jeherve]

Thanks for taking a look!

I can try to help if I am able to reproduce the error in a local instance of the Gutenberg repo. Which is the best way to test this extension? Can I install it somehow to my local site?

Your local developement environment would need to be publicly available, so you can connect the Jetpack plugin to WordPress.com. Here in the Jetpack division we tend to rely on PCYsg-GJ2-p2 to make our local environments publicly available, but it does require a bit of setup.

Local site - No

The Jetpack plugin doesn't seem to be activated on your local site, so you won't be able to replicate the problem since the External Media feature is only available on sites using the Jetpack plugin.

[liviopv]

The Jetpack plugin doesn't seem to be activated on your local site, so you won't be able to replicate the problem since the External Media feature is only available on sites using the Jetpack plugin.

I know! That was just to confirm it was Jetpack-specific :)

[SantosGuillamot]

I tried to reproduce it using in Gutenberg (without JetPack) the same filters you shared, but I wasn't able to. I also tried setting up JetPack locally but, after tunneling it to my local domain, wp-admin is redirected so I can't connect it to WordPress.com.

By the way, these are the changes introduced in Gutenberg 18.5. In case you are able to identify the issue.

[jeherve]

Thanks for trying! On my end I'm still thinking; I may try to see if WordPress/gutenberg#62085 played a role tomorrow.