Post Date Block: Add style attributes and restructure the edit functi…

…on (#23931) - Add support for colors, font size, line height, and text alignment. - Convert the to light block wrapper. - Simplify the use of the post date entity.
WordPress · Jul 15, 2020 · 4464bb3 · 4464bb3
1 parent b303d24
commit 4464bb3
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 46 deletions.
diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json
@@ -2,14 +2,24 @@
 	"name": "core/post-date",
 	"category": "design",
 	"attributes": {
+		"align": {
+			"type": "string"
+		},
 		"format": {
 			"type": "string"
 		}
 	},
 	"usesContext": [
-		"postId"
+		"postId",
+		"postType"
 	],
 	"supports": {
-		"html": false
+		"html": false,
+		"lightBlockWrapper": true,
+		"__experimentalColor": {
+			"gradients": true
+		},
+		"__experimentalFontSize": true,
+		"__experimentalLineHeight": true
 	}
 }
diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
@@ -1,10 +1,20 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import { useEntityProp } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
-import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	InspectorControls,
+	__experimentalBlock as Block,
+} from '@wordpress/block-editor';
 import {
 	ToolbarGroup,
 	ToolbarButton,
@@ -15,9 +25,17 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-function PostDateEditor( { format, setAttributes } ) {
+export default function PostDateEdit( { attributes, context, setAttributes } ) {
+	const { align, format } = attributes;
+	const { postId, postType } = context;
+
 	const [ siteFormat ] = useEntityProp( 'root', 'site', 'date_format' );
-	const [ date, setDate ] = useEntityProp( 'postType', 'post', 'date' );
+	const [ date, setDate ] = useEntityProp(
+		'postType',
+		postType,
+		'date',
+		postId
+	);
 	const [ isPickerOpen, setIsPickerOpen ] = useState( false );
 	const settings = __experimentalGetSettings();
 	// To know if the current time format is a 12 hour time, look for "a".
@@ -37,31 +55,32 @@ function PostDateEditor( { format, setAttributes } ) {
 		} )
 	);
 	const resolvedFormat = format || siteFormat || settings.formats.date;
-	return date ? (
-		<time dateTime={ dateI18n( 'c', date ) }>
+
+	return (
+		<>
 			<BlockControls>
-				<ToolbarGroup>
-					<ToolbarButton
-						icon="edit"
-						title={ __( 'Change Date' ) }
-						onClick={ () =>
-							setIsPickerOpen(
-								( _isPickerOpen ) => ! _isPickerOpen
-							)
-						}
-					/>
-				</ToolbarGroup>
+				<AlignmentToolbar
+					value={ align }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { align: nextAlign } );
+					} }
+				/>
+
+				{ date && (
+					<ToolbarGroup>
+						<ToolbarButton
+							icon="edit"
+							title={ __( 'Change Date' ) }
+							onClick={ () =>
+								setIsPickerOpen(
+									( _isPickerOpen ) => ! _isPickerOpen
+								)
+							}
+						/>
+					</ToolbarGroup>
+				) }
 			</BlockControls>
-			{ dateI18n( resolvedFormat, date ) }
-			{ isPickerOpen && (
-				<Popover onClose={ setIsPickerOpen.bind( null, false ) }>
-					<DateTimePicker
-						currentDate={ date }
-						onChange={ setDate }
-						is12Hour={ is12Hour }
-					/>
-				</Popover>
-			) }
+
 			<InspectorControls>
 				<PanelBody title={ __( 'Format settings' ) }>
 					<CustomSelectControl
@@ -79,18 +98,31 @@ function PostDateEditor( { format, setAttributes } ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-		</time>
-	) : (
-		__( 'No Date' )
-	);
-}
 
-export default function PostDateEdit( {
-	attributes: { format },
-	setAttributes,
-} ) {
-	if ( ! useEntityId( 'postType', 'post' ) ) {
-		return <p>{ __( 'Jan 1st, 1440' ) }</p>;
-	}
-	return <PostDateEditor format={ format } setAttributes={ setAttributes } />;
+			<Block.div
+				className={ classnames( {
+					[ `has-text-align-${ align }` ]: align,
+				} ) }
+			>
+				{ date && (
+					<time dateTime={ dateI18n( 'c', date ) }>
+						{ dateI18n( resolvedFormat, date ) }
+
+						{ isPickerOpen && (
+							<Popover
+								onClose={ setIsPickerOpen.bind( null, false ) }
+							>
+								<DateTimePicker
+									currentDate={ date }
+									onChange={ setDate }
+									is12Hour={ is12Hour }
+								/>
+							</Popover>
+						) }
+					</time>
+				) }
+				{ ! date && __( 'No Date' ) }
+			</Block.div>
+		</>
+	);
 }
diff --git a/packages/block-library/src/post-date/index.php b/packages/block-library/src/post-date/index.php
@@ -18,10 +18,14 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	return '<time datetime="'
-		. get_the_date( 'c', $block->context['postId'] ) . '">'
-		. get_the_date( isset( $attributes['format'] ) ? $attributes['format'] : '', $block->context['postId'] )
-		. '</time>';
+	$align_class_name = empty( $attributes['align'] ) ? '' : ' ' . "has-text-align-{$attributes['align']}";
+
+	return sprintf(
+		'<div class="%1$s"><time datetime="%2$s">%3$s</time></div>',
+		'wp-block-post-date' . esc_attr( $align_class_name ),
+		get_the_date( 'c', $block->context['postId'] ),
+		get_the_date( isset( $attributes['format'] ) ? $attributes['format'] : '', $block->context['postId'] )
+	);
 }
 
 /**