@harrasteblogi JUURI NYT
--:--

Tilaa uutiskirje

Saat tuoreimmat 10 uusinta artikkelia kerran viikossa sähköpostiisi.

Tilaa uutiskirje

WordPressin block rendering pipeline selitettynä

19.5.2026 | Artikkeleita, IT, Kotisivut, Nettisivut, Verkkokauppa, Verkkokehitys, Verkkosivut, Verkkotyökalu, WordPress

Wordpress
Facebook X WhatsApp

WordPressin block rendering pipeline selitettynäGutenberg muutti WordPressin renderöintimallin täysin. Aiemmin sisältö koostui lähinnä HTML:stä, shortcodesta ja template-logiikasta, mutta block editor toi mukaan rakenteellisen sisältöjärjestelmän, jossa jokainen lohko renderöidään oman pipeline-prosessinsa kautta.

Kun ymmärtää block rendering pipelinen oikein, on huomattavasti helpompi:

  • rakentaa performantteja blockeja
  • debugata renderöintiongelmia
  • optimoida frontend-suorituskykyä
  • tehdä dynaamisia blockeja
  • rakentaa headless-ratkaisuja

Mitä tapahtuu kun Gutenberg-sivu renderöidään

Kun käyttäjä avaa sivun:

  1. WordPress hakee post_contentin tietokannasta
  2. Gutenberg-blockit parsitaan rakenteeksi
  3. Jokainen block renderöidään vuorollaan
  4. Dynaamiset blockit suorittavat PHP-renderöinnin
  5. Lopullinen HTML palautetaan selaimelle

Pipeline on siis paljon enemmän kuin pelkkä “HTML output”.

Blockit tallennetaan kommenttisyntaksilla

Tietokannassa sisältö näyttää tältä:

<!-- wp:paragraph -->
<p>Hello world</p>
<!-- /wp:paragraph -->

Tai custom block:

<!-- wp:myplugin/hero {"title":"Welcome"} /-->

Tämä ei ole pelkkää HTML:ää, vaan serialisoitua block-dataa.

parse_blocks() käynnistää pipeline-prosessin

Keskeinen WordPress-funktio:

$blocks = parse_blocks($content);

Tämä muuttaa sisällön PHP-arrayksi.

Esimerkki:

[
    [
        'blockName' => 'core/paragraph',
        'attrs' => [],
        'innerHTML' => '<p>Hello</p>'
    ]
]

Tästä alkaa varsinainen renderöintivaihe.

do_blocks() renderöi blockit

WordPress käyttää:

do_blocks($content);

Se:

  • parsii blockit
  • renderöi ne yksitellen
  • yhdistää lopullisen HTML:n

render_block() on pipeline-ydin

Jokainen block kulkee tämän funktion läpi:

render_block($block);

Tässä tapahtuu:

  • attribute processing
  • context handling
  • dynamic callback execution
  • filterit
  • HTML generation

Static vs dynamic blocks

Static block

Tallentaa HTML:n suoraan sisältöön.

Esimerkki:

<p>Hello world</p>

Frontend ei tarvitse PHP-renderöintiä.

Dynamic block

Renderöidään requestin aikana PHP:llä.

register_block_type('myplugin/latest-posts', [
    'render_callback' => 'render_latest_posts'
]);

Dynamic block rendering

Render callback:

function render_latest_posts($attributes) {

    $posts = get_posts([
        'posts_per_page' => 5
    ]);

    ob_start();

    foreach ($posts as $post) {
        echo '<h2>' . esc_html($post->post_title) . '</h2>';
    }

    return ob_get_clean();
}

Tämä suoritetaan jokaisella requestilla.

Block attributes

Attribuutit tulevat block-editorista.

Esimerkki:

{
  "title": "Hero",
  "align": "wide"
}

PHP:ssä:

$attributes['title']

InnerBlocks pipeline

Blockit voivat sisältää sisäisiä blockeja.

Esimerkki:

Columns
 ├── Column
 │    └── Paragraph

