Myshock

<p>I created this plugin to make external text links more accessible to people with disabilities by displaying an image with an alternative that informs the user that the link will open in a new window. Thanks to Romain Gervois.</p>


Accessible External Text Links

I created this plugin to make external text links more accessible to people with disabilities

Courtney Robertson

<p>The XFN Relationship Link Extension 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, and more—with comprehensive relationship tagging capabilities through an intuitive collapsible interface.</p>
<p>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.</p>
<h3>Key Features</h3>
<h3>Complete XFN 1.1 Specification Support</h3>
<p>This plugin implements the full XFN 1.1 specification with all relationship categories:</p>
<ul>
<li><strong>Friendship relationships</strong>: contact, acquaintance, friend</li>
<li><strong>Physical relationships</strong>: met (have you met this person?)</li>
<li><strong>Professional relationships</strong>: co-worker, colleague</li>
<li><strong>Geographical relationships</strong>: co-resident, neighbor</li>
<li><strong>Family relationships</strong>: child, parent, sibling, spouse, kin</li>
<li><strong>Romantic relationships</strong>: muse, crush, date, sweetheart</li>
<li><strong>Identity relationships</strong>: me (link to yourself)</li>
</ul>
<h3>Dual Interface Integration with Collapsible Design</h3>
<p>The plugin provides XFN controls in two convenient locations, both featuring a clean collapsible interface:</p>
<ul>
<li><strong>Link Advanced Panel</strong> (Always enabled): Collapsible XFN section in link popovers for inline links – works immediately after installation</li>
<li><strong>Inspector Controls</strong> (Optional): Panel in the block sidebar for Button, Image, Navigation, and Embed blocks – enable in Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Link Extension for XFN</li>
</ul>
<h3>Seamless Integration with WordPress</h3>
<p>The plugin extends the existing link interfaces without disrupting your workflow:</p>
<ul>
<li>Works with Paragraph, Button, Navigation, List, Embed, and all other link-supporting blocks</li>
<li>Compatible with both Post Editor and Site Editor</li>
<li>Preserves existing rel attributes (nofollow, noopener, noreferrer)</li>
<li>No configuration required – works immediately after activation</li>
<li>Clean collapsible interface matches WordPress design patterns</li>
</ul>
<h3>Advanced User Interface with Collapsible Sections</h3>
<p>The relationship selection interface is designed for optimal usability with modern collapsible design:</p>
<ul>
<li><strong>Collapsible XFN sections</strong>: Clean toggle buttons with expand/collapse animation</li>
<li><strong>Visual relationship pills</strong>: Color-coded indicators show active relationships at a glance</li>
<li><strong>Count badges</strong>: Quickly see how many relationships are active without expanding</li>
<li><strong>Intelligent grouping</strong>: Related options are logically organized by category within sections</li>
<li><strong>Button groups</strong>: Modern toggle-style buttons for easy relationship selection</li>
<li><strong>Mutual exclusivity</strong>: Button groups prevent conflicting relationships (e.g., can’t be both “friend” and “acquaintance”)</li>
<li><strong>Multi-selection support</strong>: Checkbox-style groups allow multiple compatible relationships</li>
<li><strong>Real-time validation</strong>: Prevents invalid relationship combinations</li>
<li><strong>Smooth animations</strong>: Fluid expand/collapse transitions</li>
</ul>
<h3>How to Add XFN Relationships to Links</h3>
<h3>Quick Start</h3>
<p>After installation, XFN options are immediately available for inline links (links within paragraphs, headings, lists).</p>
<p>To use XFN with Button, Image, Navigation, and Embed blocks, go to <strong>Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Link Extension for XFN</strong> and enable <strong>Inspector Controls</strong>.</p>
<h3>Method 1: Using Link Advanced Panel (Always Available)</h3>
<ol>
<li>Create or edit an inline link in any block (Paragraph, List, etc.)</li>
<li>In the link popover, click “Advanced” to expand additional options</li>
<li>Find the “XFN” collapsible section and click to expand</li>
<li>Select relationships using the organized button groups</li>
<li>See your active relationships in the summary pills</li>
<li>Click “Apply” to save your XFN relationships</li>
</ol>
<h3>Method 2: Using Inspector Controls (Enable in Settings)</h3>
<ol>
<li>Go to Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Link Extension for XFN and enable Inspector Controls</li>
<li>Select a Button, Image, Navigation, or Embed block</li>
<li>Look in the right sidebar – “XFN Relationships” panel opens by default</li>
<li>Select relationships using radio buttons and checkboxes organized by category</li>
<li>Relationships save automatically as you select them</li>
<li>View active relationships in the summary section with color-coded pills</li>
</ol>
<h3>Understanding XFN Relationship Categories</h3>
<h3>Friendship Relationships (Choose One)</h3>
<p>These are mutually exclusive – you can only select one friendship level per person:</p>
<ul>
<li><strong>contact</strong>: Someone you know how to get in touch with</li>
<li><strong>acquaintance</strong>: Someone you’ve met but don’t know well</li>
<li><strong>friend</strong>: Someone you consider a friend</li>
</ul>
<h3>Physical Meeting</h3>
<ul>
<li><strong>met</strong>: Check this if you’ve met this person face-to-face</li>
</ul>
<h3>Professional Relationships (Multiple Allowed)</h3>
<ul>
<li><strong>co-worker</strong>: Someone you work with at the same company</li>
<li><strong>colleague</strong>: Someone in your professional field or industry</li>
</ul>
<h3>Geographical Relationships (Choose One)</h3>
<ul>
<li><strong>co-resident</strong>: Someone who lives in the same residence</li>
<li><strong>neighbor</strong>: Someone who lives nearby</li>
</ul>
<h3>Family Relationships (Choose One)</h3>
<ul>
<li><strong>child</strong>: Your child</li>
<li><strong>parent</strong>: Your parent</li>
<li><strong>sibling</strong>: Your brother or sister</li>
<li><strong>spouse</strong>: Your husband, wife, or domestic partner</li>
<li><strong>kin</strong>: Other family relation</li>
</ul>
<h3>Romantic Relationships (Multiple Allowed)</h3>
<ul>
<li><strong>muse</strong>: Someone who inspires you</li>
<li><strong>crush</strong>: Someone you have romantic feelings for</li>
<li><strong>date</strong>: Someone you’re dating</li>
<li><strong>sweetheart</strong>: Someone you have a romantic relationship with</li>
</ul>
<h3>Identity</h3>
<ul>
<li><strong>me</strong>: A link to your own content or profiles</li>
</ul>
<h3>Integration with Popular Blocks</h3>
<h3>Button Block</h3>
<p>Use the Inspector Controls for quick relationship assignment. The XFN Relationships panel opens by default, letting you select relationships that save automatically.</p>
<h3>Navigation Block</h3>
<p>Enhance your site navigation with relationship context using the Inspector Controls. Mark links to your social profiles, partner sites, or affiliated organizations with the organized collapsible interface.</p>
<h3>Embed Block</h3>
<p>Add semantic meaning to embedded content from YouTube, Twitter, and other platforms. Use the Inspector Controls to indicate relationships with embedded content creators, marking videos from colleagues, friends, or your own channels. Perfect for blogrolls, resource pages, and content aggregation.</p>
<h3>Paragraph Block (Inline Links)</h3>
<p>For inline links within paragraph content, use the collapsible XFN section in the link popover’s Advanced area to add relationship context without overwhelming the interface.</p>
<h3>List Block</h3>
<p>Build relationship-rich link lists using the Link Advanced Panel for inline links or Inspector Controls for block-level links. The collapsible sections make it easy to manage multiple relationships across list items.</p>
<h3>Cover Block and Media & Text Block</h3>
<p>Add relationship context to overlay links and media-associated links using the Link Advanced Panel for inline links or Inspector Controls for block-level elements.</p>
<h3>Technical Implementation</h3>
<h3>Source Code & Build Tools</h3>
<p><strong>This plugin uses build tools to compile and optimize code for production.</strong></p>
<p>All uncompiled, human-readable source code is included in the plugin’s <code>src/</code> directory and is publicly available on GitHub.</p>
<p><strong>Source files (uncompiled):</strong><br />
* JavaScript: <code>src/index.js</code> (main plugin logic)<br />
* Styles: <code>src/editor.scss</code> (editor styles)<br />
* Additional: <code>src/view.js</code>, <code>src/edit.js</code>, <code>src/save.js</code></p>
<p><strong>Compiled files (production):</strong><br />
* JavaScript: <code>build/index.js</code>, <code>build/view.js</code><br />
* Styles: <code>build/index.css</code>, <code>build/index-rtl.css</code></p>
<p><strong>Build tools:</strong><br />
* Build system: WordPress Scripts (webpack-based)<br />
* Required: Node.js 14+ and npm<br />
* Build command: <code>npm run build</code><br />
* Development mode: <code>npm start</code> (watches for file changes)</p>
<p><strong>How to rebuild from source:</strong><br />
1. Clone or download from GitHub: https://github.com/courtneyr-dev/xfn-link-extension<br />
2. Install dependencies: <code>npm install</code><br />
3. Build production files: <code>npm run build</code><br />
4. Output will be in the <code>build/</code> directory</p>
<p><strong>GitHub repository (complete source):</strong> https://github.com/courtneyr-dev/xfn-link-extension</p>
<h3>Rel Attribute Management</h3>
<p>The plugin intelligently manages the HTML rel attribute:</p>
<ul>
<li>Combines XFN relationships with existing rel values</li>
<li>Preserves SEO-important attributes like nofollow</li>
<li>Maintains security attributes like noopener and noreferrer</li>
<li>Uses space-separated format per HTML specification</li>
<li>Validates relationship combinations to prevent conflicts</li>
</ul>
<h3>Data Persistence</h3>
<ul>
<li>Relationships are stored in the standard HTML rel attribute</li>
<li>No custom database tables or meta fields required</li>
<li>Compatible with all WordPress import/export tools</li>
<li>Relationships survive theme changes and plugin deactivation</li>
</ul>
<h3>Performance Optimized</h3>
<ul>
<li>Lightweight JavaScript bundle under 12KB gzipped</li>
<li>Lazy-loaded collapsible sections only when accessed</li>
<li>No impact on frontend performance</li>
<li>Uses WordPress core components for consistency</li>
<li>Smooth animations without performance penalties</li>
</ul>
<h3>Migration from Other XFN Plugins</h3>
<p>If you’re migrating from another XFN plugin:</p>
<ol>
<li><strong>Classic Editor plugins</strong>: Existing XFN data in post meta will be preserved</li>
<li><strong>Custom rel attributes</strong>: Any existing rel values are maintained</li>
<li><strong>Manual XFN</strong>: Manually entered XFN relationships in rel attributes work immediately</li>
</ol>
<h3>Troubleshooting</h3>
<h3>XFN options don’t appear in floating toolbar</h3>
<ol>
<li><strong>Check block type</strong>: Only blocks that are entirely links (Button, Navigation Link, etc.) show the XFN toolbar button</li>
<li><strong>Verify WordPress version</strong>: Requires WordPress 6.4 or later</li>
<li><strong>Clear browser cache</strong>: Try refreshing the page or clearing browser cache</li>
<li><strong>Check for block selection</strong>: Ensure the block is properly selected</li>
</ol>
<h3>XFN section won’t expand in link popover</h3>
<ol>
<li><strong>Check Advanced section</strong>: XFN options appear when you click “Advanced” in the link popover, then look for the “XFN” toggle</li>
<li><strong>Try clicking the toggle</strong>: The XFN section requires an additional click to expand</li>
<li><strong>Verify in block editor</strong>: Plugin only works with Gutenberg blocks, not Classic Editor</li>
<li><strong>Check browser console</strong>: Look for JavaScript errors that might prevent interaction</li>
</ol>
<h3>Collapsible sections not animating smoothly</h3>
<ol>
<li><strong>Check browser compatibility</strong>: Ensure you’re using a modern, supported browser</li>
<li><strong>Verify CSS loading</strong>: Check that plugin stylesheets are loading properly</li>
<li><strong>Test in incognito mode</strong>: Rule out browser extension interference</li>
<li><strong>Disable other plugins</strong>: Test for plugin conflicts by temporarily disabling other plugins</li>
</ol>
<h3>Count badges not updating</h3>
<ol>
<li><strong>Try refreshing</strong>: Sometimes a page refresh resolves display issues</li>
<li><strong>Check JavaScript console</strong>: Look for errors that might prevent updates</li>
<li><strong>Test relationship changes</strong>: Make sure you’re actually changing relationships</li>
<li><strong>Verify plugin activation</strong>: Ensure the plugin is properly activated</li>
</ol>
<h3>Relationships not saving properly</h3>
<ol>
<li><strong>Check browser console</strong>: Look for JavaScript errors that might prevent saving</li>
<li><strong>Verify user permissions</strong>: Ensure you have permission to edit the content</li>
<li><strong>Test with default theme</strong>: Temporarily switch to a default WordPress theme</li>
<li><strong>Disable other plugins</strong>: Test for plugin conflicts by temporarily disabling other plugins</li>
</ol>
<h3>Keyboard navigation issues with collapsible sections</h3>
<ol>
<li><strong>Test tab order</strong>: Use Tab key to navigate to toggle buttons</li>
<li><strong>Try space/enter</strong>: Space or Enter should expand/collapse sections</li>
<li><strong>Use arrow keys</strong>: Arrow keys work within expanded button groups</li>
<li><strong>Check browser settings</strong>: Ensure keyboard navigation is enabled in browser settings</li>
</ol>
<h3>Screen reader compatibility with collapsible interface</h3>
<ol>
<li><strong>Test with multiple screen readers</strong>: NVDA, JAWS, and VoiceOver are all supported</li>
<li><strong>Check expansion announcements</strong>: Section state changes should be announced</li>
<li><strong>Verify ARIA states</strong>: All collapsible elements should have proper ARIA attributes</li>
<li><strong>Update screen reader</strong>: Ensure you’re using a current version of your screen reader</li>
</ol>


Link Extension for XFN

Add XFN (XHTML Friends Network) relationship metadata to WordPress links. Semantic social connections for the block editor.

Accessible External Text Links vs Link Extension for XFN