feat(templates): add archive-header and post-grid components
- Add ArchiveHeader component (schema, renderer, formbuilder) - Add PostGrid component (schema, renderer, formbuilder) - Unify archive templates (home, archive, category, tag, author, date, search) - Add page visibility system with VisibilityDefaults - Register components in AdminDashboardRenderer - Fix boolean conversion in functions-addon.php - All 172 unit tests passed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
FrankZamora
572
Public/PostGrid/Infrastructure/Ui/PostGridRenderer.php
Normal file
572
Public/PostGrid/Infrastructure/Ui/PostGridRenderer.php
Normal file
@@ -0,0 +1,572 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace ROITheme\Public\PostGrid\Infrastructure\Ui;
|
||||
|
||||
use ROITheme\Shared\Domain\Contracts\RendererInterface;
|
||||
use ROITheme\Shared\Domain\Contracts\CSSGeneratorInterface;
|
||||
use ROITheme\Shared\Domain\Entities\Component;
|
||||
use ROITheme\Shared\Infrastructure\Services\PageVisibilityHelper;
|
||||
|
||||
/**
|
||||
* PostGridRenderer - Renderiza grid de posts del loop principal de WordPress
|
||||
*
|
||||
* RESPONSABILIDAD: Generar HTML y CSS del componente Post Grid
|
||||
*
|
||||
* DIFERENCIA CON RelatedPostRenderer:
|
||||
* - PostGrid usa global $wp_query (loop principal)
|
||||
* - RelatedPost crea su propio WP_Query
|
||||
*
|
||||
* CARACTERISTICAS:
|
||||
* - Grid responsive de cards con imagen, excerpt y meta
|
||||
* - Usa loop principal de WordPress (no crea queries propias)
|
||||
* - Paginacion nativa de WordPress
|
||||
* - Estilos 100% desde BD via CSSGenerator
|
||||
*
|
||||
* @package ROITheme\Public\PostGrid\Infrastructure\Ui
|
||||
*/
|
||||
final class PostGridRenderer implements RendererInterface
|
||||
{
|
||||
private const COMPONENT_NAME = 'post-grid';
|
||||
|
||||
public function __construct(
|
||||
private CSSGeneratorInterface $cssGenerator
|
||||
) {}
|
||||
|
||||
public function render(Component $component): string
|
||||
{
|
||||
$data = $component->getData();
|
||||
|
||||
if (!$this->isEnabled($data)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (!PageVisibilityHelper::shouldShow(self::COMPONENT_NAME)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$visibilityClass = $this->getVisibilityClass($data);
|
||||
if ($visibilityClass === null) {
|
||||
return '';
|
||||
}
|
||||
|
||||
global $wp_query;
|
||||
|
||||
// Si no hay posts, mostrar mensaje
|
||||
if (!have_posts()) {
|
||||
$noPostsMessage = $data['content']['no_posts_message'] ?? 'No se encontraron publicaciones';
|
||||
return $this->renderNoPostsMessage($noPostsMessage, $visibilityClass, $data);
|
||||
}
|
||||
|
||||
$css = $this->generateCSS($data);
|
||||
$html = $this->buildHTML($data, $visibilityClass);
|
||||
|
||||
return sprintf("<style>%s</style>\n%s", $css, $html);
|
||||
}
|
||||
|
||||
public function supports(string $componentType): bool
|
||||
{
|
||||
return $componentType === self::COMPONENT_NAME;
|
||||
}
|
||||
|
||||
private function isEnabled(array $data): bool
|
||||
{
|
||||
$value = $data['visibility']['is_enabled'] ?? false;
|
||||
return $value === true || $value === '1' || $value === 1;
|
||||
}
|
||||
|
||||
private function getVisibilityClass(array $data): ?string
|
||||
{
|
||||
$showDesktop = $data['visibility']['show_on_desktop'] ?? true;
|
||||
$showDesktop = $showDesktop === true || $showDesktop === '1' || $showDesktop === 1;
|
||||
$showMobile = $data['visibility']['show_on_mobile'] ?? true;
|
||||
$showMobile = $showMobile === true || $showMobile === '1' || $showMobile === 1;
|
||||
|
||||
if (!$showDesktop && !$showMobile) {
|
||||
return null;
|
||||
}
|
||||
if (!$showDesktop && $showMobile) {
|
||||
return 'd-lg-none';
|
||||
}
|
||||
if ($showDesktop && !$showMobile) {
|
||||
return 'd-none d-lg-block';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
private function renderNoPostsMessage(string $message, string $visibilityClass, array $data): string
|
||||
{
|
||||
$colors = $data['colors'] ?? [];
|
||||
$spacing = $data['spacing'] ?? [];
|
||||
|
||||
$bgColor = $colors['card_bg_color'] ?? '#ffffff';
|
||||
$textColor = $colors['excerpt_color'] ?? '#6b7280';
|
||||
$borderColor = $colors['card_border_color'] ?? '#e5e7eb';
|
||||
$padding = $spacing['card_padding'] ?? '1.25rem';
|
||||
|
||||
$css = $this->cssGenerator->generate('.post-grid-no-posts', [
|
||||
'background-color' => $bgColor,
|
||||
'color' => $textColor,
|
||||
'border' => "1px solid {$borderColor}",
|
||||
'border-radius' => '0.5rem',
|
||||
'padding' => '2rem',
|
||||
'text-align' => 'center',
|
||||
]);
|
||||
|
||||
$containerClass = 'post-grid-no-posts';
|
||||
if (!empty($visibilityClass)) {
|
||||
$containerClass .= ' ' . $visibilityClass;
|
||||
}
|
||||
|
||||
$html = sprintf(
|
||||
'<div class="%s"><p class="mb-0">%s</p></div>',
|
||||
esc_attr($containerClass),
|
||||
esc_html($message)
|
||||
);
|
||||
|
||||
return sprintf("<style>%s</style>\n%s", $css, $html);
|
||||
}
|
||||
|
||||
private function generateCSS(array $data): string
|
||||
{
|
||||
$colors = $data['colors'] ?? [];
|
||||
$spacing = $data['spacing'] ?? [];
|
||||
$effects = $data['visual_effects'] ?? [];
|
||||
$typography = $data['typography'] ?? [];
|
||||
$layout = $data['layout'] ?? [];
|
||||
|
||||
$cssRules = [];
|
||||
|
||||
// Colores
|
||||
$cardBgColor = $colors['card_bg_color'] ?? '#ffffff';
|
||||
$cardTitleColor = $colors['card_title_color'] ?? '#0E2337';
|
||||
$cardHoverBgColor = $colors['card_hover_bg_color'] ?? '#f9fafb';
|
||||
$cardBorderColor = $colors['card_border_color'] ?? '#e5e7eb';
|
||||
$cardHoverBorderColor = $colors['card_hover_border_color'] ?? '#FF8600';
|
||||
$excerptColor = $colors['excerpt_color'] ?? '#6b7280';
|
||||
$metaColor = $colors['meta_color'] ?? '#9ca3af';
|
||||
$categoryBgColor = $colors['category_bg_color'] ?? '#FFF5EB';
|
||||
$categoryTextColor = $colors['category_text_color'] ?? '#FF8600';
|
||||
$paginationColor = $colors['pagination_color'] ?? '#0E2337';
|
||||
$paginationActiveBg = $colors['pagination_active_bg'] ?? '#FF8600';
|
||||
$paginationActiveColor = $colors['pagination_active_color'] ?? '#ffffff';
|
||||
|
||||
// Spacing
|
||||
$gridGap = $spacing['grid_gap'] ?? '1.5rem';
|
||||
$cardPadding = $spacing['card_padding'] ?? '1.25rem';
|
||||
$sectionMarginTop = $spacing['section_margin_top'] ?? '0';
|
||||
$sectionMarginBottom = $spacing['section_margin_bottom'] ?? '2rem';
|
||||
|
||||
// Visual effects
|
||||
$cardBorderRadius = $effects['card_border_radius'] ?? '0.5rem';
|
||||
$cardShadow = $effects['card_shadow'] ?? '0 1px 3px rgba(0,0,0,0.1)';
|
||||
$cardHoverShadow = $effects['card_hover_shadow'] ?? '0 4px 12px rgba(0,0,0,0.15)';
|
||||
$cardTransition = $effects['card_transition'] ?? 'all 0.3s ease';
|
||||
$imageBorderRadius = $effects['image_border_radius'] ?? '0.375rem';
|
||||
|
||||
// Typography
|
||||
$cardTitleSize = $typography['card_title_size'] ?? '1.1rem';
|
||||
$cardTitleWeight = $typography['card_title_weight'] ?? '600';
|
||||
$excerptSize = $typography['excerpt_size'] ?? '0.9rem';
|
||||
$metaSize = $typography['meta_size'] ?? '0.8rem';
|
||||
|
||||
// Container
|
||||
$cssRules[] = $this->cssGenerator->generate('.post-grid', [
|
||||
'margin-top' => $sectionMarginTop,
|
||||
'margin-bottom' => $sectionMarginBottom,
|
||||
]);
|
||||
|
||||
// Row gap
|
||||
$cssRules[] = $this->cssGenerator->generate('.post-grid .row', [
|
||||
'gap' => $gridGap,
|
||||
'row-gap' => $gridGap,
|
||||
]);
|
||||
|
||||
// Card base
|
||||
$cssRules[] = ".post-grid .card {
|
||||
background: {$cardBgColor};
|
||||
border: 1px solid {$cardBorderColor};
|
||||
border-radius: {$cardBorderRadius};
|
||||
box-shadow: {$cardShadow};
|
||||
transition: {$cardTransition};
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}";
|
||||
|
||||
// Card hover
|
||||
$cssRules[] = ".post-grid .card:hover {
|
||||
background: {$cardHoverBgColor};
|
||||
border-color: {$cardHoverBorderColor};
|
||||
box-shadow: {$cardHoverShadow};
|
||||
transform: translateY(-2px);
|
||||
}";
|
||||
|
||||
// Card body
|
||||
$cssRules[] = $this->cssGenerator->generate('.post-grid .card-body', [
|
||||
'padding' => $cardPadding,
|
||||
]);
|
||||
|
||||
// Card image
|
||||
$cssRules[] = ".post-grid .card-img-top {
|
||||
border-radius: {$imageBorderRadius} {$imageBorderRadius} 0 0;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}";
|
||||
|
||||
// Card title
|
||||
$cssRules[] = ".post-grid .card-title {
|
||||
color: {$cardTitleColor};
|
||||
font-size: {$cardTitleSize};
|
||||
font-weight: {$cardTitleWeight};
|
||||
line-height: 1.4;
|
||||
margin-bottom: 0.75rem;
|
||||
}";
|
||||
|
||||
// Card title hover
|
||||
$cssRules[] = ".post-grid a:hover .card-title {
|
||||
color: {$cardHoverBorderColor};
|
||||
}";
|
||||
|
||||
// Excerpt
|
||||
$cssRules[] = ".post-grid .card-text {
|
||||
color: {$excerptColor};
|
||||
font-size: {$excerptSize};
|
||||
line-height: 1.6;
|
||||
}";
|
||||
|
||||
// Meta
|
||||
$cssRules[] = ".post-grid .post-meta {
|
||||
color: {$metaColor};
|
||||
font-size: {$metaSize};
|
||||
}";
|
||||
|
||||
// Categories
|
||||
$cssRules[] = ".post-grid .post-category {
|
||||
background: {$categoryBgColor};
|
||||
color: {$categoryTextColor};
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}";
|
||||
|
||||
$cssRules[] = ".post-grid .post-category:hover {
|
||||
background: {$categoryTextColor};
|
||||
color: #ffffff;
|
||||
}";
|
||||
|
||||
// Pagination
|
||||
$cssRules[] = ".post-grid .pagination {
|
||||
margin-top: 2rem;
|
||||
}";
|
||||
|
||||
$cssRules[] = ".post-grid .page-link {
|
||||
color: {$paginationColor};
|
||||
border: 1px solid {$cardBorderColor};
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0 0.25rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}";
|
||||
|
||||
$cssRules[] = ".post-grid .page-link:hover {
|
||||
background-color: rgba(255, 133, 0, 0.1);
|
||||
border-color: {$paginationActiveBg};
|
||||
color: {$paginationActiveBg};
|
||||
}";
|
||||
|
||||
$cssRules[] = ".post-grid .page-item.active .page-link,
|
||||
.post-grid .nav-links .current {
|
||||
background-color: {$paginationActiveBg};
|
||||
border-color: {$paginationActiveBg};
|
||||
color: {$paginationActiveColor};
|
||||
}";
|
||||
|
||||
// WordPress pagination classes
|
||||
$cssRules[] = ".post-grid .nav-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
}";
|
||||
|
||||
$cssRules[] = ".post-grid .nav-links a,
|
||||
.post-grid .nav-links span {
|
||||
color: {$paginationColor};
|
||||
border: 1px solid {$cardBorderColor};
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}";
|
||||
|
||||
$cssRules[] = ".post-grid .nav-links a:hover {
|
||||
background-color: rgba(255, 133, 0, 0.1);
|
||||
border-color: {$paginationActiveBg};
|
||||
color: {$paginationActiveBg};
|
||||
}";
|
||||
|
||||
// Layout responsive columns
|
||||
$colsDesktop = $layout['columns_desktop'] ?? '3';
|
||||
$colsTablet = $layout['columns_tablet'] ?? '2';
|
||||
$colsMobile = $layout['columns_mobile'] ?? '1';
|
||||
|
||||
// Mobile
|
||||
$mobileWidth = $this->getColumnWidth($colsMobile);
|
||||
$cssRules[] = "@media (max-width: 575.98px) {
|
||||
.post-grid .post-card-col {
|
||||
flex: 0 0 {$mobileWidth};
|
||||
max-width: {$mobileWidth};
|
||||
}
|
||||
}";
|
||||
|
||||
// Tablet
|
||||
$tabletWidth = $this->getColumnWidth($colsTablet);
|
||||
$cssRules[] = "@media (min-width: 576px) and (max-width: 991.98px) {
|
||||
.post-grid .post-card-col {
|
||||
flex: 0 0 {$tabletWidth};
|
||||
max-width: {$tabletWidth};
|
||||
}
|
||||
}";
|
||||
|
||||
// Desktop
|
||||
$desktopWidth = $this->getColumnWidth($colsDesktop);
|
||||
$cssRules[] = "@media (min-width: 992px) {
|
||||
.post-grid .post-card-col {
|
||||
flex: 0 0 {$desktopWidth};
|
||||
max-width: {$desktopWidth};
|
||||
}
|
||||
}";
|
||||
|
||||
return implode("\n", $cssRules);
|
||||
}
|
||||
|
||||
private function getColumnWidth(string $cols): string
|
||||
{
|
||||
$colCount = (int)$cols;
|
||||
if ($colCount <= 0) {
|
||||
$colCount = 1;
|
||||
}
|
||||
$percentage = 100 / $colCount;
|
||||
return sprintf('%.4f%%', $percentage);
|
||||
}
|
||||
|
||||
private function buildHTML(array $data, string $visibilityClass): string
|
||||
{
|
||||
$content = $data['content'] ?? [];
|
||||
$typography = $data['typography'] ?? [];
|
||||
$media = $data['media'] ?? [];
|
||||
$layout = $data['layout'] ?? [];
|
||||
|
||||
$showThumbnail = $this->toBool($content['show_thumbnail'] ?? true);
|
||||
$showExcerpt = $this->toBool($content['show_excerpt'] ?? true);
|
||||
$showMeta = $this->toBool($content['show_meta'] ?? true);
|
||||
$showCategories = $this->toBool($content['show_categories'] ?? true);
|
||||
$excerptLength = (int)($content['excerpt_length'] ?? 20);
|
||||
$readMoreText = $content['read_more_text'] ?? 'Leer mas';
|
||||
$headingLevel = $typography['heading_level'] ?? 'h3';
|
||||
$fallbackImage = $media['fallback_image'] ?? '';
|
||||
$fallbackImageAlt = $media['fallback_image_alt'] ?? 'Imagen por defecto';
|
||||
$imagePosition = $layout['image_position'] ?? 'top';
|
||||
|
||||
$containerClass = 'post-grid';
|
||||
if (!empty($visibilityClass)) {
|
||||
$containerClass .= ' ' . $visibilityClass;
|
||||
}
|
||||
|
||||
$html = sprintf('<div class="%s">', esc_attr($containerClass));
|
||||
$html .= '<div class="row">';
|
||||
|
||||
while (have_posts()) {
|
||||
the_post();
|
||||
$html .= $this->buildCardHTML(
|
||||
$showThumbnail,
|
||||
$showExcerpt,
|
||||
$showMeta,
|
||||
$showCategories,
|
||||
$excerptLength,
|
||||
$readMoreText,
|
||||
$headingLevel,
|
||||
$fallbackImage,
|
||||
$fallbackImageAlt,
|
||||
$imagePosition
|
||||
);
|
||||
}
|
||||
|
||||
$html .= '</div>';
|
||||
|
||||
// Paginacion nativa de WordPress
|
||||
$html .= '<div class="pagination-wrapper">';
|
||||
$html .= $this->buildPaginationHTML();
|
||||
$html .= '</div>';
|
||||
|
||||
$html .= '</div>';
|
||||
|
||||
wp_reset_postdata();
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
private function toBool(mixed $value): bool
|
||||
{
|
||||
return $value === true || $value === '1' || $value === 1;
|
||||
}
|
||||
|
||||
private function buildCardHTML(
|
||||
bool $showThumbnail,
|
||||
bool $showExcerpt,
|
||||
bool $showMeta,
|
||||
bool $showCategories,
|
||||
int $excerptLength,
|
||||
string $readMoreText,
|
||||
string $headingLevel,
|
||||
string $fallbackImage,
|
||||
string $fallbackImageAlt,
|
||||
string $imagePosition
|
||||
): string {
|
||||
$permalink = get_permalink();
|
||||
$title = get_the_title();
|
||||
|
||||
$html = '<div class="post-card-col">';
|
||||
$html .= sprintf(
|
||||
'<a href="%s" class="text-decoration-none">',
|
||||
esc_url($permalink)
|
||||
);
|
||||
|
||||
$cardClass = 'card h-100';
|
||||
if ($imagePosition === 'left') {
|
||||
$cardClass .= ' flex-row';
|
||||
}
|
||||
|
||||
$html .= sprintf('<div class="%s">', esc_attr($cardClass));
|
||||
|
||||
// Imagen
|
||||
if ($showThumbnail && $imagePosition !== 'none') {
|
||||
$html .= $this->buildImageHTML($fallbackImage, $fallbackImageAlt, $imagePosition);
|
||||
}
|
||||
|
||||
$html .= '<div class="card-body">';
|
||||
|
||||
// Categorias
|
||||
if ($showCategories) {
|
||||
$html .= $this->buildCategoriesHTML();
|
||||
}
|
||||
|
||||
// Titulo
|
||||
$html .= sprintf(
|
||||
'<%s class="card-title">%s</%s>',
|
||||
esc_attr($headingLevel),
|
||||
esc_html($title),
|
||||
esc_attr($headingLevel)
|
||||
);
|
||||
|
||||
// Meta
|
||||
if ($showMeta) {
|
||||
$html .= $this->buildMetaHTML();
|
||||
}
|
||||
|
||||
// Excerpt
|
||||
if ($showExcerpt) {
|
||||
$html .= $this->buildExcerptHTML($excerptLength);
|
||||
}
|
||||
|
||||
$html .= '</div>'; // card-body
|
||||
$html .= '</div>'; // card
|
||||
$html .= '</a>';
|
||||
$html .= '</div>'; // col
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
private function buildImageHTML(string $fallbackImage, string $fallbackImageAlt, string $imagePosition): string
|
||||
{
|
||||
if (has_post_thumbnail()) {
|
||||
$imageClass = $imagePosition === 'left' ? 'card-img-left' : 'card-img-top';
|
||||
return get_the_post_thumbnail(
|
||||
null,
|
||||
'medium_large',
|
||||
['class' => $imageClass, 'loading' => 'lazy']
|
||||
);
|
||||
}
|
||||
|
||||
if (!empty($fallbackImage)) {
|
||||
$imageClass = $imagePosition === 'left' ? 'card-img-left' : 'card-img-top';
|
||||
return sprintf(
|
||||
'<img src="%s" alt="%s" class="%s" loading="lazy">',
|
||||
esc_url($fallbackImage),
|
||||
esc_attr($fallbackImageAlt),
|
||||
esc_attr($imageClass)
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
private function buildCategoriesHTML(): string
|
||||
{
|
||||
$categories = get_the_category();
|
||||
if (empty($categories)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$html = '<div class="post-categories mb-2">';
|
||||
foreach (array_slice($categories, 0, 2) as $category) {
|
||||
$html .= sprintf(
|
||||
'<span class="post-category">%s</span>',
|
||||
esc_html($category->name)
|
||||
);
|
||||
}
|
||||
$html .= '</div>';
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
private function buildMetaHTML(): string
|
||||
{
|
||||
$date = get_the_date();
|
||||
$author = get_the_author();
|
||||
|
||||
return sprintf(
|
||||
'<div class="post-meta mb-2"><small>%s | %s</small></div>',
|
||||
esc_html($date),
|
||||
esc_html($author)
|
||||
);
|
||||
}
|
||||
|
||||
private function buildExcerptHTML(int $length): string
|
||||
{
|
||||
$excerpt = get_the_excerpt();
|
||||
|
||||
if (empty($excerpt)) {
|
||||
$excerpt = wp_trim_words(get_the_content(), $length, '...');
|
||||
} else {
|
||||
$excerpt = wp_trim_words($excerpt, $length, '...');
|
||||
}
|
||||
|
||||
return sprintf(
|
||||
'<p class="card-text">%s</p>',
|
||||
esc_html($excerpt)
|
||||
);
|
||||
}
|
||||
|
||||
private function buildPaginationHTML(): string
|
||||
{
|
||||
ob_start();
|
||||
|
||||
the_posts_pagination([
|
||||
'mid_size' => 2,
|
||||
'prev_text' => __('« Anterior', 'roi-theme'),
|
||||
'next_text' => __('Siguiente »', 'roi-theme'),
|
||||
'screen_reader_text' => __('Navegacion de publicaciones', 'roi-theme'),
|
||||
]);
|
||||
|
||||
return ob_get_clean();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user