onlinewebgrow

<p>Custom Anchor Block enhances your WordPress editor by adding a versatile anchor link block. Create smooth-scrolling anchor links that can be styled as either text or buttons with fully customizable colors and styles.</p>
<p>Key Features:<br />
* Create anchor links as text or buttons<br />
* Fully customize button colors (background, text, and border)<br />
* Choose from different button styles (Primary, Secondary, Outline)<br />
* Select button sizes (Small, Normal, Large)<br />
* Multi-language support (English and Spanish available)<br />
* Easy to use interface integrated with the block editor<br />
* No coding knowledge required</p>
<p>Perfect for:<br />
* Long-form content navigation<br />
* FAQ sections<br />
* Table of contents<br />
* Landing pages<br />
* Product documentation<br />
* Course materials</p>
<h3>Usage</h3>
<ol>
<li>Add a heading or paragraph where you want users to scroll to</li>
<li>Set an HTML anchor ID in the block’s Advanced settings (e.g., “section1”)</li>
<li>Add the Custom Anchor Block where you want the link to appear</li>
<li>Enter the same anchor ID</li>
<li>Choose between text or button style</li>
<li>Customize colors and appearance as needed</li>
</ol>
<h3>Development</h3>
<p>This plugin is developed using modern JavaScript and build tools. The source code is available in the <code>/src</code> directory.</p>
<h4>Build Tools</h4>
<ul>
<li>Node.js and npm are required for development</li>
<li>The plugin uses @wordpress/scripts for building</li>
</ul>
<h4>Development Setup</h4>
<ol>
<li>Clone the repository</li>
<li>Install dependencies:<br />
   <code>npm install</code></li>
<li>For development with auto-rebuild:<br />
   <code>npm run start</code></li>
<li>For production build:<br />
   <code>npm run build</code></li>
</ol>
<h4>Source Files</h4>
<ul>
<li><code>/src/index.js</code> – Main JavaScript source code for the block editor containing React components and block registration</li>
<li><code>/src/style.css</code> – Original CSS styles for both editor and frontend display</li>
</ul>
<h4>Build Output</h4>
<ul>
<li><code>/build/index.js</code> – Compiled and minified JavaScript</li>
<li><code>/build/index.asset.php</code> – WordPress dependencies and version information</li>
<li><code>/build/style-index.css</code> – Compiled and optimized CSS</li>
</ul>
<h4>Development Dependencies</h4>
<p>The plugin uses the following development tools:<br />
* @wordpress/scripts: Provides build tools and configurations for WordPress block development<br />
* Package configuration in package.json:<br />
      <code>json<br />
  {<br />
    "scripts": {<br />
      "build": "wp-scripts build",<br />
      "start": "wp-scripts start",<br />
      "format": "wp-scripts format",<br />
      "lint:js": "wp-scripts lint-js"<br />
    },<br />
    "devDependencies": {<br />
      "@wordpress/scripts": "^26.0.0"<br />
    }<br />
  }</code></p>


Custom Anchor Block

Add customizable anchor links as text or buttons with custom colors to create smooth in-page navigation in WordPress.

sta1r

robertsharp

<p>The Paragraph Level IDs plugin adds an ‘id’ attribute to each paragraph tag in a blog post, giving the author and readers additional functionality.</p>
<p>So for example, <strong><p></strong> becomes <strong><p id=”para1234-5″></strong>.</p>
<p>These additions allow anyone to link directly to that paragraph in the post. This is especially useful for long tracts of text, academic writing, and legal documents.</p>
<h3>Road Map</h3>
<p>In the future I hope to make the following improvements.</p>
<ul>
<li>Streamline the code so it is at its most efficient and smallest file size.</li>
<li>Further customisation options for the id</li>
<li>A degree of backwards compatibility and localisation for other languages</li>
<li>An option so this feature is only applied to the post types specified.</li>
</ul>
<p>I would welcome any advice, offers of support, bug-testing, forking the project and troubleshooting to help make these extra features possible.</p>
<h3>Acknowledgements</h3>
<p>My friend @strangerpixel overhauled the 0.2 code for this 1.0 release.</p>
<p>The comment by <strong>s_ha_dum</strong> in [this Stack Exchange thread] (http://wordpress.stackexchange.com/questions/74558/automate-paragraphs-in-a-post-page-to-have-a-unique-anchor-link) and the comment by <strong>Milo</strong> in [this Stack Exchange thread] (http://wordpress.stackexchange.com/questions/90066/numbering-sections-and-block-level-elements-in-wpautop-wordpress-as-cms-for-l) got me started.  The [Add To Post plugin (https://wordpress.org/plugins/add-to-post/) was instructive in helping me build a simple settings form.</p>


Paragraph Level IDs

The plugin adds an 'id' attribute to each paragraph tag in a blog post.

Custom Anchor Block vs Paragraph Level IDs