Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blocks: Create a Live Schedule block #243

Merged
merged 12 commits into from
Oct 11, 2019
Merged

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Sep 27, 2019

Add a new block called "Live Schedule", which can be used on the Day of Event template (or any other page). Combined with #241, this will let organizers have total control over the content of the Day of Event template.

This also removes the need for a separate build script/process in mu-plugins/theme-templates, that will be removed in a following PR. It does remove the self-updating "Latest Posts" section, but organizers can use the Latest Posts block if they want, and this reduces the repeat API calls. If more organizers want this functionality we can see about hooking into the Latest Posts block.

Fixes #127 – You can customize the heading text and level in the block UI.
See #130 – Addresses a few issues from this issue

Screenshots

In wp-admin, it only displays a placeholder (for now). The headings are customized in the sidebar.

Screen Shot 2019-09-27 at 6 46 16 PM

No sessions upcoming:

Screen Shot 2019-09-27 at 6 51 33 PM

List of sessions (faked "now" to be 10am):

Screen Shot 2019-09-27 at 6 56 07 PM


Still to do (in following PRs)

  • Fix issues with time
    • If we're after the start of the last event for a day, it says nothing's happening (we could check if there were other sessions on this day, and put up a "done for the day" message?)
    • If we're before the first event on the second day, it considers the last session of the prev day "on now".
  • Remove stripTagsAndEncodeText and support diacritics.
  • Audit the imports from the frontend script so we're not loading too much to the page
  • Add a better, interactive preview in the editor
  • (as mentioned) Remove the JS code from day of theme-templates.

To test

  • Create a few sessions that are happening now (or add a property to $data['live-schedule'] called nowOverride which should be a fake "now" in miliseconds).
  • Add the Live Schedule block to a page.
  • View it on the frontend, it should show you the current and upcoming sessions.

@ryelle ryelle added [Component] Blocks All custom blocks (Speakers, CrowdCast, Live Schedule, etc) [Component] Theme Templates Theme-agnostic templates like Day of Event, Offline labels Sep 27, 2019
@ryelle ryelle added this to the PWA beta version milestone Sep 27, 2019
@ryelle ryelle self-assigned this Sep 27, 2019
@ryelle ryelle force-pushed the update/blocks-live-schedule branch from fabbddb to 9fa8bd9 Compare September 30, 2019 22:24
@ryelle ryelle marked this pull request as ready for review September 30, 2019 22:31
@melchoyce
Copy link

An idea for a placeholder state, using obviously fake session data:

image

@ryelle
Copy link
Contributor Author

ryelle commented Oct 2, 2019

A future improvement could be to add a setting to restrict to a single track, so this block could be used on a livestream page.

ryelle added 12 commits October 11, 2019 14:55
This uses the code from the day of event template to create a Live Schedule block
This lets us request the API every 5 minutes to refresh the session data, while still updating the schedule rapidly.
Since front-end.js is its own entrypoint, the CSS imported there is pulled into `live-schedule.css`, while CSS imported into `index.js` is pulled in the global blocks.css which is loaded as the editor_style for all WC blocks.
@ryelle ryelle force-pushed the update/blocks-live-schedule branch from edda0fb to 3ec58c6 Compare October 11, 2019 19:43
@ryelle
Copy link
Contributor Author

ryelle commented Oct 11, 2019

Rebased to remove the eslint require-jsdoc exceptions , and added the editor preview – so now it looks like this in the editor:

Screen Shot 2019-10-11 at 3 42 34 PM

The data we use to populate that is in data/mock.js. It doesn't pull any API data, since the site probably doesn't have any active sessions when someone is editing the page.

@ryelle ryelle merged commit 167342e into production Oct 11, 2019
@ryelle ryelle deleted the update/blocks-live-schedule branch November 1, 2019 21:39
ryelle added a commit that referenced this pull request Jan 7, 2020
This creates a new page that will use the Day of Event template on new sites. It includes the Live Schedule block from #243, and the live Latest Posts block from #250. Now that all this content is blocks, organizers can fully control the information & style of this page.

Fixes #130
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Blocks All custom blocks (Speakers, CrowdCast, Live Schedule, etc) [Component] Theme Templates Theme-agnostic templates like Day of Event, Offline
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Day of Event Template: Decide on strings for "on now" & "up next" headings
3 participants