Enhanced query filter blocks [rebased and updated]

build/post-type/block.json

@@ -56,6 +56,14 @@
     "showLabel": {
       "type": "boolean",
       "default": true
+    },
+    "displayType": {
+      "type": "string",
+      "default": "select"
+    },
+    "layoutDirection": {
+      "type": "string",
+      "default": "vertical"
     }
   },
   "textdomain": "query-filter",

build/post-type/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' => 'ad8227c21a432607ccaf');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '9f82697921081e520599');

build/post-type/render.php

@@ -2,6 +2,8 @@
 global $wp_query;
 
 $id = 'query-filter-' . wp_generate_uuid4();
+$display_type = $attributes['displayType'] ?? 'select';
+$layout_direction = $attributes['layoutDirection'] ?? 'vertical';
 
 if ( $block->context['query']['inherit'] ) {
 	$query_var = 'query-post_type';
@@ -45,10 +47,50 @@
 	<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'] ?? __( 'Content Type', 'query-filter' ) ); ?>
 	</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">
+
+	<?php if ( $display_type === 'select' ) : ?>
+		<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 ( $post_types as $post_type ) : ?>
 			<option value="<?php echo esc_attr( add_query_arg( [ $query_var => $post_type->name, $page_var => false ], $base_url ) ) ?>" <?php selected( $post_type->name, wp_unslash( $_GET[ $query_var ] ?? '' ) ); ?>><?php echo esc_html( $post_type->label ); ?></option>
 		<?php endforeach; ?>
-	</select>
+		</select>
+	<?php elseif ( $display_type === 'radio' ) : ?>
+		<div class="wp-block-query-filter-post-type__radio-group wp-block-query-filter__radio-group<?php echo $layout_direction === 'horizontal' ? ' horizontal' : ''; ?>">
+			<label>
+				<input type="radio" id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( $id ); ?>" value="<?php echo esc_attr( $base_url ); ?>" data-wp-on--change="actions.navigate" <?php checked( empty( $_GET[ $query_var ] ) ); ?> />
+				<?php echo esc_html( $attributes['emptyLabel'] ?: __( 'All', 'query-filter' ) ); ?>
+			</label>
+			<?php foreach ( $post_types as $post_type ) : ?>
+				<label>
+					<input type="radio" name="<?php echo esc_attr( $id ); ?>" value="<?php
+						echo esc_attr( add_query_arg( [ $query_var => $post_type->name, $page_var => false ], $base_url ) );
+					?>" data-wp-on--change="actions.navigate" <?php checked( $post_type->name, wp_unslash( $_GET[ $query_var ] ?? '' ) ); ?> />
+					<?php echo esc_html( $post_type->label ); ?>
+				</label>
+			<?php endforeach; ?>
+		</div>
+	<?php elseif ( $display_type === 'checkbox' ) : ?>
+		<div class="wp-block-query-filter-post-type__checkbox-group wp-block-query-filter__checkbox-group<?php echo $layout_direction === 'horizontal' ? ' horizontal' : ''; ?>">
+			<?php
+			$selected_types = isset( $_GET[ $query_var ] ) ? explode( ',', wp_unslash( $_GET[ $query_var ] ) ) : [];
+			?>
+			<?php foreach ( $post_types as $post_type ) : ?>
+				<?php
+				$is_checked   = in_array( $post_type->name, $selected_types, true );
+				$new_types    = $is_checked
+					? array_diff( $selected_types, [ $post_type->name ] )
+					: array_merge( $selected_types, [ $post_type->name ] );
+				$new_types = array_filter( $new_types );
+				$checkbox_url = empty( $new_types )
+					? $base_url
+					: add_query_arg( [ $query_var => implode( ',', $new_types ), $page_var => false, ], $base_url );
+				?>
+				<label>
+					<input type="checkbox" value="<?php echo esc_attr( $checkbox_url ); ?>" data-wp-on--change="actions.navigate" <?php checked( $is_checked ); ?> />
+					<?php echo esc_html( $post_type->label ); ?>
+				</label>
+			<?php endforeach; ?>
+		</div>
+	<?php endif; ?>
 </div>

build/taxonomy/block.json

@@ -59,6 +59,14 @@
     "showLabel": {
       "type": "boolean",
       "default": true
+    },
+    "displayType": {
+      "type": "string",
+      "default": "select"
+    },
+    "layoutDirection": {
+      "type": "string",
+      "default": "vertical"
     }
   },
   "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' => '2f97bf84853a01e2ed52');