JS: get current post format in Gutenberg edit screen to display/hide metafields

  • Resolved arhit

    (@arhit)


    6 years, 4 months ago

    Hi,

    I am trying to make some old jQuery code to work with Gutenberg and I am struggling with how to get the appropriate data when it becomes available.

    Basically I need to read the current post format and display/hide metaboxes based on the post format.

    Currently I enqueue admin.js file in backend. There is (jQuery) code which checks for the post format:

    jQuery(document).ready(function($) {
var active_format = $('input:radio[name=post_format]:checked').val();
/*... run the function to add display:none to all non-relevant metaboxes */
}

    Basically just checking radio button to find post format on document ready…
    Gutenberg uses select box now, but even if I adapt the js code to check the select value, the value is always undefined on .ready.

    I also know understand this isn’t probably the best route to go, as I should probably be looking at the data which I can get in console with:
    wp.data.select( 'core/editor' ).getEditedPostAttribute( 'format' );

    But I am facing the same issue here, i can’t get this data on page load.
    I could probably get this working with setTimeout(), but I’ll probably end up quitting my job out of shame if I use this in production… ??

    I am not using web-pack or anything for js compilation (it is an older project with lots of various jQuery code).

    TLDR; The questions that I am struggling with are:
    1. How do I get the various post settings on Gutenberg edit page screen into a javascript variable, so I can run a function or two?
    2. How do I listen to changes of “states” the right way and fire custom functions when needed?

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • spello

    (@spello)

    Try this:

    $(window).on('load', function() {

alert($('select[class="components-select-control__input"] option:selected').attr('value')); 

// or

alert($('select[id^="post-format-selector"] option:selected').attr('value')); 

});

    You can use wp.data.select( 'core/editor' ).getCurrentPostType(); to get the current post format. Check the doc here.

    Plugin Author Greg Zió?kowski

    (@gziolo)

    I wanted to echo what @amyriounis shared. It should work.

    @arhit
    Did you succeed? I’m struggling to do the same thing.

    @amyriounis , @gziolo
    Post type (post, page, etc.) is not the same as post format (image, video, audio, etc.).

    Listening to changes:

    
wp.data.subscribe( function () {
  var newFormat = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'format' );
  console.log(newFormat);
} );
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘JS: get current post format in Gutenberg edit screen to display/hide metafields’ is closed to new replies.