2026.07.23.
Weboldal fejlesztés és SEO

Gutenberg blokk saját beállításokkal JavaScriptben.

Temesvári László

Gutenberg Blokkok Testreszabása: Hogyan Adjunk Hozzá Saját Beállításokat?

Üdv, WordPress fejlesztő társ! Ha már megismerkedtél a Gutenberg blokk szerkesztő világával, biztosan felmerült benned, hogy vannak azok a beépített blokkok, amiknek van valami egészen *csini* beállítás panelje a jobb oldalon. És te is szeretnél ilyet építeni a saját egyedi blokkjaidhoz. Nos, ez nem csak a React mágia – jó adag PHP alapozással és egy csipetnyi JavaScript finomsággal is megvalósítható. Nézzük, hogyan!

Miért Fontosak a Saját Beállítások?

Egy blokk sokkal hasznosabb és professzionálisabb, ha a felhasználó számos tulajdonságot módosíthat a kódba mártás nélkül. Elképzelhető egy “Hős szekció” blokk, ahol a háttérszínt, a címsor stílusát vagy a gomb típusát egy panelen át lehet állítani. Ez nemcsak a felhasználói élményt javítja, hanem konzisztens dizájnt is biztosít. A kulcs a register_block_type PHP függvény és a blokk attributes (tulajdonságok) szolgáltatásának ötvözése a JavaScript oldali InspectorControls komponenssel.

A Háttér: PHP Regisztráció és Attribútumok

Minden a PHP oldalon kezdődik. Amikor regisztrálod a blokkot, megadhatod az alapértelmezett attribútumokat. Ezek a változók lesznek, amiket a JavaScript kezel, és amelyek a blokk kimenetét befolyásolják.

<?php
function register_my_custom_block() {
    wp_register_script(
        'my-custom-block-editor-script',
        get_template_directory_uri() . '/blocks/my-block/editor.js',
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components')
    );

    register_block_type('my-namespace/my-block', array(
        'editor_script' => 'my-custom-block-editor-script',
        'attributes'      => array(
            'primaryColor' => array(
                'type'    => 'string',
                'default' => '#007cba',
            ),
            'isRounded' => array(
                'type'    => 'boolean',
                'default' => false,
            ),
            'titleText' => array(
                'type'    => 'string',
                'default' => 'Üdvözöllek!',
            ),
        ),
        'render_callback' => 'render_my_custom_block',
    ));
}
add_action('init', 'register_my_custom_block');

function render_my_custom_block($attributes) {
    $classes = $attributes['isRounded'] ? 'is-rounded' : '';
    $styles  = 'background-color:' . esc_attr($attributes['primaryColor']) . ';';

    ob_start(); ?>
    <div class="my-custom-block <?php echo $classes; ?>" style="<?php echo $styles; ?>">
        <h2><?php echo esc_html($attributes['titleText']); ?></h2>
        <!-- További tartalom -->
    </div>
    <?php
    return ob_get_clean();
}
?>

Az Irányítópult: JavaScript és az InspectorControls

Itt jön a JavaScript – de ne ijedj meg, nem kell mélységekbe menni. A wp.editor.InspectorControls egy olyan komponens, ami a jobb oldali panelbe ágyazza be a vezérlőidet. Használhatsz alap HTML inputokat, de a Gutenberg @wordpress/components csomagja rengeteg kész elemet kínál (pl. TextControl, ToggleControl, ColorPalette). Egy egyszerű példa:

const { registerBlockType } = wp.blocks;
const { InspectorControls, ColorPalette } = wp.editor;
const { PanelBody, TextControl, ToggleControl } = wp.components;

