Creación de conexión API REST con JavaScript

Conectar API

Código para conectar formulario con el API

public/assets/js/registro.js

window.addEventListener("DOMContentLoaded",function(){
    console.log("registro cargado") // Debugear si el registro fue cargado
    let $form = document.querySelector("#signin");

    $form.addEventListener("submit",function(e){
        e.preventDefault();

        let datos = new FormData($form);
        let datosParse = new URLSearchParams(datos); // Parsear datos
        
        // fetch configurado para devolver un JSON (mensaje al consultar)
        fetch("https://yardsales.plz/wp-json/plz/registro", // Ruta estática por lo pronto
        {
            method: "POST",
            body: datosParse
        }
        )
        .then(res=>res.json())
        .then(json=>{
            console.log(json)
        })
        .catch(err=>{ // Catch (error personalizado)
            console.log(`Hay un error: ${err}`)
        })

    })
    
})

Cargar JS en el formulario: public/shortcode/form-registro.php

<?php 

//Registrar script
function plz_script_registro(){
    wp_register_script("plz-registro",plugins_url("../assets/js/registro.js",__FILE__));
}

add_action("wp_enqueue_scripts", "plz_script_registro");

function plz_add_register_form(){
    //Poner script en cola
    wp_enqueue_script("plz-registro");
		//...

Para los que no les cargue el archivo .js
En el archivo form-registro.php, la función
wp_enqueue_script(“plz-registro”);
debe ser llamada dentro del hook “wp_enqueue_scripts”. De otra forma no cargará el js (al menos así fue en mi caso)

El código de el archivo public/shortcode/form-registro.php quedaría así

<?php 
function plz_script_registro(){
    wp_register_script("plz-registro",plugins_url("../assets/js/registro.js",__FILE__));
    wp_enqueue_script("plz-registro");
}

add_action("wp_enqueue_scripts", "plz_script_registro");


function plz_add_register_form(){
	plz_script_registro();

    $response = '
    <div class="signin">
        <div class="signin__container">
            <h1 class="sigin__titulo">Register</h1>
            <form class="signin__form" id="signin">
                <div class="signin__name name--campo">
                    <label for="Name">Name</label>
                    <input name="name" type="text" id="Name">
                </div>
                <div class="signin__email name--campo">
                    <label for="email">Email</label>
                    <input name="email" type="email" id="email">
                </div>
                <div class="signin__pass name--campo">
                    <label for="password">Password</label>
                    <input name="password" type="password" id="password">
                </div>
                <div class="signin__submit">
                    <input type="submit" value="Create">
                </div>
            </form>
        </div>
    </div>
    ';

    return $response;

}

add_shortcode("plz_registro","plz_add_register_form");```

Lo logre de esta manera ☺️

window.addEventListener("DOMContentLoaded", function () {
  let $form = document.querySelector("#ypw_form_login");

  $form.addEventListener("submit", async function (e) {
    e.preventDefault();

    // let datos = new FormData($form);
    // let datosParse = new URLSearchParams(datos); // Parsear datos

    let formData = new FormData($form);

    // fetch configurado para devolver un JSON (mensaje al consultar)

    try {
      res = await fetch(
        "url-my-api-wp-json", // Ruta estática por lo pronto
        {
          method: "POST",
          body: formData,
        }
      );

      console.log(await res.json());
    } catch (error) {
      console.log(`Hay un error: ${error}`);
    }
  });
});

Tipico, tomo el curso lo sigo paso a paso y no me corre. pero agarro el codigo completo del profesor y si corre.

Si les sale este error en la consola:
GET net::ERR_ABORTED 404 (Not Found)
Lo que hay que hacer es borrar la siguiente linea del footer del tema:
<script src="assets/js/script.js"></script>

Para la gente que no le funciono el console.log de registro cargado, fijense muy bien. Yo no continue el proyecto anterior y empecé uno desde cero, pero hay que tener un header.php y un footer.php (al estilo wordpress: con wp_head(), wp_footer, etc) para que esto funcione, puesto que si no lo tenemos no va a funcionar

Unas pequeñas acotaciones para entender un poco mas como funcionan estas cosas de API
URLSearchParams
Fetch
register_rest_route

Petición fetch()

Estoy creando un plugin para el admin de wordpress, hice un ligero cambio para que se cargara correctamente el script

add_action('admin_enqueue_scripts','my_script' );//admin_enqueue_scripts se usó en lugar de wp_enqueue_scripts

Según leí wp_enqueue_scripts carga el script en el frontend de la pagina y el admin_enqueue_scripts permite cargarlos al panel de administrador