Front end Editor

Front-end Editor

WP User Avatars includes a dynamic User Avatar Editor block and a [wp_user_avatars] shortcode. Both render the same editor for the current signed-in user.

Block

Add the User Avatar Editor block in the WordPress editor. The block has no heading or description by default, so it can fit an existing account page without repeating nearby copy. Add a heading or description directly in the block when the page needs more context.

The block supports WordPress background, text, border, spacing, typography, and wide-alignment controls.

Shortcode

Add this shortcode to a page:

[wp_user_avatars]

Theme and plugin code can render the same current-user editor:

echo wp_user_avatars_get_editor();

The helper returns a login message for signed-out visitors and a permission message when the current user cannot edit the avatar.

Access and behavior

The editor does not create its own login, registration, membership, or page restriction system. Use the access controls already chosen for the surrounding page.

The front-end editor uses the same avatar capabilities, upload restrictions, rating rules, and Media Library permissions as the profile integrations:

• Users can upload an allowed image when they can edit their avatar.
• Choosing an existing Media Library image requires JavaScript and the upload_files capability.
• Uploading, changing a rating, and removing an avatar have non-JavaScript form paths.
• JPEG, GIF, PNG, and WebP uploads are accepted. Executable PHP extensions are rejected.

Styling

The form uses the wp-user-avatars-frontend-form class. The block wrapper uses wp-user-avatars-avatar-editor-block.

The block card accepts these CSS custom properties:

.wp-user-avatars-avatar-editor-block {
    --wp-user-avatars-card-background: #fff;
    --wp-user-avatars-card-border-color: #dcdcde;
    --wp-user-avatars-card-border-radius: 12px;
    --wp-user-avatars-card-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

The block and shortcode controls accept:

• --wp-user-avatars-button-background
• --wp-user-avatars-button-border-color
• --wp-user-avatars-button-color
• --wp-user-avatars-button-hover-background
• --wp-user-avatars-button-hover-border-color
• --wp-user-avatars-button-hover-color
• --wp-user-avatars-primary-background
• --wp-user-avatars-primary-color
• --wp-user-avatars-primary-hover-background
• --wp-user-avatars-primary-hover-color

Set the properties on the block wrapper or on an ancestor of the shortcode. Use the semantic form classes for more specific theme customization.