@wordpress/block-library 7.1.1 → 7.2.0

package/src/avatar/edit.js

@@ -0,0 +1,222 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	RangeControl,
+	ResizableBox,
+	ToggleControl,
+} from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useUserAvatar, useCommentAvatar } from './hooks';
+import UserControl from './user-control';
+
+const AvatarInspectorControls = ( {
+	setAttributes,
+	avatar,
+	attributes,
+	selectUser,
+} ) => (
+	<InspectorControls>
+		<PanelBody title={ __( 'Avatar Settings' ) }>
+			<RangeControl
+				label={ __( 'Image size' ) }
+				onChange={ ( newSize ) =>
+					setAttributes( {
+						size: newSize,
+					} )
+				}
+				min={ avatar.minSize }
+				max={ avatar.maxSize }
+				initialPosition={ attributes?.size }
+				value={ attributes?.size }
+			/>
+			{ selectUser && (
+				<UserControl
+					value={ attributes?.userId }
+					onChange={ ( value ) => {
+						setAttributes( {
+							userId: value,
+						} );
+					} }
+				/>
+			) }
+			<ToggleControl
+				label={ __( 'Link to user profile' ) }
+				onChange={ () =>
+					setAttributes( { isLink: ! attributes.isLink } )
+				}
+				checked={ attributes.isLink }
+			/>
+			{ attributes.isLink && (
+				<ToggleControl
+					label={ __( 'Open in new tab' ) }
+					onChange={ ( value ) =>
+						setAttributes( {
+							linkTarget: value ? '_blank' : '_self',
+						} )
+					}
+					checked={ attributes.linkTarget === '_blank' }
+				/>
+			) }
+		</PanelBody>
+	</InspectorControls>
+);
+
+const ResizableAvatar = ( {
+	setAttributes,
+	attributes,
+	avatar,
+	blockProps,
+	isSelected,
+} ) => {
+	const borderProps = useBorderProps( attributes );
+	return (
+		<div { ...blockProps }>
+			<ResizableBox
+				size={ {
+					width: attributes.size,
+					height: attributes.size,
+				} }
+				showHandle={ isSelected }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					setAttributes( {
+						size: parseInt(
+							attributes.size + ( delta.height || delta.width ),
+							10
+						),
+					} );
+				} }
+				lockAspectRatio
+				enable={ {
+					top: false,
+					right: ! isRTL(),
+					bottom: true,
+					left: isRTL(),
+				} }
+				minWidth={ avatar.minSize }
+				maxWidth={ avatar.maxSize }
+			>
+				<img
+					src={ avatar.src }
+					alt={ avatar.alt }
+					{ ...borderProps }
+					className={ classnames(
+						'avatar',
+						'avatar-' + attributes.size,
+						'photo',
+						'wp-block-avatar__image',
+						borderProps.className
+					) }
+					style={ {
+						...borderProps.style, // Border radius, width and style.
+					} }
+				/>
+			</ResizableBox>
+		</div>
+	);
+};
+const CommentEdit = ( { attributes, context, setAttributes, isSelected } ) => {
+	const { commentId } = context;
+	const blockProps = useBlockProps();
+	const avatar = useCommentAvatar( { commentId } );
+	return (
+		<>
+			<AvatarInspectorControls
+				avatar={ avatar }
+				setAttributes={ setAttributes }
+				attributes={ attributes }
+				selectUser={ false }
+			/>
+			{ attributes.isLink ? (
+				<a
+					href="#avatar-pseudo-link"
+					className="wp-block-avatar__link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
+					<ResizableAvatar
+						attributes={ attributes }
+						avatar={ avatar }
+						blockProps={ blockProps }
+						isSelected={ isSelected }
+						setAttributes={ setAttributes }
+					/>
+				</a>
+			) : (
+				<ResizableAvatar
+					attributes={ attributes }
+					avatar={ avatar }
+					blockProps={ blockProps }
+					isSelected={ isSelected }
+					setAttributes={ setAttributes }
+				/>
+			) }
+		</>
+	);
+};
+
+const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
+	const { postId, postType } = context;
+	const avatar = useUserAvatar( {
+		userId: attributes?.userId,
+		postId,
+		postType,
+	} );
+	const blockProps = useBlockProps();
+	return (
+		<>
+			<AvatarInspectorControls
+				selectUser={ true }
+				attributes={ attributes }
+				avatar={ avatar }
+				setAttributes={ setAttributes }
+			/>
+			<div>
+				{ attributes.isLink ? (
+					<a
+						href="#avatar-pseudo-link"
+						className="wp-block-avatar__link"
+						onClick={ ( event ) => event.preventDefault() }
+					>
+						<ResizableAvatar
+							attributes={ attributes }
+							avatar={ avatar }
+							blockProps={ blockProps }
+							isSelected={ isSelected }
+							setAttributes={ setAttributes }
+						/>
+					</a>
+				) : (
+					<ResizableAvatar
+						attributes={ attributes }
+						avatar={ avatar }
+						blockProps={ blockProps }
+						isSelected={ isSelected }
+						setAttributes={ setAttributes }
+					/>
+				) }
+			</div>
+		</>
+	);
+};
+
+export default function Edit( props ) {
+	if ( props?.context?.commentId ) {
+		return <CommentEdit { ...props } />;
+	}
+	return <UserEdit { ...props } />;
+}

