Custom Anchor Block

説明

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

1. Add a heading or paragraph where you want users to scroll to
2. Set an HTML anchor ID in the block’s Advanced settings (e.g., “section1”)
3. Add the Custom Anchor Block where you want the link to appear
4. Enter the same anchor ID
5. Choose between text or button style
6. 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

1. Clone the repository
2. Install dependencies:
   npm install
3. For development with auto-rebuild:
   npm run start
4. 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
* Package configuration in package.json:
json
{
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start",
"format": "wp-scripts format",
"lint:js": "wp-scripts lint-js"
},
"devDependencies": {
"@wordpress/scripts": "^26.0.0"
}
}