【WordPress】LinkControl の使い方｜カスタムブロックにリンク設定UIを追加する方法

// components ではなく block-editor パッケージにある
import { LinkControl } from '@wordpress/block-editor';

import { LinkControl } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';

function Example() {
    // { url: 'https://example.com', opensInNewTab: true } のような形
    const [ link, setLink ] = useState( {} );

    return (
        <LinkControl
            value={ link }
            onChange={ ( newValue ) => setLink( newValue ) }
        />
    );
}

// 分割代入で必要なキーだけ取り出すのが分かりやすい
const onChangeLink = ( { url: newURL = '', opensInNewTab } ) => {
    setAttributes( {
        url: newURL,
        linkTarget: opensInNewTab ? '_blank' : undefined,
    } );
};

import { __ } from '@wordpress/i18n';
import { LinkControl } from '@wordpress/block-editor';

// 既定の「新しいタブで開く」を残したまま項目を追加する
const LINK_SETTINGS = [
    ...LinkControl.DEFAULT_LINK_SETTINGS,
    { id: 'nofollow', title: __( 'Mark as nofollow', 'my-blocks' ) },
];

<LinkControl
    value={ linkValue }
    settings={ LINK_SETTINGS }
    onChange={ onChangeLink }
/>

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-blocks/link-card",
  "title": "Link Card",
  "category": "design",
  "textdomain": "my-blocks",
  "attributes": {
    "label": {
      "type": "string",
      "source": "html",
      "selector": "a,span"
    },
    "url": {
      "type": "string",
      "source": "attribute",
      "selector": "a",
      "attribute": "href"
    },
    "linkTarget": {
      "type": "string",
      "source": "attribute",
      "selector": "a",
      "attribute": "target"
    },
    "rel": {
      "type": "string",
      "source": "attribute",
      "selector": "a",
      "attribute": "rel"
    }
  },
  "editorScript": "file:./index.js",
  "style": "file:./style-index.css"
}

import { __ } from '@wordpress/i18n';
import { useState, useMemo, useEffect } from '@wordpress/element';
import {
    useBlockProps,
    RichText,
    BlockControls,
    LinkControl,
} from '@wordpress/block-editor';
import { ToolbarButton, Popover } from '@wordpress/components';
import { link, linkOff } from '@wordpress/icons';

const NEW_TAB_TARGET = '_blank';
const NEW_TAB_REL = 'noopener';

export default function Edit( { attributes, setAttributes, isSelected } ) {
    const { label, url, linkTarget } = attributes;

    // ポップオーバーの基準にするブロックの DOM 要素。
    // ref ではなく state に入れるのは、要素が決まった時点で再描画させるため
    const [ popoverAnchor, setPopoverAnchor ] = useState( null );
    const blockProps = useBlockProps( { ref: setPopoverAnchor } );

    // URL 入力欄を開いているかどうか
    const [ isEditingURL, setIsEditingURL ] = useState( false );
    const isURLSet = !! url;

    // target="_blank" ⇔ opensInNewTab の変換
    const opensInNewTab = linkTarget === NEW_TAB_TARGET;

    // value は毎回同じ参照を渡す（理由は後述）
    const linkValue = useMemo(
        () => ( { url, opensInNewTab } ),
        [ url, opensInNewTab ]
    );

    // 他のブロックを選んだら編集モードを閉じる
    useEffect( () => {
        if ( ! isSelected ) {
            setIsEditingURL( false );
        }
    }, [ isSelected ] );

    const onChangeLink = ( { url: newURL = '', opensInNewTab: newTab } ) => {
        setAttributes( {
            url: newURL,
            // false のときは undefined にして属性ごと消す
            linkTarget: newTab ? NEW_TAB_TARGET : undefined,
            rel: newTab ? NEW_TAB_REL : undefined,
        } );
    };

    const unlink = () => {
        setAttributes( {
            url: undefined,
            linkTarget: undefined,
            rel: undefined,
        } );
        setIsEditingURL( false );
    };

    return (
        <>
            <BlockControls group="block">
                <ToolbarButton
                    name="link"
                    icon={ isURLSet ? linkOff : link }
                    title={
                        isURLSet
                            ? __( 'Unlink', 'my-blocks' )
                            : __( 'Link', 'my-blocks' )
                    }
                    isActive={ isURLSet }
                    onClick={
                        isURLSet ? unlink : () => setIsEditingURL( true )
                    }
                />
            </BlockControls>

            <div { ...blockProps }>
                <RichText
                    tagName="span"
                    value={ label }
                    onChange={ ( value ) =>
                        setAttributes( { label: value } )
                    }
                    placeholder={ __( 'Link text…', 'my-blocks' ) }
                />
            </div>

            { isSelected && ( isEditingURL || isURLSet ) && (
                <Popover
                    placement="bottom"
                    anchor={ popoverAnchor }
                    onClose={ () => setIsEditingURL( false ) }
                    focusOnMount={ isEditingURL ? 'firstElement' : false }
                    shift
                >
                    <LinkControl
                        value={ linkValue }
                        onChange={ onChangeLink }
                        onRemove={ unlink }
                        forceIsEditingLink={ isEditingURL }
                    />
                </Popover>
            ) }
        </>
    );
}

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
    const { label, url, linkTarget, rel } = attributes;

    return (
        <div { ...useBlockProps.save() }>
            { url ? (
                <RichText.Content
                    tagName="a"
                    href={ url }
                    // undefined を渡すと属性自体が出力されない
                    target={ linkTarget }
                    rel={ rel }
                    value={ label }
                />
            ) : (
                <RichText.Content tagName="span" value={ label } />
            ) }
        </div>
    );
}

const linkValue = useMemo(
    () => ( {
        url,
        opensInNewTab: linkTarget === NEW_TAB_TARGET,
        // rel の文字列から真偽値に戻す
        nofollow: !! rel?.includes( 'nofollow' ),
    } ),
    [ url, linkTarget, rel ]
);

const onChangeLink = ( { url: newURL = '', opensInNewTab, nofollow } ) => {
    // トグルの状態から rel を組み立て直す
    const relParts = [];

    if ( opensInNewTab ) {
        relParts.push( NEW_TAB_REL );
    }
    if ( nofollow ) {
        relParts.push( 'nofollow' );
    }

    setAttributes( {
        url: newURL,
        linkTarget: opensInNewTab ? NEW_TAB_TARGET : undefined,
        // 空配列のときは undefined にして rel 属性を消す
        rel: relParts.length ? relParts.join( ' ' ) : undefined,
    } );
};

// edit の引数から clientId を受け取っておく
<LinkControl
    key={ clientId }
    value={ linkValue }
    onChange={ onChangeLink }
/>