グーテンベルグのシートシート

グーテンベルグのドキュメントは、長い道のりをたどってきました.しかし、今、私は自分自身のプロパティの簡単な概要が見つかりません.このように、カンニングペーパーのアイデア.
これらの個々のプロパティの概要を以下に示しますsupports 詳細についてはdeveloper's documentation :

anchor - booleanfalse .
これは動的ブロック(まだ)で動作しません.

align - boolean/array :falseデフォルトのアラインメントは割り当てられません.デフォルト値を設定する必要がある場合は、align デフォルトで属性.

alignWide - booleanfalse無効wide alignment 単一のブロックに対して.

className - booleantrue既定では、クラス.wp-block-your-block-name 保存されたマークアップのルート要素に追加されます.

color - 対象:nullこの値は、ブロックが色に関連するプロパティの一部をサポートしていることを表します.ブロックエディターは、ユーザーが値を設定するUIコントロールを表示します.

customClassName - booleantrueカスタムクラス名のフィールドがパネルインスペクタで表示されるかどうかを制御します.

defaultStylePicker - booleantrueスタイルピッカーが表示されると、ユーザーはブロックの現在アクティブなスタイルに基づいてブロック型の既定のスタイルを設定できます.

html - booleantrueデフォルトでは、ブロックのマークアップを個別に編集できます.

inserter - booleantrueプログラムを挿入するだけでブロックを隠すには、inserter: false .

multiple - booleantrueブロックを1回だけ各ポストに挿入する場合.

reusable - booleantrueブロックを再利用可能なブロックに変換するのを防ぐことができます.

spacing - 対象:nullスペースに関連するCSSスタイルプロパティのいくつかを有効にすることができます.マージンとパディングを上書きするならthe theme declares support .
サブプロパティ

margin - boolean/array :false

padding - boolean/array :false

typography - 対象:null有効にすると、ブロックエディタでタイポグラフィUIが表示されます.
サブプロパティ

fontsize -論理型:false

lineheight -論理型:false

によって追加された属性の値supports オブジェクトは、useBlockProps() フック.
内部Edit 機能

function Edit() {
    const blockProps = useBlockProps();
    return (
        <div {...blockProps}>Lorem ipsum</div>
    );
}

Save 機能

function Save() {
    const blockProps = useBlockProps.save();
    return (
        <div {...blockProps}>Lorem ipsum</div>
    );
}

動的とサーバー側レンダリングブロックのこれらの余分な属性をレンダリングすることができますrender_callback 関数を使用するPHPではget_block_wrapper_attributes() . すべての生成されたプロパティを含む文字列を返し、ラップブロック要素の開始タグに出力を取得する必要があります.

function render_block() {
    $wrapper_attributes = get_block_wrapper_attributes();
    return sprintf(
        '<div %1$s>%2$s</div>',
        $wrapper_attributes,
        'Lorem ipsum'
    );
}

カバーイメージEmma Plunkett – The Missing Peace