Merge pull request #2 from 10up/feature/person-single-template

WIP Feature: Person single template

Author: colinswinney

mu-plugins/10up-plugin/includes/classes/PostMeta/PersonBirthplace.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * PersonBirthplace post meta
+ *
+ * @package TenUpPlugin
+ */
+
+namespace TenUpPlugin\PostMeta;
+
+use TenUpPlugin\PostTypes\Person;
+
+/**
+ * PersonBirthplace meta field.
+ */
+class PersonBirthplace extends AbstractPostMeta {
+
+	/**
+	 * The meta_key name.
+	 *
+	 * @var string
+	 */
+	const META_KEY = 'tenup_person_birthplace';
+
+	/**
+	 * Get the field description.
+	 *
+	 * @return string
+	 */
+	public function get_description(): string {
+		return __( 'Person Birthplace', 'tenup' );
+	}
+
+	/**
+	 * Get the post types.
+	 *
+	 * @return array
+	 */
+	public function get_post_types(): array {
+		return [
+			Person::get_name(),
+		];
+	}
+
+	/**
+	 * Checks whether the Module should run within the current context.
+	 *
+	 * @return bool
+	 */
+	public function can_register(): bool {
+		return true;
+	}
+}

mu-plugins/10up-plugin/includes/classes/PostMeta/PersonBorn.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * PersonBorn post meta
+ *
+ * @package TenUpPlugin
+ */
+
+namespace TenUpPlugin\PostMeta;
+
+use TenUpPlugin\PostTypes\Person;
+
+/**
+ * PersonBorn meta field.
+ */
+class PersonBorn extends AbstractPostMeta {
+
+	/**
+	 * The meta_key name.
+	 *
+	 * @var string
+	 */
+	const META_KEY = 'tenup_person_born';
+
+	/**
+	 * Get the field description.
+	 *
+	 * @return string
+	 */
+	public function get_description(): string {
+		return __( 'Person Born', 'tenup' );
+	}
+
+	/**
+	 * Get the post types.
+	 *
+	 * @return array
+	 */
+	public function get_post_types(): array {
+		return [
+			Person::get_name(),
+		];
+	}
+
+	/**
+	 * Checks whether the Module should run within the current context.
+	 *
+	 * @return bool
+	 */
+	public function can_register(): bool {
+		return true;
+	}
+}

mu-plugins/10up-plugin/includes/classes/PostMeta/PersonDeathplace.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * PersonDeathplace post meta
+ *
+ * @package TenUpPlugin
+ */
+
+namespace TenUpPlugin\PostMeta;
+
+use TenUpPlugin\PostTypes\Person;
+
+/**
+ * PersonDeathplace meta field.
+ */
+class PersonDeathplace extends AbstractPostMeta {
+
+	/**
+	 * The meta_key name.
+	 *
+	 * @var string
+	 */
+	const META_KEY = 'tenup_person_deathplace';
+
+	/**
+	 * Get the field description.
+	 *
+	 * @return string
+	 */
+	public function get_description(): string {
+		return __( 'Person Deathplace', 'tenup' );
+	}
+
+	/**
+	 * Get the post types.
+	 *
+	 * @return array
+	 */
+	public function get_post_types(): array {
+		return [
+			Person::get_name(),
+		];
+	}
+
+	/**
+	 * Checks whether the Module should run within the current context.
+	 *
+	 * @return bool
+	 */
+	public function can_register(): bool {
+		return true;
+	}
+}

mu-plugins/10up-plugin/includes/classes/PostMeta/PersonDied.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * PersonDied post meta
+ *
+ * @package TenUpPlugin
+ */
+
+namespace TenUpPlugin\PostMeta;
+
+use TenUpPlugin\PostTypes\Person;
+
+/**
+ * PersonDied meta field.
+ */
+class PersonDied extends AbstractPostMeta {
+
+	/**
+	 * The meta_key name.
+	 *
+	 * @var string
+	 */
+	const META_KEY = 'tenup_person_died';
+
+	/**
+	 * Get the field description.
+	 *
+	 * @return string
+	 */
+	public function get_description(): string {
+		return __( 'Person Died', 'tenup' );
+	}
+
+	/**
+	 * Get the post types.
+	 *
+	 * @return array
+	 */
+	public function get_post_types(): array {
+		return [
+			Person::get_name(),
+		];
+	}
+
+	/**
+	 * Checks whether the Module should run within the current context.
+	 *
+	 * @return bool
+	 */
+	public function can_register(): bool {
+		return true;
+	}
+}

