1

In the classic editor, it was quite easy to show and hide metaboxes according to post format, using jQuery:

if( ! $("input#post-format-gallery").is(':checked') ){
        $( "#gallery-metabox" ).hide();
}
$( "input[name=post_format]#post-format-gallery" ).change( function() {
        $( "#gallery-metabox" ).fadeIn();
} );
$( "input[name=post_format]:not(#post-format-gallery)" ).change( function() {
        $( "#gallery-metabox" ).fadeOut();
} );

I tried to carry this solution into Gutenberg to keep my metaboxes working.The solution below works up until an edit is made to the actual block editor. As soon as text or a new block is added, the filter stops firing. The only thing that gets it to work is clicking on "Edit" on the Posts page and re-opening the Gutenberg editor.

$(".editor-post-format select.components-select-control__input").on('change', function() {
    var $current = $(this).val();

    if( $current == "gallery" ) {
        $( "#gallery-metabox" ).css('display', 'block');
    } else {
        $( "#gallery-metabox" ).css('display', 'none');
    }
});

Anyone know how to get this to work with Gutenberg?

  • The Gutenberg block library is a great place to look for inspiration. The gallery block has some particularly cool functionality, the edit function might help with what you're working on. – admcfajn Jan 9 '19 at 16:27
  • Yes, I'll probably be stepping away from metaboxes for the future, a lot of blocks are much more practical and interesting. However, I would like to keep this functionality up in order to support older projects. – charlenemasters Jan 9 '19 at 17:24
1

The problem you are facing is probably that the div (or a parent) gets re-rendered when a change is made in the DOM tree and the handler you assigned to it no longer works. This is because the element you see after the re-render is actually a new one which doesn't have the handler assigned.

A quick (although not much efficient) fix would be to assign the handler to a parent element that will not be rendered again because it is outside of the react flow. Then use a delegated event to target the control.

$("#wpbody").on("click", "input", function() {
    console.log("input clicked");
});

That said, as far as I understand, the best approach to handle meta data inside Gutenberg is to use the data package and create your own components.

|improve this answer|||||
  • You are absolutely right. The components-panel that contains all the widgets on the right, gets re-rendered each time a block is added to the editor. I thought using the .editor-post-format select.components-select-control__input selector would help, since it doesn't change despite being re-rendered, but this is what might be causing the problem. I'll look into your approach, thanks! – charlenemasters Jan 9 '19 at 17:27
  • @charlenemasters you are welcome, I think the closest you can get is the #editor div. – Alvaro Jan 9 '19 at 17:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.