質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1629閲覧

WordPress Gutenbergブロック開発で見出し編集中にEnterを押すと改行してしまう

yasutomi

総合スコア2937

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/11/10 11:00

WordPress Gutenbergブロック開発で見出しを追加できるようにしたいのですが
以下のコードで追加できるようにしても編集中にEnterを押すと次のブロックに遷移せずに
見出しの中で改行してしまいます。

おそらく改行しないようにするために必要な記述が抜けていると思うのですが
Block Editor Handbookを見ても足りないものが見つけられなかったため
ご存じの方がおられましたらご教授願います。
https://developer.wordpress.org/block-editor/

javascript

1(function(blocks, element, blockEditor) { 2 const el = element.createElement; 3 const RichText = blockEditor.RichText; 4 5 blocks.registerBlockType( 6 'my-blocks/h2-icon', 7 { 8 title: 'h2.icon', 9 icon: 'star-filled', 10 category: 'common', 11 attributes: { 12 text: { 13 type: 'string', 14 source: 'html', 15 selector: 'h2', 16 }, 17 style: { 18 type: 'string', 19 } 20 }, 21 edit(props) { 22 function onChangeContent( newContent ) { 23 props.setAttributes( { myContent: newContent } ); 24 }, 25 return el( 26 RichText, 27 { 28 tagName: 'h2', 29 className: 'icon', 30 onChange: onChangeContent, 31 value: props.attributes.myContent, 32 } 33 ); 34 }, 35 save(props) { 36 return el( 37 RichText.Content, 38 { 39 tagName: 'h2', 40 className: 'icon', 41 value: props.attributes.myContent, 42 } 43 ); 44 }, 45 } 46 ); 47}( 48 window.wp.blocks, 49 window.wp.element, 50 window.wp.blockEditor 51));

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

RichTextにonSplitとonReplaceを指定

onSplitは新規に追加するブロックを返し
onReplaceはpropsの中に入ってるのをそのまま渡す感じで

コアの見出しブロックがわかりやすい例です

ハンドブックからだとこのページからリンクを貼られてる
RichTextのreadme.mdに一応その辺りの記述があります

投稿2020/11/10 11:47

編集2020/11/10 11:48
KazuhiroHatano

総合スコア7804

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasutomi

2020/11/11 03:20

onSplitとonReplaceの追加で修正できました。 ご回答いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問