Forms module
User Profile block
The logged-in visitor’s avatar, name and bio with account and log-out links — or a login link for logged-out visitors.
Overview
User Profile greets the visitor who is logged in: their avatar, name, optional email and bio, plus links to their account and to log out. Visitors who are not logged in can see a login link instead (or nothing).
At a glance
- Block name
wpbb/user-profile- Module
- Forms
- Find it by searching
- User Profile
- Loads JavaScript on the site
- No
When and why to use it
- Member dashboards.
- Header or sidebar account boxes.
Example scenarios
- Members page: Vertical layout, greeting “Welcome back”, account and log-out links; logged-out visitors get “Log in” linking to your login page.
How to add the User Profile block
- Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
- Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
- Search for the block. Type User Profile in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
- Insert it. Click User Profile in the results. The block appears with a preview using your own account.
- Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
- Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
- Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.
Content settings
You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.
Settings panel: Profile
Layout
- What it does
- Avatar beside or above the text.
- What to enter or choose
- One of: Horizontal, Vertical (centered).
- Default
- Horizontal
- How to use it
- Click one of the buttons in the group.
- When to use it
- Always optional.
- Example
- Vertical in a sidebar.
- Result
- The layout changes.
Avatar
- What it does
- Shows the profile picture.
- What to enter or choose
- On or off.
- Default
- On
- How to use it
- Click the switch to turn it on (blue) or off.
- When to use it
- Usually.
- Example
- On.
- Result
- The picture appears.
Avatar sizeShown when Avatar is on
- What it does
- The picture size.
- What to enter or choose
- A number from 32 to 192 (px).
- Default
- 72 px
- How to use it
- Drag the slider, or type a number in the box next to it.
- When to use it
- Always optional.
- Example
- 96.
- Result
- Bigger or smaller picture.
Greeting above the name
- What it does
- A short line above the name.
- What to enter or choose
- Text, or empty.
- Default
- Empty
- How to use it
- Type into the text field. Changes appear in the preview right away.
- When to use it
- Optional.
- Example
- “Welcome back”.
- Result
- Shown above the name.
Email address
- What it does
- Shows the visitor’s email.
- What to enter or choose
- On or off.
- Default
- Off
- How to use it
- Click the switch to turn it on (blue) or off.
- When to use it
- On account pages.
- Example
- Off.
- Result
- Only the visitor sees their own email.
Bio
- What it does
- Shows the profile biography.
- What to enter or choose
- On or off.
- Default
- On
- How to use it
- Click the switch to turn it on (blue) or off.
- When to use it
- Optional.
- Example
- On.
- Result
- Empty bios are not shown.
Settings panel: Links
Account link
- What it does
- A link to the account page.
- What to enter or choose
- On or off.
- Default
- On
- How to use it
- Click the switch to turn it on (blue) or off.
- When to use it
- Usually.
- Example
- On.
- Result
- Goes to WooCommerce’s My Account page when WooCommerce is active, otherwise to the WordPress profile screen.
Account link textShown when Account link is on
- What it does
- The link text.
- What to enter or choose
- Text, or empty for “My account”.
- Default
- Empty
- How to use it
- Type into the text field. Changes appear in the preview right away.
- When to use it
- Optional.
- Example
- “Your dashboard”.
- Result
- The link shows your text.
Log-out link
- What it does
- A “Log out” link.
- What to enter or choose
- On or off.
- Default
- On
- How to use it
- Click the switch to turn it on (blue) or off.
- When to use it
- Usually.
- Example
- On.
- Result
- Logs out and returns to the same page.
Settings panel: Logged-out visitors
Show
- What it does
- What logged-out visitors see.
- What to enter or choose
- One of: A login link, Nothing.
- Default
- A login link
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Always optional.
- Example
- A login link.
- Result
- Nothing = the block is invisible to them.
Link textShown when Show is A login link
- What it does
- The login link text.
- What to enter or choose
- Text, or empty for “Log in”.
- Default
- Empty
- How to use it
- Type into the text field. Changes appear in the preview right away.
- When to use it
- Optional.
- Example
- “Member login”.
- Result
- The link shows your text.
Login page URLShown when Show is A login link
- What it does
- Where the login link goes.
- What to enter or choose
- A page on this site (for example one with a Login Form block), or empty.
- Default
- Empty
- How to use it
- Paste a full address, including https://.
- When to use it
- When you have your own login page.
- Example
/login/.- Result
- Empty = the standard WordPress login, returning to this page afterwards. Addresses on other sites are ignored.
Design & styling
Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:
- Element — which part of the block to style.
- State — Normal, or a state such as Hover (only the states the part supports are offered).
- Device — Desktop, Tablet or Mobile, for values that can differ per screen size.
Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what User Profile offers.
Element: Name selected first
The name.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal | |
| Colors | Text | — | Normal |
States: Normal only.
Element: Block
The box (background, border, padding…).
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Background | Type | — | Normal |
| Color / Gradient | — | Normal | |
| Image | — | Normal | |
| Border | Border type | — | Normal |
| Border | — | Normal | |
| Radius | Yes | Normal | |
| Box Shadow | Remove shadow | — | Normal |
| Shadow layers | — | Normal | |
| Spacing | Padding | Yes | Normal |
| Sizing | Width | Yes | Normal |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal | |
| Effects | Opacity (%) | Yes | Normal |
States: Normal only.
Element: Avatar
The picture.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Border | Border type | — | Normal |
| Border | — | Normal | |
| Radius | Yes | Normal | |
| Box Shadow | Remove shadow | — | Normal |
| Shadow layers | — | Normal |
States: Normal only.
Element: Bio
The bio.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal | |
| Colors | Text | — | Normal |
States: Normal only.
Element: Links
The link buttons. Hover and Focus.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal, Hover, Focus | |
| Colors | Text | — | Normal, Hover, Focus |
| Background | Type | — | Normal, Hover, Focus |
| Color / Gradient | — | Normal, Hover, Focus | |
| Image | — | Normal | |
| Border | Border type | — | Normal, Hover, Focus |
| Border | — | Normal, Hover, Focus | |
| Radius | Yes | Normal | |
| Focus indicator | — | Focus | |
| Box Shadow | Remove shadow | — | Normal, Hover, Focus |
| Shadow layers | — | Normal, Hover, Focus | |
| Spacing | Padding | Yes | Normal |
| Sizing | Width | Yes | Normal |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal | |
| Effects | Opacity (%) | Yes | Normal, Hover, Focus |
States for this part:
- Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
- Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.
Responsive settings
Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.
In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%).
Advanced options
- HTML anchor (Advanced section of the Settings tab) — a unique name such as
pricing, so you can link straight to this block with#pricingat the end of the page address (for example from a menu). - Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
How it works on your site
Rendered on the server for the current visitor. No JavaScript.
Limitations and notes
- This block shows different content to each visitor. If you use a page-cache plugin, exclude pages with this block from the cache for logged-in users (most caching plugins do this automatically).