¿Cómo usar una API dentro de tu bloque?
Contenido del curso
MARCO ANTONIO ASPEITIA PEÑA
MARCO ANTONIO ASPEITIA PEÑA
MARCO ANTONIO ASPEITIA PEÑA
MARCO ANTONIO ASPEITIA PEÑA
Hugo Lopez Palacios
Hugo Lopez Palacios
Si quieren tener un bloque que renderice las imágenes destacadas por API consideren que la API no cuenta con un src de la imagen destacada, sólo cuenta con un featured_media que nos devuelve el ID de la imagen destacada que se agregó al post.
Para que puedan agregar a su bloque la imagen destacada les dejo el siguiente código:
/** * Register custom featured image field to WP REST API * * @link https://developer.wordpress.org/reference/functions/register_rest_field/ * @since 1.0.0 */ public function dme_posts_featured_media_api() { $field = 'featured_image_src'; register_rest_field( array( 'post' ), $field, array( 'get_callback' => 'dme_get_post_featured_image', 'update_callback' => null, 'schema' => null, ) ); } public function dme_get_post_featured_image( $object ) { if( $object['featured_media'] ){ //Get the image URL $field = wp_get_attachment_image_src( $object['featured_media'], 'large', false ); //returns the URL return $field[0]; } return false; }
Teniendo lo anterior ya podrán visualizar su nuevo campo en la respuesta de la API accediendo a ella con la propiedad featured_image_src:
Hola comunidad, les dejo mi aporte con lo que hicimos documentado y linkeado a la Doc oficial de Wordpress y REACT
Sigo el ejemplo pero tengo mis propios resultados con los estilos de mi maquetación
/** * The edit function describes the structure of your block in the context * of the editor. This represents what the editor will render when the * block is used. * * @link https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/ * @sice 1.0.0 */ import { useBlockProps } from '@wordpress/block-editor' import apiFetch from '@wordpress/api-fetch' import { useState, useEffect } from '@wordpress/element' import featuredImage from '../../img/service-1.jpg' const Edit = ( props ) => { const blockProps = useBlockProps() /** * useState Returns a stateful value, and a function to update it. * * During the initial render, the returned state (posts) is the same * as the value passed as the first argument ( [] ). (empty array) * * The setPosts function is used to update the state. * It accepts a new state value and enqueues a re-render of the component. * * @link https://reactjs.org/docs/hooks-reference.html#usestate * @since 1.0.0 */ const [ posts, setPosts ] = useState( [] ) /** * Utility to make WordPress REST API requests * @link https://developer.wordpress.org/block-editor/reference-guides/packages/packages-api-fetch/ */ const fetchPosts = async () => { let path = '/wp/v2/posts' const newPosts = await apiFetch( { path } ) setPosts( newPosts ) } /** * The function passed to useEffect may return a clean-up function * * @link https://reactjs.org/docs/hooks-reference.html#useeffect */ useEffect( () => { fetchPosts() }, [] ) return ( <> { posts.length > 0 && <div { ...blockProps }> <div className="container-xxl py-5"> <div className="container"> <div className="text-center mx-auto wow fadeInUp"> <h2 className="display-6 mb-5">Últimas noticias</h3> </div> <div className="row g-4 justify-content-center"> { posts.map( ( post ) => { console.log(post) return ( <div className="col-lg-4 col-md-6 wow fadeInUp" key={ post.id }> <div className="service-item"> <img className="img-fluid" src={featuredImage} alt=""/> <div className="d-flex align-items-center bg-light"> <div className="service-icon flex-shrink-0 bg-primary"> </div> <a className="h4 mx-4 mb-0" href={ post.link }>{ post.title.rendered }</a> </div> </div> </div> ) } ) } </div> </div> </div> </div> } </> ) } export default Edit
Este es un resultado que tuve
Tengo una duda profe, ¿cómo podemos limitar la consulta a la API?
Ejemplo, normalmente usamos WP_QUERY para hacer una consulta personalizada, pero aquí en el componente no encontré dentro de la documentación como elegir un cierto tipo de contenido, limitarlo a los primeros 6 posts de forma ASC o DESC.
https://developer.wordpress.org/block-editor/reference-guides/packages/packages-api-fetch/
Ya lo consulté y es pasando la variable en URL llamada per_page para limitar los posts y la variable order para ordenar de forma ascendente o descendente
const fetchPosts = async () => { let path = '/wp/v2/posts?per_page=6' const newPosts = await apiFetch( { path } ) setPosts( newPosts ) }
Les recomiendo consultar la paginación de la API de wordpress
Necesito agregar solo una nota relacionada debajo de un parrafo, en otro párrafo otra nota relacionada distinta y así sucesivamente, no una lista de varias. Tienen una idea de como darle paso a esta idea?
Nose, creo que no supe explicar mi pregunta; necesito modificar un plugin que me obtiene post y esta consulta la agrega a un bloque que solo pinta el titulo y su imagen destacada claro también su url, esto dentro del editor de bloques, me encargo de agregar los estilos, si obtengo un post hasta ahí todo bien, pero si me voy a otro párrafo dentro del editor de bloques y deseo agregar otro post, automáticamente me agrega el post que ya había elegido en otro post, y si agrego otro post, lo agrega abajo del que ya había elegido. Lo que se necesita es que si agrego un post en cierto párrafo solo debe mostrar ese que agregue, y si voy a otro párrafo y agrego otro post, solo debe verse ese que elegí en ese otro párrafo.
