Allow multiple choices using checkboxes

build/taxonomy/block.json

@@ -59,6 +59,10 @@
     "showLabel": {
       "type": "boolean",
       "default": true
+    },
+    "useCheckboxes": {
+      "type": "boolean",
+      "default": false
     }
   },
   "textdomain": "query-filter",

build/taxonomy/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => 'f1456d24ac8e3da497aa');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '67725197dbfd061bc1c5');

build/taxonomy/render.php

@@ -7,15 +7,15 @@
 
 $taxonomy = get_taxonomy( $attributes['taxonomy'] );
 
-if ( $block->context['query']['inherit'] ) {
-	$query_var = sprintf( 'query-%s', $attributes['taxonomy'] );
-	$page_var = 'page';
-	$base_url = str_replace( '/page/' . get_query_var( 'paged' ), '', remove_query_arg( [ $query_var, $page_var ] ) );
-} else {
+if ( empty( $block->context['query']['inherit'] ) ) {
 	$query_id = $block->context['queryId'] ?? 0;
 	$query_var = sprintf( 'query-%d-%s', $query_id, $attributes['taxonomy'] );
 	$page_var = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 	$base_url = remove_query_arg( [ $query_var, $page_var ] );
+} else {
+	$query_var = sprintf( 'query-%s', $attributes['taxonomy'] );
+	$page_var = 'page';
+	$base_url = str_replace( '/page/' . get_query_var( 'paged' ), '', remove_query_arg( [ $query_var, $page_var ] ) );
 }
 
 $terms = get_terms( [
@@ -30,13 +30,36 @@
 ?>
 
 <div <?php echo get_block_wrapper_attributes( [ 'class' => 'wp-block-query-filter' ] ); ?> data-wp-interactive="query-filter" data-wp-context="{}">
-	<label class="wp-block-query-filter-post-type__label wp-block-query-filter__label<?php echo $attributes['showLabel'] ? '' : ' screen-reader-text' ?>" for="<?php echo esc_attr( $id ); ?>">
-		<?php echo esc_html( $attributes['label'] ?? $taxonomy->label ); ?>
-	</label>
-	<select class="wp-block-query-filter-post-type__select wp-block-query-filter__select" id="<?php echo esc_attr( $id ); ?>" data-wp-on--change="actions.navigate">
-		<option value="<?php echo esc_attr( $base_url ) ?>"><?php echo esc_html( $attributes['emptyLabel'] ?: __( 'All', 'query-filter' ) ); ?></option>
-		<?php foreach ( $terms as $term ) : ?>
-			<option value="<?php echo esc_attr( add_query_arg( [ $query_var => $term->slug, $page_var => false ], $base_url ) ) ?>" <?php selected( $term->slug, wp_unslash( $_GET[ $query_var ] ?? '' ) ); ?>><?php echo esc_html( $term->name ); ?></option>
-		<?php endforeach; ?>
-	</select>
+	<?php if ( $attributes['useCheckboxes'] ) : ?>
+		<fieldset class="wp-block-query-filter__checkboxes">
+			<legend class="wp-block-query-filter__legend<?php echo $attributes['showLabel'] ? '' : ' screen-reader-text' ?>">
+				<?php echo esc_html( $attributes['label'] ?? $taxonomy->label ); ?>
+			</legend>
+			<?php foreach ( $terms as $term ) :
+				$checked = in_array( $term->slug, explode( ',', wp_unslash( $_GET[ $query_var ] ?? '' ) ), true );
+				?>
+				<span class="wp-block-query-filter__checkboxes-wrapper">
+					<input
+						type="checkbox"
+						name="<?php echo esc_attr( $query_var ); ?>"
+						value="<?php echo esc_attr( $term->slug ); ?>"
+						id="query-filter-<?php echo esc_attr( $term->slug ); ?>"
+						<?php checked( $checked ); ?>
+						data-wp-on--change="actions.navigate"
+					/>
+					<label for="query-filter-<?php echo esc_attr( $term->slug ); ?>"><?php echo esc_html( $term->name ); ?></label>
+				</span>
+			<?php endforeach; ?>
+		</fieldset>
+	<?php else : ?>
+		<label class="wp-block-query-filter-post-type__label wp-block-query-filter__label<?php echo $attributes['showLabel'] ? '' : ' screen-reader-text' ?>" for="<?php echo esc_attr( $id ); ?>">
+			<?php echo esc_html( $attributes['label'] ?? $taxonomy->label ); ?>
+		</label>
+		<select class="wp-block-query-filter-post-type__select wp-block-query-filter__select" id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( $query_var ); ?>" data-wp-on--change="actions.navigate">
+			<option value=""><?php echo esc_html( $attributes['emptyLabel'] ?: __( 'All', 'query-filter' ) ); ?></option>
+			<?php foreach ( $terms as $term ) : ?>
+				<option value="<?php echo esc_attr( $term->slug ); ?>" <?php selected( $term->slug, wp_unslash( $_GET[ $query_var ] ?? '' ) ); ?>><?php echo esc_html( $term->name ); ?></option>
+			<?php endforeach; ?>
+		</select>
+	<?php endif; ?>
 </div>

build/taxonomy/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => 'e7ba522c0e73d74a56f1', 'type' => 'module');
+<?php return array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => '5af6e4304a514d63d5ed', 'type' => 'module');