Skip to content

Instantly share code, notes, and snippets.

@elliotcondon
Created October 11, 2020 22:37
Show Gist options
  • Save elliotcondon/9f58d70babfd9f5ccac1fe18a7ce68d3 to your computer and use it in GitHub Desktop.
Save elliotcondon/9f58d70babfd9f5ccac1fe18a7ce68d3 to your computer and use it in GitHub Desktop.
ACF Blocks JS Test
<?php
add_action('acf/init', 'my_acf_blocks_init');
function my_acf_blocks_init() {
acf_register_block_type(array(
'name' => 'test-js',
'title' => __('Test JS'),
'description' => __('A block for testing JS.'),
'render_template' => 'template-parts/blocks/test-js/test-js.php',
'enqueue_script' => get_stylesheet_directory_uri() . '/template-parts/blocks/test-js/test-js.js',
));
}
}
(function($){
/**
* initializeBlock
*
* Adds custom JavaScript to the block HTML.
*
* @date 15/4/19
* @since 1.0.0
*
* @param object $block The block jQuery element.
* @return void
*/
var initializeBlock = function( $block, attributes ) {
$block.find('.test-div').css({
background: 'red'
}).text('Changed via JS');
}
// Initialize dynamic block preview (editor).
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=test-js', initializeBlock );
}
})(jQuery);
<div class="test-div">Test</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment