javascript - Open Featured Image Modal in WordPress Gutenberg onClick of a button

admin管理员组

文章数量:1130349

I am using the metabox.io plugin. I am looking for a way to open the new WordPress Gutenberg editors featured image modal onClick of a button inside my custom metabox.

Is there a function that I can use in order to make the featured image modal popup onClick of a button?

Basically, I want to replicate the functionality of the onClick of “Set featured image”.

So the Featured Image Modal pops up.

Thanks for your help.

I am using the metabox.io plugin. I am looking for a way to open the new WordPress Gutenberg editors featured image modal onClick of a button inside my custom metabox.

Is there a function that I can use in order to make the featured image modal popup onClick of a button?

Basically, I want to replicate the functionality of the onClick of “Set featured image”.

So the Featured Image Modal pops up.

Thanks for your help.

• javascript
• block-editor

Share Improve this question asked Dec 18, 2018 at 16:39 Shawn HayesShawn Hayes 11144 bronze badges 6

• Do you have this working in the classic editor? If so, does that code not work as is in GB? – Tom J Nowell ♦ Commented Dec 18, 2018 at 17:00
• Yes, I had it working in the classic editor by calling: wp.media.featuredImage.frame().open(); That's not working in Gutenberg though. – Shawn Hayes Commented Dec 18, 2018 at 21:22
• I'm pretty sure the new block editor uses the same media library API, though it's a little weird that you're duplicating the featured image UI. Even if you manage to open that UI, you'd then need to update the editor to use the new selection for its internal data, and listen out for when the other featured image UI is used and update your own – Tom J Nowell ♦ Commented Dec 18, 2018 at 21:25
• In Gutenberg, wp.media.featuredImage.frame().open(); opens the featured image modal the same as it did in the classic editor. It just doesn't set it in the sidebar Featured Image metabox after you add the image. I know the featured image metabox is now a React component. Could that have something to do with it? – Shawn Hayes Commented Dec 18, 2018 at 21:39
• Also, I already have my image in my metabox updating in both Gutenberg and the Classic editor, that part is worked out. – Shawn Hayes Commented Dec 18, 2018 at 21:47

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

This was solved for me by Brandon Payton on Wordpress's Gutenberg support forum:

https://wordpress/support/topic/open-featured-image-modal-in-wordpress-gutenberg-onclick-of-a-button/

He was even awesome enough to create a gist:

https://gist.github/brandonpayton/2c30c6175702adb12a093cf258d754d2

You the man Brandon!!

I am using the metabox.io plugin. I am looking for a way to open the new WordPress Gutenberg editors featured image modal onClick of a button inside my custom metabox.

Is there a function that I can use in order to make the featured image modal popup onClick of a button?

Basically, I want to replicate the functionality of the onClick of “Set featured image”.

So the Featured Image Modal pops up.

Thanks for your help.

I am using the metabox.io plugin. I am looking for a way to open the new WordPress Gutenberg editors featured image modal onClick of a button inside my custom metabox.

Is there a function that I can use in order to make the featured image modal popup onClick of a button?

Basically, I want to replicate the functionality of the onClick of “Set featured image”.

So the Featured Image Modal pops up.

Thanks for your help.

• javascript
• block-editor

Share Improve this question asked Dec 18, 2018 at 16:39 Shawn HayesShawn Hayes 11144 bronze badges 6

• Do you have this working in the classic editor? If so, does that code not work as is in GB? – Tom J Nowell ♦ Commented Dec 18, 2018 at 17:00
• Yes, I had it working in the classic editor by calling: wp.media.featuredImage.frame().open(); That's not working in Gutenberg though. – Shawn Hayes Commented Dec 18, 2018 at 21:22
• I'm pretty sure the new block editor uses the same media library API, though it's a little weird that you're duplicating the featured image UI. Even if you manage to open that UI, you'd then need to update the editor to use the new selection for its internal data, and listen out for when the other featured image UI is used and update your own – Tom J Nowell ♦ Commented Dec 18, 2018 at 21:25
• In Gutenberg, wp.media.featuredImage.frame().open(); opens the featured image modal the same as it did in the classic editor. It just doesn't set it in the sidebar Featured Image metabox after you add the image. I know the featured image metabox is now a React component. Could that have something to do with it? – Shawn Hayes Commented Dec 18, 2018 at 21:39
• Also, I already have my image in my metabox updating in both Gutenberg and the Classic editor, that part is worked out. – Shawn Hayes Commented Dec 18, 2018 at 21:47

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

This was solved for me by Brandon Payton on Wordpress's Gutenberg support forum:

https://wordpress/support/topic/open-featured-image-modal-in-wordpress-gutenberg-onclick-of-a-button/

He was even awesome enough to create a gist:

https://gist.github/brandonpayton/2c30c6175702adb12a093cf258d754d2

You the man Brandon!!

本文标签： javascriptOpen Featured Image Modal in WordPress Gutenberg onClick of a button