diff --git a/mu-plugins/10up-plugin/includes/classes/PostMeta/PersonBirthplace.php b/mu-plugins/10up-plugin/includes/classes/PostMeta/PersonBirthplace.php new file mode 100644 index 0000000..d500580 --- /dev/null +++ b/mu-plugins/10up-plugin/includes/classes/PostMeta/PersonBirthplace.php @@ -0,0 +1,52 @@ + { + 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 ( + ( + +
{__(label, 'tenup')}
+ +
+ )} + renderContent={({ onClose }) => ( +
+ + + {__(label, 'tenup')} + + + +
+ )} + /> + ); +}; + +export default DateTimePopover; diff --git a/themes/10up-block-theme/assets/js/block-components/PostMeta/MovieMPARating.js b/themes/10up-block-theme/assets/js/block-components/PostMeta/MovieMPARating.js index 5eee8fb..113f6e6 100644 --- a/themes/10up-block-theme/assets/js/block-components/PostMeta/MovieMPARating.js +++ b/themes/10up-block-theme/assets/js/block-components/PostMeta/MovieMPARating.js @@ -34,6 +34,7 @@ const MovieMPARating = ({ postMetaProps, ...restProps }) => { options={options} onChange={(value) => setMeta(value)} __next40pxDefaultSize + __nextHasNoMarginBottom {...restProps} /> )} diff --git a/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonBirthplace.js b/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonBirthplace.js new file mode 100644 index 0000000..0e8c137 --- /dev/null +++ b/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonBirthplace.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 ( + + {(meta, setMeta) => ( + setMeta(value)} + value={meta} + __next40pxDefaultSize + {...restProps} + /> + )} + + ); +}; + +export default PersonBirthplace; diff --git a/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonBorn.js b/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonBorn.js new file mode 100644 index 0000000..160e3eb --- /dev/null +++ b/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonBorn.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; + +/** + * External dependencies. + */ +import { PostMeta } from '@10up/block-components'; + +/** + * Internal dependencies. + */ +import DateTimePopover from '../DateTimePopover'; + +/** + * PersonBorn 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 PersonBorn = ({ postMetaProps, ...restProps }) => { + return ( + + {(meta, setMeta) => ( + setMeta(value)} + {...restProps} + /> + )} + + ); +}; + +export default PersonBorn; diff --git a/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonDeathplace.js b/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonDeathplace.js new file mode 100644 index 0000000..35d662d --- /dev/null +++ b/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonDeathplace.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; +import { TextControl } from '@wordpress/components'; + +/** + * External dependencies. + */ +import { PostMeta } from '@10up/block-components'; + +/** + * PersonDeathplace 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 PersonDeathplace = ({ postMetaProps, ...restProps }) => { + return ( + + {(meta, setMeta) => ( + setMeta(value)} + value={meta} + __next40pxDefaultSize + {...restProps} + /> + )} + + ); +}; + +export default PersonDeathplace; diff --git a/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonDied.js b/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonDied.js new file mode 100644 index 0000000..1786576 --- /dev/null +++ b/themes/10up-block-theme/assets/js/block-components/PostMeta/PersonDied.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; + +/** + * External dependencies. + */ +import { PostMeta } from '@10up/block-components'; + +/** + * Internal dependencies. + */ +import DateTimePopover from '../DateTimePopover'; + +/** + * PersonDied 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 PersonDied = ({ postMetaProps, ...restProps }) => { + return ( + + {(meta, setMeta) => ( + setMeta(value)} + {...restProps} + /> + )} + + ); +}; + +export default PersonDied; diff --git a/themes/10up-block-theme/assets/js/block-plugins/index.js b/themes/10up-block-theme/assets/js/block-plugins/index.js index 3efceaf..09f656c 100644 --- a/themes/10up-block-theme/assets/js/block-plugins/index.js +++ b/themes/10up-block-theme/assets/js/block-plugins/index.js @@ -1 +1,2 @@ import './movie-meta-fields'; +import './person-meta-fields'; diff --git a/themes/10up-block-theme/assets/js/block-plugins/person-meta-fields.js b/themes/10up-block-theme/assets/js/block-plugins/person-meta-fields.js new file mode 100644 index 0000000..7485293 --- /dev/null +++ b/themes/10up-block-theme/assets/js/block-plugins/person-meta-fields.js @@ -0,0 +1,56 @@ +/** + * WordPress dependencies. + */ +import { Flex } from '@wordpress/components'; +import { PluginDocumentSettingPanel } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; +import { registerPlugin } from '@wordpress/plugins'; + +/** + * External dependencies. + */ +import { usePost } from '@10up/block-components'; + +/** + * Internal dependencies. + */ +import PersonBirthplace from '../block-components/PostMeta/PersonBirthplace'; +import PersonBorn from '../block-components/PostMeta/PersonBorn'; +import PersonDeathplace from '../block-components/PostMeta/PersonDeathplace'; +import PersonDied from '../block-components/PostMeta/PersonDied'; + +/** + * Adds a Person meta field panel to the editor. + * + * @returns {Function} The meta field panel. + */ +const PersonFields = () => { + const { postType } = usePost(); + + if (postType !== 'tenup-person') { + return null; + } + + return ( + + + + + + + + + ); +}; + +/** + * Register plugin. + * + * See https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/ + */ +registerPlugin('tenup-person-fields', { + render: PersonFields, +}); diff --git a/themes/10up-block-theme/includes/blocks/movie-metadata/block.json b/themes/10up-block-theme/includes/blocks/metadata/block.json similarity index 63% rename from themes/10up-block-theme/includes/blocks/movie-metadata/block.json rename to themes/10up-block-theme/includes/blocks/metadata/block.json index 888ff92..dec7659 100644 --- a/themes/10up-block-theme/includes/blocks/movie-metadata/block.json +++ b/themes/10up-block-theme/includes/blocks/metadata/block.json @@ -1,11 +1,10 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, - "name": "tenup/movie-metadata", - "title": "Movie Metadata", + "name": "tenup/metadata", + "title": "Metadata", "category": "text", - "icon": "video-alt", - "description": "A wrapper block to display the metadata for a Movie.", + "description": "A wrapper block to display individual metadata blocks.", "attributes": {}, "supports": { "html": false diff --git a/themes/10up-block-theme/includes/blocks/movie-metadata/edit.js b/themes/10up-block-theme/includes/blocks/metadata/edit.js similarity index 100% rename from themes/10up-block-theme/includes/blocks/movie-metadata/edit.js rename to themes/10up-block-theme/includes/blocks/metadata/edit.js diff --git a/themes/10up-block-theme/includes/blocks/movie-metadata/index.js b/themes/10up-block-theme/includes/blocks/metadata/index.js similarity index 79% rename from themes/10up-block-theme/includes/blocks/movie-metadata/index.js rename to themes/10up-block-theme/includes/blocks/metadata/index.js index 93c5a62..15f3c78 100644 --- a/themes/10up-block-theme/includes/blocks/movie-metadata/index.js +++ b/themes/10up-block-theme/includes/blocks/metadata/index.js @@ -1,10 +1,12 @@ import { registerBlockType } from '@wordpress/blocks'; import { InnerBlocks } from '@wordpress/block-editor'; +import { formatListBullets as icon } from '@wordpress/icons'; import { BlockEdit } from './edit'; import metadata from './block.json'; registerBlockType(metadata, { + icon, edit: BlockEdit, save: () => , }); diff --git a/themes/10up-block-theme/includes/blocks/movie-metadata/markup.php b/themes/10up-block-theme/includes/blocks/metadata/markup.php similarity index 86% rename from themes/10up-block-theme/includes/blocks/movie-metadata/markup.php rename to themes/10up-block-theme/includes/blocks/metadata/markup.php index 128be1a..dcd8f60 100644 --- a/themes/10up-block-theme/includes/blocks/movie-metadata/markup.php +++ b/themes/10up-block-theme/includes/blocks/metadata/markup.php @@ -1,8 +1,8 @@ { + const { postType } = usePost(); + const [meta] = useEntityProp('postType', 'tenup-person', 'meta'); + + const { tenup_person_birthplace = '' } = meta || {}; + + let RenderedUI = ( +
+ {__('Person birthplace post meta not found.', 'tenup')} +
+ ); + + if (tenup_person_birthplace !== '') { + RenderedUI = ( + <> +
{__('Birthplace', 'tenup')}
+
{tenup_person_birthplace}
+ + ); + } + + // Fallback for template preview. + if (postType === 'wp_template') { + RenderedUI = ( + <> +
{__('Birthplace', 'tenup')}
+
{__('New York City, New York, USA', 'tenup')}
+ + ); + } + + return RenderedUI; +}; diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-birthplace/index.js b/themes/10up-block-theme/includes/blocks/person-metadata-birthplace/index.js new file mode 100644 index 0000000..542d386 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-birthplace/index.js @@ -0,0 +1,9 @@ +import { registerBlockType } from '@wordpress/blocks'; + +import { BlockEdit } from './edit'; +import metadata from './block.json'; + +registerBlockType(metadata, { + edit: BlockEdit, + save: () => null, +}); diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-birthplace/markup.php b/themes/10up-block-theme/includes/blocks/person-metadata-birthplace/markup.php new file mode 100644 index 0000000..acff145 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-birthplace/markup.php @@ -0,0 +1,21 @@ + + +
+
diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-born/block.json b/themes/10up-block-theme/includes/blocks/person-metadata-born/block.json new file mode 100644 index 0000000..3f00b58 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-born/block.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "tenup/person-metadata-born", + "title": "Person Metadata: Born", + "category": "text", + "icon": "admin-users", + "description": "A read only block to display the born post meta for a Person.", + "parent": ["tenup/metadata"], + "attributes": {}, + "supports": { + "html": false + }, + "textdomain": "tenup", + "editorScript": "file:./index.js", + "render": "file:./markup.php" +} diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-born/edit.js b/themes/10up-block-theme/includes/blocks/person-metadata-born/edit.js new file mode 100644 index 0000000..d7fcd18 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-born/edit.js @@ -0,0 +1,37 @@ +import { useEntityProp } from '@wordpress/core-data'; +import { __ } from '@wordpress/i18n'; +import { usePost } from '@10up/block-components'; + +export const BlockEdit = () => { + const { postType } = usePost(); + const [meta] = useEntityProp('postType', 'tenup-person', 'meta'); + + const { tenup_person_born = '' } = meta || {}; + + let RenderedUI = ( +
+ {__('Person born post meta not found.', 'tenup')} +
+ ); + + if (tenup_person_born !== '') { + RenderedUI = ( + <> +
{__('Born', 'tenup')}
+
{tenup_person_born}
+ + ); + } + + // Fallback for template preview. + if (postType === 'wp_template') { + RenderedUI = ( + <> +
{__('Born', 'tenup')}
+
{__('January 1, 1950', 'tenup')}
+ + ); + } + + return RenderedUI; +}; diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-born/index.js b/themes/10up-block-theme/includes/blocks/person-metadata-born/index.js new file mode 100644 index 0000000..542d386 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-born/index.js @@ -0,0 +1,9 @@ +import { registerBlockType } from '@wordpress/blocks'; + +import { BlockEdit } from './edit'; +import metadata from './block.json'; + +registerBlockType(metadata, { + edit: BlockEdit, + save: () => null, +}); diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-born/markup.php b/themes/10up-block-theme/includes/blocks/person-metadata-born/markup.php new file mode 100644 index 0000000..396d70a --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-born/markup.php @@ -0,0 +1,23 @@ + + +
+
diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/block.json b/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/block.json new file mode 100644 index 0000000..7271b9a --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/block.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "tenup/person-metadata-deathplace", + "title": "Person Metadata: Deathplace", + "category": "text", + "icon": "admin-users", + "description": "A read only block to display the deathplace post meta for a Person.", + "parent": ["tenup/metadata"], + "attributes": {}, + "supports": { + "html": false + }, + "textdomain": "tenup", + "editorScript": "file:./index.js", + "render": "file:./markup.php" +} diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/edit.js b/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/edit.js new file mode 100644 index 0000000..da74da8 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/edit.js @@ -0,0 +1,37 @@ +import { useEntityProp } from '@wordpress/core-data'; +import { __ } from '@wordpress/i18n'; +import { usePost } from '@10up/block-components'; + +export const BlockEdit = () => { + const { postType } = usePost(); + const [meta] = useEntityProp('postType', 'tenup-person', 'meta'); + + const { tenup_person_deathplace = '' } = meta || {}; + + let RenderedUI = ( +
+ {__('Person birthplace post meta not found.', 'tenup')} +
+ ); + + if (tenup_person_deathplace !== '') { + RenderedUI = ( + <> +
{__('Deathplace', 'tenup')}
+
{tenup_person_deathplace}
+ + ); + } + + // Fallback for template preview. + if (postType === 'wp_template') { + RenderedUI = ( + <> +
{__('Deathplace', 'tenup')}
+
{__('Hollywood, California, USA', 'tenup')}
+ + ); + } + + return RenderedUI; +}; diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/index.js b/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/index.js new file mode 100644 index 0000000..542d386 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/index.js @@ -0,0 +1,9 @@ +import { registerBlockType } from '@wordpress/blocks'; + +import { BlockEdit } from './edit'; +import metadata from './block.json'; + +registerBlockType(metadata, { + edit: BlockEdit, + save: () => null, +}); diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/markup.php b/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/markup.php new file mode 100644 index 0000000..b8a1d61 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-deathplace/markup.php @@ -0,0 +1,21 @@ + + +
+
diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-died/block.json b/themes/10up-block-theme/includes/blocks/person-metadata-died/block.json new file mode 100644 index 0000000..320a125 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-died/block.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "tenup/person-metadata-died", + "title": "Person Metadata: Died", + "category": "text", + "icon": "admin-users", + "description": "A read only block to display the died post meta for a Person.", + "parent": ["tenup/metadata"], + "attributes": {}, + "supports": { + "html": false + }, + "textdomain": "tenup", + "editorScript": "file:./index.js", + "render": "file:./markup.php" +} diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-died/edit.js b/themes/10up-block-theme/includes/blocks/person-metadata-died/edit.js new file mode 100644 index 0000000..5282051 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-died/edit.js @@ -0,0 +1,37 @@ +import { useEntityProp } from '@wordpress/core-data'; +import { __ } from '@wordpress/i18n'; +import { usePost } from '@10up/block-components'; + +export const BlockEdit = () => { + const { postType } = usePost(); + const [meta] = useEntityProp('postType', 'tenup-person', 'meta'); + + const { tenup_person_died = '' } = meta || {}; + + let RenderedUI = ( +
+ {__('Person died post meta not found.', 'tenup')} +
+ ); + + if (tenup_person_died !== '') { + RenderedUI = ( + <> +
{__('Died', 'tenup')}
+
{tenup_person_died}
+ + ); + } + + // Fallback for template preview. + if (postType === 'wp_template') { + RenderedUI = ( + <> +
{__('Died', 'tenup')}
+
{__('January 1, 2025', 'tenup')}
+ + ); + } + + return RenderedUI; +}; diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-died/index.js b/themes/10up-block-theme/includes/blocks/person-metadata-died/index.js new file mode 100644 index 0000000..542d386 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-died/index.js @@ -0,0 +1,9 @@ +import { registerBlockType } from '@wordpress/blocks'; + +import { BlockEdit } from './edit'; +import metadata from './block.json'; + +registerBlockType(metadata, { + edit: BlockEdit, + save: () => null, +}); diff --git a/themes/10up-block-theme/includes/blocks/person-metadata-died/markup.php b/themes/10up-block-theme/includes/blocks/person-metadata-died/markup.php new file mode 100644 index 0000000..77f1f38 --- /dev/null +++ b/themes/10up-block-theme/includes/blocks/person-metadata-died/markup.php @@ -0,0 +1,23 @@ + + +
+
diff --git a/themes/10up-block-theme/templates/archive-tenup-person.html b/themes/10up-block-theme/templates/archive-tenup-person.html new file mode 100644 index 0000000..9eaabdb --- /dev/null +++ b/themes/10up-block-theme/templates/archive-tenup-person.html @@ -0,0 +1,31 @@ + + + +
+
+ +
+ + +
+
+ +
+ + +
+
+ + + + +
+ + + +
+
+
+ + + diff --git a/themes/10up-block-theme/templates/single-tenup-movie.html b/themes/10up-block-theme/templates/single-tenup-movie.html index f4b2ffa..2afd098 100644 --- a/themes/10up-block-theme/templates/single-tenup-movie.html +++ b/themes/10up-block-theme/templates/single-tenup-movie.html @@ -3,7 +3,7 @@
- +
@@ -118,13 +118,13 @@
- + - +
diff --git a/themes/10up-block-theme/templates/single-tenup-person.html b/themes/10up-block-theme/templates/single-tenup-person.html new file mode 100644 index 0000000..fb69bc4 --- /dev/null +++ b/themes/10up-block-theme/templates/single-tenup-person.html @@ -0,0 +1,109 @@ + + + +
+ + + + +
+ + +
+ + + + +
+ + + +
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + +
+ + + +
+ + + + + + + + + +
+ + + +
+ + +
+ + + +
+ + +
+ + + + +
+ + + diff --git a/themes/10up-block-theme/theme.json b/themes/10up-block-theme/theme.json index ce247a3..c4396ef 100644 --- a/themes/10up-block-theme/theme.json +++ b/themes/10up-block-theme/theme.json @@ -9,6 +9,16 @@ "name": "single-tenup-movie", "title": "Single Movie", "postTypes": ["tenup-movie"] + }, + { + "name": "archive-tenup-person", + "title": "Person Archives", + "postTypes": [] + }, + { + "name": "single-tenup-person", + "title": "Single Person", + "postTypes": ["tenup-person"] } ], "settings": {