Loopsi – Advanced Gutenberg Query Blocks

Description

Loopsi – Advanced Gutenberg Query Blocks helps you build flexible post grids and lists in the WordPress block editor. Show posts, pages, or any public custom post type with taxonomy filters, meta queries, grid or list layouts, and modern pagination — without writing PHP.

What you can build

  • Post grids and lists for blogs, news, resources, and portfolios
  • Custom post type listings (events, team, products, listings, and more)
  • Filtered loops by taxonomy terms and custom field / meta values
  • Grid or list layouts with 1–6 columns
  • Numbered pagination, Load More, or infinite scroll
  • Toggle title, thumbnail, excerpt, author, and read more on each card
  • Optional render caching with automatic invalidation when content changes

Built for the block editor

Insert the Loopsi Posts block, configure the query and layout in the sidebar, and preview results with server-side rendering in the editor.

Source code

build/index.js, `build/index.css`, `build/index-rtl.css`, `build/style-index.css`, and `build/style-index-rtl.css` are generated by `@wordpress/scripts`, which uses webpack. The right-to-left stylesheets are generated from the same source stylesheets. The human-readable source for those files is included in this plugin, in the `src` directory.
  • src/index.js registers the block.
  • src/blocks/posts-query/edit.js is the block editor script compiled into build/index.js.
  • src/blocks/posts-query/editor.scss is compiled into build/index.css.
  • src/blocks/posts-query/style.scss is compiled into build/style-index.css.

To regenerate the files in build from that source:

  1. Install Node.js.
  2. In the plugin directory, run npm install.
  3. Run npm run build.

The node_modules directory is created only on the machine where you build. Do not include it in the plugin zip.

Blocks

This plugin provides 1 block.

  • Loopsi Posts Display WordPress posts using customizable queries, layouts, and filters.

Installation

For site owners (installing a release ZIP):

  1. Upload and activate the plugin through the WordPress Plugins screen.
  2. No npm or Node.js is required on the server.

For developers (working from source):

  1. Clone or copy the plugin into /wp-content/plugins/loopsi-blocks.
  2. Run composer install --no-dev in the plugin directory.
  3. Run npm install && npm run build to compile block assets.
  4. Activate the plugin in WordPress.

To create a distribution ZIP (includes the readable src directory, and excludes node_modules):

npm run build && npm run plugin-zip

FAQ

Why is node_modules so large?

The node_modules directory is a local build dependency only (often 300MB+). It must not be uploaded to WordPress.org or production sites. The readable block source in src is included in the release package. Use npm run plugin-zip to generate that package.

Why do I need to run Composer and npm?

Only when developing from source. End users installing the release ZIP do not need Composer or npm.

Why is my load more button not showing?

Ensure you have more published posts than the selected “Posts Per Page” value.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Loopsi – Advanced Gutenberg Query Blocks” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.1

  • Renamed plugin to Loopsi – Advanced Gutenberg Query Blocks for clearer search and discoverability.
  • Improved directory tags and feature-focused readme copy.

1.0.0

  • Initial release.