render.php
204 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Blog List Block - Server-Side Render |
| 4 | * |
| 5 | * Hybrid Layout: Dynamic Posts Loop + InnerBlocks Sidebar |
| 6 | * |
| 7 | * @package Author_Website_Templates |
| 8 | * @since 1.0.9 |
| 9 | */ |
| 10 | |
| 11 | if ( ! defined( 'ABSPATH' ) ) { |
| 12 | exit; |
| 13 | } |
| 14 | |
| 15 | // Extract attributes |
| 16 | $posts_to_show = isset( $attributes['postsToShow'] ) ? absint( $attributes['postsToShow'] ) : 6; |
| 17 | $show_image = isset( $attributes['showImage'] ) ? (bool) $attributes['showImage'] : true; |
| 18 | $show_excerpt = isset( $attributes['showExcerpt'] ) ? (bool) $attributes['showExcerpt'] : true; |
| 19 | $read_more_text = isset( $attributes['readMoreText'] ) ? sanitize_text_field( $attributes['readMoreText'] ) : __( 'Read More', 'author-website-templates' ); |
| 20 | |
| 21 | // Extract color attributes |
| 22 | $section_bg_color = isset( $attributes['sectionBgColor'] ) ? sanitize_hex_color( $attributes['sectionBgColor'] ) : ''; |
| 23 | $category_color = isset( $attributes['categoryColor'] ) ? sanitize_hex_color( $attributes['categoryColor'] ) : '#f97316'; |
| 24 | $title_hover_color = isset( $attributes['titleHoverColor'] ) ? sanitize_hex_color( $attributes['titleHoverColor'] ) : '#0ea5e9'; |
| 25 | $read_more_color = isset( $attributes['readMoreColor'] ) ? sanitize_hex_color( $attributes['readMoreColor'] ) : '#0ea5e9'; |
| 26 | $pagination_bg_color = isset( $attributes['paginationBgColor'] ) ? sanitize_hex_color( $attributes['paginationBgColor'] ) : '#ffffff'; |
| 27 | $pagination_text_color = isset( $attributes['paginationTextColor'] ) ? sanitize_hex_color( $attributes['paginationTextColor'] ) : '#1e293b'; |
| 28 | $pagination_hover_bg = isset( $attributes['paginationHoverBgColor'] ) ? sanitize_hex_color( $attributes['paginationHoverBgColor'] ) : '#0ea5e9'; |
| 29 | $pagination_hover_text = isset( $attributes['paginationHoverTextColor'] ) ? sanitize_hex_color( $attributes['paginationHoverTextColor'] ) : '#ffffff'; |
| 30 | |
| 31 | // Generate unique ID for scoped CSS |
| 32 | $block_id = 'awt-blog-list-' . uniqid(); |
| 33 | |
| 34 | global $wp_query; |
| 35 | $use_global_query = ( is_home() || is_category() || is_tag() || is_author() || is_date() || is_archive() ); |
| 36 | |
| 37 | if ( $use_global_query && $wp_query->have_posts() ) { |
| 38 | $query = $wp_query; |
| 39 | } else { |
| 40 | $args = array( |
| 41 | 'post_type' => 'post', |
| 42 | 'posts_per_page' => $posts_to_show, |
| 43 | 'post_status' => 'publish', |
| 44 | 'paged' => get_query_var('paged') ? get_query_var('paged') : 1, |
| 45 | ); |
| 46 | $query = new WP_Query( $args ); |
| 47 | } |
| 48 | |
| 49 | ?> |
| 50 | |
| 51 | <!-- Dynamic Color Styles --> |
| 52 | <style> |
| 53 | #<?php echo esc_attr( $block_id ); ?> .awt-category-link { |
| 54 | color: <?php echo esc_attr( $category_color ); ?>; |
| 55 | } |
| 56 | |
| 57 | #<?php echo esc_attr( $block_id ); ?> .awt-post-title:hover { |
| 58 | color: <?php echo esc_attr( $title_hover_color ); ?> !important; |
| 59 | } |
| 60 | |
| 61 | #<?php echo esc_attr( $block_id ); ?> .awt-read-more { |
| 62 | color: <?php echo esc_attr( $read_more_color ); ?>; |
| 63 | } |
| 64 | |
| 65 | #<?php echo esc_attr( $block_id ); ?> .awt-pagination-item { |
| 66 | background-color: <?php echo esc_attr( $pagination_bg_color ); ?>; |
| 67 | color: <?php echo esc_attr( $pagination_text_color ); ?>; |
| 68 | } |
| 69 | |
| 70 | #<?php echo esc_attr( $block_id ); ?> .awt-pagination-item:hover { |
| 71 | background-color: <?php echo esc_attr( $pagination_hover_bg ); ?> !important; |
| 72 | color: <?php echo esc_attr( $pagination_hover_text ); ?> !important; |
| 73 | } |
| 74 | |
| 75 | #<?php echo esc_attr( $block_id ); ?> .awt-pagination-active { |
| 76 | background-color: <?php echo esc_attr( $pagination_hover_bg ); ?>; |
| 77 | color: <?php echo esc_attr( $pagination_hover_text ); ?>; |
| 78 | } |
| 79 | </style> |
| 80 | |
| 81 | <section id="<?php echo esc_attr( $block_id ); ?>" class="py-24" <?php if ( $section_bg_color ) echo 'style="background-color: ' . esc_attr( $section_bg_color ) . ';"'; ?>> |
| 82 | <div class="awt-container mx-auto px-6 grid grid-cols-1 lg:grid-cols-3 gap-12"> |
| 83 | |
| 84 | <!-- Main Content - Posts Loop --> |
| 85 | <div class="lg:col-span-2 space-y-12"> |
| 86 | <?php |
| 87 | if ( $query->have_posts() ) : |
| 88 | while ( $query->have_posts() ) : $query->the_post(); |
| 89 | ?> |
| 90 | <article class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl md:flex"> |
| 91 | |
| 92 | <!-- Image --> |
| 93 | <?php if ( $show_image && has_post_thumbnail() ) : ?> |
| 94 | <a href="<?php the_permalink(); ?>" class="block md:w-2/5"> |
| 95 | <?php the_post_thumbnail( 'medium_large', array( |
| 96 | 'class' => 'w-full h-64 md:h-full object-cover' |
| 97 | ) ); ?> |
| 98 | </a> |
| 99 | <?php endif; ?> |
| 100 | |
| 101 | <div class="p-6 md:p-8 <?php echo ( $show_image && has_post_thumbnail() ) ? 'md:w-3/5' : 'w-full'; ?>"> |
| 102 | |
| 103 | <!-- Category Link --> |
| 104 | <?php |
| 105 | $categories = get_the_category(); |
| 106 | if ( ! empty( $categories ) ) : |
| 107 | $cat_link = get_category_link( $categories[0]->term_id ); |
| 108 | ?> |
| 109 | <a href="<?php echo esc_url( $cat_link ); ?>" |
| 110 | class="awt-category-link block font-bold uppercase text-sm mb-2 hover:underline"> |
| 111 | <?php echo esc_html( $categories[0]->name ); ?> |
| 112 | </a> |
| 113 | <?php endif; ?> |
| 114 | |
| 115 | <!-- Title Link --> |
| 116 | <a href="<?php the_permalink(); ?>"> |
| 117 | <h3 class="awt-post-title text-2xl md:text-3xl font-black text-navy mb-4"> |
| 118 | <?php the_title(); ?> |
| 119 | </h3> |
| 120 | </a> |
| 121 | |
| 122 | <!-- Excerpt --> |
| 123 | <?php if ( $show_excerpt ) : ?> |
| 124 | <p class="text-navy/80 mb-6"> |
| 125 | <?php echo esc_html( get_the_excerpt() ); ?> |
| 126 | </p> |
| 127 | <?php endif; ?> |
| 128 | |
| 129 | <!-- Read More Button --> |
| 130 | <a href="<?php the_permalink(); ?>" class="awt-read-more font-bold hover:underline"> |
| 131 | <?php echo esc_html( $read_more_text ); ?> → |
| 132 | </a> |
| 133 | |
| 134 | </div> |
| 135 | </article> |
| 136 | |
| 137 | <?php |
| 138 | endwhile; |
| 139 | |
| 140 | // Pagination |
| 141 | if ( $query->max_num_pages > 1 ) : |
| 142 | ?> |
| 143 | <div class="mt-12 flex justify-center"> |
| 144 | <?php |
| 145 | $big = 999999999; |
| 146 | |
| 147 | $pagination = paginate_links( array( |
| 148 | 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), |
| 149 | 'format' => '?paged=%#%', |
| 150 | 'total' => $query->max_num_pages, |
| 151 | 'current' => max( 1, get_query_var( 'paged' ) ), |
| 152 | 'prev_text' => '← Prev', |
| 153 | 'next_text' => 'Next →', |
| 154 | 'type' => 'array', |
| 155 | ) ); |
| 156 | |
| 157 | if ( ! empty( $pagination ) ) : |
| 158 | ?> |
| 159 | <nav class="flex gap-2"> |
| 160 | <?php foreach ( $pagination as $page ) : |
| 161 | $is_active = strpos( $page, 'current' ) !== false; |
| 162 | |
| 163 | if ( $is_active ) { |
| 164 | echo '<span class="awt-pagination-active px-4 py-2 rounded-lg font-bold shadow-md">' |
| 165 | . wp_kses_post( wp_strip_all_tags( $page ) ) . |
| 166 | '</span>'; |
| 167 | } else { |
| 168 | preg_match('/href=["\']([^"\']+)["\']/', $page, $match); |
| 169 | $url = $match[1] ?? '#'; |
| 170 | |
| 171 | echo '<a href="' . esc_url( $url ) . '" |
| 172 | class="awt-pagination-item px-4 py-2 rounded-lg border border-gray-200 shadow-sm transition-all duration-200"> |
| 173 | ' . wp_kses_post( wp_strip_all_tags( $page ) ) . ' |
| 174 | </a>'; |
| 175 | } |
| 176 | endforeach; ?> |
| 177 | </nav> |
| 178 | <?php endif; ?> |
| 179 | </div> |
| 180 | |
| 181 | <?php |
| 182 | endif; |
| 183 | |
| 184 | else : |
| 185 | ?> |
| 186 | <p class="text-center text-gray-600 py-12"> |
| 187 | <?php _e( 'No posts found.', 'author-website-templates' ); ?> |
| 188 | </p> |
| 189 | <?php |
| 190 | endif; |
| 191 | |
| 192 | if ( ! $use_global_query ) { |
| 193 | wp_reset_postdata(); |
| 194 | } |
| 195 | ?> |
| 196 | </div> |
| 197 | |
| 198 | <!-- Sidebar - InnerBlocks Content --> |
| 199 | <aside class="lg:col-span-1 lg:sticky lg:top-32 h-fit space-y-8"> |
| 200 | <?php echo $content; ?> |
| 201 | </aside> |
| 202 | |
| 203 | </div> |
| 204 | </section> |