Overview

BlaBlaBlocks Popup is a powerful yet lightweight WordPress plugin that empowers you to create and manage dynamic popups seamlessly using the native Block Editor (Gutenberg).

Features

• Block Editor Integration: Design your popup content entirely within the native WordPress Block Editor.
• Dedicated Management: Easily manage all your popups from a clean, dedicated admin screen.
• Starter Templates: Jumpstart your design with pre-built variations:
  • Modal Popup
  • Slide-in Popup
  • Floating Bar
  • Fullscreen Popup
  • Toast / Small Notification
• Extensive Styling: Fine-tune layout, position, size, spacing, colors, borders, border radius, and entrance/exit animations.
• Smart Triggers: Control exactly when popups appear (e.g., page load, scroll depth, inactivity, click count, exit intent).
• Targeted Display Conditions: Control where popups appear (e.g., entire site, front page, specific posts/pages, archives).
• Advanced Rules: Add conditional logic based on page views, sessions, max displays, referrers, login status, user roles, and device types.
• Popup Lifecycle: Duplicate, trash, restore, and permanently delete popups with ease.

Requirements

• WordPress: 6.9+
• PHP: 7.4+

Installation

Manual Installation

1. Download the latest release or plugin source.
2. Extract and place the plugin folder inside wp-content/plugins/blablablocks-popup.
3. If build files are not included, run npm install and npm run build.
4. Activate BlaBlaBlocks Popup from your WordPress plugins screen.

Development

1. Clone the Repository

Clone the repository to your local system:

git clone git@github.com:lubusIN/blablablocks-popup.git

2. Go to plugin folder

cd blablablocks-popup

3. Install Dependencies

npm install

4. Build Plugin

Build or start the development environment:

npm run build       # Compile the source files
# OR
npm run start       # Watch for changes and auto-compile

5. Launch Playground

Start a local WordPress Playground instance:

npm run serve

Local Playground requires Node.js 20.18 or newer.

Note

Refer to package.json for additional available npm commands.

Usage Guide

1. Navigate to BlaBlaBlocks Popup in the WordPress admin sidebar.
2. Click Add Popup to create a new one.
3. Enter a descriptive title for your popup.
4. Choose a starter popup type to get a base layout.
5. Design the content using your favorite blocks.
6. Use the popup editor sidebar to configure layout, styles, and behavior.
7. Return to the popup admin page to fine-tune settings, triggers, conditions, and display rules.
8. Publish the popup when you're ready for it to go live!

Meet Your Artisans

LUBUS is a web design agency based in Mumbai.

License

BlaBlaBlocks Popup is open-source software licensed under the terms in the LICENSE file.