Gutenberg blokkok meghatározása egyedi bejegyzéstípushoz előnézeti képe

Gutenberg blokkok meghatározása egyedi bejegyzéstípushoz

| Olvasási idő: 1 perc

Folytatva a Custom Post Type tematikát (Custom Post Type készítése WordPressbenCustom Taxonomy készítése WordPressbenCustom Post Template "készítése" WordPressben) nézzük meg most azt, hogy hogyan lehet kihasználni a Gutenberg nyújtotta blokkrendszert arra, hogy az admin felületen előre meghatározott adatokat kérjünk be a szerkesztőinktől. 

A korábban már elkészített Unikornis CPT-nket fogjuk tovább bővíteni (ha még nem tetted meg, akkor előtte kérlek, olvasd el az erről szóló bejegyzést): 

php
<?php
/*
Plugin Name: Unicorn CPT plugin
Plugin URI: https://www.webmenedzser.hu
Description: Unicorn CPT plugin
Version: 1.0
Author: Radics Ottó
Author URI: https://www.webmenedzser.hu
License: GPL2
*/

function unicorn_cpt() {

    $template = array(
        array( 'core/columns', array(), array(
            array( 'core/column', array(), array(
                array( 'core/image', array() ),
            ) ),

            array( 'core/column', array(), array(
                array( 'core/paragraph', array(
                    'placeholder' => 'Unikornis leírás hozzáadása...'
                ) ),
            ) ),
        ) ),

        array( 'core/paragraph', array(
            'placeholder' => 'Kártyák száma a pakliban?',
        ) ),
        array( 'core/paragraph', array(
            'placeholder' => 'Melyik pakliba tartozik a kártya?',
        ) ),
    );

    // Set labels for CPT
    $labels = array(
        'name'                      => _x( 'Unikornisok', 'plugout_cpt' ),
        'singular_name'             => _x( 'Unikornis', 'plugout_cpt' ),
        'menu_name'                 => __( 'Unikornisok', 'plugout_cpt' ),
        'parent_item_colon'         => __( 'Szülő Unikornis', 'plugout_cpt' ),
        'all_items'                 => __( 'Minden Unikornis', 'plugout_cpt' ),
        'view_item'                 => __( 'Unikornis megtekintése', 'plugout_cpt' ),
        'add_new_item'              => __( 'Új Unikornis hozzáadása', 'plugout_cpt' ),
        'add_new'                   => __( 'Új hozzáadása', 'plugout_cpt' ),
        'edit_item'                 => __( 'Unikornis szerkesztése', 'plugout_cpt' ),
        'update_item'               => __( 'Unikornis frissítése', 'plugout_cpt' ),
        'search_items'              => __( 'Unikornis keresése', 'plugout_cpt' ),
        'not_found'                 => __( 'Nincsenek Unikornisok.', 'plugout_cpt' ),
        'not_found_in_trash'        => __( 'A Lomtár üres', 'plugout_cpt' )
    );

    // Set other options for Custom Post Type
    $args = array(
        'label'                     => __( 'Unikornis', 'plugout_cpt' ),
        'description'               => __( '"Annyira cuki, hogy belehaloook!" :)', 'plugout_cpt' ),
        'labels'                    => $labels,
        'supports'                  => array( 'title', 'editor' ),
        'hierarchical'              => false,
        'public'                    => true,
        'show_in_nav_menus'         => true,
        'show_in_admin_bar'         => true,
        'menu_position'             => 3,
        'has_archive'               => 'unicorns',
        'exclude_from_search'       => false,
        'publicly_queryable'        => true,
        'menu_icon'                 => 'dashicons-star-filled',
        'template'                  => $template,
        'show_in_rest'              => true
    );

    register_post_type( 'unicorn', $args );
}
add_action( 'init', 'unicorn_cpt' );

Két helyen változtattunk a korábbi kódon: hozzáadtuk a template (1) kulcsot az $args tömbhöz, és az előbbit a $template (2) tömb értékével töltöttük fel. A template kulcs értékéül adott $template tömb meghatározza, hogy milyen "sablon" szerint épül fel a CPT-nk "Új hozzáadása" nézete - jelen helyzetben ez egy columns blokkon belüli 2 column blokkot, azokon belül pedig egy kép (image) és egy bekezdés (paragraph) blokktípust tartalmaz, valamint kettő további paragraph blokkot az első columns blokk "alatt". 

A további testreszabáshoz érdemes átnézni a Gutenberg blokkok dokumentációját, de ez erőteljes JavaScript hangsúllyal rendelkezik, így a szokványos #plugout-os megoldások (bedobunk egy .php fájlt az mu-plugins mappába) kötöttségekkel tudnak csak működni. 

Fontos megjegyezni, hogy ez a megoldás nem akadályozza meg azt, hogy teljesen átalakítsa a szerkesztő az adott bejegyzés nézetét - pusztán arra alkalmas, hogy egy előre meghatározott elrendezést adjon, megspórolva az ismétlődő kattintgatásokat.