web-dev-qa-db-ja.com

グーテンベルクリッチテキスト

カスタムブロックにRichText APIを使用しています。

<RichText
  tagName="a"
  className="button"
  placeholder={ __( 'Button text...' ) }
  value={ buttonText }
  onChange={ ( value ) => setAttributes( { buttonText: value } ) }
 />

要素をリンクにしたいのでタグ名としてaを使用していますが、URLを追加する方法がわかりません。 href属性を追加することは可能ですか？ RichTextにhref="some URL"を追加しても機能しません。私はドキュメントを見てグーグルしましたが、ガイダンスが見つかりませんでした。

javascriptblock-editor
1
CyberJ

正式なグーテンベルクボタンブロックに従って、完全なコードを貼り付けてください。ボタンリンク、テキストに使用する追加のブロック属性が必要です -

https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/button/index.js

<RichText.Content
    tagName="a"
    className={ linkClass }
    href={ url }
    title={ title }
    style={ buttonStyle }
    value={ text }
/>

ご覧のとおり、 URL、Title＆Text 属性があります。

url: {
        type: 'string',
        source: 'attribute',
        selector: 'a',
        attribute: 'href',
    },
    title: {
        type: 'string',
        source: 'attribute',
        selector: 'a',
        attribute: 'title',
    },
    text: {
        type: 'array',
        source: 'children',
        selector: 'a',
    },
1
Ashiquzzaman Kiron