@sociallane/elements 1.0.0

package/packages/widgets/blog-grid/data/view.php

@@ -0,0 +1,192 @@
+<?php
+/**
+ * Data Preparation: Blog Grid
+ *
+ * Runs WP_Query for post type "post" and builds template-ready card data
+ * for the article cards layout with category overlay.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Blog Grid widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_blog_grid_view( array $settings, string $widget_id ): array {
+	$posts_per_page = max( 1, min( 12, (int) ( $settings['posts_per_page'] ?? 3 ) ) );
+	$orderby        = $settings['orderby'] ?? 'date';
+	$order          = ( $settings['order'] ?? 'DESC' ) === 'ASC' ? 'ASC' : 'DESC';
+	$offset         = max( 0, (int) ( $settings['offset'] ?? 0 ) );
+	$category_ids   = $settings['category_ids'] ?? [];
+
+	$args = [
+		'post_type'      => 'post',
+		'post_status'    => 'publish',
+		'posts_per_page' => $posts_per_page,
+		'orderby'        => $orderby,
+		'order'          => $order,
+		'offset'         => $offset,
+		'no_found_rows'  => true,
+	];
+
+	if ( ! empty( $category_ids ) && is_array( $category_ids ) ) {
+		$args['category__in'] = array_map( 'absint', $category_ids );
+	}
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	// Light/dark mode: dual classes matching design (white cards, dark text, light section)
+	$classes = [
+		'section'      => 'bg-neutral-50 dark:bg-neutral-900',
+		'card'         => 'bg-white dark:bg-neutral-800 shadow-md rounded-xl overflow-hidden',
+		'card_title'   => 'text-neutral-900 dark:text-neutral-100',
+		'meta'         => 'text-neutral-500 dark:text-neutral-400',
+		'excerpt'      => 'text-neutral-600 dark:text-neutral-300',
+		'read_more'    => 'text-blue-chill-600 dark:text-blue-chill-300',
+		'tag_bg'       => 'bg-neutral-900/70 dark:bg-neutral-950/80',
+		'tag_text'     => 'text-white dark:text-white',
+		'cta_button'   => 'bg-neutral-200 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
+		'headline'     => 'text-neutral-900 dark:text-neutral-100',
+		'subtitle'     => 'text-neutral-600 dark:text-neutral-400',
+	];
+
+	if ( ! class_exists( 'WP_Query' ) ) {
+		return prepare_blog_grid_empty_view( $settings, $widget_id, $classes, $animation );
+	}
+
+	$query = new \WP_Query( $args );
+
+	$show_image    = ( $settings['show_image'] ?? 'yes' ) === 'yes';
+	$show_category = ( $settings['show_category'] ?? 'yes' ) === 'yes';
+	$show_date     = ( $settings['show_date'] ?? 'yes' ) === 'yes';
+	$show_excerpt  = ( $settings['show_excerpt'] ?? 'yes' ) === 'yes';
+	$excerpt_len   = max( 5, min( 100, (int) ( $settings['excerpt_length'] ?? 20 ) ) );
+	$columns       = sociallane_validate_option( $settings['columns'] ?? '3', [ '2', '3', '4' ], '3' );
+	$read_more_txt = esc_html( $settings['read_more_text'] ?? 'Lorem ipsum' );
+
+	$heading_fields = sociallane_extract_fields( $settings, [ 'heading' => [ 'show_key' => 'show_heading' ], 'subtitle' => [ 'show_key' => 'show_subtitle' ] ] );
+	$heading_tag    = sociallane_validate_heading_tag( $settings, 'heading_tag', 'h2' );
+
+	$show_cta = ( $settings['show_cta'] ?? 'yes' ) === 'yes';
+	$cta_text = $show_cta ? esc_html( $settings['cta_text'] ?? '' ) : '';
+	$cta_url  = $settings['cta_url'] ?? [];
+	$cta      = null;
+	if ( $show_cta && $cta_text !== '' ) {
+		$cta = sociallane_prepare_button_data( $cta_text, $cta_url, [
+			'variant' => 'ghost',
+			'size'    => 'lg',
+			'class'   => $classes['cta_button'],
+		] );
+	}
+
+	$grid_class = sociallane_grid_cols( $columns, [
+		'2' => 'grid-cols-1 sm:grid-cols-2',
+		'3' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+		'4' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+	] );
+
+	$posts = [];
+	if ( $query->have_posts() ) {
+		while ( $query->have_posts() ) {
+			$query->the_post();
+			$post_id = get_the_ID();
+
+			$image = [
+				'src'     => '',
+				'alt'     => get_the_title(),
+				'srcset'  => '',
+				'sizes'   => '(max-width: 768px) 100vw, 33vw',
+				'width'   => '',
+				'height'  => '',
+				'loading' => 'lazy',
+			];
+
+			$thumb_id = get_post_thumbnail_id( $post_id );
+			if ( $thumb_id ) {
+				$image['src']    = esc_url( get_the_post_thumbnail_url( $post_id, 'large' ) ?: '' );
+				$image['alt']    = esc_attr( get_post_meta( $thumb_id, '_wp_attachment_image_alt', true ) ?: get_the_title() );
+				$image['srcset'] = wp_get_attachment_image_srcset( $thumb_id, 'large' ) ?: '';
+				$meta            = wp_get_attachment_metadata( $thumb_id );
+				if ( $meta ) {
+					$image['width']  = $meta['width'] ?? '';
+					$image['height'] = $meta['height'] ?? '';
+				}
+			}
+
+			$category_name = '';
+			$terms         = get_the_terms( $post_id, 'category' );
+			if ( $terms && ! is_wp_error( $terms ) && ! empty( $terms ) ) {
+				$first_term = reset( $terms );
+				$category_name = esc_html( $first_term->name ?? '' );
+			}
+
+			$excerpt_text = '';
+			if ( $show_excerpt ) {
+				$raw         = has_excerpt( $post_id ) ? get_the_excerpt() : wp_trim_words( get_the_content(), $excerpt_len );
+				$excerpt_text = esc_html( $raw );
+			}
+
+			$posts[] = [
+				'id'           => $post_id,
+				'title'        => esc_html( get_the_title() ),
+				'url'          => esc_url( get_the_permalink() ),
+				'date'         => get_the_date( '', $post_id ),
+				'date_iso'     => get_the_date( 'c', $post_id ),
+				'category'     => $category_name,
+				'excerpt'      => $excerpt_text,
+				'image'        => $image,
+				'show_image'   => $show_image,
+				'show_category'=> $show_category,
+				'show_date'    => $show_date,
+				'show_excerpt' => $show_excerpt,
+				'read_more'    => $read_more_txt,
+			];
+		}
+		wp_reset_postdata();
+	}
+
+	return [
+		'posts'         => $posts,
+		'show_heading'  => $show_heading,
+		'heading'       => $heading,
+		'heading_tag'   => $heading_tag,
+		'show_subtitle' => $show_subtitle,
+		'subtitle'      => $subtitle,
+		'cta'           => $cta,
+		'show_cta'      => $show_cta && $cta !== null,
+		'grid_class'    => $grid_class,
+		'classes'       => $classes,
+		'widget_id'     => $widget_id,
+		'animation'     => $animation,
+	];
+}
+
+/**
+ * Prepare empty view when WP_Query is not available
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID
+ * @param array  $classes   Theme classes
+ * @param array  $animation Animation data
+ * @return array Template-ready data
+ */
+function prepare_blog_grid_empty_view( array $settings, string $widget_id, array $classes, array $animation ): array {
+	$fields = sociallane_extract_fields( $settings, [ 'heading' => [ 'show_key' => 'show_heading' ], 'subtitle' => [ 'show_key' => 'show_subtitle' ] ] );
+	return array_merge( $fields, [
+		'posts'       => [],
+		'heading_tag' => sociallane_validate_heading_tag( $settings, 'heading_tag', 'h2' ),
+		'cta'         => null,
+		'show_cta'    => false,
+		'grid_class'  => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+		'classes'     => $classes,
+		'widget_id'   => $widget_id,
+		'animation'   => $animation,
+	] );
+}

