Vlastný Gutenberg blok pre shortcode: Ako ho vytvoriť a integrovať

Ak si už vytvoril vlastný shortcode vo WordPresse, možno chceš, aby bol dostupný aj ako Gutenberg blok. V tomto článku si ukážeme, ako vytvoriť jednoduchý blok, ktorý umožní používateľovi vybrať shortcode z ponuky a vložiť ho do obsahu.

🧱 Čo budeme vytvárať?

➡️ Blok s dropdown menu, ktorý vygeneruje vybraný shortcode do obsahu – napr. [pozdrav] alebo [citat].

📁 Krok 1: Štruktúra pluginu

Vytvor adresár shortcode-block v wp-content/plugins/ a vlož doň súbory:

• shortcode-block.php
• block.js
• style.css (voliteľné)

📄 shortcode-block.php

<?php
/*
Plugin Name: Shortcode Block
*/

function shortcode_block_assets() {
  wp_register_script(
    'shortcode-block-editor',
    plugins_url( 'block.js', __FILE__ ),
    [ 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ],
    filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
  );

  register_block_type( 'moj/shortcode-block', [
    'editor_script' => 'shortcode-block-editor',
  ]);
}
add_action( 'init', 'shortcode_block_assets' );

📄 block.js (Gutenberg blok)

( function( blocks, element, components ) {
  const { registerBlockType } = blocks;
  const { createElement: el } = element;
  const { SelectControl } = components;

  registerBlockType( 'moj/shortcode-block', {
    title: 'Shortcode výber',
    icon: 'shortcode',
    category: 'widgets',

    attributes: {
      selected: { type: 'string', default: '[pozdrav]' }
    },

    edit: ( props ) => {
      return el( 'div', {},
        el( SelectControl, {
          label: 'Vyber shortcode:',
          value: props.attributes.selected,
          options: [
            { label: '[pozdrav]', value: '[pozdrav]' },
            { label: '[citat]', value: '[citat autor="Einstein" text="Predstavivosť je dôležitejšia ako vedomosti."]' },
          ],
          onChange: ( val ) => props.setAttributes({ selected: val })
        }),
        el( 'code', {}, props.attributes.selected )
      );
    },

    save: ( props ) => {
      return el( 'p', {}, props.attributes.selected );
    }
  });
} )(
  window.wp.blocks,
  window.wp.element,
  window.wp.components
);

✅ Výsledok

Po aktivácii pluginu budeš mať nový blok „Shortcode výber“ v editore, ktorý umožní vybrať a vložiť shortcode priamo do obsahu.

Po publikovaní stránky sa WordPress postará o vykreslenie shortcodu ako zvyčajne.

🧠 Tipy na rozšírenie

• podpora viacerých polí (vlastné parametre),
• vizuálna ukážka výstupu (preview),
• vlastná ikona alebo kategória bloku,
• prepojenie s vlastnými CPT alebo ACF údajmi.

📦 Záver

Prepojenie shortcodov s Gutenberg blokmi je výborný spôsob, ako spraviť obsah redaktorsky prístupnejší a menej „technický“. V ďalšom kroku môžeš vytvoriť úplne vlastný blok, ktorý shortcode ani nepotrebuje – ale výstup generuje priamo cez JS alebo REST API.