kleinweb / user-profile-block
A WordPress Gutenberg block that displays user profile cards with social media links
Installs: 21
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Type:wordpress-plugin
pkg:composer/kleinweb/user-profile-block
Requires
- php: ^8.3
- archtechx/enums: ^1.1
- kleinweb/lib: ^1.0.0
- php-di/php-di: ^7.0
Requires (Dev)
- brain/monkey: ^2.6
- codeception/codeception: ^5.0
- codeception/module-asserts: ^3.0
- codeception/module-db: ^3.0
- friendsofphp/php-cs-fixer: ^3.59
- kleinweb/php-coding-standards: ^0.6.0
- lucatume/wp-browser: ^4.0
- phpstan/extension-installer: ^1.3
- phpstan/phpstan: ^2.1.30
- phpstan/phpstan-deprecation-rules: ^2.0
- phpunit/phpunit: ^10.5
- roave/security-advisories: dev-latest
- slevomat/coding-standard: ~8.0
- squizlabs/php_codesniffer: ^3.7.1
- szepeviktor/phpstan-wordpress: ^2.0
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
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
- In the block editor, add the User Profile block (found in the "Klein College" category)
- By default, it displays the current post's author(s)
- 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:
// 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
# Start Vite dev server with HMR pnpm dev # Build for production pnpm build # Type check pnpm check
PHP Quality
# Run all linters (PHPCS + PHPStan) composer lint # Auto-fix issues composer fix # Static analysis only composer phpstan
Testing
# 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
just check
Architecture
Service Container
The plugin uses PHP-DI for dependency injection. Entry point is
user-profile-block.php which initializes ServiceContainer.
// Access services $service = \Kleinweb\UserProfile\plugin()->get(SomeService::class);
PHP 8 Attributes
Blocks and meta fields are registered using PHP 8 attributes:
#[Block(name: 'user-profile')] final class UserProfile { public function render( array $attributes, string $content, WP_Block $block, ): string { // Server-side render } }
#[Meta(
key: 'linkedin_url',
objectType: 'user',
type: 'string',
showInRest: true,
)]
public string $linkedinUrl = '';
Directory Structure
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_url |
|
instagram_url |
|
| X/Twitter | twitter_url |
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