[MOOSE-350] Faceted (FacetWP) Directory

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file. The format
 on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). Each changelog entry gets prefixed with the category of the
 item (Added, Changed, Depreciated, Removed, Fixed, Security).
 
+## [2026.03] 
+- Added: FacetWP Archive blocks & support.
+
 ## [2026.02]
 - Updated: Renamed "Moose" to "ModernPress" across the project (excluding Lando configs and deployment pipelines).
 - Updated: Expected PHP version to v8.4, Node version to v24 LTS

dev/templates/block/edit.js.mustache

@@ -2,7 +2,8 @@ import { __ } from '@wordpress/i18n';
 import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import { PanelBody, TextControl } from '@wordpress/components';
 {{#isDynamicVariant}}
-import ServerSideRender from '@wordpress/server-side-render';
+import { ServerSideRender } from '@wordpress/server-side-render';
+import metadata from './block.json';
 {{/isDynamicVariant}}
 
 import './editor.pcss';
@@ -16,7 +17,7 @@ export default function Edit( { attributes, setAttributes, isSelected } ) {
 		<div { ...blockProps }>
 			{{#isDynamicVariant}}
 			<ServerSideRender
-				block="tribe/test-dynamic"
+				block={ metadata.name }
 				attributes={ attributes }
 			/>
 			{{/isDynamicVariant}}

wp-content/plugins/core/src/Blocks/Block_Base.php

@@ -70,23 +70,23 @@ public function register_core_block_variations(): void {
 	 * Additionally, the selectors are prefixed with `.editor-styles-wrapper` in the editors.
 	 */
 	public function enqueue_core_block_public_styles(): void {
-		$handle   = $this->get_block_style_handle();
+		$block    = $this->get_block_handle();
 		$path     = $this->get_block_path();
-		$args     = $this->get_asset_file_args( get_theme_file_path( "dist/blocks/$path/index.asset.php" ) );
-		$version  = $args['version'] ?? false;
+		$args     = $this->get_asset_file_args( get_theme_file_path( "dist/blocks/$path/editor.asset.php" ) );
 		$src_path = get_theme_file_path( "dist/blocks/$path/style-index.css" );
 		$src      = get_theme_file_uri( "dist/blocks/$path/style-index.css" );
 
 		if ( ! file_exists( $src_path ) ) {
 			return;
 		}
 
-		if ( ! empty( $version ) ) {
-			$src = $src . '?ver=' . $version;
-		}
-
-		wp_add_inline_style( $handle, file_get_contents( $src_path ) );
-		add_editor_style( $src );
+		wp_enqueue_style(
+			"tribe-$block",
+			$src,
+			[],
+			$args['version'] ?? false,
+			'all'
+		);
 	}
 
 	/**
@@ -97,24 +97,34 @@ public function enqueue_core_block_public_styles(): void {
 	 * Additionally, the selectors are prefixed with `.editor-styles-wrapper` in the editors.
 	 */
 	public function enqueue_core_block_editor_styles(): void {
-		$path            = $this->get_block_path();
-		$args            = $this->get_asset_file_args( get_theme_file_path( "dist/blocks/$path/editor.asset.php" ) );
-		$version         = $args['version'] ?? false;
-		$editor_src_path = get_theme_file_path( "dist/blocks/$path/editor.css" );
-		$editor_src      = get_theme_file_uri( "dist/blocks/$path/editor.css" );
-
-		if ( ! file_exists( $editor_src_path ) ) {
+		if ( ! is_admin() ) {
 			return;
 		}
 
-		if ( ! empty( $version ) ) {
-			$editor_src = $editor_src . '?ver=' . $version;
+		$block    = $this->get_block_handle();
+		$path     = $this->get_block_path();
+		$args     = $this->get_asset_file_args( get_theme_file_path( "dist/blocks/$path/editor.asset.php" ) );
+		$src_path = get_theme_file_path( "dist/blocks/$path/editor.css" );
+		$src      = get_theme_file_uri( "dist/blocks/$path/editor.css" );
+
+		if ( ! file_exists( $src_path ) ) {
+			return;
 		}
 
-		add_editor_style( $editor_src );
+		wp_enqueue_style(
+			"tribe-editor-$block",
+			$src,
+			[],
+			$args['version'] ?? false,
+			'all'
+		);
 	}
 
 	public function enqueue_core_block_editor_scripts(): void {
+		if ( ! is_admin() ) {
+			return;
+		}
+
 		$block    = $this->get_block_handle();
 		$path     = $this->get_block_path();
 		$args     = $this->get_asset_file_args( get_theme_file_path( "dist/blocks/$path/editor.asset.php" ) );
@@ -126,7 +136,7 @@ public function enqueue_core_block_editor_scripts(): void {
 		}
 
 		wp_enqueue_script(
-			"admin-$block-scripts",
+			"tribe-editor-$block",
 			$src,
 			$args['dependencies'] ?? [],
 			$args['version'] ?? false,

wp-content/plugins/core/src/Blocks/Blocks_Definer.php

@@ -48,6 +48,9 @@ public function define(): array {
 				'tribe/carousel',
 				'tribe/carousel-slide',
 				'tribe/copyright',
+				'tribe/facetwp-archive',
+				'tribe/facetwp-filter-bar',
+				'tribe/facetwp-grid',
 				'tribe/horizontal-tab',
 				'tribe/horizontal-tabs',
 				'tribe/icon-card',

wp-content/plugins/core/src/Blocks/Blocks_Subscriber.php

@@ -49,26 +49,18 @@ public function register(): void {
 			}
 		}, 10, 0 );
 
-		/**
-		 * Enqueue styles in the editor for WP Core blocks
-		 */
-		add_action( 'admin_init', function (): void {
-			foreach ( $this->container->get( Blocks_Definer::EXTENDED ) as $block ) {
-				// core block public styles
-				$block->enqueue_core_block_public_styles();
-				// core block editor-only styles
-				$block->enqueue_core_block_editor_styles();
-			}
-		}, 10, 0 );
-
 		/**
 		 * Enqueue block editor-only scripts
 		 *
 		 * Core blocks shouldn't ever have FE scripts and should only include
 		 * editor scripts in order to override default block functionality
 		 */
-		add_action( 'enqueue_block_editor_assets', function (): void {
+		add_action( 'enqueue_block_assets', function (): void {
 			foreach ( $this->container->get( Blocks_Definer::EXTENDED ) as $block ) {
+				// core block public styles
+				$block->enqueue_core_block_public_styles();
+				// core block editor-only styles
+				$block->enqueue_core_block_editor_styles();
 				// core block editor-only scripts
 				$block->enqueue_core_block_editor_scripts();
 			}

wp-content/plugins/core/src/Components/Abstracts/Abstract_Block_Controller.php

@@ -10,6 +10,12 @@ abstract class Abstract_Block_Controller extends Abstract_Controller {
 	 * @var array <mixed>
 	 */
 	protected array $attributes;
+
+	/**
+	 * @var array <mixed>
+	 */
+	protected array $context;
+
 	protected string $block_classes;
 	protected string $block_styles;
 	private Block_Animation_Attributes|false $block_animation_attributes;
@@ -18,6 +24,7 @@ abstract class Abstract_Block_Controller extends Abstract_Controller {
 
 	public function __construct( array $args = [] ) {
 		$this->attributes                 = $args['attributes'] ?? [];
+		$this->context                    = $args['context'] ?? [];
 		$this->block_classes              = $args['block_classes'] ?? '';
 		$this->block_styles               = $args['block_styles'] ?? '';
 		$this->block_animation_attributes = $this->attributes ? new Block_Animation_Attributes( $this->attributes ) : false;

wp-content/plugins/core/src/Components/Blocks/FacetWP_Archive_Controller.php

@@ -0,0 +1,19 @@
+<?php declare(strict_types=1);
+
+namespace Tribe\Plugin\Components\Blocks;
+
+use Tribe\Plugin\Components\Abstracts\Abstract_Block_Controller;
+
+class FacetWP_Archive_Controller extends Abstract_Block_Controller {
+
+	protected string $filter_bar_position;
+
+	public function __construct( array $args = [] ) {
+		parent::__construct( $args );
+
+		$this->filter_bar_position = $this->attributes['filterBarPosition'] ?? 'top';
+
+		$this->block_classes .= " b-facetwp-archive--filter-bar-{$this->filter_bar_position}";
+	}
+
+}

wp-content/plugins/core/src/Components/Blocks/FacetWP_Filter_Bar_Controller.php

@@ -0,0 +1,154 @@
+<?php declare(strict_types=1);
+
+namespace Tribe\Plugin\Components\Blocks;
+
+use Tribe\Plugin\Components\Abstracts\Abstract_Block_Controller;
+
+class FacetWP_Filter_Bar_Controller extends Abstract_Block_Controller {
+
+	/**
+	 * @var array <mixed>
+	 */
+	protected array $facets;
+	protected string $filter_bar_position;
+
+	/**
+	 * Facet types that are not wrapped in accordions when filter bar position is sidebar.
+	 *
+	 * @var array <string>
+	 */
+	protected array $accordion_excluded_types = [ 'search', 'reset' ];
+
+	/**
+	 * Facet types that should not have a label displayed.
+	 *
+	 * @var array <string>
+	 */
+	protected array $no_label_types = [ 'reset' ];
+
+	public function __construct( array $args = [] ) {
+		parent::__construct( $args );
+
+		$this->facets              = $this->attributes['facets'] ?? [];
+		$this->filter_bar_position = $this->context['tribe/facetwp-archive/filterBarPosition'] ?? 'top';
+	}
+
+	/**
+	 * Get the facets array with display labels.
+	 */
+	public function get_facets(): array {
+		return array_map( static function ( array $facet ): array {
+			$facet['display_label'] = $facet['displayLabel'] ?? $facet['label'];
+
+			return $facet;
+		}, $this->facets );
+	}
+
+	/**
+	 * Get the filter bar position.
+	 */
+	public function get_filter_bar_position(): string {
+		return $this->filter_bar_position;
+	}
+
+	/**
+	 * Whether this facet should have a label displayed.
+	 *
+	 * @param array $facet
+	 */
+	public function should_hide_facet_label( array $facet ): bool {
+		$type = strtolower( $facet['type'] ?? '' );
+
+		return in_array( $type, $this->no_label_types, true );
+	}
+
+	/**
+	 * Whether this facet should be wrapped in a details/summary accordion (sidebar, excluding $accordion_excluded_types).
+	 *
+	 * @param array $facet
+	 */
+	public function should_wrap_facet_in_accordion( array $facet ): bool {
+		if ( $this->get_filter_bar_position() !== 'sidebar' ) {
+			return false;
+		}
+
+		$type = strtolower( $facet['type'] ?? '' );
+
+		return ! in_array( $type, $this->accordion_excluded_types, true );
+	}
+
+	/**
+	 * Grid slot for top filter bar layout: facet-1, facet-2, facet-3, search, or reset.
+	 * Based on facet type and order in the facets list (not DOM order).
+	 *
+	 * @param array $current_facet
+	 */
+	public function get_grid_slot( array $current_facet ): ?string {
+		$current_facet_type = strtolower( $current_facet['type'] ?? '' );
+
+		if ( $current_facet_type === 'search' ) {
+			return 'search';
+		}
+
+		if ( $current_facet_type === 'reset' ) {
+			return 'reset';
+		}
+
+		$content_index = 0;
+		foreach ( $this->get_facets() as $facet ) {
+			$facet_type = strtolower( $facet['type'] ?? '' );
+
+			/**
+			 * The "top" layout doesn't wrap these facet types in an accordion, but
+			 * we can use the same types to determine if the current facet should
+			 * receive a grid slot.
+			 */
+			if ( in_array( $facet_type, $this->accordion_excluded_types, true ) ) {
+				continue;
+			}
+
+			if ( ( $current_facet['slug'] ?? '' ) === ( $facet['slug'] ?? '' ) ) {
+				/**
+				 * We are limiting the grid to 3 facets (that aren't the "search"
+				 * or "reset" facet types) for the "top" layout.
+				 */
+				if ( $content_index >= 3 ) {
+					return null;
+				}
+
+				return 'facet-' . ( $content_index + 1 );
+			}
+			$content_index++;
+		}
+
+		return null;
+	}
+
+	/**
+	 * HTML attributes string for a facet wrapper (class and optional data-grid-slot).
+	 *
+	 * @param array $facet
+	 */
+	public function get_facet_wrapper_attributes( array $facet ): string {
+		$classes = [ 'b-facetwp-filter-bar__facet' ];
+
+		if ( $this->should_wrap_facet_in_accordion( $facet ) ) {
+			$classes[] = 'b-facetwp-filter-bar__facet--accordion';
+		}
+
+		$attrs = [ 'class' => implode( ' ', $classes ) ];
+
+		$grid_slot = $this->get_grid_slot( $facet );
+
+		if ( $grid_slot !== null ) {
+			$attrs['data-grid-slot'] = $grid_slot;
+		}
+
+		return implode( ' ', array_map(
+			static fn ( string $key, string $value ): string => $key . '="' . esc_attr( $value ) . '"',
+			array_keys( $attrs ),
+			$attrs
+		) );
+	}
+
+}