Open Featured Image Modal in WordPress Gutenberg onClick of a button

  • Resolved Shawn Hayes

    (@sharewebdesign)


    5 years, 11 months ago

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

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Daniel Richards

    (@talldanwp)

    Hi @sharewebdesign,

    For this, you could use the code in Gutenberg as a guide:
    https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/post-featured-image/index.js#L92-L102

    It’s implemented in Gutenberg by wrapping the Button component in a MediaUpload component. MediaUpload provides the Button component (defined in the render prop) with an open function that when called triggers the opening of the modal. MediaUpload also has an onSelect prop, which accepts a callback triggered when the media is selected in the modal.

    Hi @sharewebdesign and @talldanwp, I played with this earlier today and wasn’t satisfied with what I was able to do using the MediaUpload component. I wanted something that would reflect the current featured image in the dialog, and to do that in a meta box, it seemed necessary to wrap MediaUpload as a component connected to the core/editor wp.data store. The number of things this solution needed to duplicate Gutenberg behavior began to feel too high.

    Eventually, I settled on a hack where the meta box renders a hidden PostFeaturedImage component (the same that is used for the sidebar’s set-featured-image UI) and relays button clicks to PostFeaturedImage buttons. It’s definitely a hack, but it works, is simpler to implement, and uses the actual dialog rather than one created to be substantially similar. A big downside is that it tightly couples us to the current implementation of the Featured Image UI.

    Here’s a gist with a tested proof of concept:
    https://gist.github.com/brandonpayton/2c30c6175702adb12a093cf258d754d2

    Thread Starter Shawn Hayes

    (@sharewebdesign)

    Hi @talldanwp and @bpayton,

    Thank you both for the help. Very much appreciated!!

    @bpayton

    This is exactly what I was looking for. One thousand thanks for the gist.

    You === awesome. Me === grateful.

    I hope you both have a wonderful New Year!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Open Featured Image Modal in WordPress Gutenberg onClick of a button’ is closed to new replies.