WWI Blogcard

WWI Blogcard is a Gutenberg block plugin that creates visually appealing blog cards from any URL. Simply paste a URL, and the plugin automatically fetches OGP (Open Graph Protocol) information to generate a rich preview card.

Features

• Easy to use : Just paste a URL and the blog card is automatically generated
• OGP support : Fetches title, description, and images from OGP meta tags
• Responsive design : Cards look great on any device
• Dark mode support : Automatic dark mode based on system preferences
• Caching : OGP data is cached for improved performance
• Security : SSRF protection blocks requests to private IP addresses

Usage

1. 01Add a new “Blogcard” block in the Gutenberg editor
2. 02Paste the URL you want to create a card for
3. 03Click “Fetch” to retrieve OGP information
4. 04The blog card is automatically generated

Source Code

The source code for this plugin, including uncompiled JavaScript and CSS files, is available on GitHub:

https://github.com/whywaita/wwi-blogcard

Building from Source

To build the plugin from source, you need Node.js and npm installed. Then run the following commands:

1. 05Clone the repository: git clone https://github.com/whywaita/wwi-blogcard.git
2. 06Navigate to the plugin directory: cd wwi-blogcard
3. 07Install dependencies: npm install
4. 08Build the plugin: npm run build

The build process uses @wordpress/scripts to compile and minify the JavaScript and CSS files from the src/ directory to the build/ directory.