Gutenbergのカスタムブロックへのリンクの設置(LinkControl)
-
自作のカスタムブロックにリンクを設置するためにLinkControlをつかいToolbarにリンク追加のボタンを以下のようにして設置しました。
※LinkControlの使い方は以下を参考にしました。
Link Control(GitHub)block.jsonのattributes部分
"attributes": { "post": { "type": "object" }, "linkpressed": { "type":"boolean", "default":false } },
[省略]... edit: (props) => { const { attributes: { post, linkpressed }, setAttributes } = props const blockProps = useBlockProps(); [省略]... return ( <Fragment> <ToolbarButton isPressed={linkpressed} icon={ <svg [省略]...></svg> } label="Link" onClick={toggleVisible} /> {isVisible && <Popover> <LinkControl value={post} withCreateSuggestion={false} onChange={(newPost) => { console.log(newPost); setLink(newPost); } } onRemove={() => { removeLink(); } } > </LinkControl> </Popover>} </Fragment> ); }; [省略]...
という形で一様実現はできたのですが、問題が一点あります。
入力欄の文字を入れると、現在投稿されている一覧と新たにリンクを作るリンクが表示されます。
そこでいずれかをクリックすると問題なくatteributes.postにリンク情報のobjectが入ります。
例)onChange時にconsole.logにて取得した例。{id: 'www.google.co.jp/', title: 'www.google.co.jp/', url: 'http://www.google.co.jp/', type: 'URL'}
問題はこれを修正しようとする時に出ます。
リンクを修正しようと右の鉛筆マークをクリックすると再度入力欄が表示されて、入力すると再度候補一覧が出るのですが、それらをクリックするとき入るobjectのtitleキーには新しい情報ではなく、前回入力したものが入ってきてしまいます。
その他のurlキーなどはきちんと新しいurlが入ります。例)onChange時にconsole.logにて取得した例。
{title: 'www.google.co.jp/', type: 'URL', url: 'http://www.apple.com/jp/'}
また、削除ボタンクリックでonRemoveから一旦attributes.postの中身を一旦クリアしてから新たに入れる場合は問題なく入ります。
attributes.postをクリアする関数部分
const removeLink = () => { setAttributes({ post: {}, linkpressed: false }); toggleVisible(); }
よろしくお願いいたします。
7件の返信を表示中 - 1 - 7件目 (全7件中)
7件の返信を表示中 - 1 - 7件目 (全7件中)
- トピック「Gutenbergのカスタムブロックへのリンクの設置(LinkControl)」には新たに返信することはできません。