Title: Dynamic Post Grid – Gutenberg Blocks, Shortcodes & Elementor Addon Author: Maidul Published: 13 Maggu 2024 Last modified: 19 Yulyu 2026 --- Search plugins ![](https://ps.w.org/dynamic-post-grid-elementor-addon/assets/banner-772x250.png? rev=3088869) ![](https://ps.w.org/dynamic-post-grid-elementor-addon/assets/icon-256x256.png?rev =3088867) # Dynamic Post Grid – Gutenberg Blocks, Shortcodes & Elementor Addon By [Maidul](https://profiles.wordpress.org/maidulcu/) [Download](https://downloads.wordpress.org/plugin/dynamic-post-grid-elementor-addon.1.9.0.zip) * [Details](https://kab.wordpress.org/plugins/dynamic-post-grid-elementor-addon/#description) * [Reviews](https://kab.wordpress.org/plugins/dynamic-post-grid-elementor-addon/#reviews) * [Installation](https://kab.wordpress.org/plugins/dynamic-post-grid-elementor-addon/#installation) * [Development](https://kab.wordpress.org/plugins/dynamic-post-grid-elementor-addon/#developers) [Support](https://wordpress.org/support/plugin/dynamic-post-grid-elementor-addon/) ## Description Dynamic Post Grid is a lightweight, SEO-friendly plugin for displaying posts, pages, custom post types, and WooCommerce products in beautiful grid, masonry, list, and slider layouts. It works three ways: as a Gutenberg block, a standalone Shortcode Builder (no page builder needed), and an Elementor widget. **What makes this plugin different?** Unlike other grid plugins that lock you into fixed templates, Dynamic Post Grid uses a block-based layout builder. Each grid is a JSON document describing individual blocks — making layouts serializable, exportable, shareable, and composable. Combined with transient caching, REST API, and Abilities API, it’s built for performance and developer flexibility. ### Core Features * **Elementor Widget** — Drag-and-drop post/product grids directly inside Elementor with 7 layout styles and full styling controls. * **Gutenberg Block** — Native Block Editor integration with layout selector and attribute overrides. * **Standalone Shortcode Builder** — Build custom post grids with a visual drag- and-drop block editor. No Elementor required. * **4 Layout Modes** — Grid, Masonry, List, and Slider layouts with responsive columns. * **14 Block Types** — Thumbnail, title, meta, excerpt, read more, terms, divider, spacer, custom HTML, button, price, rating, custom field, and slider. * **10 Hover Effects** — Zoom In, Zoom Out, Grayscale to Color, Blur, Brightness, Overlay Fade, Overlay Slide Up, Overlay Slide Left, Overlay Scale, and Border Draw. * **AJAX Category Filtering** — Category filter buttons that reload the grid without page refresh. * **Load More Pagination** — AJAX-powered load more button for paginated grids. * **Infinite Scroll** — Automatic loading via Intersection Observer when scrolling near the bottom. * **8 Style Presets** — Built-in layout presets plus save and reuse your own custom presets. * **WooCommerce Ready** — Display products with price, ratings, add-to-cart buttons, and sale badges. * **Transient Caching** — Server-side caching for grid output with automatic invalidation. * **REST API** — Full API access to grid data for headless/decoupled usage. * **Abilities API** — WordPress 6.9+ AI-agent-ready abilities for programmatic grid operations. ### Shortcode Reference ### Basic Usage ``` [depg_grid id="123"] ``` ### All Attributes ``` [depg_grid id="123" layout_mode="grid" columns="3" per_page="6" orderby="date" order="DESC" filter="yes" filter_tax="category" load_more="yes" infinite_scroll="yes"] ``` Attribute Type Default Description `id` integer (required) Shortcode post ID `layout_mode` string grid Layout mode: `grid`, `masonry`, `list`, or `slider` `columns` integer 3 Number of columns (1-4) `per_page` integer 6 Posts per page (-1 for all) `orderby` string date Sort by: `date`, `title`, `ID`, `modified`, `rand`, `menu_order` `order` string DESC Sort direction: `ASC` or `DESC` `filter` string no Show filter buttons: `yes`, `1`, or `true` `filter_tax` string auto Taxonomy for filter buttons `load_more` string no Show Load More button: `yes`, `1`, or `true` `infinite_scroll` string no Enable infinite scroll: `yes`, `1`, or `true` ### REST API **Endpoint:** `GET /wp-json/depg/v1/grid/{id}` **Parameters:** `page`, `per_page`, `filter` (term ID), `taxonomy`, `layout_mode` **Response:** `json { "settings": { "post_type": "post", "layout_mode": "grid"," columns": 3, "per_page": 6, "orderby": "date", "order": "DESC" }, "blocks": [...]," posts": [ { "id": 123, "title": "Hello World", "permalink": "https://example.com/ hello-world/", "excerpt": "This is a sample post...", "date": "2026-07-18T10:00: 00+00:00", "author": { "id": 1, "name": "Admin" }, "featured_image": { "src": "..."," alt": "..." }, "terms": [{ "taxonomy": "category", "name": "Uncategorized" }] } ]," paging": { "current_page": 1, "max_num_pages": 5, "total_posts": 48, "remaining": 42 } } ### Abilities API (WordPress 6.9+) Ability Type Description `dynamic-post-grid/render-grid` Read-only Render a grid as HTML `dynamic-post-grid/get-grid-data` Read-only Get structured post data as JSON `dynamic-post-grid/create-shortcode` Write Create a new grid programmatically `dynamic-post-grid/export-layout` Read-only Export layout as portable JSON `dynamic-post-grid/import-layout` Write Import a layout JSON Execute via: `POST /wp-json/wp-abilities/v1/execute/{ability-name}` ## Screenshots [⌊Elementor Grid Layout⌉⌊Elementor Grid Layout⌉[ Elementor Grid Layout [⌊Elementor List Layout⌉⌊Elementor List Layout⌉[ Elementor List Layout [⌊Elementor Slider Layout⌉⌊Elementor Slider Layout⌉[ Elementor Slider Layout [⌊Shortcode Builder — Post Query and Layout Mode selector⌉⌊Shortcode Builder — Post Query and Layout Mode selector⌉[ Shortcode Builder — Post Query and Layout Mode selector [⌊Shortcode Builder — Layout Canvas with Drag-and-Drop Blocks⌉⌊Shortcode Builder— Layout Canvas with Drag-and-Drop Blocks⌉[ Shortcode Builder — Layout Canvas with Drag-and-Drop Blocks [⌊Style Presets⌉⌊Style Presets⌉[ Style Presets [⌊Advance — Meta Query and Cache controll⌉⌊Advance — Meta Query and Cache controll⌉[ Advance — Meta Query and Cache controll ## Blocks This plugin provides 3 blocks. * Dynamic Grid Filter Standalone filter bar that connects to any grid on the page. * Dynamic List Layout Display posts in a list layout. * Dynamic Masonry Layout Display posts in a masonry layout. ## Installation 1. Go to **Plugins > Add New** and search for « Dynamic Post Grid Elementor Addon ». 2. Install and activate the plugin. 3. **Elementor users:** The widget appears under « WPC Elements » in the Elementor panel. 4. **Shortcode users:** Go to **Grid Shortcodes > Add New** in your admin to create a layout, then copy the shortcode. ## FAQ ### Does the plugin require Elementor? The Elementor widget requires Elementor 3.0 or higher. However, the **Standalone Shortcode Builder** works independently — you can use the `[depg_grid]` shortcode in the Block Editor, classic editor, widgets, or any page builder. ### How do I use the Shortcode Builder? Go to **Grid Shortcodes > Add New** in your WordPress admin. Give your layout a title, configure the query settings (post type, columns, etc.), drag blocks into the layout builder, and publish. Copy the generated shortcode and paste it into any post, page, or widget area. ### What layout modes are available? Three layout modes are available in the Post Query settings: * **Grid** — Classic column-based grid layout. * **Masonry** — Pinterest-style layout with CSS columns (no JavaScript dependency). * **List** — Horizontal layout with featured image on the left and content on the right. You can also override the layout mode via shortcode attribute: ``` [depg_grid id="123" layout_mode="masonry"] ``` ### How do hover effects work? Hover effects are configured per Thumbnail block. In the Layout Builder, click ** Settings** on a Thumbnail block and select a hover effect from the dropdown. Available effects: * **Zoom In** — Image scales up on hover. * **Zoom Out** — Image starts zoomed and scales to normal on hover. * **Grayscale to Color** — Image transitions from black-and-white to full color. * **Blur** — Image blurs on hover. * **Brightness** — Image brightens on hover. * **Overlay Fade** — Dark overlay with link icon fades in. * **Overlay Slide Up** — Dark overlay slides up from bottom. * **Overlay Slide Left** — Dark overlay slides in from the right. * **Overlay Scale** — Circular overlay expands from center (Material Design style). * **Border Draw** — Blue border appears on hover. ### How does AJAX filtering work? Enable filtering in the Post Query section by checking « Show category filter buttons». On the frontend, clicking a filter button reloads the grid content via AJAX without a page refresh. The filter respects your category restrictions — if you limit the grid to specific categories, only those categories appear as filter buttons. You can also enable it via shortcode attribute: ``` [depg_grid id="123" filter="yes" filter_tax="category"] ``` ### How does Load More work? Enable Load More in the Post Query section by selecting « Load More » as the pagination mode. A « Load More (X remaining) » button appears below the grid. Clicking it loads the next page of posts via AJAX and appends them to the grid. The button disappears when all posts are loaded. ### How does Infinite Scroll work? Enable Infinite Scroll in the Post Query section by selecting « Infinite Scroll » as the pagination mode. As the user scrolls near the bottom of the grid, new posts are automatically loaded via AJAX and appended to the grid. A spinner shows while loading, and a « No more posts » message appears when all posts are loaded. You can also enable it via shortcode attribute: ``` [depg_grid id="123" infinite_scroll="yes"] ``` ### How does caching work? Grid output is cached using WordPress transients for 1 hour by default. Cache is automatically invalidated when: * A post is saved, deleted, or its status changes. * A grid shortcode is updated. * You click « Clear All Grid Cache » in the Shortcode Builder. You can change the cache duration with the `depg_cache_duration` filter: ``` add_filter( 'depg_cache_duration', function() { return 30 * MINUTE_IN_SECONDS; } ); ``` ### What is the REST API? All grid data is available via REST API for headless/decoupled usage: ``` GET /wp-json/depg/v1/grid/{id} ``` Optional parameters: `page`, `per_page`, `filter` (term ID), `taxonomy`, `layout_mode`. The response includes structured post data (title, permalink, excerpt, author, featured image, terms) and paging information. No authentication required. ### What is the Abilities API? On WordPress 6.9+, the plugin registers 5 AI-agent-ready abilities that can be discovered and executed by AI agents, automation tools (Zapier, n8n), and MCP servers: * `dynamic-post-grid/render-grid` — Render a grid as HTML. * `dynamic-post-grid/get-grid-data` — Get structured post data as JSON. * `dynamic-post-grid/create-shortcode` — Create a new grid programmatically. * `dynamic-post-grid/export-layout` — Export a grid layout as portable JSON. * `dynamic-post-grid/import-layout` — Import a layout JSON. ### Can I override shortcode settings in the shortcode itself? Yes. You can pass any of these attributes to override the saved settings: ``` [depg_grid id="123" layout_mode="masonry" columns="2" per_page="12" orderby="title" order="ASC" filter="yes" load_more="yes"] ``` Available attributes: `id` (required), `layout_mode` (grid/masonry/list), `columns`( 1-4), `per_page` (number of posts), `orderby` (date, title, ID, modified, rand, menu_order), `order` (ASC or DESC), `filter` (yes/1/true), `filter_tax` (taxonomy slug), `load_more` (yes/1/true). ### Can I save my own layout presets? Yes. Build a layout in the Shortcode Builder, click **Save Current as Preset**, enter a name, and save. Your custom presets appear in the **My Presets** dropdown alongside the built-in presets. ### Can I export and import grid layouts? Yes. Use the REST API or Abilities API to export a grid configuration as JSON. The JSON contains the full settings and block configuration. Import it on another site to create an identical grid. ### Does it work with WooCommerce products? Yes. Select « Product » as the post type in the query settings. The shortcode builder includes Price and Rating blocks specifically for WooCommerce products. ### Does this plugin work with all themes? Yes. It works with all WordPress themes. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Dynamic Post Grid – Gutenberg Blocks, Shortcodes & Elementor Addon” is open source software. The following people have contributed to this plugin. Contributors * [ Maidul ](https://profiles.wordpress.org/maidulcu/) [Translate “Dynamic Post Grid – Gutenberg Blocks, Shortcodes & Elementor Addon” into your language.](https://translate.wordpress.org/projects/wp-plugins/dynamic-post-grid-elementor-addon) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/dynamic-post-grid-elementor-addon/), check out the [SVN repository](https://plugins.svn.wordpress.org/dynamic-post-grid-elementor-addon/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/dynamic-post-grid-elementor-addon/) by [RSS](https://plugins.trac.wordpress.org/log/dynamic-post-grid-elementor-addon/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.9.0 * [Feature] Advanced Query Tab — full WP_Query control from the Shortcode Builder( no code needed). * [Feature] Taxonomy Query repeater — filter by multiple taxonomies and terms with AND/OR relation. * [Feature] Date Query — filter posts by date range (after/before) or year/month/ day. * [Feature] Author, Search, Include IDs, Post Status, and Has Password filters. * [Fix] Advanced query settings (exclude, offset, post_parent, ignore_sticky_posts, meta_query) now actually apply to WP_Query — previously saved but never used. * [Fix] AJAX filter now applies all advanced query filters (was previously ignored in AJAX requests). * [Fix] Removed dead `has_password` code that checked `=== '0'` and never triggered. * [Fix] Taxonomy query merge with existing category filter now preserves all clauses correctly. * [Fix] Date query month/day save edge case (value 0 was saved instead of empty). * [Performance] Extracted shared `apply_advanced_query_filters()` method for reuse across render paths. * [Testing] Added standalone test suite with 21 test cases covering all advanced query filters. #### 1.8.0 * [Feature] Plugin renamed to « Dynamic Post Grid – Gutenberg Blocks, Shortcodes& Elementor Addon » for better SEO and discoverability. * [Fix] Gutenberg blocks not rendering in editor — removed conflicting editorScript/ editorStyle from block.json, script loading now handled via enqueue_block_editor_assets. * [Fix] Slider layout not working in shortcode — shortcode renderer now falls back to saved slider_settings when layout_mode is slider. * [Fix] Swiper CSS/JS not loading — moved Swiper enqueue from render_slider() ( too late, after wp_head) to enqueue_assets() (before wp_head). * [Fix] Slider navigation broken on first page load with filter enabled — removed fragile inline script, Swiper now initializes via depg-filter.js on DOMContentLoaded and window.load. * [Fix] AJAX filter now re-initializes Swiper after replacing slider content. * [Fix] Case-sensitivity bug in depg-filter.js — DEPG_Filter vs DEPG_FILTER caused ReferenceError on frontend. * [Fix] Cache stale after settings change — cache key now includes layout_mode and columns, ensuring different settings produce different cache entries. * [Fix] block.json trailing commas — removed invalid trailing commas from all 4 block.json files. * [Tweak] depg-filter.js now depends on Swiper script to guarantee load order. * [Tweak] Slider config stored as data attributes on container instead of inline script. #### 1.7.0 * [Feature] Gutenberg Blocks — 4 native blocks: Dynamic Post Grid, Dynamic Post List, Dynamic Post Masonry, and Dynamic Post Filter. * [Feature] Numbered pagination — AJAX-powered page links with prev/next, ellipsis, and current page indicator. * [Feature] Dropdown filter style — compact dropdown alternative to filter buttons. * [Feature] URL deep-linking — filter state persists in browser URL (?depg_123= 456) for shareable filtered views. * [Feature] Browser back/forward support — navigation history restores filter state automatically. * [Feature] 3 new grid presets — Magazine (large first + 2-col), Card Overlay ( image + title overlay), Title List (compact title-focused). * [Feature] Filter Style selector — choose between Buttons or Dropdown in Shortcode Builder and Gutenberg blocks. * [Feature] Standalone Filter block — place a filter bar anywhere on the page, connected to any grid. * [Feature] Pagination attribute — `[depg_grid id="123" pagination="numbers"]` for shortcode override. * [Feature] Review prompt — admin notice after creating 3+ grids, with one-click dismiss. * [Feature] Infinite Scroll pagination — automatic loading via Intersection Observer, configurable threshold. * [Feature] Slider layout mode — moved from block palette to layout mode selector with dedicated options card. * [UI] Pagination Mode selector — None, Numbered, Load More, or Infinite Scroll( 4 options). * [UI] Complete Shortcode Builder redesign — modern 5-tab interface (Query, Layout, Builder, Style, Advanced). * [UI] Visual layout mode cards with icons for Grid, Masonry, List, and Slider. * [Fix] REST API now includes pagination_mode and slider_settings in response. * [Fix] Cache key now differentiates between pagination modes. * [Fix] Fixed JavaScript variable redeclaration bug in frontend filter JS. * [Fix] Cache clear AJAX action now uses its own dedicated nonce instead of reusing the presets nonce. * [Fix] Cache invalidation now uses tracked keys with delete_transient() instead of raw SQL, ensuring proper clearing when object caching (Redis/Memcached) is active. #### 1.6.0 * [Feature] Masonry layout mode — Pinterest-style CSS column layout, responsive( 3/2/1 columns). * [Feature] List layout mode — horizontal layout with featured image on left, content on right, responsive stacking on mobile. * [Feature] 10 thumbnail hover effects — Zoom In, Zoom Out, Grayscale to Color, Blur, Brightness, Overlay Fade, Overlay Slide Up, Overlay Slide Left, Overlay Scale, Border Draw. * [Feature] Transient-based caching for grid output (1 hour default, filterable). * [Feature] Auto cache invalidation on post save, delete, and status change. * [Feature] « Clear All Grid Cache » button in Shortcode Builder. * [Feature] REST API endpoint — `GET /wp-json/depg/v1/grid/{id}` for headless/decoupled usage. * [Feature] Abilities API — 5 AI-agent-ready abilities for WordPress 6.9+ (render- grid, get-grid-data, create-shortcode, export-layout, import-layout). * [Feature] Shortcode attribute `layout_mode` — override layout mode via `[depg_grid id="123" layout_mode="masonry"]`. * [Fix] Exclude IDs, Offset, Ignore Sticky Posts, Post Parent, and Meta Query fields now save correctly in the Shortcode Builder. * [Fix] `$featured_image` undefined variable notice for posts without thumbnails in REST API response. * [Fix] Help page now documents current shortcode attributes instead of legacy Elementor widget attributes. * [Security] Abilities API — all block types individually sanitized with proper escaping (wp_kses_post for HTML, esc_url_raw for URLs, sanitize_key for keys, etc.). * [Security] Abilities API — import-layout now passes blocks through `sanitize_block_for_ability()` before storage. * [Security] Abilities API — block type whitelist prevents unknown types from being stored. * [Security] Abilities API — layout_mode values sanitized with `sanitize_key()` in create-shortcode and import-layout. * [Security] Admin save logic — layout_mode sanitized with `sanitize_key()` on save. * [UI] Admin form modernized with flexbox grid layout (no more table-based form). * [UI] Renamed « Query Settings » to « Post Query » for clarity. * [Performance] Cache layer reduces database queries for repeated grid renders. #### 1.5.0 * [Feature] AJAX category filtering — category filter buttons that reload posts without page refresh. * [Feature] Load More pagination — AJAX-powered load more button with remaining post count. * [Feature] Reset to Default — one-click reset in the layout builder restores the default block configuration. * [Feature] New `filter`, `filter_tax`, and `load_more` shortcode attributes. * [Feature] Frontend filter and load more settings configurable from the Shortcode Builder UI. * [UI] Redesigned Post Query section with modern flexbox form grid layout. * [UI] Renamed « Query Settings » to « Post Query » for clarity. * [Fix] Removed unused auto-preset detection that cleared the dropdown on block changes. #### 1.4.0 * [Feature] Slider carousel block — Swiper 11 carousel with configurable slides per view, autoplay, loop, arrows, and dots. * [Feature] Button block — customizable text, optional custom URL, and target selection. * [Feature] Price block — WooCommerce product price with optional prefix/suffix. * [Feature] Rating block — WooCommerce star rating with optional review count. * [Feature] Custom Field block — display any post meta value with an optional label. * [Fix] Shortcode builder now works without Elementor. * [Fix] Meta block date checkbox label missing opening tag in JS palette template. #### 1.3.0 * [Feature] Standalone Shortcode Builder with visual drag-and-drop layout blocks. * [Feature] 8 built-in style presets and custom user presets. * [Feature] Category/taxonomy filtering in the shortcode builder. * [Fix] Block settings now save correctly on every input change. * [Fix] Block settings keys map correctly between JS and PHP. #### 1.2.6 * [Fix] Restore Slick core stylesheet registration. * [Fix] Respect taxonomy relation setting and harden term markup escaping. #### 1.2.5 * [Fix] Add to Cart button icon overwrite fix. #### 1.2.4 * [Fix] Category, tag, and status-based filtering issues. * [Style] Product grid, list, and slider layout improvements. #### 1.2.3 * [Fix] Product grid bug fix. * [Style] CSS updates. #### 1.2.2 * [Feature] WooCommerce product grid support with layout template. #### 1.0.0 * Initial release. ## Meta * Version **1.9.0** * Last updated **3 n wagguren ago** * Active installations **20+** * WordPress version ** 5.0 or higher ** * Tested up to **7.0.6** * PHP version ** 5.6 or higher ** * Language * [English (US)](https://wordpress.org/plugins/dynamic-post-grid-elementor-addon/) * Tags * [elementor](https://kab.wordpress.org/plugins/tags/elementor/)[gutenberg blocks](https://kab.wordpress.org/plugins/tags/gutenberg-blocks/) [post grid](https://kab.wordpress.org/plugins/tags/post-grid/)[posts](https://kab.wordpress.org/plugins/tags/posts/) [woocommerce](https://kab.wordpress.org/plugins/tags/woocommerce/) * [Advanced View](https://kab.wordpress.org/plugins/dynamic-post-grid-elementor-addon/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/dynamic-post-grid-elementor-addon/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/dynamic-post-grid-elementor-addon/reviews/) ## Contributors * [ Maidul ](https://profiles.wordpress.org/maidulcu/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/dynamic-post-grid-elementor-addon/)