Resource Feed

index.blade.php

@php
    /**
    * @var $wrapper_attributes
    * @var $posts
    * @var $include_filters
    * @var $layout
    */
@endphp

<div {!! $wrapper_attributes !!}>

    @if ($include_filters && class_exists('FacetWP'))

        <div class="wp-block-ssm-resource-feed__filters mb-12.5 md:mb-17.5">

            <div class="relative flex flex-wrap gap-5 md:gap-7.5">

                <div class="facet-wrap">

                    {!! facetwp_display('facet', 'resource_language') !!}

                </div>

                <div class="facet-wrap">

                    {!! facetwp_display('facet', 'resource_type') !!}

                </div>

            </div>

        </div>

    @endif

    <div class="grid md:grid-cols-2 lg:[&.has-2-col]:grid-cols-2 lg:[&.has-3-col]:grid-cols-3 lg:[&.has-4-col]:grid-cols-3 xl:[&.has-4-col]:grid-cols-4 gap-9{!! $include_filters ? ' facetwp-template' : '' !!}{!! $layout != '2-col' ? ' has-' . $layout : '' !!}">

        @if (!empty($posts))

            @foreach ( $posts as $post_id )

                @php
                    $title        = get_the_title($post_id);
                    $description  = get_field('resource_description', $post_id);

                    $type         = get_field('resource_type', $post_id) ?: null;
                    $language     = get_field('resource_language', $post_id) ?: null;
                    $post_tags    = [$type, $language];

                    $file         = get_field('resource_file', $post_id);

                    $media_type   = get_field('resource_media', $post_id); // oembed, external
                    $video_oembed = get_field('resource_video_oembed', $post_id);
                    $thumbnail_image    = get_field('resource_thumbnail_image', $post_id);
                    $external_video_url = get_field('resource_video_url', $post_id);

                    if ($media_type === 'oembed' && $video_oembed) {
                        preg_match('/src="([^"]+)"/', $video_oembed, $matches);
                        $video_src = $matches[1] ?? '';
                    }

                    $video_url = ($media_type === 'oembed' && $video_oembed) ? $video_src : $external_video_url;

                    $modal_tags = [];

                    if (!empty($post_tags)) {
                        foreach ($post_tags as $tag) {
                            $modal_tags[] = [
                                'title' => $tag->name ?? '',
                                'link'  => '#'
                            ];
                        }
                    }

                    if( isset( $type->slug ) ) {

                        if ($type->slug === 'download') {

                            $modal_data = [
                                'title'       => $title,
                                'description' => $description,
                                'file'        => $file ? $file['url'] : '#',
                                'tags'        => $modal_tags,
                                'bg'          => 'gold',
                                'type'        => 'bg-light'
                            ];

                            $modal_data_json = htmlspecialchars(json_encode($modal_data));

                        } else {

                            $modal_data = [
                                'title'       => $title,
                                'description' => $description,
                                'tags'        => $modal_tags,
                                'bg'          => 'orange',
                                'type'        => 'bg-light',
                                'video'       => $video_url,
                            ];

                            $modal_data_json = htmlspecialchars(json_encode($modal_data));
                        }

                    }

                    $is_long_description = mb_strlen(strip_tags($description)) >= 140;
                @endphp

                @if (!empty($type) && isset( $type->slug ) && $type->slug === 'download')

                    <div class="wp-block-ssm-resource-feed__item @container overflow-hidden flex flex-col group relative has-gold-background-color bg-light">

                        @if ($is_long_description)
                            <a href="#" class="js-create-modal !no-underline" data-info='{!! $modal_data_json !!}' aria-label="open popup">
                        @endif

                            <div class="flex-col flex grow px-6 py-6 pb-7 md:px-9 md:pt-8 md:pb-11 relative is-layout-flow has-[.wp-block-video]:md:pb-8">

                                @if ($post_tags)

                                    <div class="flex gap-3 flex-wrap mb-4.5 md:mb-6">

                                        @foreach ($post_tags as $tag)

                                            @if (!empty($tag))
                                                <span class="border-2 border-white px-3.5 md:px-5 py-1.5 md:py-2.5 rounded-4xl text-white uppercase text-[0.75rem] md:text-sm font-bold tracking-[0.06rem] md:tracking-[0.07rem] group-[.has-cream-background-color]:border-black group-[.has-cream-background-color]:text-black">{!! $tag->name !!}</span>
                                            @endif

                                        @endforeach

                                    </div>

                                @endif

                                <div class="wp-block-ssm-resource-feed__content dark:text-white text-brown-dark flex flex-col h-full mt-0 gap-4.5">

                                    <h4 class="wp-block-heading">{!! $title !!}</h4>

                                    @if ($description)

                                        <p class="wp-block-ssm-resource-feed__description text-base mb-auto">{!! $description !!}

                                            @if ($is_long_description)
                                                <span class="read-more uppercase font-bold ml-1 tracking-[0.1rem] underline hover:no-underline! underline-offset-4 decoration-2">Read More</span>
                                            @endif

                                        </p>

                                    @endif

                                    @if ($file)

                                        <div class="wp-block-buttons mt-3">
                                            
                                            <div class="wp-block-button">
                                                
                                                @if ($is_long_description)
                                                    <span class="wp-block-button__link">Download</span>
                                                @else 
                                                    <a download href="{!! $file['url'] !!}" class="wp-block-button__link">Download</a>
                                                @endif
                                            
                                            </div>
                                        
                                        </div>

                                    @endif

                                </div>

                            </div>

                        @if ($is_long_description)
                            </a>
                        @endif

                    </div>

                @else

                    <div class="wp-block-ssm-resource-feed__item @container overflow-hidden flex flex-col group has-orange-background-color bg-light">

                        <a href="#" class="js-create-modal !no-underline" data-info='{!! $modal_data_json !!}' aria-label="Open modal">

                            <div class="flex-col flex grow px-6 py-6 pb-7 md:px-9 md:pt-8 md:pb-11 relative is-layout-flow has-[.wp-block-video]:md:pb-8">

                                @if ($post_tags)

                                    <div class="flex gap-3 flex-wrap mb-4.5 md:mb-6">

                                        @foreach ($post_tags as $tag)

                                            @if (!empty($tag))
                                                <span class="border-2 border-white px-3.5 md:px-5 py-1.5 md:py-2.5 rounded-4xl text-white uppercase text-[0.75rem] md:text-sm font-bold tracking-[0.06rem] md:tracking-[0.07rem] group-[.has-cream-background-color]:border-black group-[.has-cream-background-color]:text-black">{!! $tag->name !!}</span>
                                            @endif

                                        @endforeach

                                    </div>

                                @endif

                                <div class="mt-0 mb-5">

                                    <div class="wp-block-ssm-resource-feed__video overflow-hidden relative flex items-center justify-center after:absolute after:top-1/2 after:-translate-y-1/2 after:left-1/2 after:-translate-x-1/2 after:content-[''] after:aspect-square after:w-18 after:md:w-20 after:block after:bg-[url('../images/icon-play.svg')] after:bg-no-repeat after:bg-contain">

                                        @if ($thumbnail_image && isset( $thumbnail_image['ID'] ))

                                            @if ( function_exists('ipq_get_theme_image') )
                                                {!!
                                                    ipq_get_theme_image( $thumbnail_image['ID'],
                                                        [ [ 545, 345, true ], [ 1090, 690, true ], [ 2180, 1380, true ] ],
                                                        [
                                                            'class' => 'aspect-331/210 w-full object-cover transition-transform hover:scale-110 duration-700',
                                                            'alt'   => $thumbnail_image['alt'] ?: get_the_title($post_id),
                                                        ]
                                                    );
                                                !!}
                                            @endif

                                        @endif

                                    </div>

                                </div>

                                <div class="wp-block-ssm-resource-feed__content dark:text-white text-brown-dark flex flex-col h-full mt-0 gap-4.5">

                                    <h4 class="wp-block-heading">{!! $title !!}</h4>

                                </div>

                            </div>

                        </a>

                    </div>

                @endif

            @endforeach

        @else

            <p>No resources were found.</p>

        @endif

    </div>

