@wordpress/block-library 7.1.0 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.1.0",
+	"version": "7.3.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.4.0",
-		"@wordpress/api-fetch": "^6.1.0",
-		"@wordpress/autop": "^3.4.0",
-		"@wordpress/blob": "^3.4.0",
-		"@wordpress/block-editor": "^8.3.0",
-		"@wordpress/blocks": "^11.3.0",
-		"@wordpress/components": "^19.6.0",
-		"@wordpress/compose": "^5.2.0",
-		"@wordpress/core-data": "^4.2.0",
-		"@wordpress/data": "^6.4.0",
-		"@wordpress/date": "^4.4.0",
-		"@wordpress/deprecated": "^3.4.0",
-		"@wordpress/dom": "^3.4.0",
-		"@wordpress/element": "^4.2.0",
-		"@wordpress/hooks": "^3.4.0",
-		"@wordpress/html-entities": "^3.4.0",
-		"@wordpress/i18n": "^4.4.0",
-		"@wordpress/icons": "^8.0.0",
-		"@wordpress/keycodes": "^3.4.0",
-		"@wordpress/notices": "^3.4.0",
-		"@wordpress/primitives": "^3.2.0",
-		"@wordpress/reusable-blocks": "^3.2.0",
-		"@wordpress/rich-text": "^5.2.0",
-		"@wordpress/server-side-render": "^3.2.0",
-		"@wordpress/url": "^3.5.0",
-		"@wordpress/viewport": "^4.2.0",
+		"@wordpress/a11y": "^3.6.0",
+		"@wordpress/api-fetch": "^6.3.0",
+		"@wordpress/autop": "^3.6.0",
+		"@wordpress/blob": "^3.6.0",
+		"@wordpress/block-editor": "^8.5.0",
+		"@wordpress/blocks": "^11.5.0",
+		"@wordpress/components": "^19.8.0",
+		"@wordpress/compose": "^5.4.0",
+		"@wordpress/core-data": "^4.4.0",
+		"@wordpress/data": "^6.6.0",
+		"@wordpress/date": "^4.6.0",
+		"@wordpress/deprecated": "^3.6.0",
+		"@wordpress/dom": "^3.6.0",
+		"@wordpress/element": "^4.4.0",
+		"@wordpress/hooks": "^3.6.0",
+		"@wordpress/html-entities": "^3.6.0",
+		"@wordpress/i18n": "^4.6.0",
+		"@wordpress/icons": "^8.2.0",
+		"@wordpress/keycodes": "^3.6.0",
+		"@wordpress/notices": "^3.6.0",
+		"@wordpress/primitives": "^3.4.0",
+		"@wordpress/reusable-blocks": "^3.4.0",
+		"@wordpress/rich-text": "^5.4.0",
+		"@wordpress/server-side-render": "^3.4.0",
+		"@wordpress/url": "^3.7.0",
+		"@wordpress/viewport": "^4.4.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c37fd7edbc3e379540d7b24fce75a6f640a434ae"
+	"gitHead": "11eb1241e63c9240018323551c6753f8a5fa96f9"
 }

package/src/archives/block.json

@@ -4,7 +4,7 @@
 	"name": "core/archives",
 	"title": "Archives",
 	"category": "widgets",
-	"description": "Display a monthly archive of your posts.",
+	"description": "Display a date archive of your posts.",
 	"textdomain": "default",
 	"attributes": {
 		"displayAsDropdown": {
@@ -14,6 +14,10 @@
 		"showPostCounts": {
 			"type": "boolean",
 			"default": false
+		},
+		"type": {
+			"type": "string",
+			"default": "monthly"
 		}
 	},
 	"supports": {

package/src/archives/edit.js

@@ -1,13 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, ToggleControl, Disabled } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	SelectControl,
+	Disabled,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 
 export default function ArchivesEdit( { attributes, setAttributes } ) {
-	const { showPostCounts, displayAsDropdown } = attributes;
+	const { showPostCounts, displayAsDropdown, type } = attributes;
 
 	return (
 		<>
@@ -31,6 +36,19 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 							} )
 						}
 					/>
+					<SelectControl
+						label={ __( 'Group by:' ) }
+						options={ [
+							{ label: __( 'Year' ), value: 'yearly' },
+							{ label: __( 'Month' ), value: 'monthly' },
+							{ label: __( 'Week' ), value: 'weekly' },
+							{ label: __( 'Day' ), value: 'daily' },
+						] }
+						value={ type }
+						onChange={ ( value ) =>
+							setAttributes( { type: value } )
+						}
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...useBlockProps() }>

package/src/archives/index.php

