feat: add tech-tools block

wp-content/themes/somoscuatro/src/blocks/tech-tools/block.json

@@ -0,0 +1,16 @@
+{
+	"name": "acf/tech-tools",
+	"title": "Tech Tools",
+	"description": "Shows a list of capabilities and related technologies and tools.",
+	"category": "somoscuatro",
+	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' class='w-6 h-6'> <path fill-rule='evenodd' d='M4.848 2.771A49.144 49.144 0 0 1 12 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97a48.901 48.901 0 0 1-3.476.383.39.39 0 0 0-.297.17l-2.755 4.133a.75.75 0 0 1-1.248 0l-2.755-4.133a.39.39 0 0 0-.297-.17 48.9 48.9 0 0 1-3.476-.384c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97ZM6.75 8.25a.75.75 0 0 1 .75-.75h9a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H7.5Z' clip-rule='evenodd' /> </svg>",
+	"acf": {
+		"mode": "edit",
+		"renderCallback": "Somoscuatro\\Theme\\Blocks\\Tech_Tools\\Tech_Tools::render_callback"
+	},
+	"supports": {
+		"anchor": true,
+		"mode": false
+	},
+	"align": "full"
+}

wp-content/themes/somoscuatro/src/blocks/tech-tools/class-tech-tools.php

@@ -0,0 +1,123 @@
+<?php
+/**
+ * Block's main functionality methods.
+ *
+ * @package somoscuatro-theme
+ */
+
+declare(strict_types=1);
+
+namespace Somoscuatro\Theme\Blocks\Tech_Tools;
+
+use Somoscuatro\Theme\Blocks\Block;
+use Somoscuatro\Theme\Helpers\Setup;
+
+/**
+ * Block main functionality.
+ */
+class Tech_Tools extends Block {
+
+	use Setup;
+
+	/**
+	 * The prefix used for ACF blocks.
+	 *
+	 * @var string
+	 */
+	protected static $acf_block_prefix = 'block_tech_tools';
+
+	/**
+	 * Registers activation hook callback.
+	 */
+	public static function init(): void {
+		add_filter( 'somoscuatro_theme_block_context', __CLASS__ . '::set_custom_context', 10, 2 );
+		parent::init();
+	}
+
+	/**
+	 * Gets the ACF Block fields.
+	 *
+	 * @return array The ACF Block fields.
+	 */
+	public static function get_acf_fields(): array {
+		return array(
+			'key'      => 'group_' . self::$acf_block_prefix,
+			'title'    => __( 'Block: Tech Tools', 'somoscuatro-theme' ),
+			'fields'   => array(
+				array(
+					'key'                  => 'field_' . self::$acf_block_prefix . '_tech_tools_areas',
+					'label'                => 'Tech Tools Areas',
+					'name'                 => self::$acf_block_prefix . '_tech_tools_areas',
+					'type'                 => 'taxonomy',
+					'required'             => true,
+					'taxonomy'             => 'tech_tools_area',
+					'add_term'             => 0,
+					'return_format'        => 'object',
+					'field_type'           => 'multi_select',
+					'bidirectional'        => 0,
+					'multiple'             => 0,
+					'allow_null'           => 0,
+					'bidirectional_target' => array(),
+				),
+			),
+			'location' => array(
+				array(
+					array(
+						'param'    => 'block',
+						'operator' => '==',
+						'value'    => 'acf/tech-tools',
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Sets a custom context for this specific block.
+	 *
+	 * @param array $context The Timber context.
+	 * @param array $block The Gutenberg block.
+	 *
+	 * @return array The modified Timber context.
+	 */
+	public static function set_custom_context( array $context, array $block ): array {
+		if ( 'acf/tech-tools' !== $block['name'] ) {
+			return $context;
+		}
+
+		$tech_tools_logos = get_posts(
+			array(
+				'posts_per_page' => -1,
+				'post_type'      => 'tech-tool',
+				'tax_query'      => array(
+					array(
+						'taxonomy' => 'tech_tools_area',
+						'field'    => 'object',
+						'terms'    => wp_list_pluck( $context['tech_tools_areas'], 'term_id' ),
+					),
+				),
+			)
+		);
+
+		$context['tech_tools_logos'] = array_map(
+			function( $tech_tools_logo ) {
+				return array(
+					'id'               => $tech_tools_logo->ID,
+					'title'            => $tech_tools_logo->post_title,
+					'image'            => acf_get_attachment( get_post_thumbnail_id( $tech_tools_logo->ID ) )['url'] ?? '',
+					'tech_tools_areas' => htmlspecialchars( wp_json_encode( wp_list_pluck( get_the_terms( $tech_tools_logo->ID, 'tech_tools_area' ), 'slug' ) ), ENT_QUOTES, 'UTF-8' ),
+				);
+			},
+			$tech_tools_logos
+		);
+
+		return $context;
+	}
+
+	/**
+	 * Register block assets.
+	 */
+	public static function register_assets(): void {
+		wp_register_script( 'alpine-defer', 'https://unpkg.com/[email protected]/dist/cdn.min.js', array(), '3.5.0', false );
+	}
+}

wp-content/themes/somoscuatro/src/blocks/tech-tools/template.twig

@@ -0,0 +1,24 @@
+<section class="container flex gap-20 py-20" x-data="{ selected: 'all' }">
+	<div class="flex flex-col w-1/4 gap-9">
+		<h2 class="text-lg font-medium uppercase">{{ __('Capabilities', 'somoscuatro-theme') }}</h2>
+		<div class="flex flex-wrap gap-2">
+			<div class="px-3 py-1 font-medium rounded-lg cursor-pointer w-fit h-fit" @click="selected = 'all'" :class="selected == 'all' ? 'bg-crayola-200' : 'bg-anti-flash-white-200'">
+				{{ __( 'All', 'somoscuatro-theme' ) }}
+			</div>
+			{% for tech_tools_area in tech_tools_areas %}
+				<div class="px-3 py-1 font-medium rounded-lg cursor-pointer w-fit h-fit" @click="selected = '{{ tech_tools_area.slug }}'" :class="selected == '{{ tech_tools_area.slug}}' ? 'bg-crayola-200' : 'bg-anti-flash-white-200'">
+					{{ tech_tools_area.name }}
+				</div>
+			{% endfor %}
+		</div>
+	</div>
+	<div class="flex flex-col w-3/4 gap-9">
+		<h2 class="text-lg font-medium uppercase">{{ __('Techs & Tools', 'somoscuatro-theme') }}</h2>
+		<div class="grid grid-cols-7">
+			{% for item in tech_tools_logos %}
+				<img id="{{ item.id }}" src="{{ item.image }}" width="100" height="100" :class="selected == 'all' || {{ item.tech_tools_areas }}.includes(selected) ? '' : 'opacity-20 grayscale'" title="{{ item.title }}">
+			{% endfor %}
+		</div>
+	</div>
+</section>
+{{ enqueue_script('alpine-defer') }}