6

I am trying & learning to build custom block for Gutenberg but spent a few hours on searching for full list of "available options". Maybe I was overlook...

Refer: Template and Block

For example, placeholder & align are options but what else?

function myplugin_register_book_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Books',
        'show_in_rest' => true,
        'template' => array(
            array( 'core/image', array(
                'align' => 'left',
            ) ),
            array( 'core/heading', array(
                'placeholder' => 'Add Author...',
            ) ),
            array( 'core/paragraph', array(
                'placeholder' => 'Add Description...',
            ) ),
        ),
    );
    register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

Example 2: those empty array() should be allow to store some options, right?

$template = array(
    array( 'core/paragraph', array(
        'placeholder' => 'Add a root-level paragraph',
    )),
    array( 'core/columns', array(), array(
        array( 'core/column', array(), array(
            array( 'core/image', array() ),
        )),
        array( 'core/column', array(), array(
            array( 'core/paragraph', array(
                'placeholder' => 'Add a inner paragraph'
            )),
        )),
    ))
);

1 Answer 1

8

Option 1

Browse the block-library package in the Gutenberg's GitHub repository, and find the block metadata in a JSON file named block.json of the specific block. For example, for the core/image block, you can find the metadata (e.g. all available/supported attributes) here:

https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/image/block.json

So basically, the URL format is:

https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/{name}/block.json

where {name} is the block name without the core/ part.

Option 2 (PHP)

For blocks registered using the PHP/WordPress function register_block_type, you can use this to get the block attributes:

$block = WP_Block_Type_Registry::get_instance()->get_registered( 'core/latest-posts' );
$attrs = $block ? $block->get_attributes() : [];
var_dump( $attrs, $block );

Option 3 (JavaScript)

For blocks registered using the JavaScript function wp.blocks.registerBlockType, you can use this to get the block attributes:

var block = wp.blocks.getBlockType('core/gallery');
var attrs = block ? block.attributes : {};
console.log( attrs, block );
4
  • 4
    It’s a little bit annoying that after almost 1/2 year since publishing Gutenberg in WP, there documentation for it is still as bad... :( Apr 24, 2019 at 4:43
  • 1
    wonderful answer and information! Detail and helpful, so glad to have you replied the question and wish it helps other as well.
    – kevinckc
    Apr 24, 2019 at 4:44
  • 1
    @KrzysiekDróżdż, indeed.. :/ And the block.json is actually a new thing. In the previous Gutenberg releases, the block attributes are saved in blockAttributes but not in all block (the main index.js).
    – Sally CJ
    Apr 24, 2019 at 4:54
  • @kevinckc, I hope so, too! And +1 for the helpful question. :)
    – Sally CJ
    Apr 24, 2019 at 4:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.