package/src/avatar/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-avatar__image img {
+	width: 100%;
+}

package/src/avatar/hooks.js

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore, useEntityProp } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+function getAvatarSizes( sizes ) {
+	const minSize = sizes ? sizes[ 0 ] : 24;
+	const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96;
+	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
+	return {
+		minSize,
+		maxSize: maxSizeBuffer,
+	};
+}
+
+function useDefaultAvatar() {
+	const { avatarURL: defaultAvatarUrl } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
+	return defaultAvatarUrl;
+}
+
+export function useCommentAvatar( { commentId } ) {
+	const [ avatars ] = useEntityProp(
+		'root',
+		'comment',
+		'author_avatar_urls',
+		commentId
+	);
+
+	const [ authorName ] = useEntityProp(
+		'root',
+		'comment',
+		'author_name',
+		commentId
+	);
+	const avatarUrls = avatars ? Object.values( avatars ) : null;
+	const sizes = avatars ? Object.keys( avatars ) : null;
+	const { minSize, maxSize } = getAvatarSizes( sizes );
+	const defaultAvatar = useDefaultAvatar();
+	return {
+		src: avatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : defaultAvatar,
+		minSize,
+		maxSize,
+		// translators: %s is the Author name.
+		alt: authorName
+			? // translators: %s is the Author name.
+			  sprintf( __( '%s Avatar' ), authorName )
+			: __( 'Default Avatar' ),
+	};
+}
+
+export function useUserAvatar( { userId, postId, postType } ) {
+	const { authorDetails } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getUser } = select( coreStore );
+			if ( userId ) {
+				return {
+					authorDetails: getUser( userId ),
+				};
+			}
+			const _authorId = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			)?.author;
+
+			return {
+				authorDetails: _authorId ? getUser( _authorId ) : null,
+			};
+		},
+		[ postType, postId, userId ]
+	);
+	const avatarUrls = authorDetails
+		? Object.values( authorDetails.avatar_urls )
+		: null;
+	const sizes = authorDetails
+		? Object.keys( authorDetails.avatar_urls )
+		: null;
+	const { minSize, maxSize } = getAvatarSizes( sizes );
+	const defaultAvatar = useDefaultAvatar();
+	return {
+		src: avatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : defaultAvatar,
+		minSize,
+		maxSize,
+		alt: authorDetails
+			? // translators: %s is the Author name.
+			  sprintf( __( '%s Avatar' ), authorDetails?.name )
+			: __( 'Default Avatar' ),
+	};
+}

package/src/avatar/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { commentAuthorAvatar as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};

package/src/avatar/index.php