</div>

ResourceFeed.php

<?php

namespace App\Blocks;
use App\View\Composers\SSM;

class ResourceFeed extends Block
{
    public const QUERY_LATEST = 'latest';
    public const QUERY_CURATED = 'curated';
    public const QUERY_BY_CATEGORY = 'by_resource_type';

    protected function prepareData($attributes, $content): array
    {
        $query              = $attributes['queryType'] ?? self::QUERY_LATEST;
        $number_posts       = $attributes['numberOfPosts'] ?? -1;
        $curated_posts      = $attributes['curatedPosts'] ?? [];
        $curated_terms      = $attributes['curatedTerms'] ?? [];
        $is_show_filters    = $attributes['isShowFilters'] ?? false;
        $layout             = $attributes['layout'] ?? '3-col';

        $args = [
            'data_source'       => 'resource',
            'query'             => $query,
            'taxonomy_slug'     => 'taho_resource_type',
            'curated_terms'     => $curated_terms,
            'number_posts'      => $query === self::QUERY_CURATED ? -1 : $number_posts,
            'curated_posts'     => $curated_posts,
            'excluded_posts'    => [get_the_ID()],
            'prefix'            => 'taho'
        ];

        $is_empty_selection = ($query === self::QUERY_CURATED && empty($curated_posts)) ||
            ($query === self::QUERY_BY_CATEGORY && empty($curated_terms)) ||
            ($query !== self::QUERY_CURATED && $number_posts === 0);

        if ($is_show_filters && $query === self::QUERY_LATEST) {
            $extra_args = ['facetwp' => true];
        }

        $posts = $is_empty_selection ? [] : SSM::getPosts($args, $extra_args ?? []);

        $data = [
            'wrapper_attributes'    => get_block_wrapper_attributes(),
            'posts'                 => $posts,
            'include_filters'       => $is_show_filters && $query === self::QUERY_LATEST,
            'layout'                => $layout,
        ];

        return $data;
    }
}