Merge pull request #480 from GatherPress/fix-event-past-issue

Fix translation.

build/blocks/add-to-calendar/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '5b5e3a5e4641662e48ab');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'f3909d9560bbd3b75020');

build/blocks/event-date/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => '57dcd8049cc5ec8fddaa');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => '083cc7b917e8e9e4ec2e');

gatherpress.php

@@ -8,6 +8,7 @@
  * Version:      0.26.0
  * Requires PHP: 7.4
  * Text Domain:  gatherpress
+ * Domain Path: /languages
  * License:      GPLv2 or later (license.txt)
  *
  * This file serves as the main plugin file for GatherPress. It defines the plugin's basic information,

includes/core/classes/class-assets.php

@@ -153,6 +153,8 @@ public function admin_enqueue_scripts( string $hook ): void {
 				true
 			);
 
+			wp_set_script_translations( 'gatherpress-panels', 'gatherpress', GATHERPRESS_CORE_PATH . '/languages' );
+
 			$asset = $this->get_asset_data( 'modals' );
 			wp_enqueue_script(
 				'gatherpress-modals',
@@ -161,6 +163,8 @@ public function admin_enqueue_scripts( string $hook ): void {
 				$asset['version'],
 				true
 			);
+
+			wp_set_script_translations( 'gatherpress-modals', 'gatherpress', GATHERPRESS_CORE_PATH . '/languages' );
 		}
 
 		$settings      = Settings::get_instance();
@@ -206,6 +210,8 @@ function( $key ) {
 			$asset['version'],
 			true
 		);
+
+		wp_set_script_translations( 'gatherpress-admin', 'gatherpress', GATHERPRESS_CORE_PATH . '/languages' );
 	}
 
 	/**
@@ -228,6 +234,8 @@ public function editor_enqueue_scripts(): void {
 			$asset['version'],
 			true
 		);
+
+		wp_set_script_translations( 'gatherpress-editor', 'gatherpress', GATHERPRESS_CORE_PATH . '/languages' );
 	}
 
 	/**
@@ -278,7 +286,9 @@ protected function localize( int $post_id ): array {
 			'post_id'           => $post_id,
 			'post_type'         => Event::POST_TYPE,
 			'settings'          => array(
-				// @todo settings to come...
+				'date_format'   => $settings->get_value( 'general', 'formatting', 'date_format' ),
+				'time_format'   => $settings->get_value( 'general', 'formatting', 'time_format' ),
+				'show_timezone' => ( '1' === $settings->get_value( 'general', 'formatting', 'show_timezone' ) ),
 			),
 			'login_url'         => $this->get_login_url( $post_id ),
 			'registration_url'  => $this->get_registration_url( $post_id ),

includes/core/classes/class-block.php

@@ -46,7 +46,8 @@ protected function __construct() {
 	 * @return void
 	 */
 	protected function setup_hooks(): void {
-		add_action( 'init', array( $this, 'register_blocks' ) );
+		// Priority 11 needed for block.json translations of title and description.
+		add_action( 'init', array( $this, 'register_blocks' ), 11 );
 		add_filter( 'load_script_translation_file', array( $this, 'fix_translation_location' ), 10, 3 );
 	}
 
@@ -85,7 +86,9 @@ public function register_blocks(): void {
 		$blocks_directory = sprintf( '%1$s/build/blocks/', GATHERPRESS_CORE_PATH );
 		$blocks           = array_diff( scandir( $blocks_directory ), array( '..', '.' ) );
 		foreach ( $blocks as $block ) {
-			register_block_type( sprintf( '%1$s/build/blocks/%2$s', GATHERPRESS_CORE_PATH, $block ) );
+			register_block_type(
+				sprintf( '%1$s/build/blocks/%2$s', GATHERPRESS_CORE_PATH, $block )
+			);
 		}
 	}
 }

src/blocks/add-to-calendar/edit.js

