New block: Modal block using the Interactivity API

[ryelle]

See WordPress/wporg-main-2022#521 — The current modal on w.org/download is using React, and the content inside is hardcoded in JS. This is harder to iterate on (see WordPress/wporg-main-2022#515).

This PR creates a new block which adds a button with a hidden InnerBlocks container. When the "Show modal" toggle is enabled, a modal appears in the editor, showing the editable InnerBlocks area. The background color, text color, close button color, and overlay color are all configurable. On the front end, this uses the interactivity API to handle the open state and related attributes/classes.

The markup can also be used in templates and patterns, it works like a group block where the child content is rendered in the modal. The label attribute is the button text. It also works to add any of the button style classes to the modal, and they'll apply to the modal toggle.

<!-- wp:wporg/modal {"label":"Learn more","className":"is-small is-style-text"} -->
	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)">
		<!-- wp:heading {"fontSize":"heading-6"} -->
		<h2 class="wp-block-heading has-heading-6-font-size">Demo modal</h2>
		<!-- /wp:heading -->

		<!-- wp:paragraph -->
		<p>This is some modal content, which can be edited in the block editor just like any other content. It's nested inside the modal block, so the translation process will also run over this content.</p>
		<!-- /wp:paragraph -->

		<!-- wp:heading {"level":3,"fontSize":"normal"} -->
		<h3 class="wp-block-heading has-normal-font-size">Links</h3>
		<!-- /wp:heading -->

		<!-- wp:list {"className":"is-style-links-list","style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"textColor":"light-grey-1","fontSize":"normal"} -->
		<ul class="wp-block-list is-style-links-list has-light-grey-1-color has-text-color has-link-color has-normal-font-size">
			<!-- wp:list-item -->
			<li><a href="https://make.wordpress.org/">Get involved in WordPress ↗︎</a></li>
			<!-- /wp:list-item -->

			<!-- wp:list-item -->
			<li><a href="https://www.meetup.com/pro/wordpress/">Join a local WordPress meetup ↗︎</a></li>
			<!-- /wp:list-item -->

			<!-- wp:list-item -->
			<li><a href="https://central.wordcamp.org/">Attend a WordCamp ↗︎</a></li>
			<!-- /wp:list-item -->

			<!-- wp:list-item -->
			<li><a href="https://wordpressfoundation.org/donate/">Support WordPress and open source education ↗︎</a></li>
			<!-- /wp:list-item -->
		</ul>
		<!-- /wp:list -->
	</div>
	<!-- /wp:group -->
<!-- /wp:wporg/modal -->

Screenshots

	Closed	Open
In the editor
Frontend example, the "Learn more" button next to ❤️

The modal on the download page — if a URL is set, this uses a link tag with the download attribute set, so that it will trigger the page download, and then open the modal.

Before (react component)	After (block)

To test

• Create a new page and add a modal block
• Try various configurations of the block
• Everything should work as expected
• Optionally try configuring it in a pattern or template

[StevenDufresne]

I expected the ability to style the button while using the editor but wasn't able to. Other than that, looks good to me.

[ryelle]

I expected the ability to style the button while using the editor but wasn't able to.

I didn't want to add too much customization, since buttons should really only be one of a few fixed styles. I also assumed it would mostly be Neso using this block in code, and it had worked to add the block style classes to the modal itself (for example, in the PR description). Unfortunately I realized this also cascades down to the buttons inside the modal 🙃

Anyway, I switched this up a little by adding a new buttonStyle attribute and a simple dropdown to pick from the Button block styles (this is fetched from the button block, so it should stay up to date if we add others):

It's definitely not as nice-looking as the Button block UI itself, but should manage all use cases.

[adamwoodnz]

Great work, this resolves the issue I created way back when the original modal was built!

I still really want to do something with the Interactivity API, need to find a use...

Works for me

[ryelle]

I still really want to do something with the Interactivity API, need to find a use...

If anything comes up I'll try to pass it your way :) Maybe WordPress/wporg-theme-directory#101 ? It would be nice to make something that could be used across both themes and plugins… but totally not a high priority request.