JSX onClick listener in custom static block plugin

  • Resolved fauf2522

    (@fauf2522)


    1 year, 3 months ago

    I’m creating a static block plugin where I need to define action when user clicks on button, however onClick JSX attriibute does not work for me.

    This is my code in save.js that should be in preview part – not in editor: 

    export default function save({attributes}) {
	const blockProps = useBlockProps.save();

	const onBlockClick = () => {
		document.getElementsByClassName(blockClass)[0].classList.add("blue");
		console.log("clicked");
	};
	return (
		<div { ...blockProps } className={"exe-more-info-button "+attributes.className} onClick={onBlockClick}>
			<span className="wp-block-button__link wp-element-button">
				<RichText.Content
					tagName="p"
					value={ attributes.content }
				/>
			</span>
		</div>
	);
}

    It should put another class to class list of specified element, and log something to console (for this specific debug reason), but it doesn’t.

    What I was able to find online is that the function that onClick refers to in jsx must be in const <name> = () => {} format, but it does not work with it too.

    The thing is that it behaves like there wasn’t any onClick handler – no console output, no error, nothing… Even in Dev Tools in browser there is no onclick in html in that particular div.

    What am I doing wrong, and how can I define onClick handler correctly?

    WP 6.2.2
    PHP 8.2.4

    Thanks in advance.

    • This topic was modified 1 year, 3 months ago by fauf2522.
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @fauf2522,

    The save function is intended to be a pure function that returns an HTML string to be saved into the post_content. JavaScript in save function won’t be executed on the frontend.

    So, instead of adding your onClick events inside the save function, you should use an external JS file, which is then enqueued. Below is an example of how you could achieve this:

    // Create a separate JavaScript file, for example 'frontend.js'
// frontend.js
document.addEventListener('DOMContentLoaded', (event) => {
    let buttons = document.querySelectorAll('.exe-more-info-button');
    buttons.forEach((button) => {
        button.addEventListener('click', () => {
            button.classList.add('blue');
            console.log('clicked');
        });
    });
});

    And then in your main plugin PHP file, you can enqueue this JavaScript file like so:

    // Enqueue the script
function myplugin_enqueue_script() {
    wp_enqueue_script( 'myplugin-frontend', plugin_dir_url( __FILE__ ) . 'frontend.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'myplugin_enqueue_script' );

    In this example, your frontend.js file contains an event listener that waits for the DOM to load and then adds the onClick event to all elements with the .exe-more-info-button class. The PHP snippet is used to enqueue this JS file to your WordPress site.

    Thread Starter fauf2522

    (@fauf2522)

    Thanks, this solved my issue

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘JSX onClick listener in custom static block plugin’ is closed to new replies.