WPのブロックエディタでタグをドロップダウンで変更する:メモ

別件試作中に知った事柄を試したのでメモとして。

実現したいこと

• ドロップダウンを用いてタグをdivやsectionなど別のものに変更する

イメージとしては、汎用的に使えるラッパー要素用ブロックを作るというものです。

選択方法がドロップダウンである必要性は薄いので、ラジオボタンなど他の種類に変更しても特に問題はありません。

サンプルコード

{
  //省略
　　　　"attributes": {
　　　　　　"TagName": {
　　　　　　　　"type": "string",
　　　　　　　　"default": "div"
　　　　　　}
　　　　},
　　//省略
}

import {　InnerBlocks,　InspectorControls　} from '@wordpress/block-editor';
import { SelectControl, PanelBody } from '@wordpress/components';

export default function Edit({ attributes, setAttributes, }) {
  const { TagName } = attributes;

  return (
    <>
      <InspectorControls>
        <PanelBody title="ラッパーのHTMLタグ指定" initialOpen={true}>
          <SelectControl
            label="タグ指定"
            options={[
              { label: 'Default (<div>)', value: 'div' },
              { label: '<header>', value: 'header' },
              { label: '<main>', value: 'main' },
              { label: '<section>', value: 'section' },
              { label: '<article>', value: 'article' },
              { label: '<aside>', value: 'aside' },
              { label: '<footer>', value: 'footer' },
            ]}
            value={　TagName　}
            onChange={　(　value　) =>
              setAttributes(　{ TagName: value }　)
            }
          />
        </PanelBody>
      </InspectorControls>
      <TagName {...blockProps}>
        <InnerBlocks />
      </TagName>
    </>
  );
}

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
export default function save( { attributes } ) {
  const { TagName } = attributes;
  const blockProps = useBlockProps.save( {
    className: `div-wrap`,
  } );

  return (
    <TagName { ...blockProps }>
      <InnerBlocks.Content />
    </TagName>
   );
}

上記は以下を参考にしました。

• gutenberg/packages/block-library/src/group at trunk · WordPress/gutenberg
  互換性を意図して作っている旨がコメント内に書かれている

参考にしたコードでは、attributesのtagName値を一旦分割代入でTagNameに入れデフォルトの値も設定しており、やや婉曲な方法に見えました。

そこで試作したコードでは、return内にコンポーネントとして書けるTagNameをattributesに設定してみたところ、特にエラーもなく動かすことができました。

結び

参考にしたコードから削ったサンプルなので少々不安ではありますが、動作は確認できると思います。