registerBlockType('my-namespace/my-block', {
    title: 'Egyedi Blokkom',
    icon: 'smiley',
    category: 'design',

    attributes: {
        primaryColor: {
            type: 'string',
            default: '#007cba',
        },
        isRounded: {
            type: 'boolean',
            default: false,
        },
        titleText: {
            type: 'string',
            default: 'Üdvözöllek!',
        },
    },

    edit: function(props) {
        const { attributes, setAttributes } = props;

        function onChangePrimaryColor(newColor) {
            setAttributes({ primaryColor: newColor });
        }

        function onToggleRounded() {
            setAttributes({ isRounded: !attributes.isRounded });
        }

        function onChangeTitleText(newText) {
            setAttributes({ titleText: newText });
        }

        return [
            wp.element.createElement(
                InspectorControls,
                { key: 'inspector' },
                wp.element.createElement(
                    PanelBody,
                    { title: 'Blokk Beállítások', initialOpen: true },
                    wp.element.createElement(TextControl, {
                        label: 'Cím szövege',
                        value: attributes.titleText,
                        onChange: onChangeTitleText,
                    }),
                    wp.element.createElement(ToggleControl, {
                        label: 'Kerekített sarkok',
                        checked: attributes.isRounded,
                        onChange: onToggleRounded,
                    }),
                    wp.element.createElement('div', null, [
                        wp.element.createElement('p', null, 'Elsődleges szín'),
                        wp.element.createElement(ColorPalette, {
                            color: attributes.primaryColor,
                            onChange: onChangePrimaryColor,
                        }),
                    ])
                )
            ),
            // A blokk előnézeti tartalma a szerkesztőben
            wp.element.createElement(
                'div',
                {
                    className: 'my-custom-block-preview',
                    style: { backgroundColor: attributes.primaryColor, borderRadius: attributes.isRounded ? '10px' : '0' }
                },
                wp.element.createElement('h2', null, attributes.titleText)
            ),
        ];
    },

    save: function(props) {
        // A save függvény csak a statikus kimenetet definiálja, a renderelés a PHP render_callback-re bízándó
        return null;
    },
});

Gyakori Buktatók és Tanácsok

1. Ne felejtsd el a setAttributes-t! A vezérlők csak akkor változtatják a blokk állapotát, ha a változást expliciten beállítod. Az onChange eseménykezelőkben mindig hívd meg a setAttributes-t a frissített értékkel. 2. A PHP és JavaScript attribútumok szinkronban legyenek. A két oldalon ugyanazok a kulcsok és típusok szerepeljenek. Egy eltérés könnyen hibákhoz vezet. 3. Használd a render_callback-et a komplex kimenethez. Ahogy a fenti PHP példában is láttad, a save()-ben return null-t adtunk vissza, és a teljes renderelést a PHP render_callback-re bíztuk. Ez sokkal rugalmasabb, mert kihasználhatod a WordPress template függvényeket és a szerveroldali logikát. 4. A stílusok kezelése: A blokk stílusait célszerű külön CSS vagy SCSS fájlban kezelni. Regisztráld őket a register_block_type-nál (editor_style a szerkesztői nézethez, style a frontendhez). Ha dinamikus stílusokat (pl. a kiválasztott színt) kell beadni, a PHP render_callback-ben inline stílusként érdemes megjeleníteni, ahogy az a példában is szerepelt.

Frontend Finomhangolás: Egy Csipetnyi jQuery és SCSS

Míg a blokk magja a fenti technikákkal kész, a frontend megjelenését még finomíthatod. Például a kerekített osztály hozzáadásakor egy sima CSS átmenetet is adhatsz, ami sokkal professzionálisabb hatást kelt. Használj SCSS-t a könnyebb karbantartás érdekében.

// my-block.scss
.my-custom-block {
    padding: 2rem;
    transition: all 0.3s ease-in-out;

    &.is-rounded {
        border-radius: 10px;
    }

    h2 {
        margin-top: 0;
        color: #333;
    }
}

És ha valami interaktív elemet szeretnél a frontenden (ami nem a Gutenberghez kötődik), ott a jó öreg jQuery is bevethető – például egy sima gombklikk esemény kezelésére.

// A theme JavaScript fájljában
jQuery(document).ready(function($) {
    $('.my-custom-block .action-button').on('click', function() {
        $(this).toggleClass('active');
        // Egyedi interakció logika...
    });
});

Összegzés

Saját Gutenberg blokk beállítások létrehozása egy izgalmas egyesítése a WordPress PHP háttérének és a modern, komponens-alapú JavaScriptnek. A titok a tiszta kommunikációban rejlik a két világ között: a PHP határozza meg az attribútumok vázát és a végső kimenetet, míg a JavaScript biztosítja az intuitív szerkesztői felületet. Kezdj egyszerűvel – egy szövegmezővel és egy kapcsológombbal –, és fokozatosan építsd fel a palettádat. Így blokkjaid nemcsak funkcionálisak, hanem igazi élmény lesz velük dolgozni a szerkesztők számára is.

Ha ezt a rendszert megérted, szinte bármilyen egyedi komponenst meg tudsz valósítani, ami pontosan a projektjeid igényeit szolgálja. További kódolást! 🚀

Kapcsolódó cikkek