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

Curso de Creación de Bloques en Gutenberg para WordPress

Contenido del curso

Introducción y preparación del entorno de desarrollo

Bloques estáticos y opciones de bloques

Bloques Dinámicos

Conclusiones

15
¿Por dónde puedes seguir tu ruta de WordPress?
00:53 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0020:43

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

Curso de Creación de Bloques en Gutenberg para WordPress

Clase 14 de 15

Clase 14 / 15

Comentarios (7)7 comentarios

MARCO ANTONIO ASPEITIA PEÑA

Hace 4 años

Hola comunidad, les muestro mi resultado:

¿Cómo lo logré? Bueno... estuvo entretenido y espero explicarlo de la mejor manera posible:

Aregué 3 attributos al bloque dinámico en el archivo block.json que consulta los últmos posts

"attributes": {
        "title": {
            "type": "string",
            "selector": "h2"
        },
        "category": {
            "type": "integer"
        },
        "per_page": {
            "type": "integer",
            "default": 10
        }
    },

Hice la definición de los atributos en el archivo edit.js

const { attributes: {category, per_page, title}, setAttributes } = props

Agregué también algunos imports que iba a ocupar como el TexControl, el RichText y el ___ de @wordpress/i18n para traducciones

import { useBlockProps, RichText } from '@wordpress/block-editor'
import apiFetch from '@wordpress/api-fetch'
import { useState, useEffect } from '@wordpress/element'
import { InspectorControls } from '@wordpress/block-editor'
import { Panel, PanelBody, SelectControl, TextControl } from '@wordpress/components'
import { __ } from '@wordpress/i18n';

El fetch delos posts lo dejé a que consultara los primeros 10 contenidos por defecto pero con la chance de que pudiera actualizarse de forma dinámica para que el usuario pueda elegir otra cantidad a renderizar y si quisiera ver una categoría en particular.

const fetchPosts = async () => {
        let path = `/wp/v2/posts?per_page=${per_page}`
        if( category && category !=0 ) {
            path =  `${path}&categories=${category}`
        }
        const newPosts = await apiFetch( { path } )
        setPosts( newPosts )
    }

Respecto a las categorías yo quería tener una opción que pudiera filtrar por todas las categorías así como por categorías en particular que tuvieran relacionados algún post, por eso definí mi variable filterCategories con un let asignándole un objeto con valor 0 y label "Todas las categorías" y concatenando el primer arreglo con el que se obtiene del mapeo, esto da sentido a la condición que hice en la definición del fetchPosts.

const fetchCategories = async () => {
        const path = '/wp/v2/categories?hide_empty=true'
        const newCategories = await apiFetch( { path } )
        // Get the properties that we need to render and save in DDBB
        let filterCategories = [{label: 'All categories', value: 0}]
        filterCategories= filterCategories.concat(newCategories.map( ( currentCategory ) => {
            return {
                label: currentCategory.name,
                value: currentCategory.id
            }
        } ) )
        setCategories( filterCategories )
    }

Al useEffect que manda a llamar fetch posts le pasé como variable en el arreglo mi atributo per_page

useEffect( () => {
        fetchPosts()
    }, [category, per_page] )

En el panel de categoría la dejé igual que como el profe, pero agregué otro panel body para los Post por página

<PanelBody title={ __( 'Posts per page', 'dicom-mexico-extensions' ) } initialOpen={true}>
                        <TextControl                                
                            label={ __( 'Current post per page value', 'dicom-mexico-extensions' ) }
                            type='number'
                            value={ per_page }
                            onChange={ onChangePagePerPosts }
                            min={1}
                            help={ __( 'Choose the number of posts to render', 'dicom-mexico-extensions' ) }
                        />
                    </PanelBody>

También agregué un Richtext para cambiar el título de mi bloque

<RichText
                                tagName='h2'
                                className='display-6 mb-5'
                                placeholder='Agrega un título a esta sección'
                                value={ title }
                                onChange={ onChangeTitle }
                            />

Y listo, eso fue todo lo que hice en el edit.js

Respecto a las funciones que renderizar en contenido a cliente preferí utilizar el WP_Query pasándole a los argumentos los atributos que de mi bloque (son los que se agregaron en el block.json)