@@ -0,0 +1,146 @@
+<?php
+/**
+ * Server-side rendering of the `core/avatar` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/avatar` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ * @return string Return the avatar.
+ */
+function render_block_core_avatar( $attributes, $content, $block ) {
+	$size               = isset( $attributes['size'] ) ? $attributes['size'] : 96;
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	$image_styles = array();
+
+	// Add border width styles.
+	$has_border_width = ! empty( $attributes['style']['border']['width'] );
+
+	if ( $has_border_width ) {
+		$border_width   = $attributes['style']['border']['width'];
+		$image_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
+	}
+
+	// Add border radius styles.
+	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
+
+	if ( $has_border_radius ) {
+		$border_radius = $attributes['style']['border']['radius'];
+
+		if ( is_array( $border_radius ) ) {
+			// Apply styles for individual corner border radii.
+			foreach ( $border_radius as $key => $value ) {
+				if ( null !== $value ) {
+					$name = _wp_to_kebab_case( $key );
+					// Add shared styles for individual border radii.
+					$border_style   = sprintf(
+						'border-%s-radius: %s;',
+						esc_attr( $name ),
+						esc_attr( $value )
+					);
+					$image_styles[] = $border_style;
+				}
+			}
+		} else {
+			$border_style   = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
+			$image_styles[] = $border_style;
+		}
+	}
+
+	// Add border color styles.
+	$has_border_color = ! empty( $attributes['style']['border']['color'] );
+
+	if ( $has_border_color ) {
+		$border_color   = $attributes['style']['border']['color'];
+		$image_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
+	}
+
+	// Add border style (solid, dashed, dotted ).
+	$has_border_style = ! empty( $attributes['style']['border']['style'] );
+
+	if ( $has_border_style ) {
+		$border_style   = $attributes['style']['border']['style'];
+		$image_styles[] = sprintf( 'border-style: %s;', esc_attr( $border_style ) );
+	}
+
+	// Add border classes to the avatar image for both custom colors and palette colors.
+	$image_classes = '';
+	if ( $has_border_color || isset( $attributes['borderColor'] ) ) {
+		$image_classes .= 'has-border-color';
+	}
+	if ( isset( $attributes['borderColor'] ) ) {
+		$image_classes .= ' has-' . $attributes['borderColor'] . '-border-color';
+	}
+
+	if ( ! isset( $block->context['commentId'] ) ) {
+		$author_id   = isset( $attributes['userId'] ) ? $attributes['userId'] : get_post_field( 'post_author', $block->context['postId'] );
+		$author_name = get_the_author_meta( 'display_name', $author_id );
+		// translators: %s is the Author name.
+		$alt          = sprintf( __( '%s Avatar' ), $author_name );
+		$avatar_block = get_avatar(
+			$author_id,
+			$size,
+			'',
+			$alt,
+			array(
+				'extra_attr' => isset( $image_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $image_styles ) ) ) : '',
+				'class'      => "wp-block-avatar__image $image_classes ",
+			)
+		);
+		if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
+			$label = '';
+			if ( '_blank' === $attributes['linkTarget'] ) {
+				// translators: %s is the Author name.
+				$label = 'aria-label="' . sprintf( esc_attr__( '( %s author archive, opens in a new tab)' ), $author_name ) . '"';
+			}
+			// translators: %1$s: Author archive link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
+			$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
+		}
+		return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
+	}
+	$comment = get_comment( $block->context['commentId'] );
+	/* translators: %s is the Comment Author name */
+	$alt = sprintf( __( '%s Avatar' ), $comment->comment_author );
+	if ( ! $comment ) {
+		return '';
+	}
+	$avatar_block = get_avatar(
+		$comment,
+		$size,
+		'',
+		$alt,
+		array(
+			'extra_attr' => isset( $image_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $image_styles ) ) ) : '',
+			'class'      => "wp-block-avatar__image $image_classes",
+		)
+	);
+	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] && isset( $comment->comment_author_url ) && '' !== $comment->comment_author_url ) {
+		$label = '';
+		if ( '_blank' === $attributes['linkTarget'] ) {
+			// translators: %s is the Comment Author name.
+			$label = 'aria-label="' . sprintf( esc_attr__( '( %s website link, opens in a new tab)' ), $comment->comment_author ) . '"';
+		}
+		// translators: %1$s: Comment Author website link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
+		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', $comment->comment_author_url, esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
+	}
+	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
+}
+
+/**
+ * Registers the `core/avatar` block on the server.
+ */
+function register_block_core_avatar() {
+	register_block_type_from_metadata(
+		__DIR__ . '/avatar',
+		array(
+			'render_callback' => 'render_block_core_avatar',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_avatar' );

package/src/avatar/user-control.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ComboboxControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+
+const AUTHORS_QUERY = {
+	who: 'authors',
+	per_page: -1,
+	_fields: 'id,name',
+	context: 'view',
+};
+
+function UserControl( { value, onChange } ) {
+	const [ filteredAuthorsList, setFilteredAuthorsList ] = useState();
+	const authorsList = useSelect( ( select ) => {
+		const { getUsers } = select( coreStore );
+		return getUsers( AUTHORS_QUERY );
+	}, [] );
+	if ( ! authorsList ) {
+		return null;
+	}
+
+	const options = authorsList.map( ( author ) => {
+		return {
+			label: author.name,
+			value: author.id,
+		};
+	} );
+
+	return (
+		<ComboboxControl
+			label={ __( 'User' ) }
+			help={ __(
+				'Select the avatar user to display, if it is blank it will use the post/page author.'
+			) }
+			value={ value }
+			onChange={ onChange }
+			options={ filteredAuthorsList || options }
+			onFilterValueChange={ ( inputValue ) =>
+				setFilteredAuthorsList(
+					options.filter( ( option ) =>
+						option.label
+							.toLowerCase()
+							.startsWith( inputValue.toLowerCase() )
+					)
+				)
+			}
+		/>
+	);
+}
+
+export default UserControl;

package/src/column/block.json

@@ -39,6 +39,7 @@
 			"__experimentalDefaultControls": {
 				"padding": true
 			}
-		}
+		},
+		"__experimentalLayout": true
 	}
 }