package/packages/widgets/blog-grid/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sociallane/widget-blog-grid",
+  "version": "1.0.0",
+  "private": true,
+  "description": "SocialLane Elements widget: blog-grid",
+  "peerDependencies": {
+    "@sociallane/core": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No widget-specific build\""
+  }
+}

package/packages/widgets/blog-grid/templates/partials/card.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Template Partial: Blog Grid – single article card
+ *
+ * Expects $card (single post data) and $view['classes'] in scope.
+ * Card: image with category tag overlay, date (calendar icon), title, excerpt, read-more link.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) || empty( $card ) || empty( $view ) ) {
+	return;
+}
+
+$elements_path = defined( 'SOCIALLANE_ELEMENTS_PATH' ) ? SOCIALLANE_ELEMENTS_PATH . 'elements' : dirname( __DIR__, 2 ) . '/elements';
+$classes       = $view['classes'] ?? [];
+?>
+
+<?php // ===== BLOG GRID CARD START ===== ?>
+
+<article class="<?php echo esc_attr( $classes['card'] ?? '' ); ?> flex flex-col transition-shadow duration-300 hover:shadow-lg">
+	<?php if ( ! empty( $card['show_image'] ) && ! empty( $card['image']['src'] ) ) : ?>
+		<a href="<?php echo esc_url( $card['url'] ); ?>" class="block relative aspect-[4/3] overflow-hidden focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-800 rounded-t-xl focus:outline-none">
+			<?php
+			$image         = $card['image'];
+			$image['class'] = 'w-full h-full object-cover';
+			include $elements_path . '/image/templates/render.php';
+			?>
+			<?php if ( ! empty( $card['show_category'] ) && $card['category'] !== '' ) : ?>
+				<span class="absolute top-4 left-4 px-3 py-1.5 rounded-full text-sm font-medium <?php echo esc_attr( ( $classes['tag_bg'] ?? '' ) . ' ' . ( $classes['tag_text'] ?? '' ) ); ?>">
+					<?php echo esc_html( $card['category'] ); ?>
+				</span>
+			<?php endif; ?>
+		</a>
+	<?php endif; ?>
+
+	<div class="p-5 md:p-6 flex flex-col flex-1">
+		<?php if ( empty( $card['show_image'] ) && ! empty( $card['show_category'] ) && $card['category'] !== '' ) : ?>
+			<span class="inline-flex w-fit px-3 py-1.5 rounded-full text-sm font-medium mb-3 <?php echo esc_attr( ( $classes['tag_bg'] ?? '' ) . ' ' . ( $classes['tag_text'] ?? '' ) ); ?>">
+				<?php echo esc_html( $card['category'] ); ?>
+			</span>
+		<?php endif; ?>
+		<?php if ( ! empty( $card['show_date'] ) && ! empty( $card['date'] ) ) : ?>
+			<time datetime="<?php echo esc_attr( $card['date_iso'] ); ?>" class="<?php echo esc_attr( $classes['meta'] ?? '' ); ?> text-sm flex items-center gap-2 mb-3">
+				<svg class="w-4 h-4 shrink-0" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+				</svg>
+				<?php echo esc_html( $card['date'] ); ?>
+			</time>
+		<?php endif; ?>
+
+		<h3 class="<?php echo esc_attr( $classes['card_title'] ?? '' ); ?> text-lg md:text-xl font-bold font-heading leading-tight mb-2">
+			<a href="<?php echo esc_url( $card['url'] ); ?>" class="text-inherit no-underline hover:underline focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-inset rounded focus:outline-none">
+				<?php echo $card['title']; ?>
+			</a>
+		</h3>
+
+		<?php if ( ! empty( $card['show_excerpt'] ) && $card['excerpt'] !== '' ) : ?>
+			<div class="<?php echo esc_attr( $classes['excerpt'] ?? '' ); ?> text-sm md:text-base leading-relaxed flex-1 mb-4">
+				<?php echo $card['excerpt']; ?>
+			</div>
+		<?php endif; ?>
+
+		<a href="<?php echo esc_url( $card['url'] ); ?>" class="<?php echo esc_attr( $classes['read_more'] ?? '' ); ?> inline-flex items-center gap-1.5 text-sm font-medium no-underline hover:underline focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-inset rounded focus:outline-none self-start">
+			<?php echo esc_html( $card['read_more'] ); ?>
+			<svg class="w-4 h-4 shrink-0" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+			</svg>
+		</a>
+	</div>
+</article>
+
+<?php // ===== BLOG GRID CARD END ===== ?>

