added timezone, escaped attrs, add external thumbnail

Author: kaeizen

src/block/countdown/editor.scss

@@ -1,4 +1,4 @@
-.ugb-panel--countdown .components-datetime__time-wrapper {
+:is(.ugb-panel--countdown, .ugb-panel--video-popup) .components-datetime__time-wrapper {
 	.components-base-control {
 		margin-bottom: 0px !important;
 	}
@@ -8,7 +8,7 @@
 	}
 }
 
-.ugb-panel--countdown .components-datetime__date {
+:is(.ugb-panel--countdown, .ugb-panel--video-popup) .components-datetime__date {
 	.components-datetime__date__day[aria-label*="Selected" i] {
 		color: #fff;
 		&:hover {

src/block/countdown/index.js

@@ -17,6 +17,8 @@ import metadata from './block.json'
 import deprecated from './deprecated'
 import substitute from './substitute'
 
+export { timezones } from './timezones'
+
 export const settings = {
 	...metadata,
 	icon: CountdownIcon,

src/block/video-popup/edit.js

@@ -18,6 +18,7 @@ import {
 	AdvancedToggleControl,
 	useBlockCssGenerator,
 	ControlSeparator,
+	AdvancedSelectControl,
 } from '~stackable/components'
 import {
 	BlockDiv,
@@ -39,6 +40,8 @@ import {
 	withQueryLoopContext,
 } from '~stackable/higher-order'
 
+import { timezones as TIMEZONE_OPTIONS } from '../countdown'
+
 /**
  * WordPress dependencies
  */
@@ -47,7 +50,8 @@ import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 import { memo } from '@wordpress/element'
-import { DatePicker } from '@wordpress/components'
+import { DateTimePicker } from '@wordpress/components'
+import { getSettings as getDateSettings } from '@wordpress/date'
 
 export const defaultIcon = '<svg data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
 
@@ -109,6 +113,7 @@ const Edit = props => {
 				videoName={ attributes.videoName }
 				videoUploadDate={ attributes.videoUploadDate }
 				videoDescription={ attributes.videoDescription }
+				videoUploadDateTimezone={ attributes.videoUploadDateTimezone }
 			/>
 
 			{ blockCss && <style key="block-css">{ blockCss }</style> }
@@ -133,6 +138,28 @@ const Edit = props => {
 }
 
 const InspectorControls = memo( props => {
+	const getUploadDate = ( uploadDate, timezone ) => {
+		// If it uses local timezone, get offset from WordPress settings
+		if ( ! timezone ) {
+			const { timezone: localTimezone } = getDateSettings()
+			const offset = Number( localTimezone.offset )
+			const hours = Math.floor( Math.abs( offset ) )
+			const minutes = Math.round( ( Math.abs( offset ) % 1 ) * 60 )
+
+			return uploadDate + ( offset >= 0 ? '+' : '-' ) +
+				String( hours ).padStart( 2, '0' ) + ':' +
+				String( minutes ).padStart( 2, '0' )
+		}
+
+		const date = new Date( uploadDate )
+		const offset = new Intl.DateTimeFormat( 'en-US', {
+			timeZone: timezone,
+			timeZoneName: 'longOffset',
+		} ).format( date ).slice( -6 )
+
+		return uploadDate + offset
+	}
+
 	return (
 		<>
 			<InspectorTabs hasLayoutPanel={ false } />
@@ -221,15 +248,21 @@ const InspectorControls = memo( props => {
 							// This text control allows users to see if a date has been set/removed
 							className="stk-components-datetime__date-input"
 							label={ __( 'Video upload date', i18n ) }
-							value={ props.videoUploadDate ? new Date( props.videoUploadDate ).toISOString().slice( 0, 10 ) : '' }
+							value={ props.videoUploadDate ? getUploadDate( props.videoUploadDate, props.videoUploadDateTimezone ) : '' }
+							onChange={ videoUploadDate => props.setAttributes( { videoUploadDate } ) }
 							inputType="date"
 							readOnly={ true }
 						/>
-						<DatePicker
+						<DateTimePicker
 							currentDate={ props.videoUploadDate }
-							onChange={ videoUploadDate => {
-								props.setAttributes( { videoUploadDate } )
-							} }
+							is12Hour={ true }
+							onChange={ videoUploadDate => props.setAttributes( { videoUploadDate } ) }
+						/>
+						<AdvancedSelectControl
+							label={ __( 'Timezone', i18n ) }
+							options={ TIMEZONE_OPTIONS }
+							attribute="videoUploadDateTimezone"
+							allowReset={ false }
 						/>
 					</> }
 

src/block/video-popup/editor.scss

@@ -28,21 +28,7 @@
 .editor-styles-wrapper .stk-block-video-popup [data-block] {
 	max-width: none;
 }
-.ugb-panel--video-popup .components-datetime__date {
-	.components-datetime__date__day[aria-label*="Selected" i] {
-		color: #fff !important;
-		&:hover {
-			color: #fff !important;
-		}
-	}
-	:last-child {
-		row-gap: 8px;
-		column-gap: 4px;
-		div:nth-of-type(7) {
-			justify-self: auto;
-		}
-	}
-}
+
 .stk-components-datetime__date-input .components-text-control__input {
 	background-color: #fff;
 }

src/block/video-popup/index.php

@@ -36,38 +36,61 @@ public function print_video_popup_schema() {
 			}
 		}
 
+		public function get_upload_date_timezone( $timezone_name ) {
+			// If it uses local timezone, get offset from WordPress settings
+			if ( ! $timezone_name ) {
+				$offset  = (float) get_option( 'gmt_offset' );
+				$hours   = (int) $offset;
+				$minutes = ( $offset - $hours );
+				$sign      = ( $offset < 0 ) ? '-' : '+';
+				$abs_hour  = abs( $hours );
+				$abs_mins  = abs( $minutes * 60 );
+
+				return sprintf( '%s%02d:%02d', $sign, $abs_hour, $abs_mins );
+			}
+
+			$timezone = new DateTimeZone( $timezone_name );
+			$datetime = new DateTime('now', $timezone);
+			return $datetime->format('P');
+		}
+
 		public function render_block_video_popup_schema( $block_content, $block ) {
 			// Initialize video schema
-			$video_schema = array();
-			$video_schema[ '@context' ] = 'https://schema.org';
-			$video_schema[ '@type' ] = 'VideoObject';
+			$video_schema = array(
+				'@context' => 'https://schema.org',
+				'@type' => 'VideoObject'
+			);
 
 			// Get video schema properties from block attributes
 			$attributes = $block[ 'attrs' ];
 
 			// Get video name from the title of the post if not set
 			$name = isset( $attributes[ 'videoName' ] ) ? $attributes[ 'videoName' ] : ( get_the_title() ?? '');
 			// Get video upload date from the date of the post if not set
-			$upload_date = isset( $attributes[ 'videoUploadDate' ] ) ? $attributes[ 'videoUploadDate' ] : ( get_the_date( 'c' ) || '');
+			$upload_date_timezone = $this->get_upload_date_timezone( isset( $attributes[ 'videoUploadDateTimezone' ] ) ? $attributes[ 'videoUploadDateTimezone' ] : false );
+			$upload_date = isset( $attributes[ 'videoUploadDate' ] ) ? $attributes[ 'videoUploadDate' ] . $upload_date_timezone : ( get_the_date( 'c' ) ?? '');
 			$description = isset( $attributes[ 'videoDescription' ] ) ? $attributes[ 'videoDescription' ] : '';
 			$content_url = isset( $attributes[ 'videoLink' ] ) ? $attributes[ 'videoLink' ] : '';
 
-			$video_schema[ 'name' ] = $name;
-			$video_schema[ 'description' ] = $description;
-			$video_schema[ 'uploadDate' ] = $upload_date;
-			$video_schema[ 'contentUrl' ] = $content_url;
+			error_log( $upload_date );
+
+			$video_schema[ 'name' ] = esc_attr( $name );
+			$video_schema[ 'description' ] = esc_attr( $description );
+			$video_schema[ 'uploadDate' ] = esc_attr( $upload_date );
+			$video_schema[ 'contentUrl' ] = esc_url( $content_url );
 
 			// Get thumbnail URL from the image block if it exists
 			if ( isset( $block[ 'innerBlocks' ] )
 				&& count( $block[ 'innerBlocks' ] ) === 2
 				&& $block[ 'innerBlocks' ][ 1 ][ 'blockName' ] === 'stackable/image'
 			) {
 				$image_attributes = $block[ 'innerBlocks' ][ 1 ][ 'attrs' ];
-				$thumbnail_url = isset( $image_attributes[ 'imageUrl' ] ) ? $image_attributes[ 'imageUrl' ] : '';
-				$video_schema[ 'thumbnailUrl' ] = $thumbnail_url;
+				$thumbnail_url = isset( $image_attributes[ 'imageUrl' ] ) ? $image_attributes[ 'imageUrl' ]
+					: ( isset( $image_attributes[ 'imageExternalUrl' ] ) ? $image_attributes[ 'imageExternalUrl' ] : '' );
+				$video_schema[ 'thumbnailUrl' ] = esc_url( $thumbnail_url );
 			}
 
-			$video_schema_json = json_encode( $video_schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES );
+			$video_schema_json = wp_json_encode( $video_schema, JSON_UNESCAPED_SLASHES );
 			$this->video_entities[] = $video_schema_json;
 
 			return $block_content;

src/block/video-popup/schema.js

@@ -74,6 +74,10 @@ export const attributes = ( version = VERSION ) => {
 				type: 'string',
 				default: '',
 			},
+			videoUploadDateTimezone: {
+				type: 'string',
+				default: '',
+			},
 		},
 		versionAdded: '3.0.0',
 		versionDeprecated: '',