@wordpress/block-library 7.1.1 → 7.3.1

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/style.scss

@@ -0,0 +1,5 @@
+.wp-block-avatar {
+	&.aligncenter {
+		text-align: center;
+	}
+}

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/block/edit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useEntityBlockEditor,
 	useEntityProp,
@@ -25,6 +25,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	Warning,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
@@ -40,6 +41,11 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	);
 	const isMissing = hasResolved && ! record;
 
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
+
 	const {
 		__experimentalConvertBlockToStatic: convertBlockToStatic,
 	} = useDispatch( reusableBlocksStore );
@@ -103,16 +109,20 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	return (
 		<RecursionProvider>
 			<div { ...blockProps }>
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ () => convertBlockToStatic( clientId ) }
-							label={ __( 'Convert to regular blocks' ) }
-							icon={ ungroup }
-							showTooltip
-						/>
-					</ToolbarGroup>
-				</BlockControls>
+				{ canRemove && (
+					<BlockControls>
+						<ToolbarGroup>
+							<ToolbarButton
+								onClick={ () =>
+									convertBlockToStatic( clientId )
+								}
+								label={ __( 'Convert to regular blocks' ) }
+								icon={ ungroup }
+								showTooltip
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+				) }
 				<InspectorControls>
 					<PanelBody>
 						<TextControl

package/src/column/block.json

@@ -35,10 +35,12 @@
 			}
 		},
 		"spacing": {
+			"blockGap": true,
 			"padding": true,
 			"__experimentalDefaultControls": {
 				"padding": true
 			}
-		}
+		},
+		"__experimentalLayout": true
 	}
 }

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

@@ -2,10 +2,10 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-author-avatar",
-	"title": "Comment Author Avatar",
+	"title": "Comment Author Avatar (deprecated)",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
-	"description": "Add the avatar of this comment's author.",
+	"ancestor": [ "core/comment-template" ],
+	"description": "This block is deprecated. Please use the Avatar block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"width": {
@@ -20,6 +20,7 @@
 	"usesContext": [ "commentId" ],
 	"supports": {
 		"html": false,
+		"inserter": false,
 		"__experimentalBorder": {
 			"radius": true,
 			"width": true,

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

@@ -4,13 +4,13 @@
 	"name": "core/comment-author-name",
 	"title": "Comment Author Name",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
-	"description": "Add the author name of this comment.",
+	"ancestor": [ "core/comment-template" ],
+	"description": "Displays the name of the author of the comment.",
 	"textdomain": "default",
 	"attributes": {
 		"isLink": {
 			"type": "boolean",
-			"default": false
+			"default": true
 		},
 		"linkTarget": {
 			"type": "string",
@@ -18,6 +18,10 @@
 		},
 		"textAlign": {
 			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

package/src/comment-author-name/index.php

@@ -27,6 +27,9 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
 	}
+	if ( isset( $attributes['fontSize'] ) ) {
+		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$comment_author     = get_comment_author( $comment );

package/src/comment-content/block.json

@@ -4,7 +4,7 @@
 	"name": "core/comment-content",
 	"title": "Comment Content",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
+	"ancestor": [ "core/comment-template" ],
 	"description": "Displays the contents of a comment.",
 	"textdomain": "default",
 	"usesContext": [ "commentId" ],

package/src/comment-date/block.json

@@ -4,8 +4,8 @@
 	"name": "core/comment-date",
 	"title": "Comment Date",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
-	"description": "Add the date of this comment.",
+	"ancestor": [ "core/comment-template" ],
+	"description": "Displays the date on which the comment was posted.",
 	"textdomain": "default",
 	"attributes": {
 		"format": {
@@ -13,7 +13,11 @@
 		},
 		"isLink": {
 			"type": "boolean",
-			"default": false
+			"default": true
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

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>
 	);
 

package/src/comment-date/index.php

@@ -23,7 +23,12 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes();
+	$classes = '';
+	if ( isset( $attributes['fontSize'] ) ) {
+		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$formatted_date     = get_comment_date(
 		isset( $attributes['format'] ) ? $attributes['format'] : '',
 		$comment

package/src/comment-edit-link/block.json

@@ -4,7 +4,7 @@
 	"name": "core/comment-edit-link",
 	"title": "Comment Edit Link",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
+	"ancestor": [ "core/comment-template" ],
 	"description": "Displays a link to edit the comment in the WordPress Dashboard. This link is only visible to users with the edit comment capability.",
 	"textdomain": "default",
 	"usesContext": [ "commentId" ],
@@ -15,6 +15,10 @@
 		},
 		"textAlign": {
 			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
 		}
 	},
 	"supports": {

package/src/comment-edit-link/index.php

@@ -31,6 +31,9 @@ function render_block_core_comment_edit_link( $attributes, $content, $block ) {
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
 	}
+	if ( isset( $attributes['fontSize'] ) ) {
+		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 

package/src/comment-reply-link/block.json

@@ -4,13 +4,17 @@
 	"name": "core/comment-reply-link",
 	"title": "Comment Reply Link",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
+	"ancestor": [ "core/comment-template" ],
 	"description": "Displays a link to reply to a comment.",
 	"textdomain": "default",
 	"usesContext": [ "commentId" ],
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
 		}
 	},
 	"supports": {

package/src/comment-reply-link/index.php

@@ -53,7 +53,10 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 
 	$classes = '';
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $attributes['textAlign'];
+		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
+	}
+	if ( isset( $attributes['fontSize'] ) ) {
+		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

package/src/comment-template/block.json

@@ -5,15 +5,9 @@
 	"title": "Comment Template",
 	"category": "design",
 	"parent": [ "core/comments-query-loop" ],
-	"description": "Contains the block elements used to render a comment, like the title, date, author, avatar and more.",
+	"description": "Contains the block elements used to display a comment, like the title, date, author, avatar and more.",
 	"textdomain": "default",
-	"usesContext": [
-		"comments/defaultPage",
-		"comments/inherit",
-		"comments/order",
-		"comments/perPage",
-		"postId"
-	],
+	"usesContext": [ "postId" ],
 	"supports": {
 		"reusable": false,
 		"html": false,