Advanced Post Block — Showcase Posts with Style

Advanced Post Block is the ultimate Gutenberg block for displaying WordPress posts, pages, and custom content beautifully. It offers a wide range of layouts—including Grid, Masonry, Slider, and News Tickers—giving you total control over your site's content display without writing a single line of code.

---

🚀 Key Features

💎 Core Layouts (Free)

Everything you need to build a professional and modern content display:

• Diverse Layouts: Choose from professional Grid, Masonry, Slider, Ticker, and News Ticker views.
• Interactive Styling: Apply Hover Backgrounds, Borders, and Shadows for engaging user experiences.
• Image Controls: Advanced settings for Width, Height, Border Radius, Margins, and Animations.
• Post Title: Control over title tags, length limits, and custom hover colors.
• Meta Styling: Full control over metadata hover colors for all elements.
• Read More Styles: Custom Button Icons, hover borders, and shadow effects for better CTAs.

👑 Premium Power (Pro)

Unlock advanced functionality for high-performing websites:

• Metadata Mastery: Advanced Gap, Separator, Sorting, and Time Ago date formats.
• SEO & Content: Pull excerpts directly from SEO Meta (Yoast, Rank Math) and dynamic source selection.
• Post View Tracking: Display Popularity Counts with customizable icons and metadata items.
• Premium Badges: Choose Unique Positions on images with pro padding and border radius settings.
• Performance Optimized: Professional Lazy Loading and Default Placeholder Image support.
• Advanced Read More: Unlock Premium Icons, icon positioning, and pulse hover animations.

---

📸 Visual Showcase

Interactive Layout Switching

Switch between any layout—Grid, Masonry, Slider, etc.—and see the changes update in real-time within the Gutenberg editor.

Dynamic Sub-layouts

Adjust the relationship between images and text with a few clicks. Try "Overlay Box" for a cinematic feel or "Left/Right Even Odd" for an editorial look.

Advanced Query Controls

Filter by category, tag, author, or search query. Use presets to instantly show "Popular" or "Related" posts.

---

🛠 Technical Stack

This project is built with modern web technologies to ensure performance and flexibility:

• Frontend Framework: React (used for both Gutenberg Editor components and frontend hydration).
• Slider Library: Swiper.js for high-performance touch carousels and news tickers.
• Masonry Layout: react-responsive-masonry for fluid, responsive post grids.
• Build System: @wordpress/scripts (Webpack) for block bundling and Gulp for asset management/deployment.
• Styling: SASS/SCSS with a custom design system for consistent UI.
• Admin Dashboard: Powered by React Router for a single-page app experience.
• Backend: PHP with custom WordPress REST API extensions.
• Licensing & Analytics: Custom BPlugins SDK (based on Freemius Lite) calling through api.bplugins.com.

---

📚 Third-Party Libraries

Advanced Post Block bundles or depends on the following high-quality libraries:

• Swiper (MIT): Powering the touch-enabled sliders and vertical news tickers.
• jQuery Easy Ticker (MIT): Smooth vertical scrolling for the news ticker layout.
• react-responsive-masonry (MIT): Fluid responsive masonry grid system.
• React Router (MIT): Client-side routing for the plugin's admin dashboard.
• Freemius Lite SDK (Custom): A modified version of the Freemius SDK optimized for the bPlugins API to handle usage tracking and analytics.

---

💻 Developer Guide

Directory Structure

• /src: Main source code (React, SCSS, Block Metadata).
  • /Components: React components for the Editor (Backend) and Frontend logic.
  • /admin: Code for the plugin's admin dashboard UI.
  • view.js: Frontend entry point that "hydrates" the static HTML with React interactivity.
• /includes: PHP logic, including query handlers, shortcodes, and AJAX endpoints.
• /build: Compiled assets (automatically generated; do not edit manually).
• plugin.php: The main WordPress plugin file.

Development Workflow

1. Clone the repository into your local WordPress plugins directory.
2. Install dependencies:

   npm install

3. Start development watch mode:

   npm start

4. Create a production build:

   npm run build

Data Flow & Lifecycle

1. Editor: src/Components/Backend/Edit.js manages block attributes.
2. Database: Attributes are saved as JSON within the <!-- wp:ap-block/posts ... --> comment.
3. Frontend (PHP): src/render.php reads attributes and generates initial HTML + Data Attributes.
4. Frontend (JS): view.js detects the block, reads data-attributes, and mounts the APBPosts React component to add AJAX/Swiper functionality.

---

🔌 Developer API

Shortcode Support

Embed any block configuration using the generated ID:

[apb id="123"]

---

🔗 Useful Links

• Live Demo
• Support Forum
• Upgrade to Pro

---

Developed by bPlugins