Skip to content

Commit 78e07f3

Browse files
aaronrobertshawshail-mehta
aaronrobertshaw
and
shail-mehta
authored
Avatar: Add shadow support (#83929)
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
1 parent 527ec24 commit 78e07f3

5 files changed

Lines changed: 19 additions & 6 deletions

File tree

‎docs/reference-guides/core-blocks/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ Add a user’s avatar.
8383

8484
- **Name:** [core/avatar](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/core-block-avatar/)
8585
- **Category:** [theme](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/)
86-
- **Supports:** align, anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity (clientNavigation), spacing (margin, padding), ~~alignWide~~, ~~html~~
86+
- **Supports:** align, anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity (clientNavigation), shadow, spacing (margin, padding), ~~alignWide~~, ~~html~~
8787
- **Attributes:** isLink, linkTarget, size, userId
8888

8989
## Pattern

‎packages/block-library/src/avatar/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
3535
- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `false`
3636
- [`filter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter):
3737
- [`duotone`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter-duotone): `true`
38+
- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
3839
- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
3940
- `clientNavigation`: `true`
4041

@@ -53,6 +54,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
5354
_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
5455

5556
- **border**: `.wp-block-avatar img`
57+
- **shadow**: `.wp-block-avatar img`
5658
- **filter**:
5759
- duotone: `.wp-block-avatar img`
5860

‎packages/block-library/src/avatar/block.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,16 @@
5454
"filter": {
5555
"duotone": true
5656
},
57+
"shadow": {
58+
"__experimentalSkipSerialization": true
59+
},
5760
"interactivity": {
5861
"clientNavigation": true
5962
}
6063
},
6164
"selectors": {
6265
"border": ".wp-block-avatar img",
66+
"shadow": ".wp-block-avatar img",
6367
"filter": {
6468
"duotone": ".wp-block-avatar img"
6569
}

‎packages/block-library/src/avatar/edit.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
InspectorControls,
44
useBlockProps,
55
__experimentalUseBorderProps as useBorderProps,
6+
__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
67
} from '@wordpress/block-editor';
78
import {
89
RangeControl,
@@ -197,7 +198,7 @@ const AvatarLinkWrapper = ( { children, isLink } ) =>
197198
*
198199
* @param {Object} props React props.
199200
* @param {Function} props.setAttributes Callback for updating block attributes.
200-
* @param {Object} props.attributes Block attributes: `size` and `isLink`, plus the border support values read by `useBorderProps`.
201+
* @param {Object} props.attributes Block attributes: `size` and `isLink`, plus the border and shadow support values applied to the image.
201202
* @param {Object} props.avatar Avatar data returned by `useCommentAvatar` or `useUserAvatar`, with the image `src` and `alt` and the `minSize` and `maxSize` resize bounds.
202203
* @param {Object} props.blockProps Props returned by `useBlockProps`, applied to the wrapper element.
203204
* @param {boolean} props.isSelected Whether the block is selected. Resize handles are only shown when it is.
@@ -212,6 +213,7 @@ const ResizableAvatar = ( {
212213
isSelected,
213214
} ) => {
214215
const borderProps = useBorderProps( attributes );
216+
const shadowProps = getShadowClassesAndStyles( attributes );
215217
const doubledSizedSrc = addQueryArgs(
216218
removeQueryArgs( avatar?.src, [ 's' ] ),
217219
{
@@ -256,7 +258,10 @@ const ResizableAvatar = ( {
256258
'wp-block-avatar__image',
257259
borderProps.className
258260
) }
259-
style={ borderProps.style }
261+
style={ {
262+
...borderProps.style,
263+
...shadowProps.style,
264+
} }
260265
/>
261266
</ResizableBox>
262267
</AvatarLinkWrapper>

‎packages/block-library/src/avatar/index.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,19 @@ function render_block_core_avatar( $attributes, $content, $block ) {
1919
$size = $attributes['size'] ?? 96;
2020
$wrapper_attributes = get_block_wrapper_attributes();
2121
$border_attributes = get_block_core_avatar_border_attributes( $attributes );
22+
$shadow_styles = wp_style_engine_get_styles( array( 'shadow' => $attributes['style']['shadow'] ?? null ) );
2223

2324
// Class gets passed through `esc_attr` via `get_avatar`.
2425
$image_classes = ! empty( $border_attributes['class'] )
2526
? "wp-block-avatar__image {$border_attributes['class']}"
2627
: 'wp-block-avatar__image';
2728

2829
// Unlike class, `get_avatar` doesn't filter the styles via `esc_attr`.
29-
// The style engine does pass the border styles through
30+
// The style engine does pass the border and shadow styles through
3031
// `safecss_filter_attr` however.
31-
$image_styles = ! empty( $border_attributes['style'] )
32-
? sprintf( ' style="%s"', esc_attr( $border_attributes['style'] ) )
32+
$image_css = ( $border_attributes['style'] ?? '' ) . ( $shadow_styles['css'] ?? '' );
33+
$image_styles = ! empty( $image_css )
34+
? sprintf( ' style="%s"', esc_attr( $image_css ) )
3335
: '';
3436

3537
if ( ! isset( $block->context['commentId'] ) ) {

0 commit comments

Comments
 (0)