buildHeader($componentId); $html .= '
'; // Columna izquierda $html .= '
'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildLayoutGroup($componentId); $html .= '
'; // Columna derecha $html .= '
'; $html .= $this->buildTypographyGroup($componentId); $html .= $this->buildColorsGroup($componentId); $html .= $this->buildSpacingGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= '
'; $html .= '
'; return $html; } private function buildHeader(string $componentId): string { $html = '
renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= $this->buildSwitch('relatedPostEnabled', 'Activar componente', 'bi-power', $enabled); $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= $this->buildSwitch('relatedPostShowOnDesktop', 'Mostrar en escritorio', 'bi-display', $showOnDesktop); $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true); $html .= $this->buildSwitch('relatedPostShowOnMobile', 'Mostrar en movil', 'bi-phone', $showOnMobile); // ============================================= // Checkboxes de visibilidad por tipo de página // Grupo especial: _page_visibility // ============================================= $html .= '
'; $html .= '

'; $html .= ' '; $html .= ' Mostrar en tipos de pagina'; $html .= '

'; $showOnHome = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_home', true); $showOnPosts = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_posts', true); $showOnPages = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_pages', true); $showOnArchives = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_archives', false); $showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', false); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('relatedPostVisibilityHome', 'Home', 'bi-house', $showOnHome); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('relatedPostVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('relatedPostVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('relatedPostVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('relatedPostVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch); $html .= '
'; $html .= '
'; $html .= '
'; $html .= ''; return $html; } private function buildContentGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Contenido'; $html .= '
'; // Section Title $sectionTitle = $this->renderer->getFieldValue($componentId, 'content', 'section_title', 'Descubre Mas Contenido'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // Posts per page $postsPerPage = $this->renderer->getFieldValue($componentId, 'content', 'posts_per_page', '12'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // Order by $orderby = $this->renderer->getFieldValue($componentId, 'content', 'orderby', 'rand'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // Order direction $order = $this->renderer->getFieldValue($componentId, 'content', 'order', 'DESC'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // Show pagination $showPagination = $this->renderer->getFieldValue($componentId, 'content', 'show_pagination', true); $html .= $this->buildSwitch('relatedPostShowPagination', 'Mostrar paginacion', 'bi-three-dots', $showPagination); $html .= '
'; $html .= '
'; return $html; } private function buildLayoutGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Disposicion'; $html .= '
'; // Columns desktop $colsDesktop = $this->renderer->getFieldValue($componentId, 'layout', 'columns_desktop', '3'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // Columns tablet $colsTablet = $this->renderer->getFieldValue($componentId, 'layout', 'columns_tablet', '2'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // Columns mobile $colsMobile = $this->renderer->getFieldValue($componentId, 'layout', 'columns_mobile', '1'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildTypographyGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Tipografia'; $html .= '
'; $html .= '
'; $sectionTitleSize = $this->renderer->getFieldValue($componentId, 'typography', 'section_title_size', '1.75rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $sectionTitleWeight = $this->renderer->getFieldValue($componentId, 'typography', 'section_title_weight', '500'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $cardTitleSize = $this->renderer->getFieldValue($componentId, 'typography', 'card_title_size', '1rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $cardTitleWeight = $this->renderer->getFieldValue($componentId, 'typography', 'card_title_weight', '500'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildColorsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Colores'; $html .= '
'; // Seccion $html .= '

Seccion

'; $html .= '
'; $sectionTitleColor = $this->renderer->getFieldValue($componentId, 'colors', 'section_title_color', '#212529'); $html .= $this->buildColorPicker('relatedPostSectionTitleColor', 'Titulo seccion', $sectionTitleColor); $html .= '
'; // Cards $html .= '

Cards

'; $html .= '
'; $cardBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'card_bg_color', '#ffffff'); $html .= $this->buildColorPicker('relatedPostCardBgColor', 'Fondo card', $cardBgColor); $cardTitleColor = $this->renderer->getFieldValue($componentId, 'colors', 'card_title_color', '#212529'); $html .= $this->buildColorPicker('relatedPostCardTitleColor', 'Titulo card', $cardTitleColor); $html .= '
'; $html .= '
'; $cardHoverBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'card_hover_bg_color', '#f8f9fa'); $html .= $this->buildColorPicker('relatedPostCardHoverBgColor', 'Fondo hover', $cardHoverBgColor); $html .= '
'; // Paginacion $html .= '

Paginacion

'; $html .= '
'; $paginationBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'pagination_bg_color', '#ffffff'); $html .= $this->buildColorPicker('relatedPostPaginationBgColor', 'Fondo', $paginationBgColor); $paginationTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'pagination_text_color', '#0d6efd'); $html .= $this->buildColorPicker('relatedPostPaginationTextColor', 'Texto', $paginationTextColor); $html .= '
'; $html .= '
'; $paginationActiveBg = $this->renderer->getFieldValue($componentId, 'colors', 'pagination_active_bg', '#0d6efd'); $html .= $this->buildColorPicker('relatedPostPaginationActiveBg', 'Activo fondo', $paginationActiveBg); $paginationActiveText = $this->renderer->getFieldValue($componentId, 'colors', 'pagination_active_text', '#ffffff'); $html .= $this->buildColorPicker('relatedPostPaginationActiveText', 'Activo texto', $paginationActiveText); $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSpacingGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Espaciado'; $html .= '
'; $html .= '
'; $sectionMarginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_top', '3rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $sectionMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_bottom', '3rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $titleMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'title_margin_bottom', '1.5rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $gridGap = $this->renderer->getFieldValue($componentId, 'spacing', 'grid_gap', '1.5rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $cardPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'card_padding', '1.5rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $paginationMarginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'pagination_margin_top', '1rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildEffectsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Efectos Visuales'; $html .= '
'; $html .= '
'; $cardBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'card_border_radius', '0.375rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $cardTransition = $this->renderer->getFieldValue($componentId, 'visual_effects', 'card_transition', '0.3s ease'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $cardShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'card_shadow', '0 .125rem .25rem rgba(0,0,0,.075)'); $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $cardHoverShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'card_hover_shadow', '0 .5rem 1rem rgba(0,0,0,.15)'); $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSwitch(string $id, string $label, string $icon, mixed $checked): string { $checked = $checked === true || $checked === '1' || $checked === 1; $html = '
'; $html .= '
'; $html .= sprintf( ' ', esc_attr($id), $checked ? 'checked' : '' ); $html .= sprintf( ' '; $html .= '
'; $html .= '
'; return $html; } private function buildColorPicker(string $id, string $label, string $value): string { $html = '
'; $html .= sprintf( ' ', esc_html($label) ); $html .= '
'; $html .= sprintf( ' ', esc_attr($id), esc_attr($value) ); $html .= sprintf( ' %s', esc_attr($id), esc_html(strtoupper($value)) ); $html .= '
'; $html .= '
'; return $html; } private function buildPageVisibilityCheckbox(string $id, string $label, string $icon, mixed $checked): string { $checked = $checked === true || $checked === '1' || $checked === 1; $html = '
'; $html .= sprintf( ' ', esc_attr($id), $checked ? 'checked' : '' ); $html .= sprintf( ' '; $html .= '
'; return $html; } }