Create a "State of the Word" landing page

[ndiego]

State of the Word occurs each year, but there is no consistent home for the event on WordPress.org, which makes promotion of the event challenging.

The idea is to start with a relatively simple landing page that includes the following information:

• Video/stream embed (YouTube)
• Event description
• Quotes from Matt
• Location, date, and time
• Instructions for how to view or attend
• Question submission instructions
• Watch party information
• Social media links
• Recap (added after the event)
• List of previous State of the Word events

The page, located at /state-of-the-word, would be updated each year for the next event.

[iandunn]

@ndiego I added the block that shows the map/list of events to the drafted page. I'm not seeing any SotW meetups scheduled yet, so I set it up to use WP20 events temporarily. That'll let you see how it works on the front end for now, and make any tweaks/requests.

Previously we've used this on a dedicated page, so it may need some modifications to work in the context of a section of a post. The length of the list of events in particular could be a concern. One option would be to disable the list and only use the map, although that's probably not great for a11y. Another option could be to setup a dedicated page for the event list/map, and then link to that page from the main page.

What do you think?

[iandunn]

Another option would be to disable the map, maybe disable the search filters, and the condense the list info to a single line. That'd be closer to https://wordpress.org/news/2022/11/state-of-the-word-2022/

[ndiego]

@ndiego I added the block that shows the map/list of events to the drafted page.

Previously we've used this on a dedicated page, so it may need some modifications to work in the context of a section of a post. The length of the list of events in particular could be a concern. One option would be to disable the list and only use the map, although that's probably not great for a11y. Another option could be to setup a dedicated page for the event list/map, and then link to that page from the main page.

Another option would be to disable the map, maybe disable the search filters, and the condense the list info to a single line. That'd be closer to https://wordpress.org/news/2022/11/state-of-the-word-2022/

What do you think?

Great questions. I do think that the list is quite long, but some updated styling could condense it quite a bit. Perhaps contain it in a scrollable container? (Probably not the best for a11y either)

@eidolonnight and @marko-srb what do you think? (You can view the map/list by previewing the draft page)

[eidolonnight]

With the post last year (2022), we were restricted to a single-column list. I assume that the design flexibility this year will allow us to display this in multiple columns or as a scrollable container. Also, the map, while nice, is not completely necessary (I.e. it could be shorter).

We also link folks to meetup.com, so if the number of watch parties becomes unrealistic to list in its entirety then we could display a sampling and simply add a button to see the full list elsewhere.

[jasmussen]

There is indeed flexibility in terms of columns, even collapsibles. A scrollable container is in the maybe category, but I would note also, we can have subpages, i.e. websiteurl.org/sotw/events if need be.

Ultimately handling that complexity on a page is likely going to happen in a Figma design session (Marko, happy to pair up here if helpful), and then implemented after the fact on the block editor page. Because of that, it seems useful to continue on the path to adding all the content to the page itself, so it can be rearranged and evaluated there.

[iandunn]

👍🏻 I'll leave the map in place for now so y'all can explore different options, but we can easily turn it off with a block attribute if we want to.

[ndiego]

Here is the associated PR: https://github.com/WordPress/wporg-main-2022/pull/352

[ndiego]

Closing this out as the page has been created: https://wordpress.org/state-of-the-word/