@wordpress/block-library 9.27.0 → 9.27.1-next.46f643fa0.0

package/src/paragraph/edit.js

@@ -81,8 +81,8 @@ function DropCapControl( { clientId, attributes, setAttributes, name } ) {
 				hasValue={ () => !! dropCap }
 				label={ __( 'Drop cap' ) }
 				isShownByDefault={ isDropCapControlEnabledByDefault }
-				onDeselect={ () => setAttributes( { dropCap: undefined } ) }
-				resetAllFilter={ () => ( { dropCap: undefined } ) }
+				onDeselect={ () => setAttributes( { dropCap: false } ) }
+				resetAllFilter={ () => ( { dropCap: false } ) }
 				panelId={ clientId }
 			>
 				<ToggleControl

package/src/post-date/block.json

@@ -7,6 +7,10 @@
 	"description": "Display the publish date for an entry such as a post or page.",
 	"textdomain": "default",
 	"attributes": {
+		"datetime": {
+			"type": "string",
+			"role": "content"
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -17,10 +21,6 @@
 			"type": "boolean",
 			"default": false,
 			"role": "content"
-		},
-		"displayType": {
-			"type": "string",
-			"default": "date"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

package/src/post-date/deprecated.js

@@ -1,8 +1,111 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
 
+const v2 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		format: {
+			type: 'string',
+		},
+		isLink: {
+			type: 'boolean',
+			default: false,
+			role: 'content',
+		},
+		displayType: {
+			type: 'string',
+			default: 'date',
+		},
+	},
+	supports: {
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				radius: true,
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate( { className, displayType, metadata, ...otherAttributes } ) {
+		if ( displayType === 'date' || displayType === 'modified' ) {
+			if ( displayType === 'modified' ) {
+				className = clsx(
+					className,
+					'wp-block-post-date__modified-date'
+				);
+			}
+
+			return {
+				...otherAttributes,
+				className,
+				metadata: {
+					...metadata,
+					bindings: {
+						datetime: {
+							source: 'core/post-data',
+							args: { key: displayType },
+						},
+					},
+				},
+			};
+		}
+	},
+	isEligible( attributes ) {
+		// If there's neither an explicit `datetime` attribute nor a block binding for that attribute,
+		// then we're dealing with an old version of the block.
+		return (
+			! attributes.datetime && ! attributes?.metadata?.bindings?.datetime
+		);
+	},
+};
+
 const v1 = {
 	attributes: {
 		textAlign: {
@@ -49,4 +152,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

package/src/post-date/edit.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useMemo, useState } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import {
 	dateI18n,
 	humanTimeDiff,
@@ -17,6 +17,7 @@ import {
 	AlignmentControl,
 	BlockControls,
 	InspectorControls,
+	store as blockEditorStore,
 	useBlockProps,
 	__experimentalDateFormatPicker as DateFormatPicker,
 	__experimentalPublishDateTimePicker as PublishDateTimePicker,
@@ -32,7 +33,7 @@ import {
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 import { DOWN } from '@wordpress/keycodes';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -40,14 +41,17 @@ import { useSelect } from '@wordpress/data';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function PostDateEdit( {
-	attributes: { textAlign, format, isLink, displayType },
-	context: { postId, postType: postTypeSlug, queryId },
+	attributes: { datetime, textAlign, format, isLink, metadata },
+	context: { postType: postTypeSlug, queryId },
 	setAttributes,
 } ) {
+	const displayType =
+		metadata?.bindings?.datetime?.source === 'core/post-data' &&
+		metadata?.bindings?.datetime?.args?.key;
+
 	const blockProps = useBlockProps( {
 		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			[ `wp-block-post-date__modified-date` ]: displayType === 'modified',
 		} ),
 	} );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -61,6 +65,19 @@ export default function PostDateEdit( {
 		[ popoverAnchor ]
 	);
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	// We need to set the datetime to a default value upon first loading
+	// to discern the block from its legacy version (which would default
+	// to the containing post's publish date).
+	useEffect( () => {
+		if ( datetime === undefined ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { datetime: new Date() } );
+		}
+	}, [ datetime ] );
+
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const dateSettings = getDateSettings();
 	const [ siteFormat = dateSettings.formats.date ] = useEntityProp(
@@ -73,12 +90,6 @@ export default function PostDateEdit( {
 		'site',
 		'time_format'
 	);
-	const [ date, setDate ] = useEntityProp(
-		'postType',
-		postTypeSlug,
-		displayType,
-		postId
-	);
 
 	const postType = useSelect(
 		( select ) =>
@@ -88,20 +99,15 @@ export default function PostDateEdit( {
 		[ postTypeSlug ]
 	);
 
-	const dateLabel =
-		displayType === 'date' ? __( 'Post Date' ) : __( 'Post Modified Date' );
-
-	let postDate = date ? (
-		<time dateTime={ dateI18n( 'c', date ) } ref={ setPopoverAnchor }>
+	let postDate = (
+		<time dateTime={ dateI18n( 'c', datetime ) } ref={ setPopoverAnchor }>
 			{ format === 'human-diff'
-				? humanTimeDiff( date )
-				: dateI18n( format || siteFormat, date ) }
+				? humanTimeDiff( datetime )
+				: dateI18n( format || siteFormat, datetime ) }
 		</time>
-	) : (
-		dateLabel
 	);
 
-	if ( isLink && date ) {
+	if ( isLink && datetime ) {
 		postDate = (
 			<a
 				href="#post-date-pseudo-link"
@@ -121,49 +127,53 @@ export default function PostDateEdit( {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
-				{ date &&
-					displayType === 'date' &&
-					! isDescendentOfQueryLoop && (
-						<ToolbarGroup>
-							<Dropdown
-								popoverProps={ popoverProps }
-								renderContent={ ( { onClose } ) => (
-									<PublishDateTimePicker
-										currentDate={ date }
-										onChange={ setDate }
-										is12Hour={ is12HourFormat(
-											siteTimeFormat
-										) }
-										onClose={ onClose }
-										dateOrder={
-											/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
-											_x( 'dmy', 'date order' )
-										}
+				{ displayType !== 'modified' && ! isDescendentOfQueryLoop && (
+					<ToolbarGroup>
+						<Dropdown
+							popoverProps={ popoverProps }
+							renderContent={ ( { onClose } ) => (
+								<PublishDateTimePicker
+									title={
+										displayType === 'date'
+											? __( 'Publish Date' )
+											: __( 'Date' )
+									}
+									currentDate={ datetime }
+									onChange={ ( newDatetime ) =>
+										setAttributes( {
+											datetime: newDatetime,
+										} )
+									}
+									is12Hour={ is12HourFormat(
+										siteTimeFormat
+									) }
+									onClose={ onClose }
+									dateOrder={
+										/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+										_x( 'dmy', 'date order' )
+									}
+								/>
+							) }
+							renderToggle={ ( { isOpen, onToggle } ) => {
+								const openOnArrowDown = ( event ) => {
+									if ( ! isOpen && event.keyCode === DOWN ) {
+										event.preventDefault();
+										onToggle();
+									}
+								};
+								return (
+									<ToolbarButton
+										aria-expanded={ isOpen }
+										icon={ edit }
+										title={ __( 'Change Date' ) }
+										onClick={ onToggle }
+										onKeyDown={ openOnArrowDown }
 									/>
-								) }
-								renderToggle={ ( { isOpen, onToggle } ) => {
-									const openOnArrowDown = ( event ) => {
-										if (
-											! isOpen &&
-											event.keyCode === DOWN
-										) {
-											event.preventDefault();
-											onToggle();
-										}
-									};
-									return (
-										<ToolbarButton
-											aria-expanded={ isOpen }
-											icon={ edit }
-											title={ __( 'Change Date' ) }
-											onClick={ onToggle }
-											onKeyDown={ openOnArrowDown }
-										/>
-									);
-								} }
-							/>
-						</ToolbarGroup>
-					) }
+								);
+							} }
+						/>
+					</ToolbarGroup>
+				) }
 			</BlockControls>
 
 			<InspectorControls>
@@ -171,9 +181,9 @@ export default function PostDateEdit( {
 					label={ __( 'Settings' ) }
 					resetAll={ () => {
 						setAttributes( {
+							datetime: undefined,
 							format: undefined,
 							isLink: false,
-							displayType: 'date',
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -225,28 +235,6 @@ export default function PostDateEdit( {
 							checked={ isLink }
 						/>
 					</ToolsPanelItem>
-					<ToolsPanelItem
-						hasValue={ () => displayType !== 'date' }
-						label={ __( 'Display last modified date' ) }
-						onDeselect={ () =>
-							setAttributes( { displayType: 'date' } )
-						}
-						isShownByDefault
-					>
-						<ToggleControl
-							__nextHasNoMarginBottom
-							label={ __( 'Display last modified date' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									displayType: value ? 'modified' : 'date',
-								} )
-							}
-							checked={ displayType === 'modified' }
-							help={ __(
-								'Only shows if the post has been modified'
-							) }
-						/>
-					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
 

package/src/post-date/index.php

@@ -16,14 +16,62 @@
  * @return string Returns the filtered post date for the current post wrapped inside "time" tags.
  */
 function render_block_core_post_date( $attributes, $content, $block ) {
-	if ( ! isset( $block->context['postId'] ) ) {
-		return '';
+	$classes = array();
+
+	if ( ! isset( $attributes['datetime'] ) ) {
+		/*
+		 * This can mean two things:
+		 *
+		 * 1. We're dealing with the legacy version of the block that didn't have the `datetime` attribute.
+		 * 2. The `datetime` attribute is bound to a Block Bindings source, but we're on a version of WordPress
+		 *    that doesn't support binding that attribute to a Block Bindings source.
+		 *
+		 * In both cases, we set the `datetime` attribute to its correct value by applying Block Bindings manually.
+		 */
+		if (
+			isset( $attributes['metadata']['bindings']['datetime']['source'] ) &&
+			isset( $attributes['metadata']['bindings']['datetime']['args'] )
+		) {
+			// We're using a version of WordPress that doesn't support binding the block's `datetime` attribute to a Block Bindings source.
+			// This branch can be removed once the minimum required WordPress version supports the `core/post-data` source.
+			$source      = get_block_bindings_source( $attributes['metadata']['bindings']['datetime']['source'] );
+			$source_args = $attributes['metadata']['bindings']['datetime']['args'];
+		} else {
+			// This is the legacy version of the block that didn't have the `datetime` attribute.
+			// This branch needs to be kept for backward compatibility.
+			$source = get_block_bindings_source( 'core/post-data' );
+			if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
+				$source_args = array(
+					'key' => 'modified',
+				);
+			} else {
+				$source_args = array(
+					'key' => 'date',
+				);
+			}
+		}
+
+		$attributes['datetime'] = $source->get_value( $source_args, $block, 'datetime' );
+
+		if ( isset( $source_args['key'] ) && 'modified' === $source_args['key'] ) {
+			$classes[] = 'wp-block-post-date__modified-date';
+		}
 	}
 
-	$post_ID = $block->context['postId'];
+	if ( empty( $attributes['datetime'] ) ) {
+		// If the `datetime` attribute is set but empty, it could be because Block Bindings
+		// set it that way. This can happen e.g. if the block is bound to the
+		// post's last modified date, and the latter lies before the publish date.
+		// (See https://github.com/WordPress/gutenberg/pull/46839 where this logic was originally
+		// implemented.)
+		// In this case, we have to respect and return the empty value.
+		return $attributes['datetime'];
+	}
+
+	$unformatted_date = $attributes['datetime'];
+	$post_timestamp   = strtotime( $unformatted_date );
 
 	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
-		$post_timestamp = get_post_timestamp( $post_ID );
 		if ( $post_timestamp > time() ) {
 			// translators: %s: human-readable time difference.
 			$formatted_date = sprintf( __( '%s from now' ), human_time_diff( $post_timestamp ) );
@@ -32,10 +80,8 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 			$formatted_date = sprintf( __( '%s ago' ), human_time_diff( $post_timestamp ) );
 		}
 	} else {
-		$formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+		$formatted_date = gmdate( empty( $attributes['format'] ) ? get_option( 'date_format' ) : $attributes['format'], $post_timestamp );
 	}
-	$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
-	$classes          = array();
 
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes[] = 'has-text-align-' . $attributes['textAlign'];
@@ -44,29 +90,10 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		$classes[] = 'has-link-color';
 	}
 
-	/*
-	 * If the "Display last modified date" setting is enabled,
-	 * only display the modified date if it is later than the publishing date.
-	 */
-	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
-		if ( get_the_modified_date( 'Ymdhi', $post_ID ) > get_the_date( 'Ymdhi', $post_ID ) ) {
-			if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
-				// translators: %s: human-readable time difference.
-				$formatted_date = sprintf( __( '%s ago' ), human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) );
-			} else {
-				$formatted_date = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
-			}
-			$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
-			$classes[]        = 'wp-block-post-date__modified-date';
-		} else {
-			return '';
-		}
-	}
-
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
-	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
-		$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $formatted_date );
+	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] && isset( $block->context['postId'] ) ) {
+		$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $block->context['postId'] ), $formatted_date );
 	}
 
 	return sprintf(

package/src/post-date/variations.js

@@ -5,14 +5,48 @@ import { __ } from '@wordpress/i18n';
 import { postDate } from '@wordpress/icons';
 
 const variations = [
+	{
+		name: 'post-date',
+		title: __( 'Post Date' ),
+		description: __( "Display a post's publish date." ),
+		attributes: {
+			metadata: {
+				bindings: {
+					datetime: {
+						source: 'core/post-data',
+						args: { key: 'date' },
+					},
+				},
+			},
+		},
+		scope: [ 'block', 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes?.metadata?.bindings?.datetime?.source ===
+				'core/post-data' &&
+			blockAttributes?.metadata?.bindings?.datetime?.args?.key === 'date',
+		icon: postDate,
+	},
 	{
 		name: 'post-date-modified',
 		title: __( 'Modified Date' ),
 		description: __( "Display a post's last updated date." ),
-		attributes: { displayType: 'modified' },
-		scope: [ 'block', 'inserter' ],
+		attributes: {
+			metadata: {
+				bindings: {
+					datetime: {
+						source: 'core/post-data',
+						args: { key: 'modified' },
+					},
+				},
+			},
+			className: 'wp-block-post-date__modified-date',
+		},
+		scope: [ 'block', 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
-			blockAttributes.displayType === 'modified',
+			blockAttributes?.metadata?.bindings?.datetime?.source ===
+				'core/post-data' &&
+			blockAttributes?.metadata?.bindings?.datetime?.args?.key ===
+				'modified',
 		icon: postDate,
 	},
 ];

package/src/social-link/README.md

@@ -0,0 +1,21 @@
+# Social Icon block
+
+The Social Icon is a foundational block that displays various icons linking to different social profiles or sites. Each social service is registered as a variation of this block.
+
+
+## Adding new social icons
+
+The core maintains certain standards for adding new social icons. To add a new variation to WordPress, it must be well-established and popular.
+
+To evaluate if a social service should be added, contributors will consider the following factors:
+
+* Is the service popular enough for core developers to have heard of it before? Is it "mainstream?"
+* How long has the service been online?
+* Does it have a Wikipedia article?
+* Is there a plugin adding social icons in the repository that includes the services in question and has a considerable number of active installations?
+* Is this social service frequently requested?
+
+
+## Adding custom social icons
+
+Starting from WordPress 6.9, it's possible to add custom social icons to your site. See: [#70261](https://github.com/WordPress/gutenberg/pull/70261).