{"id":233920,"date":"2023-02-26T18:25:00","date_gmt":"2023-02-26T15:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233920"},"modified":"2022-11-11T13:11:45","modified_gmt":"2022-11-11T10:11:45","slug":"cree-y-obtenga-puntos-finales-rest-personalizados-en-bloques-de-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/cree-y-obtenga-puntos-finales-rest-personalizados-en-bloques-de-gutenberg\/","title":{"rendered":"Cree y obtenga puntos finales REST personalizados en bloques de Gutenberg"},"content":{"rendered":"\n

En esta publicaci\u00f3n, intentar\u00e9 crear una descripci\u00f3n general de c\u00f3mo crear puntos finales de API REST personalizados y realizar solicitudes para ellos en un bloque de Gutenberg personalizado. Es decir, realizar solicitudes con fetch<\/code>m\u00e9todos de informaci\u00f3n no disponible en los almacenes de datos registrados de WordPress.<\/p>\n

Un recordatorio amistoso: la informaci\u00f3n m\u00e1s b\u00e1sica ya est\u00e1 disponible en los almacenes de datos de WordPress. Por ejemplo, las consultas b\u00e1sicas de publicaciones, p\u00e1ginas, tipos de publicaciones personalizadas, taxonom\u00edas, autores, medios y m\u00e1s est\u00e1n disponibles tal cual sin tener que crear sus propios puntos finales personalizados. Para acceder a estas tiendas, prefiere usar el m\u00f3dulo de datos b\u00e1sicos de WordPress (withSelect<\/code>y select()<\/code>). A continuaci\u00f3n hay una parte del tutorial que profundiza en c\u00f3mo hacerlo.<\/p>\n

API REST de WordPress<\/h2>\n

Si no lo sab\u00edas ya; WordPress REST API es una interfaz JSON para enviar y recibir datos de su sitio de WordPress. Se puede utilizar externa o internamente. Con el editor de Gutenberg y el cambio a Javascript, los usos de la API REST definitivamente han aumentado. La API REST de WordPress tiene un mont\u00f3n de puntos finales que podemos usar. Vea una referencia completa sobre todos los extremos de la API REST aqu\u00ed<\/a>. Encontrar\u00e1, por ejemplo, puntos finales para publicaciones y la mayor\u00eda de los dem\u00e1s contenidos internos, tanto para leer como para actualizar. Los desarrolladores de temas o complementos pueden registrar sus propios puntos finales personalizados.<\/p>\n

Su sitio de WordPress tiene una URL API REST ra\u00edz, por defecto ubicada en <your domain>\/wp-json<\/code>. Por ejemplo, un WordPress local con la URL http:\/\/localhost\/wordpress\/<\/code>puede acceder a la API REST en http:\/\/localhost\/wordpress\/wp-json<\/code>. A partir de ah\u00ed, necesitamos agregar puntos finales. Con referencia a la referencia anterior de puntos finales, podemos recuperar una lista de las \u00faltimas publicaciones en el punto final \/wp\/v2\/posts<\/code>. Eso significa que si accede a http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts<\/code>su navegador, obtendr\u00e1 una respuesta en formato JSON de las \u00faltimas publicaciones en su sitio de WordPress.<\/p>\n

Se requiere una nota sobre los espacios de nombres. Una URL de API REST comienza con un espacio de nombres (‘ wp\/v2<\/code>‘ es el espacio de nombres de WordPress como se ve en las URL de ejemplo anteriores). Los espacios de nombres son un concepto para evitar conflictos en el n\u00facleo de WordPress, los temas y los complementos que agregan puntos finales con el mismo nombre. Cree su propio espacio de nombres \u00fanico, generalmente una forma de slug de su tema o nombre de complemento. Despu\u00e9s del slug, una regla general es agregar el n\u00famero de versi\u00f3n, que normalmente comienza en v1. Como ejemplo, el slug de mi tema es ‘ awhitepixel<\/code>‘, por lo que si tuviera que crear puntos finales personalizados en mi tema, usar\u00eda el espacio de nombres ‘ awhitepixel\/v1<\/code>‘. Con este espacio de nombres podr\u00eda registrar un punto final ‘ posts<\/code>‘ y no causar\u00eda problemas a pesar de que es id\u00e9ntico al nombre del punto final de WordPress.<\/p>\n

Trabajar con la API REST en WordPress es un tema amplio con mucha buena informaci\u00f3n disponible. En esta publicaci\u00f3n, me estoy enfocando en la usabilidad en el editor Gutenberg y c\u00f3mo recuperarlos en Javascript.<\/p>\n

Lo que haremos y lo que necesitamos<\/h2>\n

La facilidad de uso para solicitar informaci\u00f3n personalizada tiene una amplia gama de casos de uso, por lo que normalmente necesitar\u00e1 personalizar los ejemplos de c\u00f3digo a continuaci\u00f3n para que se ajusten a sus necesidades. Los datos pueden ser una consulta posterior personalizada, una consulta SQL personalizada o algo completamente diferente.<\/p>\n

Cuando creamos un punto final personalizado, tenemos el control total de su retorno. Podemos realizar cualquier tipo de operaciones y consultas en WordPress\/PHP y pasar esto como JSON. Y en nuestro bloque de Gutenberg podremos recuperar este retorno y hacer lo que queramos con \u00e9l dentro de la edit<\/code>funci\u00f3n del bloque. Por lo general, usar\u00eda los datos para presentar al usuario final una opci\u00f3n o informaci\u00f3n dentro del editor de bloques, pero tambi\u00e9n puede almacenar informaci\u00f3n en su bloque para su uso posterior. Tambi\u00e9n puede crear sus propias tiendas personalizadas para estos datos, pero no explicar\u00e9 c\u00f3mo hacerlo.<\/p>\n

Supongo que ya est\u00e1 familiarizado con la creaci\u00f3n de bloques de Gutenberg personalizados, por lo que no lo analizar\u00e9 en detalle aqu\u00ed.<\/p>\n

Creaci\u00f3n de un punto final de API REST<\/h2>\n

El registro de un punto final de API REST personalizado se realiza en PHP. Agregar\u00eda este c\u00f3digo en su tema functions.php<\/code>o en un c\u00f3digo de complemento activo. Enganche una funci\u00f3n a la acci\u00f3n rest_api_init<\/code>y ejecute la funci\u00f3n [register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>para cada punto final que desee registrar.<\/p>\n

Proporcione su espacio de nombres como primer par\u00e1metro, su ruta de punto final como segundo y una serie de configuraciones como tercer par\u00e1metro para register_rest_route()<\/code>. El cuarto par\u00e1metro controla si desea anular o no una ruta existente; no es algo que veremos aqu\u00ed. En la matriz para el tercer par\u00e1metro, como m\u00ednimo, debe establecer la propiedad ‘ callback<\/code>‘ en una funci\u00f3n que sea responsable de devolver los datos del punto final. Establecer ‘ method<\/code>‘ tambi\u00e9n es com\u00fan, por ejemplo, configurar su punto final en ‘ GET<\/code>‘, ‘ POST<\/code>‘, ‘ PUT<\/code>‘, etc.<\/p>\n

Comencemos con el registro de un punto final simple;<\/p>\n

add_action('rest_api_init', function() {\n    register_rest_route('awhitepixel\/v1', '\/mydata', [\n        'method' => 'GET',\n        'callback' => 'awhitepixel_rest_route_mydata'\n    ]);\n});<\/code><\/pre>\n
El espacio de nombres de mi tema es ‘ awhitepixel\/v1<\/code>‘ y estoy registrando un punto final ‘ mydata<\/code>‘ dentro de este espacio de nombres. Esto significa que puedo acceder a mi API REST personalizada en http:\/\/localhost\/wordpress\/wp-json\/awhitepixel\/v1\/mydata<\/code>.<\/p>\n
Al registrar (o cambiar) las rutas de la API REST, deber\u00e1 vaciar sus enlaces permanentes<\/strong> para que funcione. Puede hacerlo visitando Configuraci\u00f3n > Enlaces permanentes y simplemente haga clic en Guardar.<\/p>\n
El c\u00f3digo anterior a\u00fan no funciona porque no he definido la funci\u00f3n establecida como devoluci\u00f3n de llamada: awhitepixel_rest_route_mydata<\/code>. La funci\u00f3n de devoluci\u00f3n de llamada recibe un par\u00e1metro; una matriz de datos con informaci\u00f3n y argumentos pasados \u200b\u200bdesde la solicitud. Finalmente, debe considerar cuidadosamente el retorno de su funci\u00f3n de devoluci\u00f3n de llamada.<\/p>\n
En primer lugar, siempre debe devolver algo desde la devoluci\u00f3n de llamada de su punto final. Cualquier devoluci\u00f3n se convertir\u00e1 autom\u00e1ticamente en JSON por WordPress. Esto significa que puede devolver pr\u00e1cticamente cualquier forma de datos en su funci\u00f3n; una cadena, un valor nulo, una matriz o una [WP_Error](https:\/\/developer.wordpress.org\/reference\/classes\/wp_error\/)<\/code>instancia. Tambi\u00e9n puede optar por devolver un [WP_REST_Response](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_response\/)<\/code>objeto para tener m\u00e1s control, por ejemplo, sobre el c\u00f3digo de estado o la informaci\u00f3n del encabezado. Recomiendo envolver el retorno en la funci\u00f3n [rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>para asegurar que su respuesta sea una respuesta REST v\u00e1lida.<\/p>\n
Definamos nuestra funci\u00f3n de devoluci\u00f3n de llamada y devolvamos una cadena simple como inicio;<\/p>\n
function awhitepixel_rest_route_mydata($data) {\n    $response = 'Hello there!';\n    return rest_ensure_response($response);\n}<\/code><\/pre>\n
Con el c\u00f3digo anterior (y los enlaces permanentes descargados), ahora puedo ir a la URL http:\/\/localhost\/wordpress\/wp-json\/awhitepixel\/v1\/mydata<\/code>.<\/p>\n
\"Cree<\/a><\/p>\n
A partir de aqu\u00ed, podemos agregar cualquier tipo de c\u00f3digo en nuestra funci\u00f3n de devoluci\u00f3n de llamada para generar los datos adecuados para devolver. Puede consultar el contenido de WordPress con, por ejemplo [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>, realizar consultas en la base de datos o solicitar datos externos. Esta parte depende de ti.<\/p>\n
Ahora, pasemos al lado opuesto; c\u00f3mo hacer las solicitudes.<\/p>\n
Hacer solicitudes de API REST en Javascript<\/h2>\n
La realizaci\u00f3n de una solicitud REST se realiza com\u00fanmente con [fetch](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)<\/code>Javascript. WordPress proporciona su propio contenedor fetch<\/code>que simplifica las solicitudes de la API REST de WordPress; [wp.apiFetch](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-api-fetch\/)<\/code>. Esto es lo que usar\u00e9 en mi bloque de Gutenberg personalizado. Tenga en cuenta que fetch<\/code>las solicitudes devuelven una "promesa", por lo que debemos encadenar una .then()<\/code>para manejar la devoluci\u00f3n de la solicitud real. El uso base es algo como esto;<\/p>\n
wp.apiFetch({\n    path: '<namespace and endpoint>',\n}).then(data => {\n    console.log('response from apifetch: ', data);\n});<\/code><\/pre>\n
apiFetch<\/code>nos permite proporcionar una path<\/code>propiedad en lugar de construir la URL completa. Todo lo que necesitamos proporcionar es el espacio de nombres y el punto final, y apiFetch<\/code>lo agregaremos a la URL ra\u00edz de la API REST de WordPress. Dentro de la .then()<\/code>funci\u00f3n tenemos acceso a los datos que ya est\u00e1n convertidos a JSON. Es aqu\u00ed donde har\u00edas algo con los datos. Por lo general, almacenar\u00eda los datos devueltos, por ejemplo, en el estado del componente.<\/p>\n
edit<\/code>A continuaci\u00f3n se muestra un ejemplo de un componente de bloque de Gutenberg personalizado. Est\u00e1 basado en clases para poder usarlo state<\/code>para almacenar los datos devueltos por la solicitud de la API REST. Esto tambi\u00e9n nos permite ejecutar la solicitud componentDidMount()<\/code>cuando se monta por primera vez (consulte la documentaci\u00f3n de React sobre m\u00e9todos de ciclo de vida<\/a> ). Todo esto proporciona un ejemplo simple para que entiendas el concepto b\u00e1sico; no como una receta para hacerlo exactamente as\u00ed. Podr\u00eda considerar usar ganchos React y componentes funcionales<\/a> o construir un componente de orden superior en<\/a> su lugar.<\/p>\n
const { Component } = wp.element;\nconst { Spinner } = wp.components;\n\u00a0\nclass BlockEdit extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            list: [],\n            loading: true\n        }\n    }\n\u00a0\n    componentDidMount() {\n        this.runApiFetch();\n    }\n\u00a0\n    runApiFetch() {\n        wp.apiFetch({\n            path: 'awhitepixel\/v1\/mydata',\n        }).then(data => {\n            this.setState({\n                list: data,\n                loading: false\n            });\n        });\n    }\n\u00a0\n    render() {\n        return(\n            <div>\n                {this.state.loading? (<Spinner \/>\n                ): (<p>Data is ready!<\/p>\n                )}\n            <\/div>\n        );\n\u00a0\n    }\n}\nexport default BlockEdit;<\/code><\/pre>\n
El ejemplo anterior es un componente basado en clases que se proporciona a la edit<\/code>funci\u00f3n del bloque en registerBlockType()<\/code>. Establece un objeto de estado de una matriz para contener los datos (esto depende de los datos que devuelva, obviamente) y un booleano de estado para saber cu\u00e1ndo ha regresado la solicitud as\u00edncrona. Una vez que el componente est\u00e1 montado (renderizado por primera vez), ejecuta la funci\u00f3n para realizar la apiFetch<\/code>solicitud. Establecemos la ruta al punto final que registramos en PHP arriba. El m\u00e9todo es GET de forma predeterminada, por lo que no es necesario especificarlo en apiFetch<\/code>. Y dentro .then()<\/code>de la funci\u00f3n, cuando la solicitud est\u00e1 lista, actualizamos el estado del componente con los datos devueltos.<\/p>\n
Obviamente, la funci\u00f3n de procesamiento de su bloque har\u00eda m\u00e1s con los datos devueltos. Es posible que desee proporcionar los datos al usuario de alguna manera presentando una lista para elegir. Todo depende de qu\u00e9 tipo de datos sean y para qu\u00e9 quieras usarlos.<\/p>\n
Pasar argumentos al punto final<\/h2>\n
En algunos casos, necesitamos pasar algunos argumentos al punto final. Los usos comunes son pasar una ID despu\u00e9s del punto final; por ejemplo http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts\/14<\/code>, devolver\u00eda el ID de publicaci\u00f3n 14.<\/p>\n
Esto es bastante simple y se hace agregando un patr\u00f3n de b\u00fasqueda de expresiones regulares al punto final al registrarlo. Se requiere cierto conocimiento de expresiones regulares para crear patrones complejos, pero a continuaci\u00f3n se muestra un ejemplo que coincide con un n\u00famero y le asigna el nombre ‘id’. Nombrar las coincidencias nos da los medios para acceder a la variable en nuestra funci\u00f3n de devoluci\u00f3n de llamada. D\u00e9jame mostrarte lo que quiero decir.<\/p>\n
Registremos una nueva ruta de punto final. Usamos el mismo punto final que usamos antes (‘ awhitepixel\/v1\/mydata<\/code>‘), pero para esta ruta agregamos una coincidencia de expresiones regulares para un n\u00famero al final.<\/p>\n
add_action('rest_api_init', function() {\n    register_rest_route('awhitepixel\/v1', '\/mydata', [\n        'method' => 'GET',\n        'callback' => 'awhitepixel_rest_route_mydata'\n    ]);\n\u00a0\n    register_rest_route('awhitepixel\/v1', '\/mydata\/(?P<id>[d]+)', [\n        'method' => 'GET',\n        'callback' => 'awhitepixel_rest_route_mydata'\n    ]);\n});<\/code><\/pre>\n
El patr\u00f3n de expresiones regulares (?P<id>[d]+)<\/code>parece cr\u00edptico, pero ser\u00e1 bastante claro con una comprensi\u00f3n b\u00e1sica de las expresiones regulares. La [d]+<\/code>parte coincide con cualquier n\u00famero (0-9) 1 o m\u00e1s veces. Las partes (?P<id><\/code>y )<\/code>son para hacer coincidir un grupo con nombre. En este caso, el nombre del grupo es id<\/code>, pero puede nombrar a su(s) grupo(s) como desee.<\/p>\n
Puede elegir dirigir este punto final a una funci\u00f3n de devoluci\u00f3n de llamada separada, pero he elegido usar la misma funci\u00f3n para manejar ambas \/mydata<\/code>solicitudes \/mydata\/<ID><\/code>. Esto significa que puedo en mi funci\u00f3n de devoluci\u00f3n de llamada hacer:<\/p>\n
function awhitepixel_rest_route_mydata($data) {\n    if ($data['id']) {\n        $response = 'Create return for ID: '. $data['id'];\n    } else {\n        $response = 'Create general return (no ID provided)';\n    }\n    return rest_ensure_response($response);\n}<\/code><\/pre>\n
Recuerde que el par\u00e1metro de la funci\u00f3n de devoluci\u00f3n de llamada contiene los argumentos devueltos. Debido a que nombr\u00e9 a mi grupo coincidente ‘ id<\/code>‘, el valor coincidente estar\u00e1 accesible en $data['id']<\/code>. Y, por \u00faltimo, como utilizo la misma funci\u00f3n para gestionar solicitudes con y sin ID, puedo cambiar f\u00e1cilmente entre dos devoluciones diferentes.<\/p>\n
Con esto (y los enlaces permanentes actualizados), obtendr\u00e9 estas respuestas para mis terminales personalizados:<\/p>\n
\"Cree<\/a>\"Cree<\/a><\/p>\n
Fuente de grabaci\u00f3n:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Una gu\u00eda sobre c\u00f3mo crear puntos finales personalizados de la API REST de WordPress y realizar solicitudes apiFetch para ellos en un bloque de Gutenberg personalizado.<\/p>\n","protected":false},"author":1,"featured_media":224922,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,810,831,935,935,914,1110,914,810,831,840,840,861,861],"tags":[1172],"class_list":["post-233920","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-complementos","category-guia-para-principiantes","category-gutenberg-2","category-otro","category-n-a","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233920"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233920\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224922"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}