Homepage banner: WCUS 2024 Live Stream Hero Banner

[thetinyl]

This banner will replace the small notice banner (#492) to include a YouTube embed and more WCUS 2024 branding elements. It's meant to be similar in design to the WCEU 2024 banner (#447).

Dates

• Go live: September 18
• Streaming link updates: The streaming link may need to be updated on September 19 and again on September 20
• Recap update: The link to the event recap will need to be added around September 23
• Take down: October 18

Content and copy

Live date	Copy
Sept 18	Watch the live stream of WordCamp US 2024 (September 18-20) to stay on top of all the keynotes and presentations.
Sept 23 (tentative)	Catch up on all the keynotes and presentations from WordCamp US 2024—including Cofounder Matt Mullenweg’s closing Q&A. Read the event recap

URLs:
Streaming and recap URLs forthcoming

Design

Design can be similar to what was done for WCEU 2024 with the appropriate branding changes to reflect WCUS 2024.

Notes

• Copy includes two versions: one without the recap link, one with the recap link.
• @ryelle You mentioned previous challenges with the YouTube embed. Do you think we'll need to plan for not having it in the banner this time around as a fail safe?

[ryelle]

You mentioned previous challenges with the YouTube embed. Do you think we'll need to plan for not having it in the banner this time around as a fail safe?

The challenge is that the no-cookie domain is not supported as an embed via the embed block (core ticket), so that method doesn't work. For WCEU, I used an HTML block with the embed code HTML. However, that uses an iframe, which the security on multisites strips out, so I had also added a workaround to allow iframes from my sandbox (which we should not do on production). If anyone without the workaround edits the page, the iframe is stripped out.

Here are some options of varying complexity/feasibility…

• Filter the core embed to support the nocookie URL
• Create a new helper block just for youtube embeds on main
• Use the regular youtube embed, which works, but is more likely to run afoul of privacy laws
• Always have someone with a sandbox edit the page, so it won't be stripped out

Workaround code

add_filter(
	'wp_kses_allowed_html',
	function( $tags ) {
		$tags['iframe'] = array(
			'width' => true,
			'height' => true,
			'src' => true,
			'title' => true,
			'frameborder' => true,
			'allow' => true,
			'referrerpolicy' => true,
			'allowfullscreen' => true,
		);
		return $tags;
	}
);

[thetinyl]

@sfougnier I've included copy above for whenever you get to this. Thank you!

Here are some options of varying complexity/feasibility

@ryelle Are any of these options doable within our timeline?

[sfougnier]

Here are the designs for the two banners:

Pre-event

Event recap

Any concerns with these @ryelle ?

[thetinyl]

Thanks @sfougnier! In the pre-event banner design, is the intention not to include a YT embed?

I think it's a good idea to have a version without it as a failsafe, but ideally we'll have the live streams embedded on the homepage during the whole event (starting Sept 18 with Showcase Day). So we can probably go with the Event recap version for both (design-wise) and just swap copy.

[sfougnier]

I think it's a good idea to have a version without it as a failsafe, but ideally we'll have the live streams embedded on the homepage during the whole event (starting Sept 18 with Showcase Day). So we can probably go with the Event recap version for both (design-wise) and just swap copy.

Sure, that makes sense! I thought we had the two versions for WCEU, but it's entirely possible I made that up.

[ryelle]

@sfougnier Are the red lines (borders?) part of the design? How do you expect it to behave on smaller/larger screens, like this (sorry for hacky photoshop)?

I thought we had the two versions for WCEU, but it's entirely possible I made that up.

I believe we did, and that ended up being confusing 😅 — we can have the no-embed one as a backup, but we'll go from the small banner in #492 right to the large banner with embed (with the "watch the livestream" text).

Once the event is over and we have the cut video (Matt's closing, I assume), the banner will use the same embed layout just with the different text.

@ryelle Are any of these options doable within our timeline?

I've asked Neso for some input (and maybe help), so we'll see. At least the small banner isn't blocked by this.

[sfougnier]

Are the red lines (borders?) part of the design? How do you expect it to behave on smaller/larger screens, like this (sorry for hacky photoshop)?

@ryelle Yes, what you mocked up looks right! I think the borders can remain vertical as you have them.

I believe we did, and that ended up being confusing

Makes sense.

[jasmussen]

@sfougnier @thetinyl @ryelle I've built out a first version of the three banners on this page (requires edit acces). Screenshot:

This mainly works in the editor, not on the frontend, so it's been tricky testing the mobile pieces.

That includes the banner, due in 2 days (#492), the pre-event notice, and the post-event notice. Kudos Saul, designs look great. Please let me know what changes I need to make to these, or how I can better test the mobile pieces; though I am reusing parts of the setup from WCEU so hopefully it should work reasonably.

[ryelle]

Please let me know what changes I need to make to these, or how I can better test the mobile pieces; though I am reusing parts of the setup from WCEU so hopefully it should work reasonably.

You could build and test these directly on the homepage and it would be fine, just comment on the created PR that it's in progress. But I've added one of the page templates to your Banners test page so you can preview these with the correct spacing, etc.

Clarifying in case other Nesoites end up deploying things here:

The second banner is not a "Pre-event banner", it's just a fallback in case the video embed can't be used. We will hopefully only need the "pre-event notice" and "post-event banner" which is actually the "during event banner"; the video embed will be the livestream during the event, and cut video + recap link after.

[jasmussen]

We're close to the intended date, but thank you for applying the template, in testing, the banners look to behave well:

Next decision is: what do we put up and when? Let me know, and I'll copy the material to the main page, make the update PR and comment on it about when it's supposed to go live.

CC: @thetinyl @sfougnier

[thetinyl]

Thanks for putting all this together, @jasmussen. They look good to me!

The second banner is not a "Pre-event banner", it's just a fallback in case the video embed can't be used. We will hopefully only need the "pre-event notice" and "post-event banner" which is actually the "during event banner"; the video embed will be the livestream during the event, and cut video + recap link after.

Yep. All of this.

Dates and times for going live are as follows (same as what's outlined above, for reference):

• September 18 @ 16:00 UTC: Live stream banner goes live with YouTube embed and "Watch the live stream copy..."
• September 23 @ Time TBD: Update YouTube embed link, add recap link, copy updates to "Catch up on all the keynotes..."

@bmcsherry Do you happen to have the Showcase Day live stream link available already?

[jasmussen]

Note that I will be AFK and out of reach of computers from Sep 13-Sep 22, so we'll need someone else to copy/paste/publish the banners from the banners page, to the homepage on those suggested dates. If we give you the right edit access, is this something you can own @thetinyl? I'm happy to walk you through the process over a call, if need be.

[thetinyl]

we'll need someone else to copy/paste/publish the banners from the banners page, to the homepage on those suggested dates. If we give you the right edit access, is this something you can own @thetinyl?

Absolutely.

[jasmussen]

@ryelle can I ask a favor and give @thetinyl edit access to the banners and homepage pages? Thank you 🙏

[ryelle]

Created an issue about the access, since it's a separate task from the banners. #499

[thetinyl]

@ryelle Just want to make sure you have everything you need for this. The YouTube playlist is working and all that?

[ryelle]

We've discovered that a youtube playlist will work, but I don't know/have the link to the playlist we'll be using.

[thetinyl]

but I don't know/have the link to the playlist we'll be using.

That would help, wouldn't it? 😅 Here's the playlist link: https://www.youtube.com/playlist?list=PL1pJFUVKQ7EQixhsOkTHpy9-VIF3hxqsx

[ryelle]

Thanks! I've updated the Banners page with the shortcode embed (so it doesn't render in the editor, but I promise it's there 🙂 ). I've also updated the permissions on the site, so you should be able to access the Banners demo page now.

Here's the current preview:

This will update to whatever the first video in the playlist is.

Before the 18th, someone will need to update the homepage content to copy over that banner. This will trigger the sync and automated PR. Who should that person be?

Once the PR is created, a dev will need to merge and deploy. Can that happen on the evening of the 17th? If so, I can do it. If it needs to wait for the morning of the 18th, we might want to tag in @pkevan.

(if the 17th is okay, I'm happy to move the banner over too)

[ryelle]

oh, I just realized that banner still has the post-event content — let me swap that… Here we go.

Do you want this to link to anything? ex, https://us.wordcamp.org/2024/livestream/ ?

[thetinyl]

Before the 18th, someone will need to update the homepage content to copy over that banner. This will trigger the sync and automated PR. Who should that person be?

I saw that I should have permission to see/edit the banner test page, though it doesn't seem to be working yet. If it does work, then that person can be me. I can do it sometime on the 17th (Monday).

Once the PR is created, a dev will need to merge and deploy. Can that happen on the evening of the 17th?

I think that should be fine. We'll need to update the copy a little bit to include some dates so it doesn't seem like the dead air is a mistake. I've updated the pre-event copy here to reflect this.

Do you want this to link to anything? ex, https://us.wordcamp.org/2024/livestream/ ?

Do you mean besides the YouTube channel? I guess it doesn't hurt to have a text link. Let's link the 'live stream of WordCamp US 2024' part of the copy to that URL. Thanks for thinking of this!