https://github.com/kleinweb/user-profile-block
A WordPress Gutenberg block that displays user profile cards with social media links
https://github.com/kleinweb/user-profile-block
gutenberg-blocks wordpress-plugin
Last synced: 22 days ago
JSON representation
A WordPress Gutenberg block that displays user profile cards with social media links
- Host: GitHub
- URL: https://github.com/kleinweb/user-profile-block
- Owner: kleinweb
- License: gpl-3.0
- Created: 2025-12-17T21:19:09.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-01-13T16:27:23.000Z (5 months ago)
- Last Synced: 2026-01-13T18:39:38.008Z (5 months ago)
- Topics: gutenberg-blocks, wordpress-plugin
- Language: PHP
- Homepage:
- Size: 519 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: COPYING
Awesome Lists containing this project
README
# User Profile Block
A WordPress Gutenberg block that displays user profile cards with social
media links. Built with modern PHP (8.3+), PHP-DI dependency injection,
and Vite for frontend assets.
## Features
- Gutenberg block for displaying author social links
- Supports 10 social platforms: LinkedIn, Instagram, X (Twitter), Facebook,
TikTok, YouTube, Threads, Bluesky, Substack, and Medium
- Automatic post author detection with Co-Authors Plus support
- Manual user selection for custom profile displays
- Configurable author name linking with site-wide default override
- Accessible markup with proper ARIA labels
- Server-side rendered for optimal performance
## Requirements
- PHP 8.3+
- WordPress 6.4+
- Node.js 20+
- Composer 2+
## Installation
```bash
composer install
pnpm install
pnpm build
```
Symlink or copy the plugin to your WordPress `wp-content/plugins/`
directory and activate.
## Usage
### Adding Social Links to Users
Navigate to **Users > Your Profile** in the WordPress admin. You'll find
fields for each supported social platform under the "Social Links" section.
Enter the full URL for each profile.
### Using the Block
1. In the block editor, add the **User Profile** block
(found in the "Klein College" category)
2. By default, it displays the current post's author(s)
3. Use the block settings to:
- Toggle "Show post author" on/off
- Toggle "Link author name to profile" on/off
- Select additional users manually
The block only renders if the selected user(s) have at least one social
link configured.
### Customizing the Default Author Link Behavior
By default, author names link to their WordPress author archive page.
Sites can change this default using a filter:
```php
// Disable author profile links by default
add_filter('kleinweb_user_profile_block_link_to_author_page_default', '__return_false');
```
Individual blocks can still override this via the block settings toggle.
## Development
### Asset Development
```bash
# Start Vite dev server with HMR
pnpm dev
# Build for production
pnpm build
# Type check
pnpm check
```
### PHP Quality
```bash
# Run all linters (PHPCS + PHPStan)
composer lint
# Auto-fix issues
composer fix
# Static analysis only
composer phpstan
```
### Testing
```bash
# Unit tests (Brain Monkey - fast, no WordPress)
composer test:unit
# Integration tests (wp-browser - requires WordPress)
composer test:integration
# All tests
composer test
```
### Full Check
```bash
just check
```
## Architecture
### Service Container
The plugin uses PHP-DI for dependency injection. Entry point is
`user-profile-block.php` which initializes `ServiceContainer`.
```php
// Access services
$service = \Kleinweb\UserProfile\plugin()->get(SomeService::class);
```
### PHP 8 Attributes
Blocks and meta fields are registered using PHP 8 attributes:
```php
#[Block(name: 'user-profile')]
final class UserProfile
{
public function render(
array $attributes,
string $content,
WP_Block $block,
): string {
// Server-side render
}
}
```
```php
#[Meta(
key: 'linkedin_url',
objectType: 'user',
type: 'string',
showInRest: true,
)]
public string $linkedinUrl = '';
```
### Directory Structure
```text
user-profile-block/
├── config/ # Container configuration
├── public/build/ # Compiled assets (gitignored)
├── resources/
│ ├── blocks/ # Gutenberg block source
│ │ └── user-profile/ # User Profile block
│ ├── css/ # Stylesheets
│ └── js/
│ ├── editor/ # Block editor scripts
│ ├── frontend/ # Public-facing scripts
│ └── settings/ # Admin settings page
├── src/
│ ├── Blocks/ # Block PHP classes
│ ├── Container/ # Service container
│ ├── Meta/ # Meta field registration
│ ├── Support/ # Utilities (Vite, ServiceProvider)
│ └── Users/ # User profile fields
├── tests/
│ ├── Integration/ # wp-browser integration tests
│ └── Unit/ # Brain Monkey unit tests
└── user-profile-block.php # Main plugin file
```
## Supported Social Platforms
| Platform | Meta Key |
| --------- | --------------- |
| LinkedIn | `linkedin_url` |
| Instagram | `instagram_url` |
| X/Twitter | `twitter_url` |
| Facebook | `facebook_url` |
| TikTok | `tiktok_url` |
| YouTube | `youtube_url` |
| Threads | `threads_url` |
| Bluesky | `bluesky_url` |
| Substack | `substack_url` |
| Medium | `medium_url` |
## License
GPL-2.0-or-later