New Block: Dialog Popup

[bhubbard]

What problem does this address?

Popups are very common for websites, and its a common request.

What is your proposed solution?

Creating a new block for popups using the dialog html element:
https://www.youtube.com/watch?v=ywtkJkxJsdg

[paaljoachim]

I am thinking this plugin is something to take a closer look at:
https://wordpress.org/plugins/makeiteasy-popup/

I found out about the plugin as the author mentioned it in the Advanced WordPress Facebook group here:
https://www.facebook.com/groups/advancedwp/posts/8230806923648116/

Here are some of the things the author wrote:
"It is about popup. I developed a popup block and tried to make it extensible and configurable, ready to use in production. It has many features and follows best practices of core blocks development, which means you can style it inside block editor with native block editor controls and you can insert any number of other blocks in it.
I think it is ready for production sites, check it out! Please write your remarks and suggestions, so I can improve it.
I believe block with so many features can easily be charged for, but I offer it for free."

"...to provide a block which would be close to core blocks and give users options which they often need. I started this block when dialog element was very new, I am planning to switch to dialog element."

[sethrubenstein]

I'm finalizing a set of <dialog/> blocks that utilizes the Interactivity API for a project we're working on for release in February 2025. I could easily modify this to be more Gutenberg/Core friendly, if there's agreement that this would be a good fit for the core block library?

CleanShot.2024-10-31.at.21.40.25.mp4

[paaljoachim]

I will ping a few folks so they can give feedback.
@SantosGuillamot @michalczaplinski @WordPress/interactivity-api

[michalczaplinski]

I would love to see more Core blocks that leverage the Interactivity API! 🙂

That said, with dialogs there are a11y concerns that I'm not an expert on. I don't have a strong opinion on whether this should be in Core or is more of a plugin territory but perhaps @WordPress/gutenberg-core does.

[draganescu]

Would this offer a good enough experience to be preffered to full blown modals?

[luisherranz]

I think this is more for @mtias or @jasmussen to decide, but I agree that exploring a dialog/pop-up block in Core makes sense.

Would this offer a good enough experience to be preffered to full blown modals?

What do you mean by full blown modals?

[draganescu]

What do you mean by full blown modals?

I mean modal windwos and dialogs are provided by plugins generally and they generally use libraries with specifics implemented. I wonder how much we need to pad the support for the html element to make it useful and if we support all the stuff that make it work right.

[sethrubenstein]

Hi all, I'm putting some final touches on this vis-a-vis accessibility on the "dialog trigger" block this week and I'm hoping to submit a PR to start a more in depth review discussion early next week.

I've tried to add as much support for the native <dialog/> element as possible, including color controls for the ::backdrop pseudo element, the ability to toggle between the native modal and dialog types. There are some other nice to haves as well like an auto-activation timer.

@draganescu Regarding support for other plugins, absolutely, that's been a key consideration in our design. Our first major use of this block will actually be programmatically generated dialog blocks in an upcoming project. So, getting extensibility right was key for even our own use-case. As for other plugins interacting with the dialog block(s):

For starters open and closing a dialog is as easy as store('core/dialog').open(theIdOfTheDialog), as well as store('core/dialog').close(theIdOfTheDialog), store('core/dialog').closeAll().

We also have some additional functionality that will play or pause any VideoPress video inside a dialog when opening and closing. I'm going to pull that out before submitting the PR, but I'll provide a code example for how a video player block can easily opt-in to the dialog block's interactivity store to support an open/play close/pause interaction.