I want to give different layout options to display the card block(Class="card"). I want to create style1.php, style2.php as different styles that will have different layouts and call them in the $post_output. The style name can be set using "customStylelayout". Can anyone suggest the best way to achieve different layout options?
<?php
function register_latest_post_ps() {
register_block_type("duib/project-showcase", [ "render_callback" => "render_latest_post_ps"
]);
}
add_action("plugins_loaded", "register_latest_post_ps");
function render_latest_post_ps( $attributes, $content ) {
$customStylelayout = "";
if (isset($attributes["customClass"])) { $customClass = $attributes["customStylelayout "];}
$posts_output = '<div style="max-width: 100%;" class=" '. $customClass .' ">';
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$latest_posts1 = wp_get_recent_posts( ["post_type" => "project_showcase", "numberposts" => 5, "post_status" => "publish", 'paged' => $paged ]);
$posts_output .= '<div id="" class="row"> <div class="col-12"> ';
if(empty($latest_posts1)){
return "<p>No posts</p>";
}
foreach($latest_posts1 as $post ) {
$post_id = $post["ID"];
$ps_cname = get_post_meta( $post_id, "_ps_cname", true );
$ps_date = get_post_meta( $post_id, "_ps_date", true );
$ps_description = get_post_meta( $post_id, "_ps_description", true );
$ps_category = get_post_meta( $post_id, "_ps_category", true );
$ps_url = get_post_meta( $post_id, "_ps_url", true );
$medialink = get_post_meta( $post_id, "p_mediaURL", true );
$link = get_permalink($post_id);
$post_thumbnail = get_the_post_thumbnail_url( $post_id, "full" );
$posts_output .= ' <div class="card my-3">
<div class="card-body">
<div class="row">
<div class="col-3"><strong>Client name: </strong><br/>' . $ps_cname .'</div>
<div class="col-3"><strong>Date: </strong><br/>' . $ps_date .'</div>
<div class="col-3"><strong>Category: </strong><br/>' . $ps_category .'</div>
<div class="col-3"><strong>Website: </strong><br/>' . $ps_url .'</div>
</div>
<div class="row my-3">
<div class="col-3"><img class="img-fluid" src="' . $medialink .'" /></div>
<div class="col-9">' . $ps_description .'</div>
<div class="col-12"><a href="'. $link .'" >View</a></div>
</div>
</div>
</div>
';
}
$posts_output .= '</div>';
?>
<?php
return $posts_output ;
}