10 files changed, 242 insertions, 0 deletions
diff --git a/wp-includes/blocks/avatar.php b/wp-includes/blocks/avatar.php
new file mode 100644
index 0000000..d404fb8
--- /dev/null
+++ b/wp-includes/blocks/avatar.php
@@ -0,0 +1,150 @@
+<?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();
+	$border_attributes  = get_block_core_avatar_border_attributes( $attributes );
+
+	// Class gets passed through `esc_attr` via `get_avatar`.
+	$image_classes = ! empty( $border_attributes['class'] )
+		? "wp-block-avatar__image {$border_attributes['class']}"
+		: 'wp-block-avatar__image';
+
+	// Unlike class, `get_avatar` doesn't filter the styles via `esc_attr`.
+	// The style engine does pass the border styles through
+	// `safecss_filter_attr` however.
+	$image_styles = ! empty( $border_attributes['style'] )
+		? sprintf( ' style="%s"', esc_attr( $border_attributes['style'] ) )
+		: '';
+
+	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' => $image_styles,
+				'class'      => $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>', esc_url( 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'] );
+	if ( ! $comment ) {
+		return '';
+	}
+	/* translators: %s is the Comment Author name */
+	$alt          = sprintf( __( '%s Avatar' ), $comment->comment_author );
+	$avatar_block = get_avatar(
+		$comment,
+		$size,
+		'',
+		$alt,
+		array(
+			'extra_attr' => $image_styles,
+			'class'      => $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>', esc_url( $comment->comment_author_url ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
+	}
+	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
+}
+
+/**
+ * Generates class names and styles to apply the border support styles for
+ * the Avatar block.
+ *
+ * @param array $attributes The block attributes.
+ * @return array The border-related classnames and styles for the block.
+ */
+function get_block_core_avatar_border_attributes( $attributes ) {
+	$border_styles = array();
+	$sides         = array( 'top', 'right', 'bottom', 'left' );
+
+	// Border radius.
+	if ( isset( $attributes['style']['border']['radius'] ) ) {
+		$border_styles['radius'] = $attributes['style']['border']['radius'];
+	}
+
+	// Border style.
+	if ( isset( $attributes['style']['border']['style'] ) ) {
+		$border_styles['style'] = $attributes['style']['border']['style'];
+	}
+
+	// Border width.
+	if ( isset( $attributes['style']['border']['width'] ) ) {
+		$border_styles['width'] = $attributes['style']['border']['width'];
+	}
+
+	// Border color.
+	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
+	$custom_color           = $attributes['style']['border']['color'] ?? null;
+	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
+
+	// Individual border styles e.g. top, left etc.
+	foreach ( $sides as $side ) {
+		$border                 = $attributes['style']['border'][ $side ] ?? null;
+		$border_styles[ $side ] = array(
+			'color' => isset( $border['color'] ) ? $border['color'] : null,
+			'style' => isset( $border['style'] ) ? $border['style'] : null,
+			'width' => isset( $border['width'] ) ? $border['width'] : null,
+		);
+	}
+
+	$styles     = wp_style_engine_get_styles( array( 'border' => $border_styles ) );
+	$attributes = array();
+	if ( ! empty( $styles['classnames'] ) ) {
+		$attributes['class'] = $styles['classnames'];
+	}
+	if ( ! empty( $styles['css'] ) ) {
+		$attributes['style'] = $styles['css'];
+	}
+	return $attributes;
+}
+
+/**
+ * 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' );
diff --git a/wp-includes/blocks/avatar/block.json b/wp-includes/blocks/avatar/block.json
new file mode 100644
index 0000000..3b4ac7c
--- /dev/null
+++ b/wp-includes/blocks/avatar/block.json
@@ -0,0 +1,56 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"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,
+			"padding": true
+		},
+		"__experimentalBorder": {
+			"__experimentalSkipSerialization": true,
+			"radius": true,
+			"width": true,
+			"color": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
+		},
+		"color": {
+			"text": false,
+			"background": false,
+			"__experimentalDuotone": "img"
+		}
+	},
+	"selectors": {
+		"border": ".wp-block-avatar img"
+	},
+	"editorStyle": "wp-block-avatar-editor",
+	"style": "wp-block-avatar"
+}
diff --git a/wp-includes/blocks/avatar/editor-rtl.css b/wp-includes/blocks/avatar/editor-rtl.css
new file mode 100644
index 0000000..5e3ddc5
--- /dev/null
+++ b/wp-includes/blocks/avatar/editor-rtl.css
@@ -0,0 +1,7 @@
+.wp-block-avatar__image img{
+  width:100%;
+}
+
+.wp-block-avatar.aligncenter .components-resizable-box__container{
+  margin:0 auto;
+}
+\ No newline at end of file
diff --git a/wp-includes/blocks/avatar/editor-rtl.min.css b/wp-includes/blocks/avatar/editor-rtl.min.css
new file mode 100644
index 0000000..88706a0
--- /dev/null
+++ b/wp-includes/blocks/avatar/editor-rtl.min.css
@@ -0,0 +1 @@
+.wp-block-avatar__image img{width:100%}.wp-block-avatar.aligncenter .components-resizable-box__container{margin:0 auto}
+\ No newline at end of file
diff --git a/wp-includes/blocks/avatar/editor.css b/wp-includes/blocks/avatar/editor.css
new file mode 100644
index 0000000..5e3ddc5
--- /dev/null
+++ b/wp-includes/blocks/avatar/editor.css
@@ -0,0 +1,7 @@
+.wp-block-avatar__image img{
+  width:100%;
+}
+
+.wp-block-avatar.aligncenter .components-resizable-box__container{
+  margin:0 auto;
+}
+\ No newline at end of file
diff --git a/wp-includes/blocks/avatar/editor.min.css b/wp-includes/blocks/avatar/editor.min.css
new file mode 100644
index 0000000..88706a0
--- /dev/null
+++ b/wp-includes/blocks/avatar/editor.min.css
@@ -0,0 +1 @@
+.wp-block-avatar__image img{width:100%}.wp-block-avatar.aligncenter .components-resizable-box__container{margin:0 auto}
+\ No newline at end of file
diff --git a/wp-includes/blocks/avatar/style-rtl.css b/wp-includes/blocks/avatar/style-rtl.css
new file mode 100644
index 0000000..8742c0f
--- /dev/null
+++ b/wp-includes/blocks/avatar/style-rtl.css
@@ -0,0 +1,9 @@
+.wp-block-avatar{
+  line-height:0;
+}
+.wp-block-avatar,.wp-block-avatar img{
+  box-sizing:border-box;
+}
+.wp-block-avatar.aligncenter{
+  text-align:center;
+}
+\ No newline at end of file
diff --git a/wp-includes/blocks/avatar/style-rtl.min.css b/wp-includes/blocks/avatar/style-rtl.min.css
new file mode 100644
index 0000000..c9989c1
--- /dev/null
+++ b/wp-includes/blocks/avatar/style-rtl.min.css
@@ -0,0 +1 @@
+.wp-block-avatar{line-height:0}.wp-block-avatar,.wp-block-avatar img{box-sizing:border-box}.wp-block-avatar.aligncenter{text-align:center}
+\ No newline at end of file
diff --git a/wp-includes/blocks/avatar/style.css b/wp-includes/blocks/avatar/style.css
new file mode 100644
index 0000000..8742c0f
--- /dev/null
+++ b/wp-includes/blocks/avatar/style.css
@@ -0,0 +1,9 @@
+.wp-block-avatar{
+  line-height:0;
+}
+.wp-block-avatar,.wp-block-avatar img{
+  box-sizing:border-box;
+}
+.wp-block-avatar.aligncenter{
+  text-align:center;
+}
+\ No newline at end of file
diff --git a/wp-includes/blocks/avatar/style.min.css b/wp-includes/blocks/avatar/style.min.css
new file mode 100644
index 0000000..c9989c1
--- /dev/null
+++ b/wp-includes/blocks/avatar/style.min.css
@@ -0,0 +1 @@
+.wp-block-avatar{line-height:0}.wp-block-avatar,.wp-block-avatar img{box-sizing:border-box}.wp-block-avatar.aligncenter{text-align:center}
+\ No newline at end of file