Convert the designs into tangible HTML

[jonathanbossenger]

We need to start seeing what our proposed designs look like in the WP admin dashboard. So the next logical goal seems to be to take the current designs, turn them into static HTML/CSS and merge that into the develop branch.

I would like to draft a call for front-end developers on https://make.wordpress.org/core/, to help us achieve this.

I am not a front-end developer, so @hedgefield and @folletto perhaps you are able to assist? What assets would we need to hand over to a front-end developer, in order to achieve convert the designs into static HTML/CSS?

Ideally, I'd like to gather those assets into one place (perhaps this ticket) to be able to link to this ticket in the make post.

[ajitbohra]

Can help with HTML/CSS.

[jonathanbossenger]

Can help with HTML/CSS.

Thanks, that would be very awesome. Just waiting to hear where the relevant assets are stored, and then we can chat about implementation.

[folletto]

Ok let's do a review by area (issue).

Generally speaking, anything could get exported from the Figma file:
https://www.figma.com/file/nzpcqxnW9q7zySdiPfLD5L/WP-Notify-design-blueprints-i1-i5?node-id=158%3A105

Design for on-page notifications #26

This design doesn't have any asset, as it's almost entirely to be done in CSS.
The only two non-CSS items are the dot and the × for the dismiss button. These should use either still the Dashicons, but if we're looking forward we should be using the new set:
https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library (close or closeSmall).
The dot I'm not sure if should be a new SVG icon to propose to add, but could also be done via pure CSS, so it's an open discussion.

Design for the notifications settings page #24

If I'm not mistaken, this uses all existing styles and components of WP Admin. Everything should either be CSS or available already.

Design for on-hub notifications in the admin bar #23

Similarly, this is all CSS and for the icons can be taken per above.
The only missing one is the bell icon, and that can be taken directly from the Figma file

That should be it :)

[jonathanbossenger]

@folletto thank you very much.

@ajitbohra do you feel comfortable taking all these assets and turn them into HTML/CSS?

If you want to create this separately, and then simply add it as static files in a PR, that would be great. If you feel comfortable also hooking them up using the wp_enqueue functions, that would also be amazing, but not a requirement, as I can assist with that.

I just can't do design to HTML/CSS 🙈

[abdul-alhasany]

I can try to do it if this is still available.

[ajitbohra]

@jonathanbossenger sure looks good to start

[lkraav]

Have y'all considered going Storybook yet on this issue?

[jonathanbossenger]

@lkraav what's Storybook?

@ajitbohra @kalimah-apps perhaps you could divide the work and share the load?

[lkraav]

@lkraav what's Storybook?

I doubt you would get anything but https://storybook.js.org as top hit in search engines.

But in WP context

• https://wordpress.github.io/gutenberg/
• https://wptavern.com/wp-storybook-a-handy-reference-for-wordpress-react-ui-components
• https://riad.blog/2020/07/22/introducing-blockbook-for-wordpress/

I couldn't recall whether I've seen an instance already built for WP Admin, search engines also didn't provide any hits.

[jonathanbossenger]

@lkraav thanks for the context.

For now, this is just a "convert design into static HTML so we can see what it looks like and get feedback" exercise. When we come to the point of actually building this properly as an interactive, functional piece of software, we can definitely look at Storybook.

[Sephsekla]

The current admin notices look something like

<div class="notice notice-warning is-dismissible">
   <p>This is a notice.</p>
</div>

Should the HTML try to build on these classes, or be a clean break?

[jonathanbossenger]

@Sephsekla don't even concern yourself about the old way, you can work with a clean slate here. The purpose of this is more to give us a tangible thing we can put out for review/feedback, and then iterate on to build the functional version.

[Sephsekla]

I'd 100% be up for having a crack at some first HTML. I can make a start on the on-hub messages, unless anyone's already got going on that.

[Sephsekla]

I've created a quick version of the hub notifications at https://sephsekla.github.io/wp-notify-prototypes/.

For now, it's just the notifications themselves, I can then have a look at the hub itself.

[jonathanbossenger]

Nice work @Sephsekla

Would you like me to create a branch on this repo, that you could submit these to as PRs, so that it's easier for folks on the team to check out locally, and review/provide feedback?

[Sephsekla]

@jonathanbossenger That would be great.

Since these are just proof of concept, any preference on how things are structured in the branch? I'm not sure where they'd fit in to the plugin structure.

[raaaahman]

@Sephsekla I suggested an architecture some time ago (not actually implemented): #29

To go into this direction, you could add a ui folder, with a notification-hub subfolder (both within the includes folder).

[Sephsekla]

Sorry for the radio silence, I've been dealing with some personal stuff lately so haven't had much time to look at this.

@jonathanbossenger did you have a specific idea for which branch I should make the request against? I'd like to get what I have up here.

[jonathanbossenger]

Sorry for the radio silence, I've been dealing with some personal stuff lately so haven't had much time to look at this.

No worries at all.

@jonathanbossenger did you have a specific idea for which branch I should make the request against? I'd like to get what I have up here.

I've created a feature/notification-design branch for us to work on design experiments.

[lkraav]

For general prudency, may also be worthwhile to browse some other in-depth work on notification systems https://vaadin.com/docs/latest/ds/components/notification for insights.

EDIT they also have a Messages component https://vaadin.com/docs/latest/ds/components/messages

[erikyo]

Since the custom properties have been adopted, I would like to propose that we also create colours for the colour coding of messages.

It would be ideal to have "--wp--preset--notice--(success|alert|notice|warning)".

In this way:

• we avoid plugins to use different colours (this happens mainly on the frontend).
• theme (backend or frontend) can customise the colour of notifications

[rosswintle]

I'm also interested in helping. Will see what I can do if no one else gets to it.

[johnhooks]

@jonathanbossenger and @Sephsekla would it be okay to close this issue. The demo is complete and ready for releasing and preview.

[erikyo]

I think this can be considered completed as well, there are some good ideas in there but we'll keep them in mind anyway!

I would like to take this opportunity to thank everyone for their contributions!