[ New Inline Format ] Introduce Inline Time Format for improved SEO and accessibility

packages/format-library/package.json

@@ -33,6 +33,7 @@
 		"@wordpress/components": "*",
 		"@wordpress/compose": "*",
 		"@wordpress/data": "*",
+		"@wordpress/date": "*",
 		"@wordpress/element": "*",
 		"@wordpress/html-entities": "*",
 		"@wordpress/i18n": "*",

packages/format-library/src/default-formats.js

@@ -9,6 +9,7 @@ import { link } from './link';
 import { strikethrough } from './strikethrough';
 import { underline } from './underline';
 import { textColor } from './text-color';
+import { time } from './time';
 import { subscript } from './subscript';
 import { superscript } from './superscript';
 import { keyboard } from './keyboard';
@@ -25,6 +26,7 @@ export default [
 	strikethrough,
 	underline,
 	textColor,
+	time,
 	subscript,
 	superscript,
 	keyboard,

packages/format-library/src/style.scss

@@ -2,3 +2,4 @@
 @import "./link/style.scss";
 @import "./text-color/style.scss";
 @import "./language/style.scss";
+@import "./time/style.scss";

packages/format-library/src/time/index.js

@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	DateTimePicker,
+	Popover,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { removeFormat, applyFormat, useAnchor } from '@wordpress/rich-text';
+import { postDate as icon } from '@wordpress/icons';
+import { dateI18n, getSettings } from '@wordpress/date';
+
+const name = 'core/time';
+const title = __( 'Time' );
+
+export const time = {
+	name,
+	title,
+	tagName: 'time',
+	className: null,
+	edit: Edit,
+	attributes: {
+		datetime: 'datetime',
+	},
+};
+
+function Edit( { isActive, value, onChange, contentRef } ) {
+	const [ date, setDate ] = useState( new Date() );
+	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+	const togglePopover = () => setIsPopoverVisible( ( state ) => ! state );
+	const dateTimeSettings = getSettings();
+
+	const applyDate = () => {
+		const formattedDate = dateI18n( 'c', date );
+		const attributes = {
+			datetime: formattedDate,
+		};
+		onChange(
+			applyFormat( value, {
+				type: name,
+				attributes,
+			} )
+		);
+		setIsPopoverVisible( false );
+	};
+
+	return (
+		<>
+			<RichTextToolbarButton
+				icon={ icon }
+				label={ title }
+				title={ title }
+				onClick={ () => {
+					if ( isActive ) {
+						onChange( removeFormat( value, name ) );
+					} else {
+						togglePopover();
+					}
+				} }
+				isActive={ isActive }
+				role="menuitemcheckbox"
+			/>
+			{ isPopoverVisible && (
+				<InlineDateUI
+					contentRef={ contentRef }
+					onClose={ togglePopover }
+					onApply={ applyDate }
+					date={ date }
+					onChangeDate={ setDate }
+					dateTimeSettings={ dateTimeSettings }
+				/>
+			) }
+		</>
+	);
+}
+
+function InlineDateUI( {
+	contentRef,
+	onClose,
+	onApply,
+	date,
+	onChangeDate,
+	dateTimeSettings,
+} ) {
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings: time,
+	} );
+
+	return (
+		<Popover
+			className="block-editor-format-toolbar__date-popover"
+			anchor={ popoverAnchor }
+			onClose={ onClose }
+		>
+			<DateTimePicker
+				is12Hour={ dateTimeSettings.formats.time }
+				currentDate={ date }
+				onChange={ onChangeDate }
+				startOfWeek={ dateTimeSettings.l10n.startOfWeek }
+			/>
+			<HStack alignment="right">
+				<Button
+					__next40pxDefaultSize
+					variant="primary"
+					text={ __( 'Apply' ) }
+					onClick={ onApply }
+				/>
+			</HStack>
+		</Popover>
+	);
+}

packages/format-library/src/time/style.scss

@@ -0,0 +1,6 @@
+.block-editor-format-toolbar__date-popover {
+	.components-popover__content {
+		width: auto;
+		padding: 1rem;
+	}
+}