@@ -16,8 +16,8 @@
  */
 function render_block_core_archives( $attributes ) {
 	$show_post_count = ! empty( $attributes['showPostCounts'] );
-
-	$class = '';
+	$type            = isset( $attributes['type'] ) ? $attributes['type'] : 'monthly';
+	$class           = '';
 
 	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
 
@@ -30,7 +30,7 @@ function render_block_core_archives( $attributes ) {
 		$dropdown_args = apply_filters(
 			'widget_archives_dropdown_args',
 			array(
-				'type'            => 'monthly',
+				'type'            => $type,
 				'format'          => 'option',
 				'show_post_count' => $show_post_count,
 			)
@@ -79,7 +79,7 @@ function render_block_core_archives( $attributes ) {
 	$archives_args = apply_filters(
 		'widget_archives_args',
 		array(
-			'type'            => 'monthly',
+			'type'            => $type,
 			'show_post_count' => $show_post_count,
 		)
 	);

package/src/audio/edit.native.js

@@ -66,10 +66,6 @@ function AudioEdit( {
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 
-	const onError = () => {
-		createErrorNotice( __( 'Failed to insert audio file.' ) );
-	};
-
 	function toggleAttribute( attribute ) {
 		return ( newValue ) => {
 			setAttributes( { [ attribute ]: newValue } );
@@ -144,7 +140,6 @@ function AudioEdit( {
 			<MediaUploadProgress
 				mediaId={ id }
 				onFinishMediaUploadWithSuccess={ onFileChange }
-				onFinishMediaUploadWithFailure={ onError }
 				onMediaUploadStateReset={ onFileChange }
 				containerStyle={ styles.progressContainer }
 				progressBarStyle={ styles.progressBar }

package/src/avatar/block.json

@@ -0,0 +1,53 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/avatar",
+	"title": "Avatar",
+	"category": "theme",
+	"description": "Add a user's avatar.",
+	"textdomain": "default",
+	"attributes": {
+		"userId": {
+			"type": "number"
+		},
+		"size": {
+			"type": "number",
+			"default": 96
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": false
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
+		}
+
+	},
+	"usesContext": [ "postType", "postId", "commentId" ],
+	"supports": {
+		"html": false,
+		"align": true,
+		"alignWide": false,
+		"spacing": {
+			"margin": true
+		},
+		"__experimentalBorder": {
+			"__experimentalSkipSerialization": true,
+			"radius": true,
+			"width": true,
+			"color": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
+		},
+		"color": {
+			"text": false,
+			"background": false,
+			"__experimentalDuotone": "img"
+		}
+	},
+	"editorStyle": "wp-block-avatar",
+	"style": "wp-block-avatar"
+}

package/src/avatar/edit.js

@@ -0,0 +1,230 @@
+/**
+ * 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';
+import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { useUserAvatar, useCommentAvatar } from './hooks';
+import UserControl from './user-control';
+
+const AvatarInspectorControls = ( {
+	setAttributes,
+	avatar,
+	attributes,
+	selectUser,
+} ) => (
+	<InspectorControls>
+		<PanelBody title={ __( 'Settings' ) }>
+			<RangeControl
+				label={ __( 'Image size' ) }
+				onChange={ ( newSize ) =>
+					setAttributes( {
+						size: newSize,
+					} )
+				}
+				min={ avatar.minSize }
+				max={ avatar.maxSize }
+				initialPosition={ attributes?.size }
+				value={ attributes?.size }
+			/>
+			<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' }
+				/>
+			) }
+			{ selectUser && (
+				<UserControl
+					value={ attributes?.userId }
+					onChange={ ( value ) => {
+						setAttributes( {
+							userId: value,
+						} );
+					} }
+				/>
+			) }
+		</PanelBody>
+	</InspectorControls>
+);
+
+const ResizableAvatar = ( {
+	setAttributes,
+	attributes,
+	avatar,
+	blockProps,
+	isSelected,
+} ) => {
+	const borderProps = useBorderProps( attributes );
+	const doubledSizedSrc = addQueryArgs(
+		removeQueryArgs( avatar?.src, [ 's' ] ),
+		{
+			s: attributes?.size * 2,
+		}
+	);
+	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={ doubledSizedSrc }
+					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 ) {
+	// Don't show the Comment Edit controls if we have a comment ID set, or if we're in the Site Editor (where it is `null`).
+	if ( props?.context?.commentId || props?.context?.commentId === null ) {
+		return <CommentEdit { ...props } />;
+	}
+	return <UserEdit { ...props } />;
+}

package/src/avatar/editor.scss

@@ -0,0 +1,9 @@
+.wp-block-avatar__image img {
+	width: 100%;
+}
+
+.wp-block-avatar.aligncenter {
+	.components-resizable-box__container {
+		margin: 0 auto;
+	}
+}

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,
+};