fix(theme): improve post-grid spacing, pagination and archive templates

- Fix flexbox gap issue causing unequal horizontal/vertical spacing
- Reset Bootstrap row/col margins to use only CSS gap property
- Replace WordPress pagination with Bootstrap-style pagination
- Add cta-post component to category.php and archive.php templates
- Fix spacing controls UI with separate horizontal/vertical gap fields
- Update FieldMapper with new gap_horizontal and gap_vertical attributes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Admin/PostGrid/Infrastructure/FieldMapping/PostGridFieldMapper.php

@@ -81,7 +81,8 @@ final class PostGridFieldMapper implements FieldMapperInterface
             'postGridPaginationActiveColor' => ['group' => 'colors', 'attribute' => 'pagination_active_color'],
 
             // Spacing
-            'postGridGridGap' => ['group' => 'spacing', 'attribute' => 'grid_gap'],
+            'postGridGapHorizontal' => ['group' => 'spacing', 'attribute' => 'gap_horizontal'],
+            'postGridGapVertical' => ['group' => 'spacing', 'attribute' => 'gap_vertical'],
             'postGridCardPadding' => ['group' => 'spacing', 'attribute' => 'card_padding'],
             'postGridSectionMarginTop' => ['group' => 'spacing', 'attribute' => 'section_margin_top'],
             'postGridSectionMarginBottom' => ['group' => 'spacing', 'attribute' => 'section_margin_bottom'],

Admin/PostGrid/Infrastructure/Ui/PostGridFormBuilder.php

@@ -207,11 +207,11 @@ final class PostGridFormBuilder
         // Columns desktop
         $colsDesktop = $this->renderer->getFieldValue($componentId, 'layout', 'columns_desktop', '3');
         $html .= '        <div class="mb-3">';
-        $html .= '            <label for="postGridColsDesktop" class="form-label small mb-1 fw-semibold">';
+        $html .= '            <label for="postGridColumnsDesktop" class="form-label small mb-1 fw-semibold">';
         $html .= '                <i class="bi bi-display me-1" style="color: #FF8600;"></i>';
         $html .= '                Columnas escritorio';
         $html .= '            </label>';
-        $html .= '            <select id="postGridColsDesktop" class="form-select form-select-sm">';
+        $html .= '            <select id="postGridColumnsDesktop" class="form-select form-select-sm">';
         $html .= '                <option value="2"' . ($colsDesktop === '2' ? ' selected' : '') . '>2 columnas</option>';
         $html .= '                <option value="3"' . ($colsDesktop === '3' ? ' selected' : '') . '>3 columnas</option>';
         $html .= '                <option value="4"' . ($colsDesktop === '4' ? ' selected' : '') . '>4 columnas</option>';
@@ -221,11 +221,11 @@ final class PostGridFormBuilder
         // Columns tablet
         $colsTablet = $this->renderer->getFieldValue($componentId, 'layout', 'columns_tablet', '2');
         $html .= '        <div class="mb-3">';
-        $html .= '            <label for="postGridColsTablet" class="form-label small mb-1 fw-semibold">';
+        $html .= '            <label for="postGridColumnsTablet" class="form-label small mb-1 fw-semibold">';
         $html .= '                <i class="bi bi-tablet me-1" style="color: #FF8600;"></i>';
         $html .= '                Columnas tablet';
         $html .= '            </label>';
-        $html .= '            <select id="postGridColsTablet" class="form-select form-select-sm">';
+        $html .= '            <select id="postGridColumnsTablet" class="form-select form-select-sm">';
         $html .= '                <option value="1"' . ($colsTablet === '1' ? ' selected' : '') . '>1 columna</option>';
         $html .= '                <option value="2"' . ($colsTablet === '2' ? ' selected' : '') . '>2 columnas</option>';
         $html .= '                <option value="3"' . ($colsTablet === '3' ? ' selected' : '') . '>3 columnas</option>';
@@ -235,11 +235,11 @@ final class PostGridFormBuilder
         // Columns mobile
         $colsMobile = $this->renderer->getFieldValue($componentId, 'layout', 'columns_mobile', '1');
         $html .= '        <div class="mb-3">';
