Convert download modal to block

[adamwoodnz]

The modal on the Download page is currently custom coded:
Initialisation: https://github.com/WordPress/wporg-main-2022/blob/trunk/source/wp-content/themes/wporg-main-2022/src/download/index.js
Component: https://github.com/WordPress/wporg-main-2022/blob/trunk/source/wp-content/themes/wporg-main-2022/src/components/download-modal/download-modal.js

Problems

1. The content is hard coded, and the component isn't reusable in other pages without further development.
2. Loading the modal component from Gutenberg on the frontend with import { Modal } from '@wordpress/components'; loads the entire @wordpress/components package on the client. If we could render the modal server side using a block we could avoid this.

Requirements

All content configured through the page editor. Input fields required to achieve this:

1. Title (text)
2. Subtitle (text)
3. Content (rich text)

To make the component more reusable we could consider adding button config/content for actions, eg. 'OK', 'Dismiss', or some other call to action.

The modal block would need to be linked to a button or link block in the page content somehow.

The block should probably live in https://github.com/WordPress/wporg-mu-plugins

[ryelle]

I've moved this out of the current iteration since we don't need it for launch, but I do think it's a good idea for the future. There will probably be other places we'll need a content modal (for example, we have some on the Patterns site).

Tagging it Needs Design so we can work with designers to figure out the editor interface.

Probably needs a button which can toggle the modal, and then an area for the writer to enter modal content. The button should have all the same features as the core button block. What else does it need?

[jasmussen]

Tagging it Needs Design so we can work with designers to figure out the editor interface.

Sorry I missed this. Can you expand a little bit on the context? Which page will the modal be invoked from, what's the contents of the modal, and what interface will be necessary for the editor block? Thank you 🙏

[adamwoodnz]

Hi @jasmussen I've added more detail in the description. Let me know if anything doesn't make sense 🙏

[jasmussen]

Ah, thank you that's good context. Not related to this issue, but just seeing the external link indicators next to the links in the modal, are those icons necessary in a webpage where presumably everything is an "external link"?

Regarding the modal:

• Can perhaps leverage much of the modal work done for the block editor's modal package. If not technically, then at least design-wise.
• Should probably have a 2px border radius.
• Scrim looks nice and dark.

As for the editing interface, I understand that the reason for making it a block, is to make it easier for editors to customize the contents inside the modal. I also have a feeling that a lavish "Modal" block can become quite an undertaking to get right. So in trying to match effort with impact, it would be good to have an understanding of how widely this modal is, or will be, used across the site. If it's only on the download page, and only with text inside, probably best to keep the block editor interface extremely minimal — essentially text-field in the inspector for a Button block, and little more — can even be raw HTML, IMO, just to keep dev effort to the absolutely minimum. Then need, as a driver for invention, can then learn us whether we need to upgrade it beyond that.

In a more lavish representation, I would imagine a toolbar button to open the modal, and then have the modal itself be editable.

What do you think?

[adamwoodnz]

are those icons necessary in a webpage where presumably everything is an "external link"?

Good question! Probably one for the original designer. They're used throughout the home and download pages

[adamwoodnz]

it would be good to have an understanding of how widely this modal is, or will be, used across the site

Yeah so hard to say at the moment with Themes and Showcase about to start, then the rest to follow. I feel like the design team will have more idea of whether it'll be a widely used pattern at this point.

Agree that we should start slim and build up as we need to. I'm a little too inexperienced to know how much dev effort will be involved. @ryelle do you have any thoughts on the extremely minimal vs the more lavish approach outlined above?

[jasmussen]

Ah, I see the pattern now with the separators, the arrows add some nice detail there. Don't mind me.

Yeah so hard to say at the moment with Themes and Showcase about to start, then the rest to follow. I feel like the design team will have more idea of whether it'll be a widely used pattern at this point.

Right, I was mainly thinking in terms of content. I'll run this by the rest of the group! Thanks.

[ryelle]

do you have any thoughts on the extremely minimal vs the more lavish approach outlined above?

I think you can use your judgement to build something in that spectrum - personally I think the fancy concept would be fun to build, but unless we need it on other pages (seems like no, so far), I wouldn't spend more than a day on it.

[ryelle]

I'm going to close this, the current download modal has been working just fine.