WordPress renderöi ne rekursiivisesti.

Block context

Blockit voivat jakaa dataa keskenään.

Esimerkki:

provides_context
uses_context

Tämä toimii vähän kuin React Context API.

Filters rendering pipelineissa

Tärkeimmät filterit:

render_block

add_filter('render_block', function($content, $block) {

    return $content;
}, 10, 2);

render_block_data

add_filter('render_block_data', function($block) {

    return $block;
});

Näillä voidaan muokata renderöintiä globaalisti.

Server-side rendering (SSR)

Dynaamiset blockit toimivat käytännössä SSR-mallilla.

Hyödyt:

  • SEO
  • realtime-data
  • backend logic

Haitat:

  • enemmän PHP-kuormaa
  • hitaampi renderöinti

Block supports pipeline

WordPress lisää automaattisesti:

  • alignment classes
  • spacing
  • typography
  • colors

Esimerkki:

supports => [
    'align' => true
]

Tämä vaikuttaa renderöityyn HTML:ään automaattisesti.

block.json ja render pipeline

Modernit blockit määritellään:

{
  "name": "myplugin/hero",
  "render": "file:./render.php"
}

Tämä sitoo renderöinnin pipelineen.

render.php käytännössä

<div class="hero">
    <h1><?= esc_html($attributes['title']) ?></h1>
</div>

WordPress injectoi:

  • $attributes
  • $content
  • $block

automaattisesti.

Performance pullonkaulat

Yleisimmät ongelmat:

  • raskaat queryt render_callbackissa
  • nested dynamic blockit
  • ei cachingia
  • liikaa server-side renderöintiä
  • isot InnerBlocks-rakenteet

Cache dynamic blockeihin

Hyvä käytäntö:

$key = 'hero_block_' . md5(json_encode($attributes));

$html = wp_cache_get($key);

if (!$html) {

    ob_start();

    // render

    $html = ob_get_clean();

    wp_cache_set($key, $html, '', 3600);
}

return $html;

Lazy rendering

Kaikkea ei tarvitse renderöidä heti.

Esimerkkejä:

  • infinite scroll
  • AJAX block loading
  • intersection observer

Tämä vähentää TTFB:tä.

Headless WordPress ja block pipeline

Headless-ympäristöissä:

  • parse_blocks() voidaan käyttää API:ssa
  • frontend renderöi React/Vue-puolella
  • WordPress toimii content engineinä

Block serialization

Kun editori tallentaa:

  1. React block → JSON attrs
  2. serialize_block()
  3. HTML + comments tallennetaan DB:hen

Tämä tekee Gutenbergista hybridin:

  • HTML
  • structured data
  • metadata

Yleisimmät virheet

  • raskaat queryt render_callbackissa
  • ei escapingia
  • renderöinti ilman cachea
  • business logic block templateissa
  • liian monta nested dynamic blockia
  • ei understandingia parse/render-vaiheista

Paras käytäntö

Moderni block-arkkitehtuuri:

  • block.json-pohjainen rakenne
  • kevyt render_callback
  • Redis/object cache
  • mahdollisimman paljon static renderingiä
  • SSR vain tarvittaessa
  • hookit render pipelineen hallitusti

Yhteenveto

WordPressin block rendering pipeline on monivaiheinen järjestelmä, jossa sisältö parsitaan, muunnetaan block-rakenteeksi ja renderöidään vaiheittain frontend-HTML:ksi. Ymmärtämällä parse_blocks-, render_block- ja dynamic rendering -vaiheet kehittäjä pystyy rakentamaan huomattavasti tehokkaampia ja paremmin skaalautuvia Gutenberg-ratkaisuja.

Moderni WordPress-kehitys ei enää perustu pelkkiin templateihin, vaan yhä enemmän render pipeline -ajatteluun, jossa blockit toimivat itsenäisinä komponentteina.

Facebook X WhatsApp

Aiheeseen liittyvät artikkelit

8
🍪