Skip to content

moveyourdigital/wp-link-container-block

Repository files navigation

Link Container Block for WordPress Gutenberg

WordPress Version PHP Version License

A simple and customizable link container block for the WordPress block editor (Gutenberg). This block acts as a wrapper for other blocks while providing a customizable href and onClick attribute.


📌 Features

  • 🏗 Gutenberg-native – Easily insert a container that acts as a clickable link.
  • 🔗 Inner Blocks Support – Nest any other blocks inside the link container.
  • Customizable Href & OnClick – Set a URL and JavaScript click behavior via block settings.
  • 🔄 New Tab Option – Open links in a new tab with a simple toggle.
  • 📱 Responsive & Theme-Compatible – Works across all devices and integrates seamlessly with any theme.
  • 🎨 No Code Required – Adjust attributes via the block settings panel.

This plugin is perfect for clickable sections, call-to-action blocks, interactive containers, and more.


🚀 Installation

1. Install from ZIP

  1. Clone the repository or download the latest release.
  2. Upload the plugin files to /wp-content/plugins/link-container-block, or install via the Plugins screen in WordPress.

2. Install via GitHub & Composer

You can install the plugin using Composer:

composer config repositories.link-container-block vcs https://github.com/moveyourdigital/wp-link-container-block.git
composer require moveyourdigital/wp-link-container-block

Activation

  1. Activate the plugin via WordPress Admin > Plugins.
  2. In the Gutenberg editor, search for Link Container Block, insert it, and start adding content.
  3. Customize via the block settings panel.

❓ FAQ

How do I use the Link Container Block?

Simply insert the Link Container Block from the Gutenberg editor, set the href attribute in the block settings, and add content inside the block.

Can I nest other blocks inside this container?

Yes! This block supports InnerBlocks, so you can place any other blocks inside it.

Does the block always render as an <a>?

No. If an href is set, the block will render as an <a>. If no href is provided, it will render as a <div> to avoid invalid HTML.

Can I add JavaScript behavior to the click event?

Yes! The block allows setting an onClick attribute where you can enter JavaScript code to execute when the block is clicked.

Can I open the link in a new tab?

Yes, there's a toggle in the block settings that allows you to open the link in a new tab (target="_blank").

Does this work with all themes?

Yes, the block is designed to work with any Gutenberg-compatible theme. However, you may need to adjust styles for better integration.


📜 Changelog

v0.1.1

  • Generates button when href is not provided

v0.1.0

  • Initial release 🎉
  • Added support for wrapping inner blocks inside a clickable container.
  • Integrated customizable href and onclick attributes.
  • Included a toggle for opening links in a new tab.

🛠 Development & Contribution

This plugin was scaffolded using the WordPress Create Block tool.

Contribute:

  1. Fork this repository.
  2. Create a new feature branch (git checkout -b feature-name).
  3. Commit your changes (git commit -m "Added new feature").
  4. Push to the branch (git push origin feature-name).
  5. Open a Pull Request.

🏆 Support

For issues or feature requests:

  • 📌 Open an issue on GitHub Issues.
  • 📩 Reach out via the WordPress support forum.

📜 License

This plugin is licensed under GPL-2.0-or-later. See the LICENSE file for details.

About

A simple and customizable **link container block** for the WordPress block editor (Gutenberg).

Resources

Stars

Watchers

Forks

Packages

No packages published