# registerBlockType の styles プロパティ

- リンク: https://torounit.com/blog/registerblocktype-%e3%81%ae-styles-%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3/
- 公開日: 2018-10-13T00:39:00+09:00
- 作成者: Toro\_Unit

wp.blocks.registerBlockType に styles というプロパティがあります。これにちょっとした
設定をするだけで、「追加 CSS クラス」がグラフィカルに適用できるようになります。「
ブロックタイプを変更」というボタンが出現し、GUIで適用するスタイルを選択出来ます。

![](https://torounit.com/wp-content/uploads/2018/10/スクリーンショット-2018-10-13-
00.32.42-848x559.png)

「ブロックタイプを変更」を押したときの様子

## 実装

    ```wp-block-code
    'use strict';
    const { registerBlockType } = 'wp.blocks';

    registerBlockType( 'block-example/basic', {
    	title: 'Example',
    	icon: 'universal-access-alt',
    	category: 'example',
    	styles: [
    		{ name: 'default', label: 'default', isDefault: true },
    		{ name: 'style1', label: 'スタイル1' },
    		{ name: 'style2', label: 'スタイル2' },
    	],
    	edit ( { className } ) {
    		return <div className={ className }>Basic example with JSX! (editor)</div>;
    	},
    	save ( { className } ) {
    		return <div className={ className }>Basic example with JSX! (front)</div>;
    	},
    } );
    ```

実装はこんな感じでとにかくシンプルです。styles プロパティを指定するだけです。適用
される class は is-style-style1 だとか、is-style-[name] という格好になります。

GUI でゴリゴリ出来ていろいろ楽そうですねこれ。