themes/10up-block-theme/assets/images/wall-e.jpg

@@ -0,0 +1,104 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * WordPress dependencies.
+ */
+import {
+	Button,
+	DateTimePicker,
+	Dropdown,
+	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { closeSmall } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Formats a date string into the desired display format.
+ *
+ * @param {string} date The date string to be formatted.
+ * @returns {string}    The formatted date string.
+ */
+const formatDate = (date) => {
+	const options = {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric',
+	};
+
+	let formattedDate = new Date(date);
+	formattedDate = formattedDate.toLocaleDateString('en-US', options);
+
+	return formattedDate;
+};
+
+/**
+ * Renders a label and button opening a DateTime Popover to be used in a sidebar settings panel.
+ *
+ * @param {object} props           Component props.
+ * @param {string} props.date      The date to be displayed.
+ * @param {Function} props.setDate The function to be called when the date is changed.
+ * @param {string} props.label     The label for the DateTimePopover.
+ * @returns {Function}             The DateTimePopover component.
+ */
+const DateTimePopover = ({ date, setDate, label }) => {
+	return (
+		<Dropdown
+			style={{ width: '100%' }}
+			popoverProps={{ offset: 36, placement: 'left-end' }}
+			renderToggle={({ isOpen, onToggle }) => (
+				<HStack justify="flex-start" alignment="top">
+					<div className="editor-post-panel__row-label">{__(label, 'tenup')}</div>
+					<Button
+						aria-expanded={isOpen}
+						onClick={onToggle}
+						size="compact"
+						variant="tertiary"
+					>
+						{date ? formatDate(date) : __('Choose a date', 'tenup')}
+					</Button>
+				</HStack>
+			)}
+			renderContent={({ onClose }) => (
+				<div style={{ padding: '16px' }}>
+					<HStack
+						justify="space-between"
+						className="block-editor-inspector-popover-header"
+					>
+						<Heading level={2} size={13}>
+							{__(label, 'tenup')}
+						</Heading>
+						<HStack
+							justify="flex-end"
+							align="center"
+							style={{ 'max-width': 'fit-content' }}
+						>
+							<Button
+								onClick={() => setDate('')}
+								size="small"
+								variant="link"
+								isDestructive
+							>
+								{__('Clear', 'tenup')}
+							</Button>
+							<Button
+								size="small"
+								className="block-editor-inspector-popover-header__action"
+								label={__('Close', 'tenup')}
+								icon={closeSmall}
+								onClick={onClose}
+							/>
+						</HStack>
+					</HStack>
+					<DateTimePicker
+						label={__(label, 'tenup')}
+						onChange={setDate}
+						currentDate={date}
+						is12Hour
+					/>
+				</div>
+			)}
+		/>
+	);
+};
+
+export default DateTimePopover;

themes/10up-block-theme/assets/js/block-components/DateTimePopover.js

@@ -34,6 +34,7 @@ const MovieMPARating = ({ postMetaProps, ...restProps }) => {
 					options={options}
 					onChange={(value) => setMeta(value)}
 					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					{...restProps}
 				/>
 			)}

themes/10up-block-theme/assets/js/block-components/PostMeta/MovieMPARating.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
+
+/**
+ * External dependencies.
+ */
+import { PostMeta } from '@10up/block-components';
+
+/**
+ * PersonBirthplace component.
+ *
+ * @param {object} props               Component props.
+ * @param {object} props.postMetaProps Props to use on the 10up PostMeta component.
+ * @param {object} props.restProps     Rest of the props to pass to the control component.
+ * @returns {Function}                 The rendered component.
+ */
+const PersonBirthplace = ({ postMetaProps, ...restProps }) => {
+	return (
+		<PostMeta metaKey="tenup_person_birthplace" {...postMetaProps}>
+			{(meta, setMeta) => (
+				<TextControl
+					label={__('Birthplace', 'tenup')}
+					help={__('City, State, Country', 'tenup')}
+					onChange={(value) => setMeta(value)}
+					value={meta}
+					__next40pxDefaultSize
+					{...restProps}
+				/>
+			)}
+		</PostMeta>
+	);
+};
+
+export default PersonBirthplace;