diff options
Diffstat (limited to '')
-rw-r--r-- | wp-includes/blocks/avatar.php | 150 | ||||
-rw-r--r-- | wp-includes/blocks/avatar/block.json | 56 | ||||
-rw-r--r-- | wp-includes/blocks/avatar/editor-rtl.css | 7 | ||||
-rw-r--r-- | wp-includes/blocks/avatar/editor-rtl.min.css | 1 | ||||
-rw-r--r-- | wp-includes/blocks/avatar/editor.css | 7 | ||||
-rw-r--r-- | wp-includes/blocks/avatar/editor.min.css | 1 | ||||
-rw-r--r-- | wp-includes/blocks/avatar/style-rtl.css | 9 | ||||
-rw-r--r-- | wp-includes/blocks/avatar/style-rtl.min.css | 1 | ||||
-rw-r--r-- | wp-includes/blocks/avatar/style.css | 9 | ||||
-rw-r--r-- | wp-includes/blocks/avatar/style.min.css | 1 |
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 |