function dme_news_render_callback( $block_attributes, $block_content ) {

		$block_classes = isset( $block_attributes['className'] ) ? $block_attributes[ 'className' ] . 'wp-block-plz-news' : 'wp-block-plz-news';
		$block_title = isset( $block_attributes['title'] ) ? $block_attributes['title'] : 'Últimas noticias';

		$args = array(
			'posts_per_page' => $block_attributes['per_page']
		);

		if( isset( $block_attributes['category'] ) ) {
			$args['category'] = $block_attributes['category'];
		}

		$posts = new WP_Query( $args );

		$render = '';

		if( $posts->have_posts( ) ) {
			$render .= '<div class="' . esc_attr( $block_classes ) . '">';
				$render .= '<div class="container-xxl py-5">';
					$render .= '<div class="container">';
						$render .= '<div class="text-center mx-auto wow fadeInUp">';
							$render .= '<h2 class="display-6 mb-5">' . $block_title . '</h3>';
						$render .= '</div>';
						$render .= '<div class="row g-4 justify-content-center">';
							while( $posts->have_posts( ) ){
								$posts->the_post( );
								$render.= '<div class="col-lg-4 col-md-6 wow fadeInUp">';
									$render .= '<div class="service-item">';
										$render .= get_the_post_thumbnail( get_the_ID(), 'services-thumb' );
										$render .= '<div class="d-flex align-items-center bg-light">';
											$render .= '<div class="service-icon flex-shrink-0 bg-primary">';
											$render .= '</div>';
											$render .= '<a class="h4 mx-4 mb-0" href=' . get_the_permalink( get_the_ID() ) . '>';
											$render .= get_the_title( get_the_ID( ) );
											$render .= '</a>';
										$render .= '</div>';
									$render .= '</div>';
								$render .= '</div>';
							}
						$render .= '</div>';
					$render .= '</div>';
				$render .= '</div>';
			$render .= '</div>';
		}

		wp_reset_postdata( );
		return $render;
	}

Consulta mi código en el repo público que tengo para que lo consulten si se les dificulta ver el contenido por acá, ojo. use un boiler template de un plugin que usa Programación orientada a objetos, así que puede que esté ligeramente diferente a lo que tiene el profe en definición de archivos pero el resultado deriva del mismo procedimiento.

Ángel Alfredo Guzmán

Hace 4 años

Excelente!

Juanito Ortega Guzmán

Hace 5 años

Un detalle... los post desde el frontend tienen enlace de este tipo:

https://bloques.local/?p=59

Pero el mismo post tiene enlace en el backend respetando el slug:

https://bloques.local/general/nuevo-post/

Podemos corregir esto?... gracias.

Lucio Negrello

Profesor

Hace 5 años

Hola Juanito, cómo estás? No termino de comprender esta consulta. A qué te referís con que tienen ese enlace en el front? Al link? Si es así, se puede usar porque se genera la redirección automaticamente. En el caso de que quieras utilizar directamente el enlace friendly, podés usar la función get_the_permalink()y pasarle como parámetro el ID del post. Saludos!

Andrés Felipe Patiño Vallejo

Hace 5 años

Hola Juanito, es correcto. Es mejor usar url's amigables. Puedes hacerlo de la siguiente manera:

foreach( $news as $new ) {
$render .= '<li>';
	$render .= "<a href='" . get_permalink($new->ID) . "'>";
	$render .= "{$new->post_title}</a>";
	$render .= '</a>';
$render .= '</li>';
}

Aitor A

Hace 4 años

Hola! La razón de usar un bloque dinámico para las noticias, aparte de que es un contenido dinámico es porque el bloque renderiza el lenguaje de gutenberg en vez de HTML ¿cierto o no entendi nada? Gracias!

Lucio Negrello

Profesor

Hace 4 años

Hola Aitor, cómo estás? La razón es que si no es dinámico, la información quedaría guardada y no se actualizaría. Es decir, los bloques estáticos guardan toda la info y se vuelven a renderizar con el mismo. En cambio los dinámicos, al tomar la info de una API o de la base de datos, se puede actualizar sin acciones del usuario. El caso más claro, es que cuando se agreguen post o noticias, se puedan ver las útltmas publicadas y no una serie de noticias que se hayan guardado previamente. Esa sería la principal razón. Saludos!

MARCO ANTONIO ASPEITIA PEÑA

Hace 4 años

