カスタムブロックでのdeprecatedについて
-
お世話になります。
独自のカスタムブロックを作成していて詰まってしまったので、こちらでご質問させて頂きます。
環境としてはWSL2内、wp-envにて開発しています。<h4>タイトル<span>文字</span></h4>
これを、
<div className="title"><h4>タイトル</h4><span>文字</span></div>
このようなHTML構造に変更したいと考えています。index.js
import metadata from './block.json'; import deprecated from './deprecated'; import edit from './edit'; import save from './save'; import example from './example'; const { name } = metadata; export { metadata, name }; export const settings = { icon: 'id-alt', deprecated, edit, save, example, };
deprecated.js
export default [ { attributes: { ...blockAttributes, titleLevel: { type: 'string', default: 'h4', }, }, save(attributes) { const { title, titleLevel} = attributes; const TitleTag = titleLevel; return ( <div className="l-ttl-wrap"> <div className="l-ttl"> <TitleTag className="ttl"> <RichText.Content value={title} /> </TitleTag> {!RichText.isEmpty(kana) && ( <span className="kana"> <RichText.Content value={kana} /> </span> )} </div> </div> ); }, deprecated: [ { migrate({ text }) { return { titleLevel: text, }; }, save(attributes) { const { title, } = attributes; return ( <div className="l-desc"> <h4 className="l-ttl"> <RichText.Content value={title} /> {!RichText.isEmpty(kana) && ( <span className="kana"> <RichText.Content value={kana} /> </span> )} </h4> </div> ); }, }, ], }, ];
このようなdeprecated.jsを書いてみていますが、ブロックは壊れたままです。
ご質問としまして、
- deprecated.jsが動作していることを確認する方法は、何かありますでしょうか?(console.logのような)
- HTML構造が変わる場合の書き方で、参考になるようなサイト等はありますでしょうか?
となります。
https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-deprecation/
こちらのマニュアルは読んでいますが、自分の理解力が足りないため、実装として合っているのかも分かっておりません。ご面倒な質問だと思いますが、アドバイス頂ければ幸いです。
何卒宜しくお願いいたします。
4件の返信を表示中 - 1 - 4件目 (全4件中)
4件の返信を表示中 - 1 - 4件目 (全4件中)
- トピック「カスタムブロックでのdeprecatedについて」には新たに返信することはできません。