News Slider Block Template

newsslider.php

<?php

/**
 * News Slider Block Template.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'newsslider-' . $block['id'];
if ( ! empty( $block['anchor'] ) ) {
	$id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'newsslider';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assing defaults.
$title			= get_field( 'block_title' ) ?: 'Setion/Block Title';
$term			= get_field( 'category' ) ?: 'Select the category to show posts from';
$number			= get_field( 'quantity' ) ?: 'Select the number of posts to show';
$background		= get_field( 'background_color' );

?>
<div id="<?php echo esc_attr( $id ); ?>" class="newsBlock <?php echo esc_attr( $className ); ?>">
			
			<div class="grid-x">
				<?php
					query_posts( array(
						'category'		=> array( $term ),
						'posts_per_page'	=> $number,
						'orderby'			=> 'date',
						'order'				=> 'DESC',
					) );
				?>
						
				<div class="cell">
					<div class="glider-contain multiple">
						<h3><?php echo esc_html( $title ); ?></h3>
						<button role="button" aria-label="Previous" class="glider-prev"><?php svg_icon( 'left' ); ?></button>

						<div class="glider">
							<?php while ( have_posts() ) : the_post(); ?>
							
							<div class="newsItem">
								<a href="<?php the_permalink(); ?>">
									<div class="home2cellimg">
										<?php $backgroundimg = wp_get_attachment_image_src( the_post_thumbnail( 'blog-thumb' ) ); ?>
									</div>
								</a>
								<a href="<?php echo esc_html( get_permalink() ); ?>">
									<h4 class="blog-title"><?php the_title(); ?></h4>
								</a>
							</div>

							<?php endwhile; ?>
							
						</div>
						<button role="button" aria-label="Next" class="glider-next"><?php svg_icon( 'right' ); ?></button>
					</div>
					<div id="dots" class="glider-dots"></div>
					<h2>Category Selected: <?php echo get_field( 'category' ); ?></h2>
				</div>
				
			</div>
	<?php
		wp_reset_postdata();
	?>
	<style type="text/css">
		#<?php echo $id; ?> {
			background: <?php echo $background; ?>;
		}
	</style>
</div>