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

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

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

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

Q&A

1回答

703閲覧

【カスタムブロック】aタグに入力値が出力されません

jarinko-girl

総合スコア16

WordPress

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

0グッド

0クリップ

投稿2021/03/30 23:46

前提・実現したいこと

バナー型のカスタムブロックを作成中で、
aタグ部分に、RichTextで入力してもらった値を出力させたいです。

発生している問題・エラーメッセージ

入力値が出力されません。

ご教授のほど、宜しくお願いいたします。

該当のソースコード

js

1// バナーのブロック 2( function( blocks, editor, i18n, element, components, _ ) { 3 var __ = i18n.__; 4 var el = element.createElement; 5 var RichText = editor.RichText; 6 var MediaUpload = editor.MediaUpload; 7 8 blocks.registerBlockType( 'rslb-block/banner', { 9 title: __( 'バナー', 'rslb-block' ), 10 icon: 'megaphone', 11 category: 'custom-block', 12 attributes: { 13 bannerMediaID: { 14 type: 'number', 15 }, 16 bannerMediaURL: { 17 type: 'string', 18 source: 'attribute', 19 selector: 'img', 20 attribute: 'src', 21 }, 22 RichTextText: { 23 type: 'array', 24 default: '', 25 source: 'children', 26 selector: '.RichTextText', 27 }, 28 RichTextLink: { 29 type: 'array', 30 default: '', 31 source: 'children', 32 selector: '.RichTextLink', 33 }, 34 }, 35 36 edit: function( props ) { 37 var attributes = props.attributes; 38 39 var bannerSelectImage = function( media ) { 40 return props.setAttributes( { 41 bannerMediaURL: media.url, 42 bannerMediaID: media.id, 43 } ); 44 }; 45 46 return el( 47 'div', 48 { className: props.className }, 49 el( 50 'div', 51 { className: 'banner-area' }, 52 el( 53 'div', 54 { className: 'banner-text-area' }, 55 el( RichText, { 56 tagName: 'div', 57 className: 'RichTextText', 58 inline: false, 59 placeholder: i18n.__( 60 'ここにBannerのテキストを入力', 61 'rslb-block' 62 ), 63 value: props.attributes.RichTextText, 64 onChange: function( value ) { 65 props.setAttributes( { RichTextText: value } ); 66 }, 67 } ), 68 el( RichText, { 69 tagName: 'div', 70 className: 'RichTextLink', 71 inline: false, 72 placeholder: i18n.__( 73 'ここにBannerのリンクを入力', 74 'rslb-block' 75 ), 76 value: props.attributes.RichTextLink, 77 onChange: function( value ) { 78 props.setAttributes( { RichTextLink: value } ); 79 }, 80 } ), 81 ), 82 el( 83 'div', 84 { className: 'banner-image' }, 85 el( MediaUpload, { 86 onSelect: bannerSelectImage, 87 allowedTypes: 'image', 88 value: attributes.bannerMediaID, 89 render: function( obj ) { 90 return el( 91 components.Button, 92 { 93 className: attributes.bannerMediaID 94 ? 'image-button' 95 : 'button button-large', 96 onClick: obj.open, 97 }, 98 ! attributes.bannerMediaID 99 ? __( 'Banner画像を選択', 'rslb-block' ) 100 : el( 'img', { src: attributes.bannerMediaURL } ) 101 ); 102 }, 103 } ) 104 ), 105 ), 106 ) 107 }, 108 save: function( props ) { 109 var attributes = props.attributes; 110 111 return el( 112 'div', 113 { className: props.className }, 114 attributes.bannerMediaURL && 115 ('a',{ href: attributes.RichTextLink }, ←該当部分 116 el( RichText.Content, { 117 tagName: 'div', 118 className: 'RichTextLink', 119 value: attributes.RichTextLink 120 } ), 121 el( RichText.Content, { 122 tagName: 'div', 123 className: 'RichTextText', 124 value: attributes.RichTextText 125 } ), 126 el( 127 'div', 128 { className: 'banner-image gray-shadow-7' }, 129 el( 'img', { src: attributes.bannerMediaURL } ) 130 ) 131 ) 132 ); 133 }, 134 } ); 135} )( 136 window.wp.blocks, 137 window.wp.editor, 138 window.wp.i18n, 139 window.wp.element, 140 window.wp.components, 141 window._ 142);

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

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

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

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

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

guest

回答1

0

('a' → el('a'

第三引数のchildrenは配列にするか
Fragmentコンポーネントでひとまとまりに

RichTextはaタグを含みうるので
RichTextをaタグで囲むのはあまり望ましくない

投稿2021/03/31 02:25

KazuhiroHatano

総合スコア7819

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問