search

WordPress / wporg-main-2022

A block-based child theme for WordPress.org, plus local environment
72 stars 26 forks source link

Homepage banner: WCUS 2024 Live Stream Hero Banner #493

Closed thetinyl closed 1 week ago

thetinyl commented 2 months ago

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

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

ryelle commented 2 months ago

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…

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 commented 2 months ago

@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 commented 2 months ago

Here are the designs for the two banners:

Pre-event

Event banner i0

Event recap

Event banner i0-1

Any concerns with these @ryelle ?

thetinyl commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

@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)?

mobile 362822551-1edb61ea-ab8f-41e0-9192-ada2f3052849

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 commented 2 months ago

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 commented 2 months ago

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

Screenshot 2024-09-02 at 11 23 30

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 commented 2 months ago

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 commented 2 months ago

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

state

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 commented 2 months ago

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):

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

jasmussen commented 2 months ago

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 commented 2 months ago

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 commented 1 month ago

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

ryelle commented 1 month ago

Created an issue about the access, since it's a separate task from the banners. https://github.com/WordPress/wporg-main-2022/issues/499

thetinyl commented 1 month ago

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

ryelle commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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:

Screenshot 2024-09-13 at 4 48 56 PM

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 commented 1 month ago

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/ ?

Screenshot 2024-09-13 at 4 56 56 PM
thetinyl commented 1 month ago

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!

pkevan commented 1 month ago

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.

I'm likely to be unavailable for this, as I'm at a customer on-site all day and unsure of what that will look like, so best planning for it not to be me :)

ryelle commented 1 month ago

It's fine — since we can deploy tomorrow evening I can handle it.

ryelle commented 1 month ago

Okay, I've deployed the banner in #500 — it's using the playlist, so currently the video previewed is the Showcase Day Mt Hood feed 👍🏻

thetinyl commented 1 month ago

Thanks for all your help, @ryelle. Seems like everything is working as it should. 🥳

The next switch-up is with the recording of Matt's Q&A + the recap link (both likely to be ready late Friday or Saturday, I think.)

thetinyl commented 1 month ago

@ryelle I've set up the next version of the banner—with the recap link, but without the video embed (for now). Here's what it looks like:

image

Just waiting on the PR to come through and I'll link to this context there.

Thanks @jasmussen for setting this up so it was an easy copy+paste. 🎉

jasmussen commented 1 month ago

Fantastic, glad to hear it. I think we can continue to zero in on this, categorizing types of patterns for this stuff, to make it even simpler the next time.

thetinyl commented 1 month ago

Noting the PR where these changes are included: https://github.com/WordPress/wporg-main-2022/pull/501#issuecomment-2371772634

ryelle commented 1 month ago

I've deployed this update to the banner. Will there be any further updates here, or will this stay the large banner + image until Oct 18?

thetinyl commented 1 month ago

Will there be any further updates here, or will this stay the large banner + image until Oct 18?

As far as I'm aware, this is the state of the banner until Oct 18. @bmcsherry can double-confirm.

ndiego commented 3 weeks ago

While it's a bit earlier than planned, I think we should remove the WCUS banner now and revert to the default graphic on the homepage.

ndiego commented 1 week ago

I am closing this out now that the banner has been removed.