-        $html .= '            <label for="postGridColsMobile" class="form-label small mb-1 fw-semibold">';
+        $html .= '            <label for="postGridColumnsMobile" class="form-label small mb-1 fw-semibold">';
         $html .= '                <i class="bi bi-phone me-1" style="color: #FF8600;"></i>';
         $html .= '                Columnas movil';
         $html .= '            </label>';
-        $html .= '            <select id="postGridColsMobile" class="form-select form-select-sm">';
+        $html .= '            <select id="postGridColumnsMobile" class="form-select form-select-sm">';
         $html .= '                <option value="1"' . ($colsMobile === '1' ? ' selected' : '') . '>1 columna</option>';
         $html .= '                <option value="2"' . ($colsMobile === '2' ? ' selected' : '') . '>2 columnas</option>';
         $html .= '            </select>';
@@ -452,38 +452,91 @@ final class PostGridFormBuilder
         $html .= '            Espaciado';
         $html .= '        </h5>';
 
+        // Separación entre cards
+        $html .= '        <p class="small text-muted mb-2">Separacion entre cards:</p>';
         $html .= '        <div class="row g-2 mb-3">';
 
-        $gridGap = $this->renderer->getFieldValue($componentId, 'spacing', 'grid_gap', '1.5rem');
+        // Gap horizontal (entre columnas)
+        $gapHorizontal = $this->renderer->getFieldValue($componentId, 'spacing', 'gap_horizontal', '24px');
         $html .= '            <div class="col-6">';
-        $html .= '                <label for="postGridGridGap" class="form-label small mb-1 fw-semibold">Espacio entre cards</label>';
+        $html .= '                <label for="postGridGapHorizontal" class="form-label small mb-1 fw-semibold">';
-        $html .= '                <input type="text" id="postGridGridGap" class="form-control form-control-sm" ';
+        $html .= '                    <i class="bi bi-arrows-expand me-1" style="color: #FF8600;"></i>Horizontal';
-        $html .= '                       value="' . esc_attr($gridGap) . '">';
+        $html .= '                </label>';
+        $html .= '                <select id="postGridGapHorizontal" class="form-select form-select-sm">';
+        $gapOptions = ['0px', '8px', '12px', '16px', '20px', '24px', '32px', '40px', '48px'];
+        foreach ($gapOptions as $opt) {
+            $selected = ($gapHorizontal === $opt) ? ' selected' : '';
+            $html .= '                    <option value="' . $opt . '"' . $selected . '>' . $opt . '</option>';
+        }
+        $html .= '                </select>';
         $html .= '            </div>';
 
-        $cardPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'card_padding', '1.25rem');
+        // Gap vertical (entre filas)
+        $gapVertical = $this->renderer->getFieldValue($componentId, 'spacing', 'gap_vertical', '24px');
         $html .= '            <div class="col-6">';
-        $html .= '                <label for="postGridCardPadding" class="form-label small mb-1 fw-semibold">Padding card</label>';
+        $html .= '                <label for="postGridGapVertical" class="form-label small mb-1 fw-semibold">';
-        $html .= '                <input type="text" id="postGridCardPadding" class="form-control form-control-sm" ';
+        $html .= '                    <i class="bi bi-arrows-collapse me-1" style="color: #FF8600;"></i>Vertical';
-        $html .= '                       value="' . esc_attr($cardPadding) . '">';
+        $html .= '                </label>';
+        $html .= '                <select id="postGridGapVertical" class="form-select form-select-sm">';
+        foreach ($gapOptions as $opt) {
+            $selected = ($gapVertical === $opt) ? ' selected' : '';
+            $html .= '                    <option value="' . $opt . '"' . $selected . '>' . $opt . '</option>';
+        }
+        $html .= '                </select>';
         $html .= '            </div>';
 
         $html .= '        </div>';
 
