ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス公式チュートリアルでブロックを作成③【テキスト入力機能をつける】

『ブロックを自作したい』
『ブロックをカスタマイズしたい』

そう考えてワードプレス公式ページのブロック作成チュートリアルに取り組んでみたけれども、わかりにくくて途中で挫折した。

そんなあなたに向けて贈る記事の第三弾です。公式サイトのチュートリアルを参考にして記事第二弾で作成したブロックの雛形をベースにしてカスタマイズしていきます。

カスタマイズ後のブロックでは、以下のようにテキストの入力欄が配置されます。

ブロック内にテキスト入力欄を配置

『ワードプレス公式チュートリアルでブロックを作成』の過去2回の記事は以下の通りです。

記事①

記事②

テキスト入力欄の配置の手順概要

記事②で作成したブロック雛形では設定されたテキストが表示されるだけでしたが、テキスト入力できるブロックにカスタマイズしていきます。

手順概要は以下の通りです。

  1. block.jsonにattibutesを追加する
  2. edit.jsにTextControlコンポーネントを導入する
  3. save.jsを入力したテキストを出力するように書き換える

①block.jsonにattributesを追加する

attributesというのはブロックの属性です。ブロックに保存されるデータの情報と理解しておくとよいでしょう。

記事②で作成済の雛形のようにあらかじめ決められたテキストを表示するブロックと違って、今回作成するブロックのようにユーザーが入力した情報を保存・表示するためにはblock.jsonにattrbutesが必要となります。

block.jsonに以下の記述を追加します。

"attributes": {
		"message": {
			"type": "string",
			"source": "text",
			"selector": "div",
			"default": ""
		}
},

変更前

{
	"$schema": "https://json.schemastore.org/block.json",
	"apiVersion": 2,
	"name": "create-block/gutenpride",
	"version": "0.1.0",
	"title": "Gutenpride",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block written with ESNext standard and JSX support – build step required.",
	"supports": {
		"html": false
	},
	"textdomain": "gutenpride",
	"editorScript": "file:./build/index.js",
	"editorStyle": "file:./build/index.css",
	"style": "file:./build/style-index.css"
}

変更後

{
	"$schema": "https://json.schemastore.org/block.json",
	"apiVersion": 2,
	"name": "create-block/gutenpride",
	"version": "0.1.0",
	"title": "Gutenpride",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block written with ESNext standard and JSX support – build step required.",
	"supports": {
		"html": false
	},
	"textdomain": "gutenpride",
	"attributes": {
		"message": {
			"type": "string",
			"source": "text",
			"selector": "div",
			"default": ""
		}
	},
	"editorScript": "file:./build/index.js",
	"editorStyle": "file:./build/index.css",
	"style": "file:./build/style-index.css"
}

このようにattributesを記述することでブロックのロード時に、divタグ内のtext 部分を取り出し、コンテンツとして attributes.message 変数に保存します。

  1. コンテンツを保存した場所であるselectorを探す
    ("selector": “div" と記述したので今回はdivタグを探す)
  2. そのselector内のsourceからコンテンツを取り出す
    ("source": “text" と記述したので、divタグを含まず内部のテキストのみ取り出す)
  3. 取り出したコンテンツがtypeで指定した型どおりであることを照合
    ("type": “string" としたので、文字列であること)
  4. コンテンツをオブジェクトattributes.messageに保存

attributesをedit.jsやsave.jsの関数で引数として渡してやることで、attributesで指定した情報にしたがってedit.jsおよびsave.jsを実行していきます。

②edit.jsの変更(TextControlの導入)

テキスト入力ができるように以下の変更をします。

  • TextControlコンポーネントをimport
  • Edit関数の引数を { attributes, setAttributes } とする
  • return( )内を<div>に囲まれた<TextControl>タグとする

TextControlコンポーネントを導入することで、ブロック内でテキスト(一行だけのショートメッセージ)の入力が可能となります。

引数にはattributesだけでなくsetAttributesメソッドも渡します。setAttributesメソッドで属性を更新することができます。

setAttributes({ 更新したいattributesのキー: 新しい値, … });

block.jsonのattributesで指定した"selector": “div" どおり、ブロック全体をdivタグで囲っておきます。divタグ内には"apiVersion": 2 では必須となる {…useBlockProps( )} を記述しておきます(記事②参照)。

変更前

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
	return (
		<p {...useBlockProps()}>
			{__('Gutenpride – hello from the editor!', 'gutenpride')}
		</p>
	);
}

変更後

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { TextControl } from '@wordpress/components';
import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
	return (
		<div { ...useBlockProps() }>
            <TextControl
                label={ __( 'Message', 'gutenpride' ) }
                value={ attributes.message }
                onChange={ ( val ) => setAttributes( { message: val } ) }
            />
        </div>
	);
}

TextControlによるattributes更新のしくみ

TextControlのようなコンポーネントは HTML タグと同じように記述します。

TextControlタグの属性としてvalue とonChange関数を記述します。valueに attributes.message をセットし、onChange 関数に setAttributes を使用して message 属性の値を更新することができます。

<TextControl
	value={ attributes.message }
	onChange={ ( val ) =>
		setAttributes( { message: val } )
	}
/>

③save.jsの変更

  • Edit関数の引数を { attributes } とする
  • return( )内を<div>に囲まれた{ attributes.message } とする

save.jsではedit.jsと違ってattributesの更新をすることはないのでsetAttributesは必要ありません。出力部となるreturn( )内に、コンテンツが保存されたattributes.messageオブジェクトを記述するだけでOKです。

変更前

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

export default function save() {
	return (
		<p {...useBlockProps.save()}>
			{__('Gutenpride – hello from the saved content!', 'gutenpride')}
		</p>
	);
}

変更後

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes }) {
	return (
		<div { ...useBlockProps.save() }>
			{ attributes.message }
		</div>
	);
}

ブロックの表示

以上の変更後ビルドを実施してブロックを表示すると以下の通りとなります。

ブロックエディター側

テキスト入力欄が出来上がります。

エディター側のブロック表示

テキスト入力欄の上に"message"と記述されるのは、edit.jsのTextControlで指定したLabel通りの表示です。

試しにテキストを入力して更新しておきましょう。更新するとsave.jsで記述したように情報がデータベースに登録されます。

テキストを入力して更新

web表示側

web表示させると入力したテキストが表示されます。

テキスト入力後のweb表示

CSSを変更してみる

試しにCSSを変更してフォントサイズを変更してみます。

style.scssに次の記述を追記します。

.wp-block-create-block-gutenpride {
    font-size: 64px;
}

ビルドしてブロックを表示すると次の通りです。

フォントサイズ変更後

まとめ

私自身Reactにはなじみがないため、JSX形式のコードの書き方にとまどうところもありましたが、公式チュートリアルと関連ページを見ながら私なりに解説を加えてみました。

第一弾第二弾、そして第三弾(本記事)を通じて、少しでもブロック作成のとっかかりにして頂けると嬉しいです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる