Jak stworzyć własny blok Gutenberga w WordPress od zera?

Edytor blokowy Gutenberg całkowicie zmienił sposób pracy z treścią w WordPress. Oprócz wbudowanych bloków, możesz tworzyć własne – dopasowane do Twoich potrzeb lub wymagań klienta. Pokażę Ci, jak od podstaw stworzyć prosty blok Gutenberga z wykorzystaniem Reacta i JavaScriptu.

1. Co będzie potrzebne?

• Zainstalowany WordPress (najlepiej w wersji 6+).
• Motyw potomny (child theme) albo własna wtyczka.
• Podstawowa znajomość PHP i JavaScript (ESNext).
• Narzędzia deweloperskie: Node.js i npm.

2. Struktura wtyczki

Najlepiej tworzyć własne bloki w formie wtyczki. Utwórz katalog, np.:

/wp-content/plugins/moj-blok

W środku dodaj plik moj-blok.php:

<?php
/**
 * Plugin Name: Mój Pierwszy Blok
 * Description: Prosty blok Gutenberga stworzony od zera.
 * Version: 1.0
 * Author: Twoje Imię
 */

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

function moj_blok_register() {
    wp_register_script(
        'moj-blok-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', array(
        'editor_script' => 'moj-blok-js',
    ) );
}
add_action( 'init', 'moj_blok_register' );

3. Konfiguracja plików JS

W katalogu wtyczki stwórz folder src/ i w nim plik index.js.
To tutaj zdefiniujesz swój blok:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('moj/blok', {
    title: 'Mój Blok',
    icon: 'smiley',
    category: 'common',

    attributes: {
        content: { type: 'string', source: 'html', selector: 'p' },
    },

    edit({ attributes, setAttributes }) {
        const { content } = attributes;

        return (
            <RichText
                tagName="p"
                value={content}
                onChange={(newContent) => setAttributes({ content: newContent })}
                placeholder="Wpisz tekst..."
            />
        );
    },

    save({ attributes }) {
        return <RichText.Content tagName="p" value={attributes.content} />;
    },
});

Ten prosty blok pozwala użytkownikowi wprowadzić tekst, który zostanie zapisany i wyświetlony na stronie.

4. Budowanie plików

Aby przekształcić kod ESNext na JavaScript kompatybilny z WordPressem, musisz skonfigurować narzędzie @wordpress/scripts.

W katalogu wtyczki uruchom:

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

Dodaj w package.json:

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

Teraz możesz budować pliki:

npm run build

Gotowe pliki pojawią się w katalogu build/.

5. Aktywacja bloku

1. Włącz wtyczkę w panelu WordPressa.
2. Otwórz edytor blokowy.
3. W sekcji „Wspólne” zobaczysz nowy blok „Mój Blok”.

6. Rozszerzanie bloku

To dopiero początek. Możesz:

• dodać style CSS i SCSS,
• stworzyć panel ustawień (np. zmiana koloru, obrazka),
• połączyć blok z API, aby wyświetlał dynamiczne dane.

Podsumowanie

Stworzenie własnego bloku Gutenberga od zera wymaga nieco pracy, ale daje ogromne możliwości. Możesz projektować bloki idealnie dopasowane do swoich projektów, zamiast polegać wyłącznie na gotowych rozwiązaniach. Dzięki Reactowi i pakietowi @wordpress/scripts proces ten jest dużo prostszy, niż się wydaje.