Gutenberg: Post formats Select element cannot listen to JS

[Oxibug]

Describe the bug
Hi Guys,

The old post formats container was radio buttons in a div with a unique ID, Now you made it as Select element and its ID always changing with numbers (I don't know why you do that) but anyway I need to read the value of post format select on change and on page load to use in my plugin I used select path (.gutenberg .editor-post-format select) but I noticed that I cannot make a code working with your elements.

P.S. I test the same code with old WordPress editor and it's working good.

Thanks for your GREAT project.

To Reproduce
Steps to reproduce the behavior:

jQuery(".gutenberg .editor-post-format__content select").change(function() {

    var curValue = jQuery(".gutenberg .editor-post-format__content select option:selected").val();

    console.log( curValue );

});

Expected behavior
Nothing appear in console window

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 68

Additional context
Gutenberg v3.5.0

[designsimply]

Adding a screenshot for reference:

^{Seen at http://alittletestblog.com/wp-admin/post-new.php running WordPress 4.9.8 and Gutenberg 3.5.0 using Firefox 61.0.2 on macOS 10.13.6.}

[mtias]

You shouldn't be reading values from the DOM as it's not where the editor holds its source of truth. There's a selector interface for that:

wp.data.select( 'core/editor' ).getEditedPostAttribute( 'format' );
"standard"

[Oxibug]

Hi Pal @mtias

How to listen on user changes? I used wp.data.subscribe but it listen to any changes while writing the post content so the element I need to show in gallery format flicker while writing.

wp.data.subscribe(function () { console.log( wp.data.select( 'core/editor' ).getEditedPostAttribute( 'format' ); });

1. What is the best way to use such functions? outside document(ready) function or inside it??

Thanks for your help.

[ArtstudioWorks]

Hi @Oxibug,

Try the following js. It works for me.
jQuery(document).on('change', 'select[id*="post-format"]',function(){ alert(this.value); });

[simrandeep]

You shouldn't be reading values from the DOM as it's not where the editor holds its source of truth. There's a selector interface for that:

wp.data.select( 'core/editor' ).getEditedPostAttribute( 'format' );
"standard"

But it's not working. Can you suggest how can I get current post format value on page load or refresh?