WordPress Block Bindings API でブロックにひもづいたカスタムフィールド編集を試す

WordPress の Block Bindings API でブロックにひもづけられたカスタムフィールドの編集機能を試しました。

Block Bindings API は WordPress 6.5 で導入されました。 6.5 ではカスタムフィールドへのひもづけはできましたが、読み取り専用でした。 WordPress 6.6 でそれが読み取り・書き込み両方できるようになりました。

動画内で使用したコードをこちらに載せてきます。 再現したい方・ Block Bindings API を試したい方はお使いください。

functions.php:

add_action( 'init', function () {

register_meta(
    'post',
    'book-genre',
    [
        'show_in_rest' => true,
        'single'       => true,
        'type'         => 'string',
        'default'      => 'Default text field',
    ]
);

register_meta(
    'post',
    'book-author',
    [
        'show_in_rest' => true,
        'single'       => true,
        'type'         => 'string',
        'default'      => 'Default text field',
    ]
);

} );

コードエディタの Book Genre:

<!-- wp:paragraph {
    "metadata":{
        "bindings":{
            "content":{
                "source":"core/post-meta",
                "args":{
                    "key":"book-genre"
                }
            }
        }
    }
} -->
<p></p>
<!-- /wp:paragraph -->

コードエディタの Book Author:

<!-- wp:paragraph {
    "metadata":{
        "bindings":{
            "content":{
                "source":"core/post-meta",
                "args":{
                    "key":"book-author"
                }
            }
        }
    }
} -->
<p></p>
<!-- /wp:paragraph -->

同期パターンのオーバーライドと組み合わせ:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"book-genre"}},"__default":{"source":"core/pattern-overrides"}},"name":"Genre"}} -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"book-author"}},"__default":{"source":"core/pattern-overrides"}},"name":"Author"}} -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

WordPress.org 参考ページ

• Editing custom fields from connected blocks – Make WordPress Core
• New Feature: The Block Bindings API – Make WordPress Core

関連ページ

• Exploring WordPress 6.6