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

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

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

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

WordPress

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

PHP

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

React.js

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

Q&A

受付中

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

Ashi
Ashi

総合スコア134

Gutenberg(エディタ)

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

WordPress

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

PHP

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

React.js

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

1回答

0グッド

0クリップ

1342閲覧

投稿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が引数としてうまく引き渡せていないのかなと思っています

お願い

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

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

イメージ説明

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答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

総合スコア7706

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

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

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Gutenberg(エディタ)

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

WordPress

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

PHP

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

React.js

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