Looking for all available options of Gutenberg Block

admin管理员组

文章数量:1022612

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'
            )),
        )),
    ))
);

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'
            )),
        )),
    ))
);

• block-editor

Share Improve this question edited Apr 24, 2019 at 3:43 kevinckc asked Apr 24, 2019 at 3:38 kevinckckevinckc 7311 silver badge77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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/WordPress/gutenberg/blob/master/packages/block-library/src/image/block.json

So basically, the URL format is:

https://github/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 );

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'
            )),
        )),
    ))
);

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'
            )),
        )),
    ))
);

• block-editor

Share Improve this question edited Apr 24, 2019 at 3:43 kevinckc asked Apr 24, 2019 at 3:38 kevinckckevinckc 7311 silver badge77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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/WordPress/gutenberg/blob/master/packages/block-library/src/image/block.json

So basically, the URL format is:

https://github/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 );

本文标签： Looking for all available options of Gutenberg Block