Conditionally hide blocks based on date/time

[ryelle]

For the homepage, we want to swap out banners for events and other important announcements. Currently, this is done by editing the page and adding new content. Once this is merged, these strings are immediately displayed, so there is no chance for translators to translate the content before it's on the page. The top section of the homepage might also be "taken over" by an event banner, which would remove the content and thus require translators to re-approve translations when the event is over.

Proposed solution

Install @ndiego's Block Visibility plugin. This will let us set conditions (date & time) controlling when the block appears on the page.

For example, we could have set up all of the WCEU banners with design and content, and the set dates so that the small link banner appears from June 3-14th, the large embed banner appears June 15-19th, and the regular banner is hidden from June 15-19th. This way, all the content is available for translators to prep as soon as we merge it (before June 3, ideally), and we don't need to time repeat deployments to swap out.

Screenshots

Banners with visibility indicators in the editor

Visibility settings on a banner

HTML output example

<!-- wp:group {"metadata":{"name":"Hero"},"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","top":"5rem","bottom":"5rem"}}},"layout":{"type":"constrained"},"blockVisibility":{"controlSets":[{"id":1,"enable":true,"controls":{"dateTime":{"schedules":[{"enable":true,"start":"2024-06-13T00:00:00","end":"2024-06-15T00:00:00","isSeasonal":false}],"hideOnSchedules":false}}}]}} -->
<div class="wp-block-group alignfull" id="intro" style="padding-top:5rem;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:5rem;padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:paragraph -->
<p>Show during WCEU</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Hero"},"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","top":"5rem","bottom":"5rem"}}},"layout":{"type":"constrained"},"blockVisibility":{"controlSets":[{"id":1,"enable":true,"controls":{"dateTime":{"schedules":[{"enable":true,"start":"2024-06-13T00:00:00","end":"2024-06-15T00:00:00","isSeasonal":false}],"hideOnSchedules":true}}}]}} -->
<div class="wp-block-group alignfull" id="intro" style="padding-top:5rem;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:5rem;padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:paragraph -->
<p>Hide during WCEU</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

All blocks are present in the content, so the pattern sync script should work to add translation wrappers to everything, so we don't risk invalidating translations just to show an event banner.

The Block Visibility plugin does have other options for content controls, but we can disable them to make the UI simpler.

I've given the block a cursory review and it seems fine, but I'd appreciate a more backend/security-focused review if @dd32 or @pkevan have time :)