=== Dynamic Post Grid – Gutenberg Blocks, Shortcodes & Elementor Addon === Contributors: maidulcu Tags: post grid, gutenberg blocks, elementor, woocommerce, posts Requires at least: 5.0 Tested up to: 7.0.2 Stable tag: 1.9.0 Requires PHP: 5.6 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Build beautiful post grids with Gutenberg blocks, shortcodes, or Elementor. Features grid, masonry, list & slider layouts, AJAX category filters, numbered pagination, dropdown filters, URL deep-linking, transient caching, REST API, and WooCommerce product support. == 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. == 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. == Frequently Asked Questions == = 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. == 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 == 1. Elementor Grid Layout 2. Elementor List Layout 3. Elementor Slider Layout 4. Shortcode Builder — Post Query and Layout Mode selector 5. Shortcode Builder — Layout Canvas with Drag-and-Drop Blocks 6. Style Presets 7. Advance — Meta Query and Cache controll == 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