package/src/comment-author-avatar/block.json

@@ -20,6 +20,7 @@
 	"usesContext": [ "commentId" ],
 	"supports": {
 		"html": false,
+		"inserter": false,
 		"__experimentalBorder": {
 			"radius": true,
 			"width": true,

package/src/comment-date/edit.js

@@ -2,13 +2,16 @@
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
-	PanelBody,
-	CustomSelectControl,
-	ToggleControl,
-} from '@wordpress/components';
+	dateI18n,
+	__experimentalGetSettings as getDateSettings,
+} from '@wordpress/date';
+import {
+	InspectorControls,
+	useBlockProps,
+	__experimentalDateFormatPicker as DateFormatPicker,
+} from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 
 /**
@@ -31,35 +34,22 @@ export default function Edit( {
 } ) {
 	const blockProps = useBlockProps();
 	const [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
-	const [ siteDateFormat ] = useEntityProp( 'root', 'site', 'date_format' );
-
-	const settings = __experimentalGetSettings();
-	const formatOptions = Object.values( settings.formats ).map(
-		( formatOption ) => ( {
-			key: formatOption,
-			name: dateI18n( formatOption, date || new Date() ),
-		} )
+	const [ siteFormat = getDateSettings().formats.date ] = useEntityProp(
+		'root',
+		'site',
+		'date_format'
 	);
-	const resolvedFormat = format || siteDateFormat || settings.formats.date;
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Format settings' ) }>
-				<CustomSelectControl
-					hideLabelFromVision
-					label={ __( 'Date Format' ) }
-					options={ formatOptions }
-					onChange={ ( { selectedItem } ) =>
-						setAttributes( {
-							format: selectedItem.key,
-						} )
+			<PanelBody title={ __( 'Settings' ) }>
+				<DateFormatPicker
+					format={ format }
+					defaultFormat={ siteFormat }
+					onChange={ ( nextFormat ) =>
+						setAttributes( { format: nextFormat } )
 					}
-					value={ formatOptions.find(
-						( option ) => option.key === resolvedFormat
-					) }
 				/>
-			</PanelBody>
-			<PanelBody title={ __( 'Link settings' ) }>
 				<ToggleControl
 					label={ __( 'Link to comment' ) }
 					onChange={ () => setAttributes( { isLink: ! isLink } ) }
@@ -82,7 +72,7 @@ export default function Edit( {
 
 	let commentDate = (
 		<time dateTime={ dateI18n( 'c', date ) }>
-			{ dateI18n( resolvedFormat, date ) }
+			{ dateI18n( format || siteFormat, date ) }
 		</time>
 	);