属性セットの変更

時には、古い属性を名前変更または修正するために属性セットを更新する必要があります。

  1. const { registerBlockType } = wp.blocks;
  2. registerBlockType( 'gutenberg/block-with-deprecated-version', {
  3. // ... other block properties go here
  4. attributes: {
  5. content: {
  6. type: 'string',
  7. default: 'some random value',
  8. },
  9. },
  10. save( props ) {
  11. return <div>{ props.attributes.content }</div>;
  12. },
  13. deprecated: [
  14. {
  15. attributes: {
  16. text: {
  17. type: 'string',
  18. default: 'some random value',
  19. },
  20. },
  21. migrate( { text } ) {
  22. return {
  23. content: text,
  24. };
  25. },
  26. save( props ) {
  27. return <p>{ props.attributes.text }</p>;
  28. },
  29. },
  30. ],
  31. } );

上記の例では、pの代わりにdivを使用するようにブロックのマークアップを更新し、text属性をcontentに名前変更しました。

innerBlocksの変更

ブロックを移行する際にinnerBlocksを追加または削除する必要がある状況が存在するかもしれません。

例: ブロックがタイトル属性を段落innerBlockに移行したい場合。

  1. const { registerBlockType } = wp.blocks;
  2. registerBlockType( 'gutenberg/block-with-deprecated-version', {
  3. // ... block properties go here
  4. save( props ) {
  5. return <p>{ props.attributes.title }</p>;
  6. },
  7. deprecated: [
  8. {
  9. attributes: {
  10. title: {
  11. type: 'string',
  12. source: 'html',
  13. selector: 'p',
  14. },
  15. },
  16. migrate( attributes, innerBlocks ) {
  17. const { title, ...restAttributes } = attributes;
  18. return [
  19. restAttributes,
  20. [
  21. createBlock( 'core/paragraph', {
  22. content: attributes.title,
  23. fontSize: 'large',
  24. } ),
  25. ...innerBlocks,
  26. ],
  27. ];
  28. },
  29. save( props ) {
  30. return <p>{ props.attributes.title }</p>;
  31. },
  32. },
  33. ],
  34. } );

上記の例では、タイトル属性の代わりにタイトルを持つ段落innerBlockを使用するようにブロックを更新しました。

上記はブロックの非推奨の例です。より多くの実際の例については、コアブロックライブラリで非推奨を確認してください。コアブロックはリリースごとに更新されており、シンプルな非推奨と複雑な非推奨が含まれています。