+        // Padding interno de cada card
+        $html .= '        <p class="small text-muted mb-2">Padding interno de card:</p>';
+        $html .= '        <div class="row g-2 mb-3">';
+
+        $cardPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'card_padding', '20px');
+        $html .= '            <div class="col-6">';
+        $html .= '                <label for="postGridCardPadding" class="form-label small mb-1 fw-semibold">';
+        $html .= '                    <i class="bi bi-box me-1" style="color: #FF8600;"></i>Padding';
+        $html .= '                </label>';
+        $html .= '                <select id="postGridCardPadding" class="form-select form-select-sm">';
+        $paddingOptions = ['0px', '8px', '12px', '16px', '20px', '24px', '32px'];
+        foreach ($paddingOptions as $opt) {
+            $selected = ($cardPadding === $opt) ? ' selected' : '';
+            $html .= '                    <option value="' . $opt . '"' . $selected . '>' . $opt . '</option>';
+        }
+        $html .= '                </select>';
+        $html .= '            </div>';
+        $html .= '            <div class="col-6"></div>';
+
+        $html .= '        </div>';
+
+        // Margenes de la seccion
+        $html .= '        <p class="small text-muted mb-2">Margenes de la seccion:</p>';
         $html .= '        <div class="row g-2 mb-0">';
 
-        $sectionMarginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_top', '0');
+        $sectionMarginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_top', '0px');
         $html .= '            <div class="col-6">';
-        $html .= '                <label for="postGridSectionMarginTop" class="form-label small mb-1 fw-semibold">Margen superior</label>';
+        $html .= '                <label for="postGridSectionMarginTop" class="form-label small mb-1 fw-semibold">';
-        $html .= '                <input type="text" id="postGridSectionMarginTop" class="form-control form-control-sm" ';
+        $html .= '                    <i class="bi bi-arrow-up me-1" style="color: #FF8600;"></i>Arriba';
-        $html .= '                       value="' . esc_attr($sectionMarginTop) . '">';
+        $html .= '                </label>';
+        $html .= '                <select id="postGridSectionMarginTop" class="form-select form-select-sm">';
+        $marginOptions = ['0px', '8px', '16px', '24px', '32px', '48px', '64px'];
+        foreach ($marginOptions as $opt) {
+            $selected = ($sectionMarginTop === $opt) ? ' selected' : '';
+            $html .= '                    <option value="' . $opt . '"' . $selected . '>' . $opt . '</option>';
+        }
+        $html .= '                </select>';
         $html .= '            </div>';
 
-        $sectionMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_bottom', '2rem');
+        $sectionMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_bottom', '32px');
         $html .= '            <div class="col-6">';
-        $html .= '                <label for="postGridSectionMarginBottom" class="form-label small mb-1 fw-semibold">Margen inferior</label>';
+        $html .= '                <label for="postGridSectionMarginBottom" class="form-label small mb-1 fw-semibold">';
-        $html .= '                <input type="text" id="postGridSectionMarginBottom" class="form-control form-control-sm" ';
+        $html .= '                    <i class="bi bi-arrow-down me-1" style="color: #FF8600;"></i>Abajo';
-        $html .= '                       value="' . esc_attr($sectionMarginBottom) . '">';
+        $html .= '                </label>';
+        $html .= '                <select id="postGridSectionMarginBottom" class="form-select form-select-sm">';
+        foreach ($marginOptions as $opt) {
+            $selected = ($sectionMarginBottom === $opt) ? ' selected' : '';
+            $html .= '                    <option value="' . $opt . '"' . $selected . '>' . $opt . '</option>';
+        }
+        $html .= '                </select>';
         $html .= '            </div>';
 
         $html .= '        </div>';

Public/PostGrid/Infrastructure/Ui/PostGridRenderer.php

@@ -152,10 +152,11 @@ final class PostGridRenderer implements RendererInterface
         $paginationActiveColor = $colors['pagination_active_color'] ?? '#ffffff';
 
         // Spacing
