6 */ |
6 */ |
7 |
7 |
8 /** |
8 /** |
9 * Renders the `core/avatar` block on the server. |
9 * Renders the `core/avatar` block on the server. |
10 * |
10 * |
|
11 * @since 6.0.0 |
|
12 * |
11 * @param array $attributes Block attributes. |
13 * @param array $attributes Block attributes. |
12 * @param string $content Block default content. |
14 * @param string $content Block default content. |
13 * @param WP_Block $block Block instance. |
15 * @param WP_Block $block Block instance. |
14 * @return string Return the avatar. |
16 * @return string Return the avatar. |
15 */ |
17 */ |
16 function render_block_core_avatar( $attributes, $content, $block ) { |
18 function render_block_core_avatar( $attributes, $content, $block ) { |
17 $size = isset( $attributes['size'] ) ? $attributes['size'] : 96; |
19 $size = isset( $attributes['size'] ) ? $attributes['size'] : 96; |
18 $wrapper_attributes = get_block_wrapper_attributes(); |
20 $wrapper_attributes = get_block_wrapper_attributes(); |
|
21 $border_attributes = get_block_core_avatar_border_attributes( $attributes ); |
19 |
22 |
20 $image_styles = array(); |
23 // Class gets passed through `esc_attr` via `get_avatar`. |
|
24 $image_classes = ! empty( $border_attributes['class'] ) |
|
25 ? "wp-block-avatar__image {$border_attributes['class']}" |
|
26 : 'wp-block-avatar__image'; |
21 |
27 |
22 // Add border width styles. |
28 // Unlike class, `get_avatar` doesn't filter the styles via `esc_attr`. |
23 $has_border_width = ! empty( $attributes['style']['border']['width'] ); |
29 // The style engine does pass the border styles through |
24 |
30 // `safecss_filter_attr` however. |
25 if ( $has_border_width ) { |
31 $image_styles = ! empty( $border_attributes['style'] ) |
26 $border_width = $attributes['style']['border']['width']; |
32 ? sprintf( ' style="%s"', esc_attr( $border_attributes['style'] ) ) |
27 $image_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) ); |
33 : ''; |
28 } |
|
29 |
|
30 // Add border radius styles. |
|
31 $has_border_radius = ! empty( $attributes['style']['border']['radius'] ); |
|
32 |
|
33 if ( $has_border_radius ) { |
|
34 $border_radius = $attributes['style']['border']['radius']; |
|
35 |
|
36 if ( is_array( $border_radius ) ) { |
|
37 // Apply styles for individual corner border radii. |
|
38 foreach ( $border_radius as $key => $value ) { |
|
39 if ( null !== $value ) { |
|
40 $name = _wp_to_kebab_case( $key ); |
|
41 // Add shared styles for individual border radii. |
|
42 $border_style = sprintf( |
|
43 'border-%s-radius: %s;', |
|
44 esc_attr( $name ), |
|
45 esc_attr( $value ) |
|
46 ); |
|
47 $image_styles[] = $border_style; |
|
48 } |
|
49 } |
|
50 } else { |
|
51 $border_style = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) ); |
|
52 $image_styles[] = $border_style; |
|
53 } |
|
54 } |
|
55 |
|
56 // Add border color styles. |
|
57 $has_border_color = ! empty( $attributes['style']['border']['color'] ); |
|
58 |
|
59 if ( $has_border_color ) { |
|
60 $border_color = $attributes['style']['border']['color']; |
|
61 $image_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) ); |
|
62 } |
|
63 |
|
64 // Add border style (solid, dashed, dotted ). |
|
65 $has_border_style = ! empty( $attributes['style']['border']['style'] ); |
|
66 |
|
67 if ( $has_border_style ) { |
|
68 $border_style = $attributes['style']['border']['style']; |
|
69 $image_styles[] = sprintf( 'border-style: %s;', esc_attr( $border_style ) ); |
|
70 } |
|
71 |
|
72 // Add border classes to the avatar image for both custom colors and palette colors. |
|
73 $image_classes = ''; |
|
74 if ( $has_border_color || isset( $attributes['borderColor'] ) ) { |
|
75 $image_classes .= 'has-border-color'; |
|
76 } |
|
77 if ( isset( $attributes['borderColor'] ) ) { |
|
78 $image_classes .= ' has-' . $attributes['borderColor'] . '-border-color'; |
|
79 } |
|
80 |
34 |
81 if ( ! isset( $block->context['commentId'] ) ) { |
35 if ( ! isset( $block->context['commentId'] ) ) { |
82 $author_id = isset( $attributes['userId'] ) ? $attributes['userId'] : get_post_field( 'post_author', $block->context['postId'] ); |
36 if ( isset( $attributes['userId'] ) ) { |
|
37 $author_id = $attributes['userId']; |
|
38 } elseif ( isset( $block->context['postId'] ) ) { |
|
39 $author_id = get_post_field( 'post_author', $block->context['postId'] ); |
|
40 } else { |
|
41 $author_id = get_query_var( 'author' ); |
|
42 } |
|
43 |
|
44 if ( empty( $author_id ) ) { |
|
45 return ''; |
|
46 } |
|
47 |
83 $author_name = get_the_author_meta( 'display_name', $author_id ); |
48 $author_name = get_the_author_meta( 'display_name', $author_id ); |
84 // translators: %s is the Author name. |
49 // translators: %s is the Author name. |
85 $alt = sprintf( __( '%s Avatar' ), $author_name ); |
50 $alt = sprintf( __( '%s Avatar' ), $author_name ); |
86 $avatar_block = get_avatar( |
51 $avatar_block = get_avatar( |
87 $author_id, |
52 $author_id, |
88 $size, |
53 $size, |
89 '', |
54 '', |
90 $alt, |
55 $alt, |
91 array( |
56 array( |
92 'extra_attr' => isset( $image_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $image_styles ) ) ) : '', |
57 'extra_attr' => $image_styles, |
93 'class' => "wp-block-avatar__image $image_classes ", |
58 'class' => $image_classes, |
94 ) |
59 ) |
95 ); |
60 ); |
96 if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) { |
61 if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) { |
97 $label = ''; |
62 $label = ''; |
98 if ( '_blank' === $attributes['linkTarget'] ) { |
63 if ( '_blank' === $attributes['linkTarget'] ) { |
99 // translators: %s is the Author name. |
64 // translators: %s is the Author name. |
100 $label = 'aria-label="' . sprintf( esc_attr__( '(%s author archive, opens in a new tab)' ), $author_name ) . '"'; |
65 $label = 'aria-label="' . esc_attr( sprintf( __( '(%s author archive, opens in a new tab)' ), $author_name ) ) . '"'; |
101 } |
66 } |
102 // translators: %1$s: Author archive link. %2$s: Link target. %3$s Aria label. %4$s Avatar image. |
67 // translators: %1$s: Author archive link. %2$s: Link target. %3$s Aria label. %4$s Avatar image. |
103 $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 ); |
68 $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 ); |
104 } |
69 } |
105 return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block ); |
70 return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block ); |
106 } |
71 } |
107 $comment = get_comment( $block->context['commentId'] ); |
72 $comment = get_comment( $block->context['commentId'] ); |
108 /* translators: %s is the Comment Author name */ |
|
109 $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); |
|
110 if ( ! $comment ) { |
73 if ( ! $comment ) { |
111 return ''; |
74 return ''; |
112 } |
75 } |
|
76 /* translators: %s is the Comment Author name */ |
|
77 $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); |
113 $avatar_block = get_avatar( |
78 $avatar_block = get_avatar( |
114 $comment, |
79 $comment, |
115 $size, |
80 $size, |
116 '', |
81 '', |
117 $alt, |
82 $alt, |
118 array( |
83 array( |
119 'extra_attr' => isset( $image_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $image_styles ) ) ) : '', |
84 'extra_attr' => $image_styles, |
120 'class' => "wp-block-avatar__image $image_classes", |
85 'class' => $image_classes, |
121 ) |
86 ) |
122 ); |
87 ); |
123 if ( isset( $attributes['isLink'] ) && $attributes['isLink'] && isset( $comment->comment_author_url ) && '' !== $comment->comment_author_url ) { |
88 if ( isset( $attributes['isLink'] ) && $attributes['isLink'] && isset( $comment->comment_author_url ) && '' !== $comment->comment_author_url ) { |
124 $label = ''; |
89 $label = ''; |
125 if ( '_blank' === $attributes['linkTarget'] ) { |
90 if ( '_blank' === $attributes['linkTarget'] ) { |
126 // translators: %s is the Comment Author name. |
91 // translators: %s is the Comment Author name. |
127 $label = 'aria-label="' . sprintf( esc_attr__( '(%s website link, opens in a new tab)' ), $comment->comment_author ) . '"'; |
92 $label = 'aria-label="' . esc_attr( sprintf( __( '(%s website link, opens in a new tab)' ), $comment->comment_author ) ) . '"'; |
128 } |
93 } |
129 // translators: %1$s: Comment Author website link. %2$s: Link target. %3$s Aria label. %4$s Avatar image. |
94 // translators: %1$s: Comment Author website link. %2$s: Link target. %3$s Aria label. %4$s Avatar image. |
130 $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 ); |
95 $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 ); |
131 } |
96 } |
132 return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block ); |
97 return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block ); |
133 } |
98 } |
134 |
99 |
135 /** |
100 /** |
|
101 * Generates class names and styles to apply the border support styles for |
|
102 * the Avatar block. |
|
103 * |
|
104 * @since 6.3.0 |
|
105 * |
|
106 * @param array $attributes The block attributes. |
|
107 * @return array The border-related classnames and styles for the block. |
|
108 */ |
|
109 function get_block_core_avatar_border_attributes( $attributes ) { |
|
110 $border_styles = array(); |
|
111 $sides = array( 'top', 'right', 'bottom', 'left' ); |
|
112 |
|
113 // Border radius. |
|
114 if ( isset( $attributes['style']['border']['radius'] ) ) { |
|
115 $border_styles['radius'] = $attributes['style']['border']['radius']; |
|
116 } |
|
117 |
|
118 // Border style. |
|
119 if ( isset( $attributes['style']['border']['style'] ) ) { |
|
120 $border_styles['style'] = $attributes['style']['border']['style']; |
|
121 } |
|
122 |
|
123 // Border width. |
|
124 if ( isset( $attributes['style']['border']['width'] ) ) { |
|
125 $border_styles['width'] = $attributes['style']['border']['width']; |
|
126 } |
|
127 |
|
128 // Border color. |
|
129 $preset_color = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null; |
|
130 $custom_color = $attributes['style']['border']['color'] ?? null; |
|
131 $border_styles['color'] = $preset_color ? $preset_color : $custom_color; |
|
132 |
|
133 // Individual border styles e.g. top, left etc. |
|
134 foreach ( $sides as $side ) { |
|
135 $border = $attributes['style']['border'][ $side ] ?? null; |
|
136 $border_styles[ $side ] = array( |
|
137 'color' => isset( $border['color'] ) ? $border['color'] : null, |
|
138 'style' => isset( $border['style'] ) ? $border['style'] : null, |
|
139 'width' => isset( $border['width'] ) ? $border['width'] : null, |
|
140 ); |
|
141 } |
|
142 |
|
143 $styles = wp_style_engine_get_styles( array( 'border' => $border_styles ) ); |
|
144 $attributes = array(); |
|
145 if ( ! empty( $styles['classnames'] ) ) { |
|
146 $attributes['class'] = $styles['classnames']; |
|
147 } |
|
148 if ( ! empty( $styles['css'] ) ) { |
|
149 $attributes['style'] = $styles['css']; |
|
150 } |
|
151 return $attributes; |
|
152 } |
|
153 |
|
154 /** |
136 * Registers the `core/avatar` block on the server. |
155 * Registers the `core/avatar` block on the server. |
|
156 * |
|
157 * @since 6.0.0 |
137 */ |
158 */ |
138 function register_block_core_avatar() { |
159 function register_block_core_avatar() { |
139 register_block_type_from_metadata( |
160 register_block_type_from_metadata( |
140 __DIR__ . '/avatar', |
161 __DIR__ . '/avatar', |
141 array( |
162 array( |