Modal Popup Block or Gutenberg

What the block does

• Adds a configurable button/trigger label (RichText)
• Stores the popup body as InnerBlocks (any content blocks can be placed inside)
• Saves clean modal markup including:
  • a trigger button element
  • an overlay / mask layer
  • a modal content wrapper
  • a close button icon

This structure makes it easy to style the modal via CSS and control behavior via JavaScript while keeping the content fully editable in Gutenberg.

Editor workflow

• Edit the button text directly in the block
• Add any blocks into the modal content area
• Use normal Gutenberg design tools for styling:
  • alignment (wide/full)
  • colors (background/text/gradients)
  • typography
  • spacing
  • anchors

Output structure (frontend)

The block outputs:

• a button element used as the modal trigger
• a .modal-mask overlay containing:
  • .modal-content
  • a close icon element
  • the InnerBlocks content

(Opening/closing is handled by your theme/plugin CSS + JS; this block focuses on structure and editable content.)