Feat (Video Popup): add video schema

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

@@ -17,6 +17,8 @@ import {
 	InspectorBottomTip,
 	AdvancedToggleControl,
 	useBlockCssGenerator,
+	ControlSeparator,
+	AdvancedSelectControl,
 } from '~stackable/components'
 import {
 	BlockDiv,
@@ -38,6 +40,8 @@ import {
 	withQueryLoopContext,
 } from '~stackable/higher-order'
 
+import { timezones as TIMEZONE_OPTIONS } from '../countdown'
+
 /**
  * WordPress dependencies
  */
@@ -46,6 +50,8 @@ import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 import { memo } from '@wordpress/element'
+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>'
 
@@ -104,7 +110,10 @@ const Edit = props => {
 				setAttributes={ setAttributes }
 				videoLink={ attributes.videoLink }
 				videoId={ attributes.videoId }
-
+				videoName={ attributes.videoName }
+				videoUploadDate={ attributes.videoUploadDate }
+				videoDescription={ attributes.videoDescription }
+				videoUploadDateTimezone={ attributes.videoUploadDateTimezone }
 			/>
 
 			{ blockCss && <style key="block-css">{ blockCss }</style> }
@@ -129,14 +138,36 @@ 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 } />
 
 			<InspectorStyleControls>
 				<PanelAdvancedSettings
 					title={ __( 'General', i18n ) }
-					id="general"
+					id="video-popup"
 					initialOpen={ true }
 				>
 					<ImageControl2
@@ -146,11 +177,17 @@ const InspectorControls = memo( props => {
 						onRemove={ () => props.setAttributes( {
 							videoLink: '',
 							videoId: '',
+							videoName: '',
+							videoDescription: '',
+							videoUploadDate: '',
 						} ) }
 						onChange={ media => {
 							props.setAttributes( {
 								videoLink: media.url,
 								videoId: media.url,
+								videoName: media.title, // Use title, description and date from media library for video schema
+								videoDescription: media.description,
+								videoUploadDate: media.date.toISOString(),
 							} )
 						} }
 						imageId={ urlIsVideo( props.videoLink ) ? props.videoId : '' }
@@ -164,10 +201,16 @@ const InspectorControls = memo( props => {
 						isFormatType={ false }
 						placeholder="https://"
 						value={ ! urlIsVideo( props.videoLink ) ? props.videoLink : '' }
-						onChange={ videoLink => props.setAttributes( {
-							videoLink,
-							videoId: getVideoProviderFromURL( videoLink ).id,
-						} ) }
+						onChange={ videoLink => {
+							const videoProvider = getVideoProviderFromURL( videoLink )
+							props.setAttributes( {
+								videoLink,
+								videoId: videoProvider.id,
+								videoName: '',
+								videoDescription: '',
+								videoUploadDate: '',
+							} )
+						} }
 					/>
 					{ isVideoFile( props.videoLink ) && <>
 						<AdvancedToggleControl
@@ -186,6 +229,43 @@ const InspectorControls = memo( props => {
 							defaultValue={ false }
 						/>
 					</> }
+					{ props.videoLink && <>
+						<ControlSeparator />
+						<p>{ __( 'Note: The following attributes are used to create the video schema.', i18n ) }</p>
+						<AdvancedTextControl
+							label={ __( 'Video name', i18n ) }
+							value={ props.videoName }
+							onChange={ videoName => props.setAttributes( { videoName } ) }
+						/>
+						<AdvancedTextControl
+							label={ __( 'Video description', i18n ) }
+							value={ props.videoDescription }
+							onChange={ videoDescription => props.setAttributes( { videoDescription } ) }
+							isMultiline={ true }
+						/>
+						<AdvancedTextControl
+							// The date picker below always highlights a date even if there is no `videoUploadDate` attribute
+							// 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 ? getUploadDate( props.videoUploadDate, props.videoUploadDateTimezone ) : '' }
+							onChange={ videoUploadDate => props.setAttributes( { videoUploadDate } ) }
+							inputType="date"
+							readOnly={ true }
+						/>
+						<DateTimePicker
+							currentDate={ props.videoUploadDate }
+							is12Hour={ true }
+							onChange={ videoUploadDate => props.setAttributes( { videoUploadDate } ) }
+						/>
+						<AdvancedSelectControl
+							label={ __( 'Timezone', i18n ) }
+							options={ TIMEZONE_OPTIONS }
+							attribute="videoUploadDateTimezone"
+							allowReset={ false }
+						/>
+					</> }
+
 				</PanelAdvancedSettings>
 
 			</InspectorStyleControls>

src/block/video-popup/editor.scss

@@ -28,3 +28,7 @@
 .editor-styles-wrapper .stk-block-video-popup [data-block] {
 	max-width: none;
 }
+
+.stk-components-datetime__date-input .components-text-control__input {
+	background-color: #fff;
+}

src/block/video-popup/index.php

@@ -19,3 +19,83 @@ function stackable_load_videopopup_frontend_script() {
 	}
 	add_action( 'stackable/video-popup/enqueue_scripts', 'stackable_load_videopopup_frontend_script' );
 }
+
+if ( ! class_exists( 'Stackable_Video_Popup_Schema' ) ) {
+	class Stackable_Video_Popup_Schema {
+		public $video_entities = [];
+
+		function __construct() {
+			add_filter( 'render_block_stackable/video-popup', array( $this, 'render_block_video_popup_schema' ), 10, 2 );
+			add_filter( 'wp_footer', array( $this, 'print_video_popup_schema' ) );
+		}
+
+		public function print_video_popup_schema() {
+			if ( count( $this->video_entities ) ) {
+				// Compile all video schema entities into a single script
+				echo '<script type="application/ld+json"> [ ' . implode( ', ', $this->video_entities ) . ' ] </script>';
+			}
+		}
+
+		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(
+				'@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_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' ] : '';
+
+			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' ]
+					: ( isset( $image_attributes[ 'imageExternalUrl' ] ) ? $image_attributes[ 'imageExternalUrl' ] : '' );
+				$video_schema[ 'thumbnailUrl' ] = esc_url( $thumbnail_url );
+			}
+
+			$video_schema_json = wp_json_encode( $video_schema, JSON_UNESCAPED_SLASHES );
+			$this->video_entities[] = $video_schema_json;
+
+			return $block_content;
+		}
+	}
+
+	new Stackable_Video_Popup_Schema();
+}

src/block/video-popup/schema.js

@@ -62,6 +62,22 @@ export const attributes = ( version = VERSION ) => {
 				type: 'boolean',
 				default: false,
 			},
+			videoName: {
+				type: 'string',
+				default: '',
+			},
+			videoDescription: {
+				type: 'string',
+				default: '',
+			},
+			videoUploadDate: {
+				type: 'string',
+				default: '',
+			},
+			videoUploadDateTimezone: {
+				type: 'string',
+				default: '',
+			},
 		},
 		versionAdded: '3.0.0',
 		versionDeprecated: '',

src/editor.scss

@@ -178,3 +178,32 @@ $block-joined: #{ join($blocks, (), $separator: comma) };
 		padding: 2px;
 	}
 }
+
+// Adjust the styles of †he datetime picker.
+.ugb-toggle-panel-body {
+	.components-datetime__time-wrapper {
+		.components-base-control {
+			margin-bottom: 0px !important;
+		}
+
+		.components-datetime__timezone {
+			display: none;
+		}
+	}
+
+	.components-datetime__date {
+		.components-datetime__date__day[aria-label*="Selected" i] {
+			color: #fff;
+			&:hover {
+				color: #fff !important;
+			}
+		}
+		:last-child {
+			row-gap: 8px;
+			column-gap: 4px;
+			div:nth-of-type(7) {
+				justify-self: auto;
+			}
+		}
+	}
+}