4WP QL Blocks

WordPress plugin that extends Query Loop blocks with Search and Taxonomy filtering capabilities.

Features

Search Block Integration

• Automatically filters Query Loop blocks based on Search block input
• Resets Query Loop to initial state when search is cleared
• Works with core Search block

Taxonomy Filter Block

• Custom block for filtering Query Loop by taxonomy terms
• Three display styles: Dropdown, Buttons, and Checkboxes
• Supports single or multiple term selection
• Highlights selected terms on page refresh
• Automatically filters Query Loop blocks when selection changes

Installation

1. Upload the plugin to /wp-content/plugins/4wp-ql-blocks/
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Build the assets: npm install && npm run build

Development

# Install dependencies
npm install

# Build for production
npm run build

# Start development mode with watch
npm start

Usage

Search Block Integration

Simply add a Search block and a Query Loop block on the same page. The Query Loop will automatically filter results based on the search query.

Taxonomy Filter Block

1. Add the “4WP QL Taxonomy Filter” block to your page
2. Select a taxonomy (e.g., Categories, Tags, or custom taxonomy)
3. Choose a display style (Dropdown, Buttons, or Checkboxes)
4. Optionally enable “Show Count” to display post counts
5. Optionally enable “Allow Multiple Selection” for checkboxes
6. Add a Query Loop block – it will automatically filter based on the taxonomy selection

Block Attributes

• Taxonomy: The taxonomy to filter by (default: category)
• Query ID: Optional – link to a specific Query Loop block by its queryId
• Display Style: Dropdown, Buttons, or Checkboxes
• Show Count: Display the number of posts for each term
• Allow Multiple Selection: Allow selecting multiple terms (checkboxes only)

Technical Details

• Namespace: ForWP\QLBlocks
• Requires PHP 8.0+
• Requires WordPress 6.0+
• Built with @wordpress/scripts