web-dev-qa-db-ja.com

Gutenbergコアブロックにカスタム属性を追加する方法を教えてください。

フロントエンドに追加されるデータ属性を選択するために、Wordpressのコアブロックにドロップダウンを追加しようとしています（例：data-attr = "value-from-dropdown"）。

解決策は、コアブロックにカスタム属性を追加し、それをバックエンドに設定してフロントエンドに渡すことであると思いますが、私の人生のためにはどのように新しい属性を追加するのかわからないコアブロックこれは私が得た最も近いものですが、これはドロップダウンを作成することを可能にし、内部でprops.setAttribute（）を実行しても動作しません。

https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/#editor-blockedit

できることはありますか、それともまだ機能がないのでしょうか。

block-editor
4
Eric Murphy

最初の編集機能の中であなたのドロップダウンオプションで変数を宣言します - 

const linkOptions = [
        { value: 'small', label: __( 'Small' ) },
        { value: 'normal', label: __( 'Normal' ) },
        { value: 'medium', label: __( 'Medium' ) },
        { value: 'large', label: __( 'Large' ) },
    ];

サイドバーパネルにドロップダウンオプションが表示されると思います。これはpanelbodyのコードとドロップダウン値を取得する方法です - 

<PanelBody>
  <SelectControl
    label={ __( 'Size' ) }
    value={ size }
    options={ linkOptions.map( ({ value, label }) => ( {
    value: value,
    label: label,
    } ) ) }
    onChange={ ( newSize ) => { setAttributes( { size: newSize } ) } }
   />
</PanelBody>

これにより、インスペクタ領域にドロップダウンパネルが表示されます。値と対応するラベルを繰り返し処理するには（ES6）Map関数を使用しています。今、あなたがHTMLノードを呼び出すRichTextコンポーネントが来ます - 

<RichText
      tagName={ 'span' }
      placeholder={ __( 'Enter Text' ) }
      value={ text }
      onChange={ (text) => setAttributes( { text: text } ) }
      formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
      className={`button-${size}`} /*ES6 Template Literals*/
      isSelected={ isSelected }
      keepPlaceholderOnFocus
/>

注意、ドロップダウンオプションによって異なります。ボタンのサイズはHTMLノードのクラス名に添付されます。エディタのスタイルシートで、CSSクラスとプロパティをいくつか追加します - 

button-small
button-normal
button-medium
button-large

保存機能について - 

const save = ( props ) => {

    const {  size } = props.attributes;


    return (
        <div className={ `ubutton-${size}` }>

        </div>
    );
}
2
Ashiquzzaman Kiron

blocks.registerBlockType フィルターを使用して、登録済みブロックにカスタム属性を追加できます。

/**
 * Filter the attributes for all blocks to add custom ones
 *
 * Name can be used to only add the new attribute to a certain block.
 *
 * @param settings
 * @param name
 * @returns {*}
 */
function addCustomAttributes( settings, name ) {
    if ( settings.attributes ) {

        settings.attributes.customAttribute = {
            type: 'string',
            default: ''
        };

        settings.attributes.anotherCustomAttribute = {
            type: 'boolean',
            default: false
        };
    }
    return settings;
}

addFilter( 'blocks.registerBlockType', 'namespace/filterBlockAttributes', addCustomAttributes );
0
Welcher