A WordPress block editor popup uses the same blocks and editing patterns already built into WordPress. Create the campaign in Popup Maker, arrange its message with paragraphs, headings, images, buttons, columns, and other available blocks, then let Popup Maker control how and where visitors see it.

In this tutorial, you’ll create the WordPress block editor popup, design its content, configure the campaign, and test the complete visitor experience. You can start with Popup Maker’s free plugin.

A Popup Layout Being Built With Wordpress Blocks In The Block Editor And Delivered By Popup Maker.

What You’ll Need

  • A WordPress site where you can install and configure plugins
  • Popup Maker installed and activated
  • WordPress Block Editor installed, active, and available to your WordPress role
  • A clear goal, such as collecting a lead, promoting an offer, or announcing an update

Decide Which Tool Controls What

The block editor controls the content inside the popup. Popup Maker controls the surrounding theme, overlay, close button, width, position, triggers, targeting conditions, cookies, and available reporting. Keeping those jobs separate makes the content portable without mixing campaign rules into the block layout.

Review the WordPress block editor popup integration details if you want a concise compatibility overview before starting.

Step 1: Create and Save the Popup

In the WordPress dashboard, go to Popup Maker → Create Popup. Enter a descriptive internal name that explains the campaign, such as “Homepage newsletter offer.” Save the popup before opening the visual builder so WordPress has a stable document for the builder to edit.

Leave the campaign unpublished while you build. A saved draft gives you room to finish the layout, presentation, trigger, targeting, and cookie settings before visitors can encounter it.

Step 2: Open the Popup in WordPress Block Editor

Open the saved popup in the normal WordPress editor. The block editor is the default editing surface, so no separate visual-builder launch action is required. If you see the Classic Editor instead, check whether a site setting or editor plugin has disabled blocks for the popup post type.

Step 3: Build the WordPress Block Editor Popup Content

Open the block inserter and add the smallest set of blocks needed for one action. Use a Group block when several elements belong together, Columns only when the popup width can support them, and a Buttons block for the primary call to action. List View helps you understand nested blocks and select the right container without clicking through the canvas.

A Simple Popup Content Formula

  • Headline: state the offer or outcome in one clear sentence.
  • Supporting copy: explain the value or next step without turning the popup into a full page.
  • Primary action: use one obvious button or form submission.
  • Trust detail: add only the reassurance needed to complete the action.

Responsive Design Tips

  • Use List View to select nested Groups, Columns, and Buttons reliably.
  • Prefer theme presets and block styles over one-off inline colors and spacing.
  • Collapse Columns or switch to a Group when the popup becomes cramped at narrow widths.
  • Test any third-party or interactive block after the popup opens on a frontend page.

Step 4: Configure the Popup Maker Frame

Save the builder design and return to the Popup Maker editor. Choose a popup theme, then set the container size and position around the content you built. The theme controls the overlay, frame, close button, and default spacing; the builder controls the content inside that frame.

Preview the combination before adjusting lots of CSS. If the design feels crowded, simplify the content or increase the Popup Maker width. If it feels disconnected from the site, align the popup theme with the builder typography, colors, border radius, and spacing.

Step 5: Add a Trigger, Targeting, and Cookies

Keep opening and audience behavior in Popup Maker. Add a Click Open trigger for a deliberate link or button, Auto Open for a timed message, or another trigger available to your plan. Then add targeting conditions and only the cookie behavior needed to match the campaign goal.

Treat those as separate decisions. A trigger does not replace targeting, and a targeting rule does not open the popup by itself. Add only the cookie behavior that matches the campaign goal; otherwise you can accidentally suppress a campaign before a visitor completes the intended action.

Step 6: Test the Complete Campaign

Preview the popup from a normal frontend page, then test again in a private or logged-out browser window. That catches permission, caching, targeting, and cookie behavior that an administrator session can hide.

  • Open the popup with every configured trigger.
  • Confirm the overlay and close controls work with mouse, touch, and keyboard.
  • Submit the form or follow the primary button and verify the intended result.
  • Check desktop and narrow mobile widths without horizontal scrolling.
  • Confirm excluded pages and visitors do not receive the campaign.
  • Repeat the test after the configured cookie is created.

Troubleshooting

  • The block editor is unavailable: confirm a classic-editor setting or plugin has not disabled blocks for the popup post type.
  • Columns overflow the frame: reduce the column count, allow stacking, or increase the Popup Maker container width.
  • A block looks correct in the editor but not after opening: test for theme or plugin styles that only load on particular frontend pages.

When isolating a problem, first save both editors, test while logged out, and temporarily simplify the popup to one text element and one button. Add complex elements back one at a time until the conflicting setting or script is clear.

Create Your First WordPress Block Editor Popup

Start with one focused campaign, build the content in your preferred editor, and let Popup Maker handle its delivery. Get Popup Maker free or review the official builder documentation for deeper help with the editor itself.