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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Gutenberg(エディタ)

Gutenbergとは、WordPressに導入されているエディタです。

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

1768閲覧

WordPress(gutenberg)のカスタムブロックにて、saveのときのclassNameが保存されない

Ashi

総合スコア139

Gutenberg(エディタ)

Gutenbergとは、WordPressに導入されているエディタです。

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/09/06 06:24

カスタムブロックを保存する際の「save()」の関数でclassNameが保存されない原因が全くわからない状態が続いておりますので質問させていただきました。

概要

Gutenbergのカスタムブロックを作成し、任意のスタイルを選択・保存→反映されるようにしたいのですが
最後のsaveのところでうまく動作しない

//ブロックが作れるようにregisterBlockTypeを読み込む const { registerBlockType } = wp.blocks; //editやsave内で<Fragment>が使えるように、 wp.elementから読み込む const { Fragment } = wp.element; //editやsave内で<RichText>などが使えるように、 wp.editorから読み込む //サイドバー内への配置をしている<InspectorControls>もここで設定 const { RichText, BlockControls, AlignmentToolbar, InspectorControls, } = wp.blockEditor //editやsave内で<CheckboxControl>などが使えるように、 wp.componentsから読み込む const { PanelBody, CheckboxControl, TextControl, RadioControl, } = wp.components; const { withState, } = wp.compose; //---------------------------------------------- // 見出し //---------------------------------------------- //カスタムブロックの追加 //'名前空間/カスタムブロック名' ※名前空間はテーマorプラグイン名 registerBlockType( 'mao/customheading', { //カスタムブロックのタイトル/カテゴリは必須 title: '見出し', category: 'original' , //アイコン icon: 'universal-access-alt', //概要 description : '見出しを表示します', //検索用キーワード keywords : ['見出し' , 'タイトル' , 'たいとる' , 'title' , 'heading'], //サポート() supports:{ //独自クラス名の追加蘭を非表示 customClassName: false }, //スタイルの設定(各カスタムブロックの独自の別スタイル) styles:[ { name : 'none' , //'is-style-'の後に追記されるクラス名 label : 'デフォルト',//そのスタイルの表示名 isDefault : true //デフォルトスタイル設定 }, { name : 'headingTypeA' , label : 'スタイルA' }, ], //属性(attributes)と値 //hoge:{}のhogeは任意のワードでおそらくOK //その中に必須の項目は「type:」のみ attributes: { content: { type: 'array', source: 'children', selector: 'h2', }, }, //投稿画面上の表示内容を設定 //attributesは上記で設定した内容をまとめて引数にする //setAttributesは値が変わったときに使用されるらしい(元から用意されているもの) edit( { attributes, setAttributes , className } ) { //attributesでまとめていた各属性を分けて使えるようにする //こうしておけば{alignment}と書けばalignment: centerのように出力される const { content , } = attributes ; //RichTextへの入力内容を取得して更新する function onChangeContent( newContent ) { setAttributes( { content: newContent } ); } return ( <Fragment> {//サイドバーの場所を指定 } <RichText key="editable" tagName="h2" className = {className} onChange={ onChangeContent } value={ content } placeholder='ここに見出しを入力・・・' /> </Fragment> ); }, //saveは保存時の内容を設定。基本的にはそのまま出力されるので、記事表示時の内容とほぼ同義。 //最初に設定し、edit内で操作したattributesの値をattributesと書くことでまとめて引数にしている save( { attributes, className } ) { //attributesでまとめていた各属性を分けて使えるようにする const { content , } = attributes ; return ( <div className={ className }> <RichText.Content className = { className } value={ content } tagName="h2" /> </div> ); }, } );

添付画像のように、「デフォルト」と「スタイルA」の2種類のスタイルを用意しており
編集画面上では、右側の画面からそれぞれのスタイルをクリックするときちんと反映され、HTML上でもタグにクラス名が付与されます

しかし、これを保存してプレビュー画面で見ると、classNameが付与(保存)されておらず、スタイルが反映されません

補足

save()内の

clsssName = { className )

の部分を任意の文字列を入れた場合はきちんと反映されるので
classNameが引数としてうまく引き渡せていないのかなと思っています

お願い

大変恐縮ではございますが
何かヒントやアドバイスをいただけますと幸いです。

初心者のため説明に不足があるかもしれませんが何卒ご容赦くださいますようお願いいたします。

イメージ説明

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

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

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

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

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

guest

回答1

0

editとsaveで返すHTMLの構造が違ってないですかね?
saveでclassNameが2回使われるのはよろしくなかろうかと思われます

jsx

1 return ( 2 <div className={ className }> 3 <RichText.Content 4 className = { className } 5 value={ content } 6 tagName="h2" 7 /> 8 </div> 9 ); 1011 return ( 12 <RichText.Content 13 className = { className } 14 value={ content } 15 tagName="h2" 16 /> 17 );

投稿2020/09/07 04:30

KazuhiroHatano

総合スコア7802

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問