New UI for Event Date block; renaming files and vars for consistency.

[mauteri]

Description of the Change

New UI for Event Date includes a duration dropdown of 1, 1.5, 2, 3 hours to choose from. This makes it easier to select start and end dates as this is relative to the start date. The option to select both start and end dates are still available, though this UI is probably less used than simply choosing form pre-selected durations.

Minor refactoring changing instances of TimeZone and timeZone to Timezone and timezone for consistency in code. Removed code that is no longer needed as well.

Screenshot of new UI:

How to test the Change

Create and update old events. Things to test:

• Change duration and see that event start/end match.
• Check that duration UI is same on reload.
• Change duration to use custom date and see that selecting start and end dates works. On refresh see it still uses that UI.
• Put event start in the past and see that UI still works.
• Put event start in the future and see UI still works.
• Put event end sooner than event start and see UI reacts properly.

Changelog Entry

Added - New feature
Changed - Existing functionality
Removed - Feature

Credits

Props @mauteri

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests pass.

[what-the-diff]

PR Summary

• Updated Asset Versions
  The versions of a few files, notably event-date, venue, and editor, have been updated. This contributes to keeping our application up-to-date and efficient.

• Enhanced Layout in Event-date Block
  A new technique __experimentalVStack has been incorporated in the event-date block, which offers improved vertical spacing, resulting in a more visually appealing layout.

• Modified Time Format
  The time format in dateTimeEnd has been adjusted to use dateTimeDatabaseFormat rather than dateTimeMomentFormat. This change makes the time format friendlier for our database operations.

• Improved Labeling Format in DateTimeEnd Component
  The formatting of the "End" label in the DateTimeEnd component has been changed to "Date & time end", enhancing user comprehension.

• Enhanced DateTimeRange Component
  The DateTimeRange component now includes a new Duration component, along with an updated state to manage event duration. These additions allow users to manage the length of their events more efficiently.

• Created a New Duration Component
  A new Duration component has been introduced, allowing users to easily select the duration of their events and automatically set the end date/time.

• Updated DateTimeStart Component
  The DateTimeStart component has been adjusted to include duration selection, automatically updating the end date/time as the duration selection changes.

• Changed Component Name for Consistency
  For naming consistency, the TimeZone component has been renamed to Timezone.

• Enhanced Date/Time Management
  New functions have been added to the dateTime helper that efficiently calculate duration options and offsets, thus contributing to improved date/time management within the application.

• Improved State Management
  The Redux store, which manages the state of the application, has been updated to handle the new duration-related state changes.

• Unified DateTime Format
  The date/time formats used throughout the application have been unified to a single, database-friendly version, promoting consistency across the codebase.

• Simplified Rendering of DateTimeRangePanel Component
  Rendering behavior for the DateTimeRangePanel component has been streamlined, simplifying complex tasks and making the application more efficient.

• Improved Unit Tests
  Unit tests have been adjusted to validate the unified date/time format and new duration features, ensuring functionality works as expected.

[github-actions]

Preview changes with Playground

You can preview the least recent changes for PR#873 by following one of the links below:

• Normal WordPress playground for PR#873

• Seamless WordPress playground for PR#873

• WordPress playground Builder for PR#873

• Download .zip with build changes

⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.