Agrega opciones a tu bloque dinámico

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

MARCO ANTONIO ASPEITIA PEÑA

student•

Hola profe,

Le dejo un ejemplo de qué estuve realizando en mi desarrollo siguiendo el curso:

Agregué un campo en el Panel para cambiar la cantidad de posts para mostrar en la consulta, va todo bien cuando edito la categoría y la cantidad de post a consultar, pero, cuando actualizo el post tanto la categoría como los posts por página se me actualizan a sus valores por defecto.

¿A qué se debe esto o qué estoy haciendo mal?

Le dejo mi archivo por si quiere revisar mi código

Lucio Negrello

teacher•

Hola Antonio, cómo estás? No veo un problema en el edit.js. Creo que lo que puede estar generandote el problema es la definición de los atributos en el block.json. Hay uno de los atributos que tiene la propiedad value. Fijate si modificando eso, deja de reemplazarlos, porque el edit.js y el seteo de atributos no pareciera tener errores. Saludos!

MARCO ANTONIO ASPEITIA PEÑA

student•

Listo, ya quedó profe, por cierto, yo rendericé mi contenido con el WP_Query en el render callback.

// Database query to render in the frontend
	public function dme_news_render_callback( $block_attributes, $block_content ) {

		$block_classes = isset( $block_attributes['className'] ) ? $block_attributes[ 'className' ] . 'wp-block-dme-news' : 'wp-block-dme-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['tax_query'] = array(
                array(
                    'taxonomy'  => 'category',
                    'field'     => 'term_id',
                    'terms'     => $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 . '</h2>';
						$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;
	}

Pero tengo una duda, ¿Qué es más rápido en renderizado? ¿Usando la WP_Query o el método que usted realizó?

Jose Alfredo Cordoba Cadavid

student•

Existe algun metodo para obtener los attributos de un bloque que esta anidado directamente en un end Point. He trabajado creandolos, pero me enfrento al problema que si mueven o agregan un bloque algo al post que estoy llamando en la rest api la ruta se me pierde. Muchas gracias quedo atento

Lucio Negrello

teacher•

Hola José, cómo estás? No termino de comprender bien cuál sería el caso de uso. Me ayudarías a entenderlo para ver si podemos resolverlo? En principio los bloques guardan la info como comentarios HTML, o sea que parseando los comentarios se podría acceder (de hecho eso es lo que hace WP), pero no sé para qué querrías hacer eso, porque tendrías que crear un intérprete de los comentarios. Quedo atento. Saludos!

Juanito Ortega Guzmán

student•

Hola Lucio, disculpa cómo puedo dar soporte para que me muestre bien los símbolos especiales en los títulos de los post? Ahora se ve así:

Lucio Negrello

teacher•

Hola Juanito, cómo estás? Estás usando la propiedad title.rendered? Porque es raro que te lo cargue de esta forma. Te dejo un link donde explica cómo se puede crear o qué librería utilizar para hacer la conversión de símbolos a caracteres y viceversa. De todas formas, no debería hacerte falta. Otra posibilidad que se me ocurre es que revises si en la base de datos se está guardando como símbolo a como caracteres, para saber si la conversión se hace cuando se guarda o cuando se imprime, para tener más claro dónde intervenir. Si querés, subí tu código a un repo. Saludos!

Juanito Ortega Guzmán

student•

Gracias Lucio, aquí tengo mi código:

// Database query to render in the frontend
	public function dme_news_render_callback( $block_attributes, $block_content ) {

		$block_classes = isset( $block_attributes['className'] ) ? $block_attributes[ 'className' ] . 'wp-block-dme-news' : 'wp-block-dme-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['tax_query'] = array(
                array(
                    'taxonomy'  => 'category',
                    'field'     => 'term_id',
                    'terms'     => $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 . '</h2>';
						$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;
	}

Agrega opciones a tu bloque dinámico

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?