Using jQuery with the Block editor?

  • bluedogranch

    (@bluedogranch)


    1 year, 7 months ago

    It’s possible to use jQuery in the admin area and with the Classic Editor. But what about with the Block Editor, which is built with React?

    I’m trying to set the time for each post to 8am when the Date/Time dialog is opened.

    I’m using this jQuery (and with a cookie to check if 8am has already been set, and that code is not shown for simplicity) to toggle the AM button when the Date/Time dialog is opened.

    jQuery(document).on( 'click', '.editor-post-schedule__dialog-toggle', function () {
    jQuery('.components-datetime__time-am-button').click();

    But jQuery doesn’t work with the hours and minutes fields:

    jQuery(document).on( 'click', '.editor-post-schedule__dialog-toggle', function () {
    jQuery('input[min="1"][max="12"].components-input-control__input').val('08').trigger("change");
    jQuery('input[min="0"][max="59"].components-input-control__input').val('00').trigger("change");
    });

    jQuery is not able to fully interact with React. Using jQuery(document).ready(function() doesn’t make a difference.

    How can I set the time to 8am on each post when the Date/Time dialog is opened? Is there a way to do this with jQuery and React?

    Or should it be done with only React?

    Or should I hook into a function with PHP?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Dilip Modhavadiya

    (@dilip2615)

    1 year, 7 months ago

    Hello @bluedogranch

    As per my suggestion, set the post time to 8 am when the Date/Time dialog opens in the block Editor, you should ideally use a JavaScript solution focu+sed on React, as jQuery can struggle with React-based interfaces. Try using WordPress’s wp.data to interact with the editor’s state, which works well in the React environment:

    const { select, dispatch } = wp.data;
    jQuery(document).on('click', '.editor-post-schedule__dialog-toggle', function () {
      dispatch('core/editor').editPost({
        date: select('core/editor').getEditedPostAttribute('date').replace(/T\d{2}:\d{2}/, 'T08:00')
      });
    });

    The above approach directly updates the post’s date to 8 am using WordPress data API, making it more compatible with the Block Editor.

    Moderator threadi

    (@threadi)

    1 year, 7 months ago

    I would recommend that you use the options provided by the block editor, see: https://developer.ww.wp.xz.cn/block-editor/getting-started/fundamentals/javascript-in-the-block-editor/ – you can use “vanilla javascript” or react.

    Theoretically you should also be able to integrate jQuery via the hook enqueue_block_editor_assets, but I’m not sure how this will affect the view itself. Try it out.

    Thread Starter bluedogranch

    (@bluedogranch)

    1 year, 7 months ago

    Hi @dilip2615 Thanks for the answer; that’s interesting the way jQuery can interact using wp.data, and it works.

    And yes, plain Javascript is probably the better way to go. But now I’m thinking that I should try PHP and an action hook to set the time on a new post to 8am, as I find issues with using cookies and detecting when post-new.php is in the URL with jQuery.

    Hi @threadi, thanks, and yes, I think I need to learn more Javascript and learn more how the Block Editor works.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Using jQuery with the Block editor?’ is closed to new replies.