Jak stworzyć blok Gutenberga w WordPress, który pobiera dane z API?

Edytor blokowy Gutenberg pozwala tworzyć własne bloki, ale największą moc pokazuje wtedy, gdy blok potrafi wyświetlać dynamiczne dane. W tym poradniku pokażę Ci, jak od zera zbudować blok Gutenberga, który pobiera dane z zewnętrznego API i wyświetla je w treści WordPressa.

1. Przygotowanie wtyczki

Tak jak w poprzednim artykule, stworzymy nową wtyczkę:

/wp-content/plugins/blok-api

Plik główny blok-api.php:

<?php
/**
 * Plugin Name: Blok API
 * Description: Przykładowy blok Gutenberga pobierający dane z API.
 * Version: 1.0
 * Author: Twoje Imię
 */

if ( ! defined( 'ABSPATH' ) ) exit;

function blok_api_register() {
    wp_register_script(
        'blok-api-js',
        plugins_url( 'build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
    );

    register_block_type( 'moj/blok-api', array(
        'editor_script' => 'blok-api-js',
    ) );
}
add_action( 'init', 'blok_api_register' );

2. Definicja bloku z pobieraniem danych

W folderze src/ utwórz plik index.js:

import { registerBlockType } from '@wordpress/blocks';
import { useEffect, useState } from '@wordpress/element';

registerBlockType('moj/blok-api', {
    title: 'Blok API',
    icon: 'cloud',
    category: 'widgets',

    edit() {
        const [data, setData] = useState(null);
        const [loading, setLoading] = useState(true);

        useEffect(() => {
            fetch('https://jsonplaceholder.typicode.com/posts/1')
                .then((res) => res.json())
                .then((result) => {
                    setData(result);
                    setLoading(false);
                });
        }, []);

        if (loading) return <p>Ładowanie danych...</p>;

        return (
            <div>
                <h3>{data.title}</h3>
                <p>{data.body}</p>
            </div>
        );
    },

    save() {
        // Dane wyświetlane są dynamicznie w edytorze,
        // a frontend pokaże wynik zapisany w treści
        return null;
    }
});

➡️ W tym przykładzie pobieramy dane z darmowego API jsonplaceholder.typicode.com. W prawdziwej implementacji możesz użyć np. swojego REST API WordPressa lub dowolnego zewnętrznego serwisu.

3. Budowanie skryptu

Zainstaluj narzędzia:

npm init -y
npm install @wordpress/scripts --save-dev

Dodaj w package.json:

"scripts": {
  "build": "wp-scripts build",
  "start": "wp-scripts start"
}

Następnie uruchom:

npm run build

4. Wynik działania

Po aktywacji wtyczki w WordPressie, w edytorze Gutenberga zobaczysz blok Blok API, który automatycznie pobiera dane z API i wyświetla je w edytorze.

5. Rozszerzenia

To dopiero początek! Blok może:

• pobierać dane dynamicznie (np. kursy walut, pogodę, statusy systemów),
• mieć opcje konfiguracyjne (np. wybór ID posta, lokalizacji),
• korzystać z REST API WordPressa do pobierania własnych danych.

Podsumowanie

Stworzenie własnego bloku Gutenberga z obsługą API to potężne narzędzie dla programistów WordPressa. Dzięki temu możesz budować nowoczesne, dynamiczne treści, które aktualizują się automatycznie i zwiększają atrakcyjność strony.