¿Cómo usar una API dentro de tu bloque?

Clase 12 de 15 • Curso de Creación de Bloques en Gutenberg para WordPress

Comentarios

MARCO ANTONIO ASPEITIA PEÑA

student•

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:

MARCO ANTONIO ASPEITIA PEÑA

student•

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

MARCO ANTONIO ASPEITIA PEÑA

student•

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/

MARCO ANTONIO ASPEITIA PEÑA

student•

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

Hugo Lopez Palacios

student•

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?

Hugo Lopez Palacios

student•

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.

/**
	 * 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;
	}

/**
 * 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

¿Cómo usar una API dentro de tu bloque?

Introducción y preparación del entorno de desarrollo

¿Qué necesitas para aprender Gutenberg?

¿Qué es y cómo funciona Gutenberg?

¿Cuál es el mejor entorno para desarrollar bloques?

Bloques estáticos y opciones de bloques

Aprende a registrar tu primer bloque

Crea la vista de tu bloque para el editor

¿Cómo agregar opciones a tu bloque?

Crea la vista de tu bloque para el frontend

Agrega opciones a la barra de herramientas de tu bloque

Agrega diferentes estilos a tu bloque

Bloques Dinámicos

¿Qué son y cómo se utilizan los bloques dinámicos?

Aprende a registrar tu bloque de una forma más simple

¿Cómo usar una API dentro de tu bloque?

Agrega opciones a tu bloque dinámico

Crea la vista de tu bloque dinámico para el frontend

Conclusiones

¿Por dónde puedes seguir tu ruta de WordPress?