Changeset 3406028
- Timestamp:
- 11/30/2025 07:22:53 AM (7 weeks ago)
- Location:
- inline-context
- Files:
-
- 2 edited
-
tags/2.3.8/readme.txt (modified) (2 diffs)
-
trunk/readme.txt (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
inline-context/tags/2.3.8/readme.txt
r3405665 r3406028 1 1 === Inline Context === 2 2 Contributors: joop 3 Tags: inline, footnote, tooltip, reveal, context 3 Tags: inline, footnote, tooltip, reveal, context, annotations, content notes, documentation 4 4 Requires at least: 6.0 5 5 Tested up to: 6.8 … … 9 9 License URI: https://www.gnu.org/licenses/gpl-2.0.html 10 10 11 Add inline expandable context notes with direct anchor linking. Optionally show the notes as tooltip popover. 11 Add expandable inline notes, contextual annotations, and tooltip-style explanations directly inside your content. Perfect for long-form articles, documentation, academic writing, and content-heavy websites that need to provide definitions, references, or extra context without disrupting the reading flow. 12 == Description == 12 13 13 == Description == 14 Inline Context lets you enrich content with expandable context notes that maintain optimal reading flow. Alternatively, the context notes can be displayed as tooltips. The context notes can be re-usable. When a reusable inline context is updated, all instances where the note is used will be updated. 14 **Inline Context** is a powerful Block Editor enhancement that lets you create inline expandable notes or clean tooltip-style popovers anywhere in your content. It is ideal for **content-rich websites**, including editorial platforms, research sites, online magazines, documentation hubs, and educational blogs that rely on clear explanation without breaking the reader’s focus. 15 15 16 Create reusable notes via Custom Post Type, organize with categories (each with distinct icons and colors), and control all styling through a tabbed admin interface.16 Instead of sending readers to glossary pages or external links, Inline Context allows you to provide definitions, references, clarifications, and annotations *in place* — keeping readers engaged and your content structured. 17 17 18 This plugin originated from a project with Renée Kool — a visual artist working in public art, film, and emerging media. She wanted to create a website where a single link could reveal additional content containing multiple related links.18 Notes can be **reusable**, categorized, styled, centrally managed, and automatically updated everywhere they appear. 19 19 20 As inspiration, we looked at the Dutch journalism platform De Correspondent, which uses inline contextual notes: small linked text fragments with an icon. When activated, they reveal an extra HTML element containing supplementary information. These contextual notes can: 20 --- 21 21 22 - provide definitions 23 - offer additional context before the reader follows links in the main text 24 - stay out of the way to keep the article readable 22 ### Why This Is Valuable for Content-Heavy Websites 25 23 26 You can see examples of their inline notes in this article: 27 [Hoe Nederland kampioen deeltijdwerken werd](https://decorrespondent.nl/15887/hoe-nederland-kampioen-deeltijdwerken-werd/9053b712-3591-0002-29b3-8c7b69eae0c3) 24 Websites with substantial text often need: 25 - definitions and terminology 26 - source references 27 - background information 28 - contextual inline explanations 29 - mini footnotes without scrolling 30 - inline callouts, tips, or warnings 28 31 29 = Key Features Inline Context plugin = 32 Inline Context delivers all of this with a frictionless, accessible user experience. It helps readers stay focused, reduces navigation fatigue, and improves knowledge retention — especially in long articles or research-based content. 30 33 31 * **Display Modes**: Choose between inline expansion or floating tooltips 32 * **Smart Tooltips**: Automatic positioning that prevents off-screen display 33 * **Reusable Notes**: Create notes as Custom Post Type entries and reuse them across multiple posts 34 * **Notes Library**: Centralized management of all notes with usage tracking 35 * **Quick Search**: Find and insert existing notes instantly from the editor 36 * **Category Management**: Organize notes with custom categories (Internal Article, External Article, Definition, Tip, etc.) 37 * **Custom Icons**: Choose from 30 curated Dashicons or use any of 300+ available icons 38 * **Icon States**: Different icons for closed/open states provide visual feedback 39 * **Direct Anchor Links**: Every note gets a unique URL anchor for easy sharing (#context-note-xxx) 40 * **Auto-Opening**: Notes automatically open when accessed via direct link 41 * **Rich Text Support**: Notes support bold, italic, links, lists with ReactQuill editor 42 * **Comprehensive Styling**: Control colors, spacing, borders, shadows for links and notes 43 * **Security First**: Content sanitized with DOMPurify before frontend display 44 * **Full Accessibility**: ARIA support, keyboard navigation, focus management, Escape key support 45 * **WordPress Integration**: Clean toolbar button in Rich Text format controls 34 --- 46 35 47 = Styling Controls = 48 Customize every aspect of appearance: 36 ### How It Works 49 37 50 * **Link Styling**: Hover colors, focus states, open state colors 51 * **Note Styling**: Padding, margins, background, borders, accent bar, shadows 52 * **Chevron Styling**: Size, color, opacity for the expand indicator 53 * **Live Preview**: See changes immediately with interactive example 38 1. Highlight text in the Block Editor. 39 2. Click **Inline Context**. 40 3. Enter your note content (rich text supported). 41 4. Optionally assign a category with custom icon & color. 42 5. Publish — your note appears inline or as a tooltip, depending on settings. 54 43 55 = Internationalization = 56 This plugin is translation-ready. POT files can be generated from source with `npm run pot` and placed under the `languages/` directory. 44 You can also create **reusable** notes from a dedicated Custom Post Type. Updating a reusable note updates all instances site-wide. 57 45 58 = Source Code = 46 --- 59 47 60 This plugin uses build tools (npm and webpack via @wordpress/scripts) to compile JavaScript and CSS. 48 == Key Features == 61 49 62 **Source code repository:** [https://github.com/jooplaan/inline-context](https://github.com/jooplaan/inline-context) 50 ### Display Modes 51 * Inline expansion (reveals a small content panel) 52 * Tooltip popovers (floating contextual bubbles) 53 * Smart tooltip positioning to avoid off-screen display 54 * Direct anchor links (`#context-note-xxx`) for deep linking 55 * Auto-open on page load when accessed via link 63 56 64 The complete source code, including all uncompiled JavaScript and CSS files, is available in the `/src` directory of the GitHub repository. You can review, build, and modify the source code following the instructions in the repository's README.md. 57 ### Editor Productivity 58 * Reusable notes with global updates 59 * Notes Library with usage tracking (shows where each note is used) 60 * Quick Search inside the editor to insert existing notes 61 * Rich text support via ReactQuill (bold, italic, lists, links) 62 * Clean, integrated Rich Text toolbar button 63 64 ### Categories & Icons 65 * Create unlimited categories (Definition, Reference, External Article, Tip, Warning, etc.) 66 * Choose from curated Dashicons or any of 300+ icons 67 * Separate icons for open and closed states 68 69 ### Styling & Customization 70 Full styling control from **Settings → Inline Context**: 71 * Link colors, hover, and focus states 72 * Note padding, spacing, borders, backgrounds, shadows 73 * Tooltip appearance 74 * Chevron/indicator styling 75 * Live interactive preview of all style changes 76 77 ### Accessibility & Security 78 * ARIA support, focus lock, Escape key behavior 79 * Keyboard-navigable for both link and note 80 * DOMPurify sanitization of note content 81 82 --- 83 84 == Internationalization == 85 86 Inline Context is fully translation-ready. 87 Generate POT files from source using: 88 89 `npm run pot` 90 91 Add translations in the `languages/` directory. 92 93 --- 94 95 == Examples & Inspiration == 96 97 The idea for this plugin originated from a project with Renée Kool — a visual artist working in public art, film, and emerging media. She wanted to create a website where a single link could reveal additional content containing multiple related links. We looked at a Dutch journalism platform like De Correspondent, which use subtle inline notes to provide context without interrupting the flow of reading. You can see examples of their inline notes in this article: [Hoe Nederland kampioen deeltijdwerken werd](https://decorrespondent.nl/15887/hoe-nederland-kampioen-deeltijdwerken-werd/9053b712-3591-0002-29b3-8c7b69eae0c3) 98 99 --- 100 101 == Source Code == 102 103 Inline Context uses `@wordpress/scripts` with webpack and npm to build assets. 104 105 Full source (including uncompiled JS and CSS) is available at: 106 [https://github.com/jooplaan/inline-context](https://github.com/jooplaan/inline-context) 107 108 --- 65 109 66 110 == Installation == 67 1. Upload the plugin files to the `/wp-content/plugins/inline-context` directory, or install the plugin through the WordPress plugins screen directly. 68 2. Activate the plugin through the 'Plugins' screen in WordPress. 69 3. Configure categories and styling in Settings > Inline Context. 70 4. In the editor, select text and click the "Inline Context" button to add a note. 71 5. Choose a category (optional) and write your note content. 111 112 1. Upload the plugin files to `/wp-content/plugins/inline-context`, or install via the Plugins screen. 113 2. Activate the plugin. 114 3. Configure categories and styling under **Settings → Inline Context**. 115 4. In the Block Editor, select text and click **Inline Context**. 116 5. Add your note content and choose a category (optional). 117 118 --- 72 119 73 120 == Frequently Asked Questions == 74 = Does it work with classic editor? = 75 No. This plugin extends the block editor's Rich Text controls. 121 122 = Does this work with the Classic Editor? = 123 No. Inline Context is built specifically for the WordPress Block Editor (Gutenberg). 76 124 77 125 = Can I change the styles? = 78 Yes. Go to Settings > Inline Context > Styling tab for comprehensive visual customization.126 Yes. Extensive visual customization options are available under **Settings → Inline Context → Styling**. 79 127 80 = How many categories can I create? =81 There's no hard limit. Create as many categories as needed to organize your notes.128 = Is there a limit to the number of categories? = 129 No. Create as many categories as your content structure requires. 82 130 83 = Can I use any Dashicon for the categories? = 84 Yes. You can type any dashicon class name to access all 300+ icons. 131 = Can I use any Dashicon? = 132 Yes. You can type any Dashicon class name to use all 300+ icons. 133 134 --- 85 135 86 136 == Screenshots == 137 87 138 1. Editor popover for adding inline context with category selection 88 2. Pop up in editor to add a inline context note to content89 3. Search existing re-usable notes in the editor pop-up90 4. The inline context note displayed on website, default view91 5. T he inline context note displayed as tooltip on website92 6. List of inline context notes in WordPress admin, showing usage count and where it is used in content139 2. Modal window for writing an inline context note 140 3. Search interface for inserting reusable notes 141 4. Inline context note on the frontend (default expanded mode) 142 5. Tooltip version of the inline note on the frontend 143 6. Notes Library in the admin area showing usage count and linked posts -
inline-context/trunk/readme.txt
r3405665 r3406028 1 1 === Inline Context === 2 2 Contributors: joop 3 Tags: inline, footnote, tooltip, reveal, context 3 Tags: inline, footnote, tooltip, reveal, context, annotations, content notes, documentation 4 4 Requires at least: 6.0 5 5 Tested up to: 6.8 … … 9 9 License URI: https://www.gnu.org/licenses/gpl-2.0.html 10 10 11 Add inline expandable context notes with direct anchor linking. Optionally show the notes as tooltip popover. 11 Add expandable inline notes, contextual annotations, and tooltip-style explanations directly inside your content. Perfect for long-form articles, documentation, academic writing, and content-heavy websites that need to provide definitions, references, or extra context without disrupting the reading flow. 12 == Description == 12 13 13 == Description == 14 Inline Context lets you enrich content with expandable context notes that maintain optimal reading flow. Alternatively, the context notes can be displayed as tooltips. The context notes can be re-usable. When a reusable inline context is updated, all instances where the note is used will be updated. 14 **Inline Context** is a powerful Block Editor enhancement that lets you create inline expandable notes or clean tooltip-style popovers anywhere in your content. It is ideal for **content-rich websites**, including editorial platforms, research sites, online magazines, documentation hubs, and educational blogs that rely on clear explanation without breaking the reader’s focus. 15 15 16 Create reusable notes via Custom Post Type, organize with categories (each with distinct icons and colors), and control all styling through a tabbed admin interface.16 Instead of sending readers to glossary pages or external links, Inline Context allows you to provide definitions, references, clarifications, and annotations *in place* — keeping readers engaged and your content structured. 17 17 18 This plugin originated from a project with Renée Kool — a visual artist working in public art, film, and emerging media. She wanted to create a website where a single link could reveal additional content containing multiple related links.18 Notes can be **reusable**, categorized, styled, centrally managed, and automatically updated everywhere they appear. 19 19 20 As inspiration, we looked at the Dutch journalism platform De Correspondent, which uses inline contextual notes: small linked text fragments with an icon. When activated, they reveal an extra HTML element containing supplementary information. These contextual notes can: 20 --- 21 21 22 - provide definitions 23 - offer additional context before the reader follows links in the main text 24 - stay out of the way to keep the article readable 22 ### Why This Is Valuable for Content-Heavy Websites 25 23 26 You can see examples of their inline notes in this article: 27 [Hoe Nederland kampioen deeltijdwerken werd](https://decorrespondent.nl/15887/hoe-nederland-kampioen-deeltijdwerken-werd/9053b712-3591-0002-29b3-8c7b69eae0c3) 24 Websites with substantial text often need: 25 - definitions and terminology 26 - source references 27 - background information 28 - contextual inline explanations 29 - mini footnotes without scrolling 30 - inline callouts, tips, or warnings 28 31 29 = Key Features Inline Context plugin = 32 Inline Context delivers all of this with a frictionless, accessible user experience. It helps readers stay focused, reduces navigation fatigue, and improves knowledge retention — especially in long articles or research-based content. 30 33 31 * **Display Modes**: Choose between inline expansion or floating tooltips 32 * **Smart Tooltips**: Automatic positioning that prevents off-screen display 33 * **Reusable Notes**: Create notes as Custom Post Type entries and reuse them across multiple posts 34 * **Notes Library**: Centralized management of all notes with usage tracking 35 * **Quick Search**: Find and insert existing notes instantly from the editor 36 * **Category Management**: Organize notes with custom categories (Internal Article, External Article, Definition, Tip, etc.) 37 * **Custom Icons**: Choose from 30 curated Dashicons or use any of 300+ available icons 38 * **Icon States**: Different icons for closed/open states provide visual feedback 39 * **Direct Anchor Links**: Every note gets a unique URL anchor for easy sharing (#context-note-xxx) 40 * **Auto-Opening**: Notes automatically open when accessed via direct link 41 * **Rich Text Support**: Notes support bold, italic, links, lists with ReactQuill editor 42 * **Comprehensive Styling**: Control colors, spacing, borders, shadows for links and notes 43 * **Security First**: Content sanitized with DOMPurify before frontend display 44 * **Full Accessibility**: ARIA support, keyboard navigation, focus management, Escape key support 45 * **WordPress Integration**: Clean toolbar button in Rich Text format controls 34 --- 46 35 47 = Styling Controls = 48 Customize every aspect of appearance: 36 ### How It Works 49 37 50 * **Link Styling**: Hover colors, focus states, open state colors 51 * **Note Styling**: Padding, margins, background, borders, accent bar, shadows 52 * **Chevron Styling**: Size, color, opacity for the expand indicator 53 * **Live Preview**: See changes immediately with interactive example 38 1. Highlight text in the Block Editor. 39 2. Click **Inline Context**. 40 3. Enter your note content (rich text supported). 41 4. Optionally assign a category with custom icon & color. 42 5. Publish — your note appears inline or as a tooltip, depending on settings. 54 43 55 = Internationalization = 56 This plugin is translation-ready. POT files can be generated from source with `npm run pot` and placed under the `languages/` directory. 44 You can also create **reusable** notes from a dedicated Custom Post Type. Updating a reusable note updates all instances site-wide. 57 45 58 = Source Code = 46 --- 59 47 60 This plugin uses build tools (npm and webpack via @wordpress/scripts) to compile JavaScript and CSS. 48 == Key Features == 61 49 62 **Source code repository:** [https://github.com/jooplaan/inline-context](https://github.com/jooplaan/inline-context) 50 ### Display Modes 51 * Inline expansion (reveals a small content panel) 52 * Tooltip popovers (floating contextual bubbles) 53 * Smart tooltip positioning to avoid off-screen display 54 * Direct anchor links (`#context-note-xxx`) for deep linking 55 * Auto-open on page load when accessed via link 63 56 64 The complete source code, including all uncompiled JavaScript and CSS files, is available in the `/src` directory of the GitHub repository. You can review, build, and modify the source code following the instructions in the repository's README.md. 57 ### Editor Productivity 58 * Reusable notes with global updates 59 * Notes Library with usage tracking (shows where each note is used) 60 * Quick Search inside the editor to insert existing notes 61 * Rich text support via ReactQuill (bold, italic, lists, links) 62 * Clean, integrated Rich Text toolbar button 63 64 ### Categories & Icons 65 * Create unlimited categories (Definition, Reference, External Article, Tip, Warning, etc.) 66 * Choose from curated Dashicons or any of 300+ icons 67 * Separate icons for open and closed states 68 69 ### Styling & Customization 70 Full styling control from **Settings → Inline Context**: 71 * Link colors, hover, and focus states 72 * Note padding, spacing, borders, backgrounds, shadows 73 * Tooltip appearance 74 * Chevron/indicator styling 75 * Live interactive preview of all style changes 76 77 ### Accessibility & Security 78 * ARIA support, focus lock, Escape key behavior 79 * Keyboard-navigable for both link and note 80 * DOMPurify sanitization of note content 81 82 --- 83 84 == Internationalization == 85 86 Inline Context is fully translation-ready. 87 Generate POT files from source using: 88 89 `npm run pot` 90 91 Add translations in the `languages/` directory. 92 93 --- 94 95 == Examples & Inspiration == 96 97 The idea for this plugin originated from a project with Renée Kool — a visual artist working in public art, film, and emerging media. She wanted to create a website where a single link could reveal additional content containing multiple related links. We looked at a Dutch journalism platform like De Correspondent, which use subtle inline notes to provide context without interrupting the flow of reading. You can see examples of their inline notes in this article: [Hoe Nederland kampioen deeltijdwerken werd](https://decorrespondent.nl/15887/hoe-nederland-kampioen-deeltijdwerken-werd/9053b712-3591-0002-29b3-8c7b69eae0c3) 98 99 --- 100 101 == Source Code == 102 103 Inline Context uses `@wordpress/scripts` with webpack and npm to build assets. 104 105 Full source (including uncompiled JS and CSS) is available at: 106 [https://github.com/jooplaan/inline-context](https://github.com/jooplaan/inline-context) 107 108 --- 65 109 66 110 == Installation == 67 1. Upload the plugin files to the `/wp-content/plugins/inline-context` directory, or install the plugin through the WordPress plugins screen directly. 68 2. Activate the plugin through the 'Plugins' screen in WordPress. 69 3. Configure categories and styling in Settings > Inline Context. 70 4. In the editor, select text and click the "Inline Context" button to add a note. 71 5. Choose a category (optional) and write your note content. 111 112 1. Upload the plugin files to `/wp-content/plugins/inline-context`, or install via the Plugins screen. 113 2. Activate the plugin. 114 3. Configure categories and styling under **Settings → Inline Context**. 115 4. In the Block Editor, select text and click **Inline Context**. 116 5. Add your note content and choose a category (optional). 117 118 --- 72 119 73 120 == Frequently Asked Questions == 74 = Does it work with classic editor? = 75 No. This plugin extends the block editor's Rich Text controls. 121 122 = Does this work with the Classic Editor? = 123 No. Inline Context is built specifically for the WordPress Block Editor (Gutenberg). 76 124 77 125 = Can I change the styles? = 78 Yes. Go to Settings > Inline Context > Styling tab for comprehensive visual customization.126 Yes. Extensive visual customization options are available under **Settings → Inline Context → Styling**. 79 127 80 = How many categories can I create? =81 There's no hard limit. Create as many categories as needed to organize your notes.128 = Is there a limit to the number of categories? = 129 No. Create as many categories as your content structure requires. 82 130 83 = Can I use any Dashicon for the categories? = 84 Yes. You can type any dashicon class name to access all 300+ icons. 131 = Can I use any Dashicon? = 132 Yes. You can type any Dashicon class name to use all 300+ icons. 133 134 --- 85 135 86 136 == Screenshots == 137 87 138 1. Editor popover for adding inline context with category selection 88 2. Pop up in editor to add a inline context note to content89 3. Search existing re-usable notes in the editor pop-up90 4. The inline context note displayed on website, default view91 5. T he inline context note displayed as tooltip on website92 6. List of inline context notes in WordPress admin, showing usage count and where it is used in content139 2. Modal window for writing an inline context note 140 3. Search interface for inserting reusable notes 141 4. Inline context note on the frontend (default expanded mode) 142 5. Tooltip version of the inline note on the frontend 143 6. Notes Library in the admin area showing usage count and linked posts
Note: See TracChangeset
for help on using the changeset viewer.