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