-        $gridGap = $spacing['grid_gap'] ?? '1.5rem';
+        $gapHorizontal = $spacing['gap_horizontal'] ?? '24px';
-        $cardPadding = $spacing['card_padding'] ?? '1.25rem';
+        $gapVertical = $spacing['gap_vertical'] ?? '24px';
-        $sectionMarginTop = $spacing['section_margin_top'] ?? '0';
+        $cardPadding = $spacing['card_padding'] ?? '20px';
-        $sectionMarginBottom = $spacing['section_margin_bottom'] ?? '2rem';
+        $sectionMarginTop = $spacing['section_margin_top'] ?? '0px';
+        $sectionMarginBottom = $spacing['section_margin_bottom'] ?? '32px';
 
         // Visual effects
         $cardBorderRadius = $effects['card_border_radius'] ?? '0.5rem';
@@ -176,13 +177,23 @@ final class PostGridRenderer implements RendererInterface
             'margin-bottom' => $sectionMarginBottom,
         ]);
 
-        // Row gap
+        // Row: usar display flex con gap, quitar margins/paddings de Bootstrap
-        $cssRules[] = $this->cssGenerator->generate('.post-grid .row', [
+        $cssRules[] = ".post-grid .row {
-            'gap' => $gridGap,
+            display: flex;
-            'row-gap' => $gridGap,
+            flex-wrap: wrap;
-        ]);
+            column-gap: {$gapHorizontal};
+            row-gap: {$gapVertical};
+            margin: 0;
+            padding: 0;
+        }";
 
-        // Card base
+        // Columnas: quitar padding de Bootstrap y margin-bottom
+        $cssRules[] = ".post-grid .post-card-col {
+            padding: 0;
+            margin: 0;
+        }";
+
+        // Card base - sin margin extra
         $cssRules[] = ".post-grid .card {
             background: {$cardBgColor};
             border: 1px solid {$cardBorderColor};
@@ -191,6 +202,7 @@ final class PostGridRenderer implements RendererInterface
             transition: {$cardTransition};
             height: 100%;
             overflow: hidden;
+            margin: 0;
         }";
 
         // Card hover
@@ -318,8 +330,8 @@ final class PostGridRenderer implements RendererInterface
         $colsTablet = $layout['columns_tablet'] ?? '2';
         $colsMobile = $layout['columns_mobile'] ?? '1';
 
-        // Mobile
+        // Mobile (1 col = no gap needed)
-        $mobileWidth = $this->getColumnWidth($colsMobile);
+        $mobileWidth = $this->getColumnWidth($colsMobile, $gapHorizontal);
         $cssRules[] = "@media (max-width: 575.98px) {
             .post-grid .post-card-col {
                 flex: 0 0 {$mobileWidth};
@@ -328,7 +340,7 @@ final class PostGridRenderer implements RendererInterface
         }";
 
         // Tablet
-        $tabletWidth = $this->getColumnWidth($colsTablet);
+        $tabletWidth = $this->getColumnWidth($colsTablet, $gapHorizontal);
         $cssRules[] = "@media (min-width: 576px) and (max-width: 991.98px) {
             .post-grid .post-card-col {
                 flex: 0 0 {$tabletWidth};
@@ -337,7 +349,7 @@ final class PostGridRenderer implements RendererInterface
         }";
 
         // Desktop
-        $desktopWidth = $this->getColumnWidth($colsDesktop);
+        $desktopWidth = $this->getColumnWidth($colsDesktop, $gapHorizontal);
         $cssRules[] = "@media (min-width: 992px) {
             .post-grid .post-card-col {
                 flex: 0 0 {$desktopWidth};
@@ -348,14 +360,33 @@ final class PostGridRenderer implements RendererInterface
         return implode("\n", $cssRules);
     }
 