package/packages/widgets/blog-grid/templates/wrapper.php

@@ -0,0 +1,89 @@
+<?php
+/**
+ * Template: Blog Grid Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - posts (array of card data: title, url, date, category, excerpt, image, show_*)
+ * - show_heading, heading, heading_tag
+ * - show_subtitle, subtitle
+ * - show_cta, cta (button data)
+ * - grid_class, classes, widget_id, animation
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim           = $view['animation'] ?? [];
+$section_attrs  = sociallane_section_animation_attrs( $anim );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+$posts          = $view['posts'];
+$classes        = $view['classes'] ?? [];
+$section_id     = 'blog-grid-' . $view['widget_id'];
+$has_heading    = ( ! empty( $view['show_heading'] ) && $view['heading'] !== '' )
+	|| ( ! empty( $view['show_subtitle'] ) && $view['subtitle'] !== '' );
+?>
+
+<?php // ========== BLOG GRID START ========== ?>
+
+<section
+	class="<?php echo esc_attr( $classes['section'] ?? '' ); ?> py-12 md:py-16 lg:py-20"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( $has_heading ) : ?>aria-labelledby="<?php echo esc_attr( $section_id ); ?>"<?php endif; ?>
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<?php // ----- Section Header (centered) ----- ?>
+		<header class="text-center max-w-3xl mx-auto mb-10 md:mb-12 lg:mb-14">
+			<?php if ( ! empty( $view['show_heading'] ) && $view['heading'] !== '' ) : ?>
+				<<?php echo $view['heading_tag']; ?>
+					id="<?php echo esc_attr( $section_id ); ?>"
+					class="<?php echo esc_attr( $classes['headline'] ?? '' ); ?> text-2xl md:text-3xl lg:text-4xl font-bold font-heading leading-tight mb-4"
+					<?php echo ! empty( $headline_attrs ) ? ' ' . $headline_attrs : ''; ?>
+				>
+					<?php echo $view['heading']; ?>
+				</<?php echo $view['heading_tag']; ?>>
+			<?php endif; ?>
+			<?php if ( ! empty( $view['show_subtitle'] ) && $view['subtitle'] !== '' ) : ?>
+				<p class="<?php echo esc_attr( $classes['subtitle'] ?? '' ); ?> text-base md:text-lg leading-relaxed">
+					<?php echo $view['subtitle']; ?>
+				</p>
+			<?php endif; ?>
+		</header>
+
+		<?php // ----- Cards Grid ----- ?>
+		<?php if ( empty( $posts ) ) : ?>
+			<p class="<?php echo esc_attr( $classes['excerpt'] ?? '' ); ?> text-center"><?php esc_html_e( 'No posts found.', 'sociallane-elements' ); ?></p>
+		<?php else : ?>
+			<?php $stagger_attrs = sociallane_stagger_attrs( $anim ); ?>
+			<div class="grid <?php echo esc_attr( $view['grid_class'] ); ?> gap-6 lg:gap-8" <?php echo $stagger_attrs ? ' ' . $stagger_attrs : ''; ?>>
+				<?php foreach ( $posts as $card ) : ?>
+					<?php include __DIR__ . '/partials/card.php'; ?>
+				<?php endforeach; ?>
+			</div>
+
+			<?php // ----- CTA Button (centered below cards) ----- ?>
+			<?php if ( ! empty( $view['show_cta'] ) && $view['cta'] ) : ?>
+				<div class="flex justify-center mt-10 md:mt-12 lg:mt-14">
+					<?php
+					$elements_path = defined( 'SOCIALLANE_ELEMENTS_PATH' ) ? SOCIALLANE_ELEMENTS_PATH . 'elements' : dirname( __DIR__, 2 ) . '/elements';
+					$button        = $view['cta'];
+					// Add arrow icon for CTA
+					if ( empty( $button['icon'] ) ) {
+						$button['icon'] = [ 'value' => 'eicon-chevron-right', 'library' => 'eicons' ];
+						$button['icon_position'] = 'right';
+					}
+					include $elements_path . '/button/templates/render.php';
+					?>
+				</div>
+			<?php endif; ?>
+		<?php endif; ?>
+	</div>
+</section>
+
+<?php // ========== BLOG GRID END ========== ?>