La clase Dynamic_Content pertenece al plugin Blocko y permite cargar contenido dinámico mediante AJAX usando Gutenberg.
Este sistema permite cargar contenido dinámico usando:
- Post ID
- Template Parts Gutenberg
- Contextos personalizados
| Data Attribute | Función |
|---|---|
data-content-id | ID del post que será cargado dinámicamente |
data-content-type | Tipo de interfaz a mostrar: modal u offcanvas |
data-context | Contexto personalizado utilizado para identificar qué contenido renderizar |
También puedes utilizar el bloque de botón de Gutenberg, ya que soporta atributos data-* personalizados como data-content-id, data-content-type y data-context.
1. Botón Block Gutenberg frontend llamando a un template part
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"dataAttributes":[{"key":"content-type","value":"modal"},{"key":"context","value":"product-card"}]} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Abrir Card</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
2. Botón HTML frontend llamando a un ID Post
<button
data-content-id="15"
data-content-type="modal">
Abrir producto
</button>3. Botón HTML frontend llamando a un template part
<button
data-content-type="modal"
data-context="product-card">
Quick View
</button>Crear Template Part Gutenberg
Ir a:
Appearance → Editor → Template Parts
Crear un template part llamado:
product-card
Renderizar Template Part dinámicamente
add_filter(
'dynamic_content/render',
function($html, $args) {
if ($args['context'] !== 'product-card') {
return $html;
}
global $post;
$GLOBALS['post'] = $post;
setup_postdata($post);
ob_start();
echo do_blocks('
<!-- wp:template-part {
"slug":"card"
} /-->
');
wp_reset_postdata();
return ob_get_clean();
},
20,
2
);Ejemplo usando múltiples template parts
add_filter(
'dynamic_content/render',
function($html, $args) {
global $post;
$GLOBALS['post'] = $post;
setup_postdata($post);
ob_start();
switch ($args['context']) {
case 'product-card':
echo do_blocks('
<!-- wp:template-part {
"slug":"product-card"
} /-->
');
break;
case 'team-member':
echo do_blocks('
<!-- wp:template-part {
"slug":"team-member",
"theme":"vanta-child"
} /-->
');
break;
}
wp_reset_postdata();
return ob_get_clean();
},
20,
2
);