jquery - Gutenberg Filtering Metaboxes by Post Format

admin管理员组

文章数量:1130349

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 selectponents-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?

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 selectponents-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?

• jquery
• javascript
• block-editor

Share Improve this question edited Jan 9, 2019 at 16:10 kath asked Jan 9, 2019 at 16:04 kathkath 63122 gold badges88 silver badges2121 bronze badges 2

• 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 Commented Jan 9, 2019 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. – kath Commented Jan 9, 2019 at 17:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

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 selectponents-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?

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 selectponents-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?

• jquery
• javascript
• block-editor

Share Improve this question edited Jan 9, 2019 at 16:10 kath asked Jan 9, 2019 at 16:04 kathkath 63122 gold badges88 silver badges2121 bronze badges 2

• 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 Commented Jan 9, 2019 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. – kath Commented Jan 9, 2019 at 17:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： jqueryGutenberg Filtering Metaboxes by Post Format