WCEU small notice banner on Home page

[marko-srb]

Here's the look of the notice banner for Home page to announce WCEU.

Copy:
Watch WordPress Cofounder Matt Mullenweg’s mid-year project update—streaming live from WordCamp Europe on June 15.

CTA link. Yet to be shared, once the News post is up.

Note: keep in mind that I enlarged the spacing from 80 to 120 (from global nav to H1), so the banner breathes nicely. This should be reflected as a live edit too.

Mobile question. Can we execute 'moving text' here? Same as very top line on https://www.awwwards.com/ site? Only in our case the text would disappear under the margins of the outline...

CC: @jasmussen, @ndiego, @ryelle, @thetinyl

[thetinyl]

Thanks Marko! I like the news ticker treatment you're suggesting.

Here are some condensed alternative copy options based on the above (just in case, thinking about mobile in particular):

• Watch Cofounder Matt Mullenweg at WordCamp Europe—streaming live June 15 >
• Streaming live June 15: Cofounder Matt Mullenweg at WordCamp Europe >
• Matt Mullenweg at WordCamp Europe: Watch the live stream on June 15 >

[ryelle]

I looked into the Link Wrapper block, and we can style it with borders & radius (the red was just for testing), but it's a fixed width. It works for some content but would probably still need to be tweaked a little. Once the content is updated and the sync PR is created, Neso can use that to update the CSS.

Can we execute 'moving text' here?

Moving content is an accessibility issue (awwwards is in violation). I know there is the OS setting to disable motion, but you need to know that exists - if there was a way to identify people who explicitly want motion I'd do it, but it's "no preference". Also, if it scrolls it would create a moving click target (even if it stops on hover, it would still seem like you need to chase it, if you even realize its clickable - I didn't realize the awwwards one was. Though honestly it was moving so i didn't even read it…). Overall, it would be a detriment to a11y and would be tricky to build, so I would highly recommend against it.

[jasmussen]

Thanks for sweating the details.

One thing to clarify, ideally the chevron is always right aligned, and a chevron:

Would that work?

[marko-srb]

Ok, thanks for clarification @ryelle. Then we have an issue with the mobile version.

Previous design allowed us to have two rows, while this type of notification banner isn't looking good in two rows...

@jasmussen it will be very hard to adopt each text to have so little characters for mobile version. Do you agree (in the light of findings above) that we need to revert to the old version of this banner?

[ryelle]

One thing to clarify, ideally the chevron is always right aligned, and a chevron:

Not without extra CSS, so I was hoping we could get away with the usual arrow 😅

If the new arrow/chevron is a must-have, we'll add that in with the other CSS tweaks once the content PR is up.

[jasmussen]

I guess it's the linebreak (two paragraphs) that makes this not work, is that right? Otherwise, space-between in a row works:

Code sample

<!-- wp:group {"style":{"border":{"width":"1px","radius":"100px"},"spacing":{"padding":{"right":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="border-width:1px;border-radius:100px;padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:paragraph -->
<p>Short link </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>→</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

[ryelle]

Can you try that with the link-wrapper block? I don't think we support all the same layout options as a group block (it was "experimental" last I looked), so it wouldn't support the flex layout. Unless you're OK with only the link text being clickable, then you could use a link in a row, totally.

[jasmussen]

I personally think it's fine that either the text, or the link on the rigiht, is the clickable piece.

[ryelle]

I personally think it's fine that either the text, or the link on the rigiht, is the clickable piece.

If only the arrow side is the link, it will also need some descriptive text for the link — this is why we built the link wrapper block, so that the descriptive copy could be the link, and the whole thing is clickable (which IIRC was feedback we've gotten before).

[thetinyl]

Here's the URL for the post this notice will be directing folks to: https://wordpress.org/news/2024/05/wordcamp-europe-2024-mid-year-update-and-qa-with-matt-mullenweg/

While the post is live as of today, that's not a nudge to have the notice ready sooner. We're still good for a June 3/4 launch. (Want to make sure that's clear. Don't want to frazzle anyone.)

[jasmussen]

For anyone following this one, we're also working in #446 (comment).

[daveloodts]

@marko-srb , @thetinyl a question: why is that banner fully around Matt's talk? It indicates that there is no WCEU on 14 june.
That's a missed chance to promote the biggest WordPress event currently happening.

A better line would be:
"Discover WordCamp Europe online: watch the live streams on 14 and 15 June".

And in that referred post people will eventually read about Matt's talk.

[DanSoschin]

Recap shipped >> https://wordpress.org/news/2024/06/highlights-from-wordcamp-europe-2024/

Project update recording >> https://www.youtube.com/watch?v=ELW4Jdvujbc