@@ -377,6 +400,8 @@ export default function App() {
onScrapeProcessed={ handleScrapeProcessed }
onSaveReady={ handleSaveReady }
onUndoReady={ handleUndoReady }
+ timezone={ data.timezone }
+ onPostStatusChange={ handlePostStatusChange }
categoryNonce={ data.categoryNonce || '' }
ajaxUrl={ data.ajaxUrl || '' }
/>
diff --git a/src/components/Header.js b/src/components/Header.js
index 89cee34..5c488eb 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -20,6 +20,8 @@ import {
DropdownMenu,
MenuGroup,
MenuItem,
+ Popover,
+ DateTimePicker,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
@@ -33,6 +35,8 @@ import {
*/
import { buildSuggestedContentFromMetadata } from '../utils';
+const ONE_MINUTE = 60 * 1000;
+
/**
* Detect if running on macOS for keyboard shortcut hints.
*
@@ -45,6 +49,146 @@ function isMacOS() {
);
}
+/**
+ * Derive a short timezone abbreviation from a timezone string.
+ *
+ * @param {string} tz Timezone string (e.g., 'America/New_York' or 'UTC+5').
+ * @param {string} date ISO date string to derive abbreviation for (for DST accuracy).
+ * @return {string} Timezone abbreviation (e.g., 'EST' or 'UTC+5').
+ */
+function getTimezoneAbbreviation( tz, date ) {
+ if ( ! tz ) {
+ return '';
+ }
+
+ // Fixed offset timezones pass through directly.
+ if ( /^UTC[+-]?\d*$/.test( tz ) ) {
+ return tz;
+ }
+
+ try {
+ const formatter = new Intl.DateTimeFormat( 'en-US', {
+ timeZone: tz,
+ timeZoneName: 'short',
+ } );
+ // Parse date parts to build a UTC instant matching the wall-clock time,
+ // so DST lookup is correct for the selected date, not the browser's interpretation.
+ let refDate = new Date();
+ if ( date ) {
+ const m = date.match(
+ /(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})/
+ );
+ if ( m ) {
+ refDate = new Date(
+ Date.UTC(
+ Number( m[ 1 ] ),
+ Number( m[ 2 ] ) - 1,
+ Number( m[ 3 ] ),
+ Number( m[ 4 ] ),
+ Number( m[ 5 ] )
+ )
+ );
+ }
+ }
+ const parts = formatter.formatToParts( refDate );
+ const tzPart = parts.find( ( p ) => p.type === 'timeZoneName' );
+ return tzPart ? tzPart.value : tz;
+ } catch {
+ return tz;
+ }
+}
+
+/**
+ * Get the current date/time as an ISO string in the site timezone.
+ *
+ * @param {string} tz Timezone string.
+ * @return {string} ISO 8601 date string.
+ */
+function getCurrentDateInTimezone( tz ) {
+ const pad = ( n ) => String( n ).padStart( 2, '0' );
+ const formatNaive = ( d ) =>
+ `${ d.getUTCFullYear() }-${ pad( d.getUTCMonth() + 1 ) }-${ pad(
+ d.getUTCDate()
+ ) }T${ pad( d.getUTCHours() ) }:${ pad( d.getUTCMinutes() ) }:${ pad(
+ d.getUTCSeconds()
+ ) }`;
+
+ if ( ! tz ) {
+ return formatNaive( new Date() );
+ }
+
+ // Handle fixed-offset timezones (e.g. "UTC+2", "UTC-10") which
+ // Intl.DateTimeFormat does not accept.
+ const offsetMatch = tz.match( /^UTC([+-]\d+(?:\.\d+)?)$/ );
+ if ( offsetMatch ) {
+ const offsetHours = parseFloat( offsetMatch[ 1 ] );
+ const now = new Date();
+ // Shift UTC time by the fixed offset to get wall-clock time.
+ return formatNaive( new Date( now.getTime() + offsetHours * 3600000 ) );
+ }
+
+ try {
+ const now = new Date();
+ const formatter = new Intl.DateTimeFormat( 'en-CA', {
+ timeZone: tz,
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false,
+ } );
+ const parts = formatter.formatToParts( now );
+ const get = ( type ) =>
+ parts.find( ( p ) => p.type === type )?.value || '';
+ return `${ get( 'year' ) }-${ get( 'month' ) }-${ get( 'day' ) }T${ get(
+ 'hour'
+ ) }:${ get( 'minute' ) }:${ get( 'second' ) }`;
+ } catch {
+ return formatNaive( new Date() );
+ }
+}
+
+/**
+ * Parse a naive datetime string to UTC milliseconds by extracting parts directly,
+ * avoiding browser-local timezone interpretation via new Date().
+ *
+ * @param {string} dateString Naive ISO date string (e.g., "2026-03-07T15:00:00").
+ * @return {number} Milliseconds (as if the wall-clock time were in UTC).
+ */
+function parseNaiveToMs( dateString ) {
+ const m = dateString.match( /(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})/ );
+ if ( ! m ) {
+ return new Date( dateString ).getTime();
+ }
+ return Date.UTC(
+ Number( m[ 1 ] ),
+ Number( m[ 2 ] ) - 1,
+ Number( m[ 3 ] ),
+ Number( m[ 4 ] ),
+ Number( m[ 5 ] )
+ );
+}
+
+/**
+ * Check whether a date string represents a future date using a 1-minute buffer.
+ * Matches Gutenberg's isEditedPostBeingScheduled pattern.
+ *
+ * Both dateString and the current time are parsed as wall-clock parts via
+ * parseNaiveToMs to avoid browser-local timezone reinterpretation at DST boundaries.
+ *
+ * @param {string} dateString ISO date string to check (naive, in site timezone).
+ * @param {string} tz Site timezone string.
+ * @return {boolean} True if the date is more than 1 minute in the future.
+ */
+function isFutureDate( dateString, tz ) {
+ const selectedMs = parseNaiveToMs( dateString );
+ const nowInSiteTz = getCurrentDateInTimezone( tz );
+ const nowMs = parseNaiveToMs( nowInSiteTz );
+ return selectedMs - nowMs > ONE_MINUTE;
+}
+
/**
* Header component.
*
@@ -66,8 +210,19 @@ function isMacOS() {
* @param {Function} props.onRedo Redo callback.
* @param {boolean} props.hasUndo Whether undo is available.
* @param {boolean} props.hasRedo Whether redo is available.
+ * @param {Object} props.capabilities User capabilities.
+ * @param {string} props.timezone Site timezone string from wp_timezone_string().
+ * @param {string} props.postStatus Current post status.
+ * @param {string} props.postDate Current post date (ISO 8601).
* @return {JSX.Element} Header component.
*/
+export {
+ getTimezoneAbbreviation,
+ getCurrentDateInTimezone,
+ parseNaiveToMs,
+ isFutureDate,
+};
+
export default function Header( {
siteName,
siteUrl,
@@ -86,6 +241,10 @@ export default function Header( {
onRedo,
hasUndo = false,
hasRedo = false,
+ capabilities = {},
+ timezone = '',
+ postStatus = '',
+ postDate = '',
} ) {
const [ scanUrl, setScanUrl ] = useState( sourceUrl || '' );
const [ isScanning, setIsScanning ] = useState( false );
@@ -93,13 +252,39 @@ export default function Header( {
const [ showUpgradeNotice, setShowUpgradeNotice ] =
useState( isLegacyBookmarklet );
+ // Schedule popover state.
+ const [ isScheduleOpen, setIsScheduleOpen ] = useState( false );
+ const [ scheduleDate, setScheduleDate ] = useState( () => {
+ if ( postStatus === 'future' && postDate ) {
+ return postDate;
+ }
+ return getCurrentDateInTimezone( timezone );
+ } );
+
// Track if initial auto-scan has been performed.
const hasAutoScanned = useRef( false );
+ // Ref for anchoring the schedule popover near the More actions button.
+ const moreMenuRef = useRef( null );
+
// Keyboard shortcut hints based on platform.
const undoShortcut = isMacOS() ? '\u2318Z' : 'Ctrl+Z';
const redoShortcut = isMacOS() ? '\u21E7\u2318Z' : 'Ctrl+Shift+Z';
+ const timezoneAbbreviation = getTimezoneAbbreviation(
+ timezone,
+ scheduleDate
+ );
+ const isScheduleFuture = isFutureDate( scheduleDate, timezone );
+ const scheduleButtonLabel = isScheduleFuture
+ ? __( 'Schedule', 'press-this' )
+ : __( 'Publish', 'press-this' );
+
+ const scheduleMenuLabel =
+ postStatus === 'future'
+ ? __( 'Reschedule', 'press-this' )
+ : __( 'Schedule', 'press-this' );
+
/**
* Handle URL scan via proxy API.
*
@@ -277,6 +462,25 @@ export default function Header( {
}
}, [ onSave ] );
+ /**
+ * Handle schedule confirmation.
+ * Calls onSave with 'future' status and date for future dates,
+ * or 'publish' for past dates.
+ */
+ const handleScheduleConfirm = useCallback( () => {
+ if ( ! onSave ) {
+ return;
+ }
+
+ if ( isFutureDate( scheduleDate, timezone ) ) {
+ onSave( 'future', { date: scheduleDate } );
+ } else {
+ onSave( 'publish' );
+ }
+
+ setIsScheduleOpen( false );
+ }, [ onSave, scheduleDate, timezone ] );
+
// Only show scanner when proxy is enabled.
// Without proxy, server-side scraping doesn't work - the scanner would be non-functional.
// Bookmarklet flow works without proxy (client-side scraping) but doesn't need the scanner UI.
@@ -386,27 +590,87 @@ export default function Header( {
>
{ publishLabel }
-
- { ( { onClose } ) => (
-
-