カスタムブロックのInnnerBlock & RichTextについて

  • 解決済 mihopress

    (@mihopress)


    1年、 11ヶ月前

    はじめまして。
    カスタムブロックの練習を兼ねて表のマス(実際にはtableではなくdivなどで囲って表にする予定)を作り、マスは入力可能にし ul liで出力できるように書いているのですが、どうもうまくいきません。

    初めは、 InnnerBlocksを１つ１つのマスに入れて入力時にlistブロックを選べればいいかと思ったのですが、 どうやらInnnerBlocksは1つのブロックに1つまでとのことで、使用を断念しました。

    代わりに RichTextを使用しました。ul liの部分は苦戦しましたがどうにかできました。

    マスの数が多いので、手動では非効率と考え mapを使おうと思ったのですが、attributes から分割代入した それぞれのマス用の値をまとめて新しいオブジェクトにして、それを配列にすることで map を使用できるようにしましたが、なぜかうまくいきません。

    具体的に何がうまくいかないかというと、値を入力して更新ボタンを押しても値が全て消えてしまう & フロント側にも表示がされないなどです。

    各ファイルの記述は以下の通りです

    block.json

    "attributes": {

"cell_0" : {

"type" : "string",

"default" : "てすと１",

"source" : "html",

"selector": "li"

},

"cell_1" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_2" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_3" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_4" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_5" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_6" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_7" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_8" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_9" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_10" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_11" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_12" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_13" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_14" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_15" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_16" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

},

"cell_17" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_18" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_19" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_20" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_21" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_22" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_23" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_24" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_25" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_26" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_27" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_28" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_29" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_30" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_31" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_32" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_33" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_34" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_35" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"cell_36" : {

"type" : "string",

"default" : "",

"source" : "html",

"selector": "li"

}

,

"rlt_time" : {

"type" : "string",

"default" : ""

}

}

    edit.js

    import { __ } from '@wordpress/i18n';

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

import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {

const { cell_0, cell_1, cell_2, cell_3 } = attributes;

const newObj = { cell_0, cell_1, cell_2, cell_3 };

const { rlt_time } = attributes;

console.log( newObj );

return (

<div { ...useBlockProps() }>

<div className="rlt_title">▼みんなの予想数字!</div>

<div className = "rlt_time">

<RichText

tagName = "div"

value = { rlt_time }

onChange = { ( value ) => {

setAttributes({ rlt_time: value });

} }

/>

</div>

{ Object.keys( newObj ).map( ( cell_x ) => (

<>

<RichText

tagName = 'ul'

multiline = 'li'

placeholder = "名前を入力"

className = { cell_x }

value = { cell_x }

onChange = {( value ) => {

setAttributes({ cell_x : value });

}}

/>

</>

))

}

{/*

<RichText

tagName ="div"

value = {cell_3} // attributeで設定した名前

onChange = {(value) => {

setAttributes({ cell_3: value });

} }

/> */

}

</div>

);

}

    save.js

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

export default function save( { attributes } ) {

const { cell_0, cell_1, cell_2, cell_3 } = attributes;

const newObj = { cell_0, cell_1, cell_2, cell_3 };

const { rlt_time } = attributes;

console.log( newObj );

return (

<div { ...useBlockProps.save() }>

<div className="rlt_title">▼みんなの予想数字</div>

<div className = "rlt_time">

<RichText.Content

tagName = "div"

className = "rlt_time"

value = {rlt_time}

/>

</div>

{ Object.keys( newObj ).map( ( cell_x ) => (

<>

<RichText.Content

tagName = 'ul'

multiline = 'li'

className = { cell_x }

value = { cell_x }

/>

</>

))

}

{/* <RichText.Content

tagName = "div"

value = { cell_3 }

/> */}

</div>

);

}

    また、warningで　以下の文章がでておりました。

    wp.blockEditor.RichText multiline prop is deprecated since version 6.1 and will be removed in version 6.3. Please use nested blocks (InnerBlocks) instead. See

    なので、結局このやり方ではダメな気がしております。

    ではどのようにInnerBlocksを複数使うかでつまづきました。

    詳しい方いらっしゃいましたらアドバイス頂けますと幸いです。

    どうぞよろしくお願いいたします。

    • このトピックはmihopressが1年、 11ヶ月前に変更しました。
5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック投稿者 mihopress

    (@mihopress)

    1年、 11ヶ月前

    InnerBlocksに templateというものを使用するといけそうです。

    一旦こちらで進めてみます…!

    <InnerBlocks

className="items"

template={ MY_TEMPLATE }

templateLock="all"

/>
    Aki Hamano

    (@wildworks)

    1年、 11ヶ月前

    RichTextのmultilineコンポーネントは、ブラウザコンソールで出力されている通り、WordPress6.3で使えなくなる予定です。

    なので、一般的にはinnerBlockで置き換えますが、子にブロックではなくテキストを複数保持できるだけで良ければ、attirbutesの型を配列にすればよいと思います。現状のように、セル一つ一つをstring型でハードコーディングすると、増減に対応出来ないと思います。

    具体的な実装方法は、コアのテーブルブロックが参考になると思います。

    トピック投稿者 mihopress

    (@mihopress)

    1年、 11ヶ月前

    @wildworks さん

    ご返信ありがとうございます。配列を指定することもできるんですね！とても勉強になります m( _ _ )m

    今回の表に関してですが、セルの数は固定とし、中は ul li にしようと思っておりました。

    一旦

    // セル定義

const MY_TEMPLATE = [

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ],

[ 'core/list' , {} ]

]
    <div { ...useBlockProps() }>

<div className="rlt_title">▼みんなの予想数字!</div>

<div className = "rlt_time">

<RichText

tagName = "div"

value = { rlt_time }

onChange = { ( value ) => {

setAttributes({ rlt_time: value });

} }

/>

</div>

<div className="items">

<InnerBlocks

className="items"

template={ MY_TEMPLATE }

templateLock="all"

/>

</div>

</div>

    こちらで 決まった数の中セルに ul liを設定することはできるようになりました。

    • この返信は1年、 11ヶ月前にmihopressが編集しました。
    Aki Hamano

    (@wildworks)

    1年、 11ヶ月前

    細かいレビューや不具合調査は工数がかかるため控えたいと思いますが、二つだけアドバイスを残します。

    テンプレートに入れたい数だけ要素をハードコーディングしなくても、以下のように map 関数で実現出来ます。

    const MY_TEMPLATE = [ ...Array(10) ].map( () => [ 'core/list', {} ] );

    また edit.js の InnerBlocks コンポーネントは、余計な div タグが増えるのでスタイリングしにくいです。代わりにフックを使うとよいです。

    Take more control over Inner Block Areas (as a block developer)

    トピック投稿者 mihopress

    (@mihopress)

    1年、 11ヶ月前

    @wildworks さん

    アドバイスありがとうございます m( _ _ )m

    templateをmapで書くことによりとてもコードがすっきりしました!

    フックについてはこれから調べて試してみようと思います。

    とても勉強になりましたありがとうございました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「カスタムブロックのInnnerBlock & RichTextについて」には新たに返信することはできません。