Extends the native WordPress block editor link interface to include XFN (XHTML Friends Network) relationship options across all blocks that support links.
User documentation: Read the complete Link Extension for XFN documentation
Key pages:
- Installation
- Getting started
- Settings
- Common tasks — including the XFN Blogroll, Relationship Badge, and Relationship Directory blocks
- Troubleshooting
The docs site builds from docs/ with Astro Starlight — see docs/MAINTAINING.md to update it.
The Link Extension for XFN seamlessly integrates XFN (XHTML Friends Network) relationship options into WordPress's native link interface. This plugin enhances every block that supports links—including Paragraph, Button, Navigation, List, Embed, and more—with comprehensive relationship tagging capabilities through an intuitive collapsible interface.
XFN is a simple way to represent human relationships using hyperlinks. By adding XFN relationships to your links, you can indicate how you're connected to the people and organizations you link to, creating a more semantic and meaningful web.
Launch WordPress Playground Demo - Try the plugin instantly in your browser! Click the "Preview" button to:
- See XFN in action with pre-configured examples
- Test buttons, embeds, and inline links with XFN attributes
- Follow step-by-step testing instructions
- Inspect XFN relationships in browser DevTools
No installation or setup required - the demo runs entirely in your browser!
This plugin implements the full XFN 1.1 specification with all relationship categories:
- Friendship: contact, acquaintance, friend
- Physical: met (have you met this person?)
- Professional: co-worker, colleague
- Geographical: co-resident, neighbor
- Family: child, parent, sibling, spouse, kin
- Romantic: muse, crush, date, sweetheart
- Identity: me (link to yourself)
The plugin provides XFN controls in two convenient locations:
- Link Advanced Panel (Always enabled) - Collapsible XFN section in the link popover for inline paragraph links
- Inspector Controls (Optional) - Panel in the block sidebar for Button, Image, Navigation, and Embed blocks - opens by default when enabled
Note: Inspector Controls can be enabled in Settings → Link Extension for XFN. The Link Advanced Panel is always available for inline links.
- Collapsible XFN sections with clean toggle buttons and smooth animations
- Visual relationship pills showing active relationships at a glance
- Count badges indicating number of active relationships
- Button groups for easy relationship selection with mutual exclusivity support
- Real-time validation preventing invalid relationship combinations
The XFN interface in action: Collapsible relationship categories with button groups for easy selection, and visual pills showing active relationships at a glance.
Comprehensive user guides are available in the docs/ directory:
- Getting Started - Quick start guide and XFN overview
- Plugin Settings - Configure where XFN options appear
- Paragraph Links - Add XFN to inline text links
- Button Links - Add XFN to Button blocks
- Image Links - Add XFN to clickable images
- Other Block Links - Navigation, Site Logo, and more
- WordPress: 6.4 or higher
- PHP: 8.2 or higher
- Modern browser with ES6 support
- Download the plugin ZIP file from WordPress.org or GitHub releases
- Go to WordPress admin → Plugins → Add New → Upload Plugin
- Upload the ZIP file and click Install Now
- Activate the plugin
- XFN options will immediately appear in the block editor
# Clone the repository
git clone https://github.com/courtneyr-dev/link-extension-for-xfn.git
cd link-extension-for-xfn
# Install dependencies
npm install
# Build the plugin
npm run build
# Start development with watch mode
npm run startAfter installation, XFN options are immediately available in the Link Advanced Panel for inline links (links within paragraphs, headings, lists, etc.).
To enable XFN for Button, Image, and Navigation blocks:
- Go to Settings → Link Extension for XFN
- Enable Inspector Controls (recommended)
- Click Save Changes
- Select text and create a link (Cmd/Ctrl+K)
- Click the link to open the popover
- Click "Advanced" to expand advanced options
- Find the "XFN" section and expand it
- Select your relationships
- Click "Apply" to save
With Inspector Controls enabled:
- Select the Button/Image/Navigation block
- Look in the right sidebar (Inspector)
- Find "XFN Relationships" panel (opens by default)
- Select relationships - they save automatically
link-extension-for-xfn/
├── link-extension-for-xfn.php # Main plugin file
├── readme.txt # WordPress.org documentation
├── README.md # GitHub documentation (this file)
├── CHANGELOG.md # Version history
├── LICENSE # GPL v2+ license
├── package.json # Node dependencies
├── .gitignore # Git exclusions
├── .distignore # Distribution exclusions
│
├── src/ # Source files (not in ZIP)
│ ├── index.js # Main JavaScript entry point
│ ├── edit.js # Block edit component
│ ├── save.js # Block save component
│ ├── view.js # Frontend JavaScript
│ ├── editor.scss # Editor styles
│ ├── style.scss # Frontend styles
│ └── block.json # Block metadata
│
├── build/ # Compiled assets (in ZIP)
│ ├── index.js # Compiled JavaScript
│ ├── index.css # Compiled CSS
│ ├── editor.css # Compiled editor styles
│ └── block.json # Block metadata (copy)
│
└── .wordpress-org/ # WordPress.org assets (not in ZIP)
├── icon-256x256.png
├── banner-772x250.png
├── banner-1544x500.png
├── screenshot-1.png
└── ...
# Development build with watch mode
npm run start
# Production build (minified)
npm run build
# Lint JavaScript
npm run lint:js
# Lint CSS
npm run lint:css
# Format code
npm run format
# Create plugin ZIP
npm run plugin-zipThis plugin follows WordPress coding standards:
- PHP: WordPress PHP Coding Standards
- JavaScript: WordPress JavaScript Coding Standards
- CSS: WordPress CSS Coding Standards
The plugin uses a singleton pattern for the main class and hooks into WordPress's block editor via JavaScript filters:
- PHP Class:
XFN_Link_Extensionhandles plugin initialization, asset enqueuing, and server-side functionality - JavaScript: Extends the block editor's
BlockEditcomponent to add XFN controls - Hooks System: Uses WordPress hooks to integrate with the link interface without modifying core functionality
// Get XFN relationship definitions
$relationships = xfn_get_relationships();
// Parse rel attribute to separate XFN from other values
$parsed = xfn_parse_rel_attribute( 'friend met nofollow' );
// Returns: ['xfn' => ['friend', 'met'], 'other' => ['nofollow']]
// Combine XFN and other rel values
$rel = xfn_combine_rel_values( ['friend', 'met'], ['nofollow'] );
// Returns: 'nofollow friend met'
// Validate XFN relationship combinations
$valid = xfn_validate_relationships( ['friend', 'acquaintance'] );
// Returns: false (mutually exclusive)
// Sanitize rel attribute value
$clean_rel = xfn_sanitize_rel_attribute( 'friend met nofollow' );
// Returns: 'nofollow friend met'This plugin provides hooks for extensibility:
Override a feature flag value programmatically. Return a boolean to force-enable or force-disable a feature, or null to fall back to the saved option / default.
Available flags: abilities_api, meta_mirror, interactivity, blocks
// Force-disable the Interactivity API features.
add_filter( 'xfn_feature_flag_interactivity', '__return_false' );
// Force-enable the Abilities API regardless of saved settings.
add_filter( 'xfn_feature_flag_abilities_api', '__return_true' );Priority order: filter return > saved option (xfn_feature_flags) > built-in default (true).
The plugin intelligently manages the HTML rel attribute:
- Combines XFN relationships with existing rel values (nofollow, noopener, noreferrer)
- Validates relationship combinations according to XFN specification
- Preserves SEO-important and security-related attributes
- Uses space-separated format per HTML specification
- Relationships are stored in the standard HTML
relattribute - No custom database tables or meta fields required
- Compatible with all WordPress import/export tools
- Relationships survive theme changes and plugin deactivation
- Lightweight JavaScript bundle under 15KB gzipped
- Only loads in the block editor (no frontend impact)
- Lazy-loaded collapsible sections
- Uses WordPress core components for consistency
- Smooth CSS animations without performance penalties
- Modern browsers with ES6 support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Activate the plugin in a WordPress 6.4+ installation
- Create a new post or edit an existing one
- Add blocks with links (Paragraph, Button, Navigation, List, etc.)
- Test XFN controls in all three interfaces:
- Floating toolbar
- Inspector controls
- Link advanced panel
- Verify relationships appear in published HTML
relattribute - Test keyboard navigation and screen reader support
- Test with Query Monitor active to check for errors
Test with popular plugins:
- Yoast SEO
- Rank Math
- Jetpack
- WooCommerce
- Contact Form 7
Test with popular themes:
- Twenty Twenty-Four (default block theme)
- Blocksy
- Kadence
- GeneratePress
- Astra
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Write tests if applicable
- Ensure code follows WordPress coding standards
- Test thoroughly
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
See CONTRIBUTING.md for detailed guidelines.
See CHANGELOG.md for version history.
- WordPress.org Support Forum: Plugin Support
- GitHub Issues: Report bugs or request features
- Documentation: WordPress.org Plugin Page
This plugin is licensed under GPL v2 or later.
Copyright (c) 2024-2026 Courtney Robertson
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
- Author: Courtney Robertson
- WordPress.org: courane01
- Contributors: Courtney Robertson (@courtneyr-dev)
- XFN Specification: GMPG XFN
- Built with: @wordpress/scripts