$title =

MTG (Magic The Gathering) Card Block

;

$content = [

Just created this MTG Card View block using Telex. It took me a few rounds of polishing to get it right, but this is looking pretty decent now.

I used ChatGPT to craft this prompt:

Create a Gutenberg block calledMagic Cardthat displays detailed information about a selected *Magic: The Gathering* card.

**Requirements:**

* The block should allow users to **search for or select** a card by name in the block settings sidebar.
* Once a card is selected, the block should **fetch card data** (name, image, type, mana cost, description, etc.) from a **public Magic: The Gathering API** (for example, [Scryfall API](https://scryfall.com/docs/api)).
* Display the card image and key attributes in a clean, card-like layout.
* Cache or memoize the API response to avoid excessive requests when editing the post.
* Include loading and error states.
* The design should fit nicely with the WordPress editor styles.

**Bonus (optional):**

* Add a setting to toggle betweencompactanddetaileddisplay modes.
* Make the card data refreshable via a small “↻ Updatebutton.

Below you can see a small demo of the block:

BTW, I also used the Jetpack generate featured image on this post. AI, baby 😉.

];

$date =

;

$category =

;

$author =

;

$previous =

;

Discover more from Rafael Meneses

Subscribe now to keep reading and get access to the full archive.

Continue reading