Get data from PHP to JavaScript to set position of each post on front page

Question

I've created a custom post type called project for my Wordpress theme, which works fine. Each project has several custom fields, including a set of x and y values that indicate where the project should show on the front page (see the style section of the code below: I know it's not working but I'm showing what I want to achieve in pseudo code).

I could display the x value as <?php the_field('x'); ?> and <?php the_field('y'); ?>, as defined by the WordPress's Advanced Custom Field's documentation. However, how do I get the x and y value from PHP to the JavaScript, so I can use them to set the left and top value of the div that indicates where they should be on the front page?

Considering that there are many projects and I'm getting different sets of xs and ys in a loop, I'm thinking about writing all the x and y values into an external json file, and then load them back with JavaScript. Is this a feasible option, considering WordPress's structure? Or is there a better option to get these pairs of x and y values from PHP to JavaScript? I know AJAX is always an option, but I'm wondering if there is a simpler way, as I can almost get these exact value pairs in DOM already...

<?php  

    $args = array(
        "post_type" => "project"
    );

    $projects = new WP_Query($args);

    while($projects->have_posts()){
        $projects->the_post();
?>

    <a class="project" href="<?php the_permalink(); ?>" style="top:x'px'; left: y'px'">
        <p><?php the_field("title"); ?></p>
    </a>

<?php
    }
?>

Answer 1

You could output them as inline CSS custom properties instead of left/top, and then use those to set the position in either CSS or Javascript.

PHP:

<a class="project" href="<?php the_permalink(); ?>" style="—-x-position: <?php the_field('x'); ?>; —-y-position: <?php the_field('y'); ?>;'">
    <p><?php the_field("title"); ?></p>
</a>

CSS:

.project {
    top: var(—-x-position);
    left: var(—-y-position);

    /* or CSS grid: */
    grid-row-start: var(—-x-position);
    grid-column-start: var(—-y-position);
}

They’re also accessible in JS, if you need them:

var x_position = element.style.getPropertyValue("--x- position");

This will be much more manageable for responsive design since you won’t have to override inline styles with !important, but inputting such specific x/y values is generally a bad idea and you’re probably better off not intermingling presentation quite so directly with your data.

Answer 2

You can use wp_localize_script() function to pass value into js. For example

add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

public function my_custom_scripts() {
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', ['jquery'] );
    wp_localize_script( 'custom-script', 'myScript', [
        'var_a' => 'value_a',
        'var_b' => 'another value',
    ] );
}

And in your custom_script.js you can get the value like these

console.log(myScript.var_a) // will return `value_a`
console.log(myScript.var_b) // will return `another value`