-    private function getColumnWidth(string $cols): string
+    /**
+     * Calcula el ancho de columna considerando el gap
+     *
+     * Con gap en flexbox, el ancho debe ser:
+     * (100% - (n-1)*gap) / n
+     *
+     * @param string $cols Número de columnas
+     * @param string $gap Valor del gap (ej: '1.5rem', '24px')
+     * @return string Valor CSS con calc() si hay gap
+     */
+    private function getColumnWidth(string $cols, string $gap): string
     {
         $colCount = (int)$cols;
         if ($colCount <= 0) {
             $colCount = 1;
         }
-        $percentage = 100 / $colCount;
+
-        return sprintf('%.4f%%', $percentage);
+        // Si es 1 columna, no hay gap entre columnas
+        if ($colCount === 1) {
+            return '100%';
+        }
+
+        // Número de gaps = columnas - 1
+        $gapCount = $colCount - 1;
+
+        // calc((100% - (n-1)*gap) / n)
+        return sprintf('calc((100%% - %d * %s) / %d)', $gapCount, $gap, $colCount);
     }
 
     private function buildHTML(array $data, string $visibilityClass): string
@@ -558,15 +589,63 @@ final class PostGridRenderer implements RendererInterface
 
     private function buildPaginationHTML(): string
     {
-        ob_start();
+        global $wp_query;
 
-        the_posts_pagination([
+        $totalPages = $wp_query->max_num_pages;
-            'mid_size' => 2,
+        if ($totalPages <= 1) {
-            'prev_text' => __('&laquo; Anterior', 'roi-theme'),
+            return '';
-            'next_text' => __('Siguiente &raquo;', 'roi-theme'),
+        }
-            'screen_reader_text' => __('Navegacion de publicaciones', 'roi-theme'),
-        ]);
 
-        return ob_get_clean();
+        $currentPage = max(1, get_query_var('paged', 1));
+        $html = '<nav aria-label="Paginacion"><ul class="pagination justify-content-center">';
+
+        // Boton Inicio (siempre visible)
+        $html .= sprintf(
+            '<li class="page-item"><a class="page-link" href="%s">Inicio</a></li>',
+            esc_url(get_pagenum_link(1))
+        );
+
+        // Numeros de pagina - mostrar 5 paginas
+        $visiblePages = 5;
+        $start = max(1, $currentPage - 2);
+        $end = min($totalPages, $start + $visiblePages - 1);
+
+        // Ajustar inicio si estamos cerca del final
+        if ($end - $start < $visiblePages - 1) {
+            $start = max(1, $end - $visiblePages + 1);
+        }
+
+        for ($i = $start; $i <= $end; $i++) {
+            if ($i === $currentPage) {
+                $html .= sprintf(
+                    '<li class="page-item active"><span class="page-link">%d</span></li>',
+                    $i
+                );
+            } else {
+                $html .= sprintf(
+                    '<li class="page-item"><a class="page-link" href="%s">%d</a></li>',
+                    esc_url(get_pagenum_link($i)),
+                    $i
+                );
+            }
+        }
+
+        // Ver mas (siguiente pagina)
+        if ($currentPage < $totalPages) {
+            $html .= sprintf(
+                '<li class="page-item"><a class="page-link" href="%s">Ver mas</a></li>',
+                esc_url(get_pagenum_link($currentPage + 1))
+            );
+        }
+
+        // Boton Fin (siempre visible)
+        $html .= sprintf(
+            '<li class="page-item"><a class="page-link" href="%s">Fin</a></li>',
+            esc_url(get_pagenum_link($totalPages))
+        );
+
+        $html .= '</ul></nav>';
+
+        return $html;
     }
 }

archive.php

@@ -53,6 +53,13 @@ $main_col_class = $show_sidebar ? 'col-lg-9' : 'col-lg-12';
             }
             ?>
 
+            <!-- CTA Post - Componente dinamico -->
+            <?php
+            if (function_exists('roi_render_component')) {
+                echo roi_render_component('cta-post');
+            }
+            ?>
+
         </div><!-- .<?php echo esc_attr($main_col_class); ?> -->
 
         <?php if ($show_sidebar): ?>

category.php

@@ -53,6 +53,13 @@ $main_col_class = $show_sidebar ? 'col-lg-9' : 'col-lg-12';
             }
             ?>
 
+            <!-- CTA Post - Componente dinamico -->
+            <?php
+            if (function_exists('roi_render_component')) {
+                echo roi_render_component('cta-post');
+            }
+            ?>
+
         </div><!-- .<?php echo esc_attr($main_col_class); ?> -->
 
         <?php if ($show_sidebar): ?>