$block param outputs differently in admin & frontend

• cubanpete

• December 28, 2019 at 11:46 pm

Marry christmas everyone,
I’m creating a custom block called “one-product”. The same javascript file (one-product.js) is loaded with each block:

'enqueue_script' => get_stylesheet_directory_uri() . '/template-parts/blocks/one-product/one-product.js',

This one-product.js file is loaded in the admin area and the front-end together with one-product.php. When I output $block in one-product.js the admin area returns

a.fn.init [document, context: document, selector: ""]
a.fn.init [div.acf-block-preview]

The same file outputs this in the console in the front end

a.fn.init [document, context: document, selector: ""]

Which means, that I dont get the div.acf-block-preview object. But I see the block code in the front-end.

My one-product.js is copied from the acf pro tutorail about creating blocks

(function($) {
  /**
   * initializeBlock
   *
   * Adds custom JavaScript to the block HTML.
   *
   * @date    15/4/19
   * @since   1.0.0
   *
   * @param   object $block The block jQuery element.
   * @param   object attributes The block attributes (only available when editing).
   * @return  void
   */
  var initializeBlock = function($block) {
    console.log($block);
    //MY CODE GOES HERE
  };

  // Initialize each block on page load (front end).
  $(document).ready(function() {
    initializeBlock($(this));
  });

  // Initialize dynamic block preview (editor).
  if (window.acf) {
    window.acf.addAction(
      "render_block_preview/type=one-product",
      initializeBlock
    );
  }
})(jQuery);

Any idea why the $block code does not contain the

a.fn.init [div.acf-block-preview]

It contains the values that I need.

• cubanpete

• December 30, 2019 at 9:38 am

I found a solution to the issue, which works.