Modal Trigger Button Block or Option

[ashleyshaw]

Modal Trigger Button Block

Parent Epic: Modal & Popup Enhancements

To simplify adding modals in the block editor, we should create a button block variation that can:

• Launch a specific modal by selecting from a dropdown list of registered modal template parts.
• Optionally customize the button label and styling.

This avoids custom HTML or manual modal code each time a modal trigger is needed.

Scope

• Develop a block variation for the standard Button block.
• Integrate with the WordPress block inspector to select:
  • Target modal template part by name
  • Button text
  • Button style (primary, secondary, etc.)
• Ensure front-end script enqueues the necessary modal logic only if this block exists on the page.
• Apply consistent styling matching the LSX Design System.

Acceptance Criteria

• Editor UI allows linking a button to a modal template part.
• Button on the frontend triggers the modal reliably.
• No duplicate script loading across pages.
• Fully accessible, including focus and ARIA requirements.

References

• Related discussion: Meet – Ash & Warwick Tour Operator Plugin Dev Strategy
• Human Made modal block repo: https://github.com/humanmade/hm-block-modal
• Figma prototype: https://www.figma.com/community/file/1397897183253228355/lsx-tour-operator-design-system