{"id":416854,"date":"2025-01-02T08:00:00","date_gmt":"2025-01-02T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/custom-anchor-block\/"},"modified":"2025-01-03T02:09:00","modified_gmt":"2025-01-03T02:09:00","slug":"custom-anchor-block","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/custom-anchor-block\/","title":{"rendered":"Custom Anchor Block"},"content":{"rendered":"

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>\n

Key Features:
\n* Create anchor links as text or buttons
\n* Fully customize button colors (background, text, and border)
\n* Choose from different button styles (Primary, Secondary, Outline)
\n* Select button sizes (Small, Normal, Large)
\n* Multi-language support (English and Spanish available)
\n* Easy to use interface integrated with the block editor
\n* No coding knowledge required<\/p>\n

Perfect for:
\n* Long-form content navigation
\n* FAQ sections
\n* Table of contents
\n* Landing pages
\n* Product documentation
\n* Course materials<\/p>\n

Usage<\/h3>\n
    \n
  1. Add a heading or paragraph where you want users to scroll to<\/li>\n
  2. Set an HTML anchor ID in the block\u2019s Advanced settings (e.g., \u201csection1\u201d)<\/li>\n
  3. Add the Custom Anchor Block where you want the link to appear<\/li>\n
  4. Enter the same anchor ID<\/li>\n
  5. Choose between text or button style<\/li>\n
  6. Customize colors and appearance as needed<\/li>\n<\/ol>\n

    Development<\/h3>\n

    This plugin is developed using modern JavaScript and build tools. The source code is available in the \/src<\/code> directory.<\/p>\n

    Build Tools<\/h4>\n
      \n
    • Node.js and npm are required for development<\/li>\n
    • The plugin uses @wordpress\/scripts for building<\/li>\n<\/ul>\n

      Development Setup<\/h4>\n
        \n
      1. Clone the repository<\/li>\n
      2. Install dependencies:
        \n npm install<\/code><\/li>\n
      3. For development with auto-rebuild:
        \n npm run start<\/code><\/li>\n
      4. For production build:
        \n npm run build<\/code><\/li>\n<\/ol>\n

        Source Files<\/h4>\n
          \n
        • \/src\/index.js<\/code> \u2013 Main JavaScript source code for the block editor containing React components and block registration<\/li>\n
        • \/src\/style.css<\/code> \u2013 Original CSS styles for both editor and frontend display<\/li>\n<\/ul>\n

          Build Output<\/h4>\n
            \n
          • \/build\/index.js<\/code> \u2013 Compiled and minified JavaScript<\/li>\n
          • \/build\/index.asset.php<\/code> \u2013 WordPress dependencies and version information<\/li>\n
          • \/build\/style-index.css<\/code> \u2013 Compiled and optimized CSS<\/li>\n<\/ul>\n

            Development Dependencies<\/h4>\n

            The plugin uses the following development tools:
            \n* @wordpress\/scripts: Provides build tools and configurations for WordPress block development
            \n* Package configuration in package.json:
            \n json
            \n {
            \n \"scripts\": {
            \n \"build\": \"wp-scripts build\",
            \n \"start\": \"wp-scripts start\",
            \n \"format\": \"wp-scripts format\",
            \n \"lint:js\": \"wp-scripts lint-js\"
            \n },
            \n \"devDependencies\": {
            \n \"@wordpress\/scripts\": \"^26.0.0\"
            \n }
            \n }<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

            Add customizable anchor links as text or buttons with custom colors to create smooth in-page navigation in WordPress.<\/p>\n","protected":false},"author":65,"featured_media":416855,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Custom Anchor Block - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Add customizable anchor links as text or buttons with custom colors to create smooth in-page navigation in WordPress."},"footnotes":""},"categories":[1],"tags":[1835,745,233,237,978],"class_list":["post-416854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-anchor","tag-blocks","tag-gutenberg","tag-links","tag-navigation"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/416854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=416854"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/416854\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/416855"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=416854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=416854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=416854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}