Hola profe, soy yo de nuevo.

Hice el curso ya hace un buen tiempo y me di cuenta que el bloque que desarrollé estaba correcto para mostrar la info en el front end pero cuando edito o actualizo el contenido del back (no necesariamente el bloque que desarrollé siguiendo este video) se me resetea la categoría previamente seleccionada.

Ejemplo, muestro las notifcias de mi categoría 1 el filtro va todo perfecto en el back y en el frontend se me listan de manera correcto, pero cuando vuelvo a editar la página mi bloque pareciera que se resetea y no guarda la información de la categoría que previamente seleccioné, le adjunto el repo de mi desarrollo, así como un video donde explico mi caso particular.

Video problema identificado

Espero que si esto se resuelve le pueda servir de apoyo a alguien más de la comunidad, saludos y bendiciones profe.

Lucio Negrello

Profesor

Hace 4 años

Hola Marco, cómo estás? Vos sabés que no logro identificar un error en la implementación del código, pero noté algo en el video: Cuando seleccionás la categoría la agrega como un string, pero en el block.json pusiste que es un integer. Puede ser que no se guarde por un error de tipos. Si podés probá eso y avisame si funciona. Saludos!

MARCO ANTONIO ASPEITIA PEÑA

Hace 4 años

Gracias profe, si, ya me quedó, no me percaté del tipo de dato que estaba devolviendo la categoría, es usted todo un crack.

Hugo Lopez Palacios

Hace 3 años

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.

Lucio Negrello

Profesor

Hace 3 años

Hola Hugo, cómo estás? No sé cuál es el plugin, pero salvo que tenga un selector de posts por ID de post, no va a terminar de funcionar. Calculo que debe estar haciendo un query de los posts en relación a la fecha de publicación y por eso te muestra el último, los últimos dos, etc. Los bloques no comparten un estado global entre sí, fuera del editor, por eso es que los datos necesarios se guardan como parámetros de cada bloque. Te recomiendo utilizar otro plugin, ya que al parecer no está pensado apra esta funcionalidad en concreto. O que desarrolles tu propio bloque, guardando como parámetro el ID del post y utilizandolo apra hacer el WP_Query. Saludos!

Jose Alfredo Cordoba Cadavid

Hace 4 años

Profe Lucio, un excelente curso y Gutemberg presenta muchas posibilidades para el desarrollor avanzado con wordpress.Excelente.

Tengo unas Consultas :

En el edit,js del bloque quiero traer el content entonces aplico; {post.content.rendered} me trae todo en contenido del post pero html no de una forma visual, ¿cómo podría corregir esto?
¿Cómo puedo que al traer los datos de la lista de post también pueda traer información de algún bloque en especifico que el post contenga? Ejemplo: Le agrego al post un bloque que tiene información de contacto, entonces deseo que en la lista de post aparezca titulo del post, **datos de contacto **e imagen.

Espero ser claro con la consulta Muchas gracias.

Lucio Negrello

Profesor

Hace 4 años

Hola José, cómo estás? El problema con el rendered es que React no permite por defecto el renderizado directo de HtML por una cuestión de seguridad. No es una buena práctica. Pero si de todas formas necesitás hacerlo, podés agregar la propiedad dangerouslySetInnerHTML.

De esta forma:

<div dangerouslySetInnerHTML={{__html: data}} />

Para el segundo caso, lo recomendable es utilizar metadata para manejar la info estructural de un post. Esto es porque la info de los bloques puede estar o no estar, dependiendo de qué cargue el usuario en cada caso. Si no usa ese bloque, no podrás solicitarlo. De todas formas, en el caso de querer realizar esto, lo que te recomiendo es crear un endpoint personalizado que devuelva solo la información necesario y toda la lógica la hagas en el servidor, de esta forma podrás llamarlo desde el admin y desde el back sin tener que realizar dos veces la lógica.

Saludos!

Juanito Ortega Guzmán

Hace 5 años

Estimado Lucio, lo que veo es que el bloque no tiene opción para que el widget muestre todos los post sin importar su categoría. Cómo podemos corregir esto?... algo así como mostrar en el Select un option que diga: Todas las categorías.

Lucio Negrello

Profesor

Hace 5 años