@@ -16,7 +16,7 @@ const Edit = () => {
 	return (
 		<div {...blockProps}>
 			<EditCover>
-				<Flex justify="normal" align="flex-start" gap="4">
+				<Flex justify="normal" align="center" gap="4">
 					<FlexItem display="flex" className="gp-event-date__icon">
 						<Icon icon="calendar" />
 					</FlexItem>

src/blocks/event-date/edit.js

@@ -6,6 +6,7 @@ import moment from 'moment';
 /**
  * WordPress dependencies.
  */
+import { __, sprintf } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { Flex, FlexItem, Icon, PanelBody } from '@wordpress/components';
 import { useState } from '@wordpress/element';
@@ -15,13 +16,15 @@ import { useState } from '@wordpress/element';
  */
 import { Listener } from '../../helpers/broadcasting';
 import {
+	convertPHPToMomentFormat,
 	defaultDateTimeEnd,
 	defaultDateTimeStart,
 	getTimeZone,
 	getUtcOffset,
 } from '../../helpers/datetime';
 import EditCover from '../../components/EditCover';
 import DateTimeRange from '../../components/DateTimeRange';
+import { getFromGlobal } from '../../helpers/globals';
 
 /**
  * Similar to get_display_datetime method in class-event.php.
@@ -32,9 +35,13 @@ import DateTimeRange from '../../components/DateTimeRange';
  * @return {string} Displayed date.
  */
 const displayDateTime = (start, end, tz) => {
-	const dateFormat = 'dddd, MMMM D, YYYY';
-	const timeFormat = 'h:mm A';
-	const timeZoneFormat = 'z';
+	const dateFormat = convertPHPToMomentFormat(
+		getFromGlobal('settings.date_format')
+	);
+	const timeFormat = convertPHPToMomentFormat(
+		getFromGlobal('settings.time_format')
+	);
+	const timeZoneFormat = getFromGlobal('settings.show_timezone') ? 'z' : '';
 	const startFormat = dateFormat + ' ' + timeFormat;
 	const timeZone = getTimeZone(tz);
 	let endFormat = dateFormat + ' ' + timeFormat + ' ' + timeZoneFormat;
@@ -46,10 +53,11 @@ const displayDateTime = (start, end, tz) => {
 		endFormat = timeFormat + ' ' + timeZoneFormat;
 	}
 
-	return (
-		moment.tz(start, timeZone).format(startFormat) +
-		' to ' +
-		moment.tz(end, timeZone).format(endFormat) +
+	return sprintf(
+		/* translators: %1$s: datetime start, %2$s: datetime end, %3$s timezone. */
+		__('%1$s to %2$s %3$s'),
+		moment.tz(start, timeZone).format(startFormat),
+		moment.tz(end, timeZone).format(endFormat),
 		getUtcOffset(timeZone)
 	);
 };
@@ -65,7 +73,7 @@ const Edit = () => {
 	return (
 		<div {...blockProps}>
 			<EditCover>
-				<Flex justify="normal" align="flex-start" gap="4">
+				<Flex justify="normal" align="center" gap="4">
 					<FlexItem display="flex" className="gp-event-date__icon">
 						<Icon icon="clock" />
 					</FlexItem>

src/helpers/datetime.js

@@ -311,3 +311,63 @@ export function saveDateTime() {
 		});
 	}
 }
+
+/**
+ * Convert PHP date format to Moment.js date format.
+ *
+ * This function converts a PHP date format string to its equivalent Moment.js date format.
+ * It uses a mapping of PHP format characters to Moment.js format characters.
+ *
+ * @see https://gist.github.com/neilrackett/7881b5bef4cb4ae63af5c3a6a244cffa
+ *
+ * @since 1.0.0
+ *
+ * @param {string} format - The PHP date format to be converted.
+ * @return {string} The equivalent Moment.js date format.
+ */
+export function convertPHPToMomentFormat(format) {
+	const replacements = {
+		d: 'DD',
+		D: 'ddd',
+		j: 'D',
+		l: 'dddd',
+		N: 'E',
+		S: 'o',
+		w: 'e',
+		z: 'DDD',
+		W: 'W',
+		F: 'MMMM',
+		m: 'MM',
+		M: 'MMM',
+		n: 'M',
+		t: '', // no equivalent
+		L: '', // no equivalent
+		o: 'YYYY',
+		Y: 'YYYY',
+		y: 'YY',
+		a: 'a',
+		A: 'A',
+		B: '', // no equivalent
+		g: 'h',
+		G: 'H',
+		h: 'hh',
+		H: 'HH',
+		i: 'mm',
+		s: 'ss',
+		u: 'SSS',
+		e: 'zz', // deprecated since Moment.js 1.6.0
+		I: '', // no equivalent
+		O: '', // no equivalent
+		P: '', // no equivalent
+		T: '', // no equivalent
+		Z: '', // no equivalent
+		c: '', // no equivalent
+		r: '', // no equivalent
+		U: 'X',
+	};
+
+	return format
+		.split('')
+		.map((chr) => (chr in replacements ? replacements[chr] : chr))
+		.join('');
+}

test/unit/js/src/helpers/datetime.test.js

@@ -8,6 +8,7 @@ import 'moment-timezone';
  * Internal dependencies.
  */
 import {
+	convertPHPToMomentFormat,
 	defaultDateTimeEnd,
 	defaultDateTimeStart,
 	getDateTimeEnd,
@@ -237,3 +238,18 @@ test('updateDateTimeEnd without second argument', () => {
 
 	expect(global.GatherPress.event_datetime.datetime_end).toBe(date);
 });
+
+/**
+ * Coverage for convertPHPToMomentFormat.
+ */
+test('convertPHPToMomentFormat returns correct date format', () => {
+	const format = convertPHPToMomentFormat('F j, Y');
+
+	expect(format).toBe('MMMM D, YYYY');
+});
+
+test('convertPHPToMomentFormat returns correct time format', () => {
+	const format = convertPHPToMomentFormat('g:i a');
+
+	expect(format).toBe('h:mm a');
+});

test/unit/php/includes/core/classes/class-test-block.php

@@ -34,7 +34,7 @@ public function test_setup_hooks(): void {
 			array(
 				'type'     => 'action',
 				'name'     => 'init',
-				'priority' => 10,
+				'priority' => 11,
 				'callback' => array( $instance, 'register_blocks' ),
 			),
 			array(