サポート » 使い方全般 » Gutenbergのカスタムブロックへのリンクの設置(LinkControl)

  • 解決済 sonic65

    (@sonic65)


    自作のカスタムブロックにリンクを設置するために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();
                }

    よろしくお願いいたします。

    • このトピックはsonic65が3ヶ月、 4週前に変更しました。
    • このトピックはsonic65が3ヶ月、 4週前に変更しました。
    • このトピックはsonic65が3ヶ月、 4週前に変更しました。
7件の返信を表示中 - 1 - 7件目 (全7件中)
  • @sonic65 さん

    こんにちは。
    ご報告の症状は最新のGutenbergでも再現でき、おそらく不具合だと思います。
    issueとして報告したいと思いますが、現状の対策として「title プロパティは使わない」という方法もあります。

    具体的な実装例は、ボタンブロックが参考になります。
    https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/button/edit.js

    なのでattirbutesとしても、オブジェクト(post)としてまるまる保存するのではなく、urlopensInNewTab と分けて定義した方が良いと思います。

    その他気になった点です。

    • linkpressedattributes としては不要(URLの有無で判別できるため)
    • blockProps が使われていない
    • <Fragment><> と書ける(Fragment もインポートしなくてよい)
    • ToolbarButtonBlockControls でラップすべき
    トピック投稿者 sonic65

    (@sonic65)

    @wildworks

    ありがとうございます。
    titleはaタグのtitle属性に入れられたらと便利だなと思ったのですが、使わない方向で調整したいと思います。
    もしくはURLInputButtonなど別の方法を考えたいと思います。

    その他のアドバイスもありがとうございます。

    <Fragment>は<>でOKになったのですよね。失念していました。
    linkpressedは通常のBoolenの変数と定義して、post.urlの有無での判断で簡潔にできました。
    何でもかんでもattributesにしてしまう癖があるので注意したいと思います。

    コード全体ではなく一部を記載したのもでしたので、blockpropsやBlockControlsは使っています。

    色々ありがとうございました。

    トピック投稿者 sonic65

    (@sonic65)

    @wildworks

    少し内容が異なるかもしれませんが、すでに3月2日付けでissueとして上がっていました。
    (英語得意でないので)

    LinkControl Titles do not work as they should. #39160

    この辺りそのうち何らかの仕様の変更がありそうですね。

    • この返信は3ヶ月、 3週前にsonic65が編集しました。
    • この返信は3ヶ月、 3週前にsonic65が編集しました。

    @sonic65 さん

    情報ありがとうございます。
    少し内容は似ているかもしれませんね。

    よろしければ、一度@sonic65さんの方でissueを立てていただく事は可能ですか?

    私も英語は得意ではありませんが、自分でissueを立てる事も一つの勉強・経験になるかと思っています。

    issueを書く時のポイントは、

    • 簡潔で分かりやすいタイトルをつける
    • 症状を再現する具体的な手順、最小限のコードサンプル、検証環境を記載する

    だと思います。

    英語は多少不自然でも気にせず、翻訳ツールを使って書くと良いと思います。

    トピック投稿者 sonic65

    (@sonic65)

    @wildworks

    そうですね、issueを立てるのも経験になりますよね。

    ただ今現在こちらの現象が、バグなのか仕様でそうしているのか少し確信が持てない状態です。

    LinkControlの制作者の意図として、valueへ入れるObjectで、urlキーが設定されている時に表示される「鉛筆アイコン」ボタンをクリックした場合は、リンクのURLのみ修正するもので、その他の情報は変更しないというものとして制作したのかなと思ったりもしています。

    その他(といってもtitleしかない気がしますが)を変更するための機能は自身でカスタマイズするようにとかかなと。

    こう思ったのは、core/paragraphでのテキスト部分をリンクを設置した際の修正する際のポップオーバー(Popover)には、「Text」入力欄があったので、必要ならばこのようにカスタマイズ(自作Popoverを作る?)するように、という意図なのではとか。

    なのでバグの報告というよりも、PopoverにText入力欄を表示する要望なのかなと思ったりしています。
    そうすると、もしかして自作のPopooverを作らなくても何かの設定でこの「Text」入力欄を表示する方法があるのではと思い、今ちょっと方法などないか調べている最中です。

    この辺りもうちょっと調べて、まとめてからissueとしてあげられるようでしたらあげてみたいと思いますが、すぐにできるかはわかりません。

    色々ありがとうございました。

    • この返信は3ヶ月、 3週前にsonic65が編集しました。
    • この返信は3ヶ月、 3週前にsonic65が編集しました。

    @sonic65 さん

    LinkControlの制作者の意図として、valueへ入れるObjectで、urlキーが設定されている時に表示される「鉛筆アイコン」ボタンをクリックした場合は、リンクのURLのみ修正するもので、その他の情報は変更しないというものとして制作したのかなと思ったりもしています。

    →はい、自分ももしかしたらそうなのかもと思っています。
    例えばインラインテキストのリンクにもLinkControlが使われているので、リンクテキスト(=title)は保持する仕様なのかもしれません。

    ※ただ今チェックしましたが、core/paragraphのリンクを修正しようとするとおかしな動き(別の箇所にリンクを作ってしまう)をしていますね。こちらはバグだと思います。

    →もし正確な再現手順が分かれば、ぜひissueを送っていただければと思います。

    そうすると、もしかして自作のPopooverを作らなくても何かの設定でこの「Text」入力欄を表示する方法があるのではと思い、今ちょっと方法などないか調べている最中です。

    →未検証ですが、hasTextControltrue にすれば表示されるかもしれません。
    https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/link-control/index.js#L264

    トピック投稿者 sonic65

    (@sonic65)

    @wildworks

    >未検証ですが、hasTextControl を true にすれば表示されるかもしれません。

    テキスト入力欄が表示されました!
    ありがとうございます。

    ここで様々な設定値がここで見れますね。
    https://github.com/WordPress/gutenberg/blob/35273489104b78d61dc57fa97c7c07ff98340953/packages/block-editor/src/components/link-control/index.js#L124

    README.mdばかり見ていたので見過ごしていました。
    ソースを見ないとダメですね。

    この時にマージされたようですね。
    https://github.com/WordPress/gutenberg/pull/33849

    >※ただ今チェックしましたが、core/paragraphのリンクを修正しようとするとおかしな動き(別の箇所にリンクを作ってしまう)をしていますね。こちらはバグだと思います

    こちらはthemeを変更したら問題が出なくなりましたので、theme側の問題でした。

    本当に色々ありがとうございました。

    • この返信は3ヶ月、 3週前にsonic65が編集しました。
7件の返信を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。