Hola Juanito, cómo estás? Si no seleccionás ninguna categoría, por defecto, carga todas las entradas (las primeras 10 porque es el valor por defecto del endpoint) sin importar la categoría. El filtro se activa si hay al menos una categoría seleccionada, sino no las limita. Saludos!

"attributes": {
        "title": {
            "type": "string",
            "selector": "h2"
        },
        "category": {
            "type": "integer"
        },
        "per_page": {
            "type": "integer",
            "default": 10
        }
    },

import { useBlockProps, RichText } from '@wordpress/block-editor'
import apiFetch from '@wordpress/api-fetch'
import { useState, useEffect } from '@wordpress/element'
import { InspectorControls } from '@wordpress/block-editor'
import { Panel, PanelBody, SelectControl, TextControl } from '@wordpress/components'
import { __ } from '@wordpress/i18n';

const fetchPosts = async () => {
        let path = `/wp/v2/posts?per_page=${per_page}`
        if( category && category !=0 ) {
            path =  `${path}&categories=${category}`
        }
        const newPosts = await apiFetch( { path } )
        setPosts( newPosts )
    }

const fetchCategories = async () => {
        const path = '/wp/v2/categories?hide_empty=true'
        const newCategories = await apiFetch( { path } )
        // Get the properties that we need to render and save in DDBB
        let filterCategories = [{label: 'All categories', value: 0}]
        filterCategories= filterCategories.concat(newCategories.map( ( currentCategory ) => {
            return {
                label: currentCategory.name,
                value: currentCategory.id
            }
        } ) )
        setCategories( filterCategories )
    }

<PanelBody title={ __( 'Posts per page', 'dicom-mexico-extensions' ) } initialOpen={true}>
                        <TextControl                                
                            label={ __( 'Current post per page value', 'dicom-mexico-extensions' ) }
                            type='number'
                            value={ per_page }
                            onChange={ onChangePagePerPosts }
                            min={1}
                            help={ __( 'Choose the number of posts to render', 'dicom-mexico-extensions' ) }
                        />
                    </PanelBody>

<RichText
                                tagName='h2'
                                className='display-6 mb-5'
                                placeholder='Agrega un título a esta sección'
                                value={ title }
                                onChange={ onChangeTitle }
                            />

function dme_news_render_callback( $block_attributes, $block_content ) {

		$block_classes = isset( $block_attributes['className'] ) ? $block_attributes[ 'className' ] . 'wp-block-plz-news' : 'wp-block-plz-news';
		$block_title = isset( $block_attributes['title'] ) ? $block_attributes['title'] : 'Últimas noticias';

		$args = array(
			'posts_per_page' => $block_attributes['per_page']
		);

		if( isset( $block_attributes['category'] ) ) {
			$args['category'] = $block_attributes['category'];
		}

		$posts = new WP_Query( $args );

		$render = '';

		if( $posts->have_posts( ) ) {
			$render .= '<div class="' . esc_attr( $block_classes ) . '">';
				$render .= '<div class="container-xxl py-5">';
					$render .= '<div class="container">';
						$render .= '<div class="text-center mx-auto wow fadeInUp">';
							$render .= '<h2 class="display-6 mb-5">' . $block_title . '</h3>';
						$render .= '</div>';
						$render .= '<div class="row g-4 justify-content-center">';
							while( $posts->have_posts( ) ){
								$posts->the_post( );
								$render.= '<div class="col-lg-4 col-md-6 wow fadeInUp">';
									$render .= '<div class="service-item">';
										$render .= get_the_post_thumbnail( get_the_ID(), 'services-thumb' );
										$render .= '<div class="d-flex align-items-center bg-light">';
											$render .= '<div class="service-icon flex-shrink-0 bg-primary">';
											$render .= '</div>';
											$render .= '<a class="h4 mx-4 mb-0" href=' . get_the_permalink( get_the_ID() ) . '>';
											$render .= get_the_title( get_the_ID( ) );
											$render .= '</a>';
										$render .= '</div>';
									$render .= '</div>';
								$render .= '</div>';
							}
						$render .= '</div>';
					$render .= '</div>';
				$render .= '</div>';
			$render .= '</div>';
		}

		wp_reset_postdata( );
		return $render;
	}

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?

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

Progreso del curso

Introducción y preparación del entorno de desarrollo

Bloques estáticos y opciones de bloques

Bloques Dinámicos

Conclusiones

Recursos

Recursos