なるほど！！！と思ってシェアボタン作ってみました。

https://github.com/chiilog/sns-share-block

今回は既存のボタンブロックをカスタマイズしてボタンブロックを作るので、phpのみで完結。

まずは、ボタンブロックにbindingを入れていきます。

<!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"url":{"source":"chiilog/share-button","args":{"key":"x"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">X</a></div>
<!-- /wp:button -->

<!-- wp:button {"metadata":{"bindings":{"url":{"source":"chiilog/share-button","args":{"key":"facebook"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Facebook</a></div>
<!-- /wp:button -->

<!-- wp:button {"metadata":{"bindings":{"url":{"source":"chiilog/share-button","args":{"key":"line"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">LINE</a></div>
<!-- /wp:button -->

<!-- wp:button {"metadata":{"bindings":{"url":{"source":"chiilog/share-button","args":{"key":"hatena"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">はてな</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">ただのボタン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

metadata.bindings は固定です。

<!-- wp:button {"bindings":{"url":{"source":"chiilog/share-button","args":{"key":"facebook"}}}} -->

とか書いても動かないので気をつけましょう。（やった）

ちなみに↑の書き方、JSONのエラーですとか返してくれるわけでもなく、背景とかつけたりすると値が消えます。

これだけでブロック側は準備OK。では、PHPを書いていきます。

add_action( 'init', 'chiilog_register_block_bindings' );

function chiilog_register_block_bindings() {
	register_block_bindings_source( 'chiilog/share-button', array(
		'label'              => __( 'SNS', 'chiilog-share-button' ),
		'get_value_callback' => 'chiilog_sns_data_bindings',
		'uses_context'       => [ 'postId' ]
	) );
}

まずは、register_block_bindings_sourceを使ってソースを登録します。

これで、前回使ったカスタムフィールドのようにソースとして扱うことができます。

今回は投稿IDを元にページURLをとりたいので、 uses_contextでpostIdを指定しています。

次はコールバック関数を用意します。実際にシェア用のURLをバインディングするやつです。

/**
 * SNSのシェアリンクを返す
 *
 * @param array $source_args
 * @param WP_Block $block_instance
 *
 * @return string|null
 */
function chiilog_sns_data_bindings( $source_args, WP_Block $block_instance ) {
	$current_post_id = $block_instance->context['postId'];

	// キーがない場合はなにもしない
	if ( ! isset( $source_args['key'] ) ) {
		return null;
	}

	switch ( $source_args['key'] ) {
		case 'x':
			return 'https://twitter.com/intent/tweet?url=' . esc_url( get_permalink( $current_post_id ) ) . '&text=' . esc_attr( get_the_title( $current_post_id ) );
		case 'facebook':
			return 'https://www.facebook.com/sharer/sharer.php?u=' . esc_url( get_permalink( $current_post_id ) );
		case 'line':
			return 'https://social-plugins.line.me/lineit/share?url=' . esc_url( get_permalink( $current_post_id ) ) . '&text=' . esc_attr( get_the_title( $current_post_id ) );
		default:
			return null;
	}
}

なんということでしょう。swich文で記述するだけで、ボタンタグ自身のhrefに挿入されることが確認できたと思います。

bindingsを使っていないブロックはリンク先が入力できますが、bindings.url を設定したボタンはリンク先が入力できなくなっています。

さて、リンク先の入力欄がないということはリンクターゲットの設定ができません。同じくbindingsでやってみようかと思いましたが、urlとlinkTargetなど2つ地使うことはできないのか、うまくいきませんでした。私の書き方がまずかったとか色々説はあると思いますが、できるのなら私も見たいのでぜひ書き方教えてほしいです。

追記

浜野さんに書き方教えてもらいました！！！！

<!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"url":{"source":"chiilog/share-button-link","args":{"key":"x"}},"linkTarget":{"source":"chiilog/share-button-target"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">X</a></div>
<!-- /wp:button -->
...
</div>
<!-- /wp:buttons -->

urlに対してはchiilog/share-button-linkを割り当て、linkTargetに対してはchiilog/share-button-targetを割り当てるという感じです。

ひとつの属性に対してひとつのsourceを使う、って覚え方でよさそうかな。

あとはPHPを変更。

add_action( 'init', 'chiilog_register_block_bindings' );

function chiilog_register_block_bindings() {
	register_block_bindings_source( 'chiilog/share-button-link', array(
		'label'              => __( 'SNS URL', 'chiilog/share-button' ),
		'get_value_callback' => 'chiilog_sns_data_bindings',
		'uses_context'       => [ 'postId' ]
	) );

	register_block_bindings_source( 'chiilog/share-button-target', array(
		'label'              => __( 'Link Target', 'chiilog/share-button' ),
		'get_value_callback' => function () {
			return '_blank';
		}
	) );
}

今回は絶対_blankなのでこうなりましたが、argsで変えたいときはget_value_callbackに関数名を指定すればOK。

この方がWP_HTML_Tag_Processor使うよりもスッキリ簡潔に書けますね！！！！

一応下にWP_HTML_Tag_Processor版残しておきますが、書くならregister_block_bindings_sourceを使って書くと思います。

シェアボタンに関しては常にリンクターゲットは_blankにしたいので、ここはWP_HTML_Tag_Processorの出番です。

/**
 * シェアボタンの場合、ボタンのlinkTargetを_blankに変換する
 *
 * @param string $block_content
 * @param WP_Block $block
 *
 * @return string
 */
add_filter( 'render_block_core/button', 'add_link_target_for_binding_button', 10, 2 );

function add_link_target_for_binding_button( $block_content, $block ) {
	$processor = new WP_HTML_Tag_Processor( $block_content );

	if ( isset( $block['attrs']['metadata']['bindings']['url']['source'] ) ) {
		$binding_source = $block['attrs']['metadata']['bindings']['url']['source'];
		if ( $binding_source === 'chiilog/share-button' ) {
			$processor->next_tag( array( 'class_name' => 'wp-block-button__link' ) );
			$processor->set_attribute( 'target', '_blank' );
		}
	}

	return $processor->get_updated_html();
}

Block Bindings APIを使ってるものに限りリンクターゲットを追加しています。

この分岐を入れておけば、bindingsを使っていないボタンは管理画面上でリンクターゲットの設定が可能というわけです。

まとめ

外部ソースってどう使うんだろうな、とピンときてなかったのが、これを作ってみてより身近に感じれるようになりました。シェアボタンがこんな簡単にできるのはえらいこっちゃです。

とはいえ、metadata.bindingsが複雑になるとコードエディターで書きづらそうだなあというのは感じました。改行とか入れても一回ビジュアルエディターにすると1行でギュッとされてしまうので、あとから追記を試すときにちょっと大変でした。

コードエディターで入力する前に一旦見やすいのをローカルに置いといたほうがいいかもしれません。

投稿 Block Bindings APIもうすこし遊んでみた は chiilog に最初に表示されました。

今回も新しいAPIを触ってみました。次はBlock Bindings API！

これは動的なデータをブロックにもたせることができるようになる機能です。

動的なデータって言うとあんまりピンとこないですが、カスタムフィールドがわかりやすいと思います。（現状その他はどうやって使うのかあまりよくわかってない）

WordPress6.5では、以下のブロックで使うことができます。

それぞれのブロックの属性に対して割り当てることができるので、「段落タグを表示する内容は、company_nameというカスタムフィールド」という使い方ができます。

使い方

プラグイン等でカスタムフィールドを用意します。

add_action( 'init', 'chiilog_register_meta_fields' );

function chiilog_register_meta_fields() {
	register_meta(
		'post',
		'company_name',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'sanitize_callback' => 'wp_strip_all_tags'
		)
	);
}

現時点では show_in_rest が true じゃないとだめな模様。

*Note that the show_in_rest property must be set to true for the time being due to security considerations, though there are plans to explore how to remove this requirement in the future.

https://make.wordpress.org/core/2024/03/06/new-feature-the-block-bindings-api/

とあるので、将来的には不要にしたいようですね。

これをどう編集するかは個人の開発の意向によると思いますが、今回は特に作り込む予定ではなかったので、パネルでカスタムフィールドを表示して作業しました。

こんな感じです。

あとはAPIをサポートしているブロックに紐づけるだけ！

ビジュアルエディタではmetadataの追加はまだサポートしていないので、コードエディターに切り替えます。

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"core/post-meta",
				"args":{
					"key":"company_name"
				}
			}
		}
	}
} -->
<p></p>
<!-- /wp:paragraph -->

ちなみに本文部分が空っぽのままだと段落ブロックがない状態ので、適当に文字を入力して wp:paragraph を表示させてから metadata を追加しました。

この状態でビジュアルエディターに戻すと、company_name で入力した値が表示されます。

カスタムフィールドを更新してもブロック側で即時反映はされないですが、「更新」を押して記事自体を更新すると値が入り直します。

あくまでカスタムフィールドの値を表示させるだけなので、段落ブロックからカスタムフィールドを編集することはできません。

ですが、ガワは段落ブロックであることに代わりはないので、通常の段落ブロックと同じように背景色をつけたり、フォントサイズを変えたりというスタイルの編集は可能です。

詳細ページで表示できるものは当然アーカイブページでも表示できます。
以下のビデオキャプチャはテーマエディターでインデックスページを触ってみたときのキャプチャです。

使い所は？

基本的に投稿はブロック内で完結できるようになっていますが、アーカイブページに特定の文言（会社名とか人名とか）やアイキャッチ以外の画像を出したいというときに、別途カスタムブロックを作らなくてもよくなったという感じでしょうか。

とは言え、不要なカスタムフィールドを量産するとかえって使いにくい管理画面になってしまうと思うので、設計周りはより慎重に行ったほうが良さそうだと胸に刻んでおきます……。こういうの、不用意にいらないところで使ってしまいがち。

カスタムブロックにBlock Bindings APIを使う方法なんかも紹介されているので、ぜひ紹介記事は一読してみてくださいね！

投稿 WordPress 6.5 で新登場したBlock Bindings APIを試してみた は chiilog に最初に表示されました。

ゴリゴリaddEventListenerとかで書いてたJSがサクッと書けるようになるAPIです。（かなりざっくり）

これを使ったらブロック間のやりとりとかもできるようになるので、かなり用途が広いAPIだと思います。

今回はこれを使ってブロックを作ってみました。

ブロックつくってみた

https://github.com/chiilog/iapi-tabs

Interactivity APIを使ったタブブロックです。

実質3〜4日で作りました。Alpine.js とか触ったことある人だともっと理解が早そう。（私は触ったことなかった）

管理画面

表示

使い方

親ブロックとして使うブロックのblock.json のsupportsに "interactivity": true を入れます。

また、view.js と render.php を使うので、"viewScriptModule": "file:./view.js" と "render": "file:./render.php" を追加します。

いれるとこんな感じになります。

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "chiilog-blocks/iapi-tabs",
	"version": "0.1.0",
	"title": "IAPI Tabs",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"attributes": {
		"contents": {
			"type": "array",
			"default": []
		},
		"tabNavText": {
			"type": "string",
			"source": "text",
			"selector": ".wp-block-chiilog-blocks-iapi-tabs__button span"
		}
	},
	"supports": {
		"interactivity": true,
		"anchor": true
	},
	"textdomain": "chiilog-iapi-tabs",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScriptModule": "file:./view.js",
	"render": "file:./render.php"
}

これでAPIを使う準備はOK！

次はブロックを用意します。

私は先にrender.php で完成形のHTMLタグを入れただけのファイルを作りました。

<?php
/**
 * @var array    $attributes The block attributes.
 * @var string   $content    The block default content.
 * @var WP_Block $block      The block instance.
 *
 * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
 */
?>
<div
	<?php echo get_block_wrapper_attributes(); ?>
>
	<div class="wp-block-chiilog-blocks-iapi-tabs__nav" role="tablist">
		<button
			role="tab"
			class="wp-block-chiilog-blocks-iapi-tabs__button"
			aria-selected="true"
			id="tab-1"
			aria-controls="panel-1"
			tabindex="0"
		>
			<span>ナビ1</span>
		</button>
		<button
			role="tab"
			class="wp-block-chiilog-blocks-iapi-tabs__button"
			aria-selected="false"
			id="tab-2"
			aria-controls="panel-2"
			tabindex="-1"
		>
			<span>ナビ2</span>
		</button>
		<button
			role="tab"
			class="wp-block-chiilog-blocks-iapi-tabs__button"
			aria-selected="false"
			id="tab-3"
			aria-controls="panel-3"
			tabindex="-1"
		>
			<span>ナビ3</span>
		</button>
	</div>
	<div
		id="panel-1"
		role="tabpanel"
		tabindex="0"
		aria-labelledby="tab-1"
		class="wp-block-chiilog-blocks-iapi-tabs__panel"
		aria-expanded="true"
		aria-hidden="false"
	>
		パネル1
	</div>
	<div
		id="panel-2"
		role="tabpanel"
		tabindex="0"
		aria-labelledby="tab-2"
		class="wp-block-chiilog-blocks-iapi-tabs__panel"
		aria-expanded="false"
		aria-hidden="true"
	>
		パネル2
	</div>
	<div
		id="panel-3"
		role="tabpanel"
		tabindex="0"
		aria-labelledby="tab-3"
		class="wp-block-chiilog-blocks-iapi-tabs__panel"
		aria-expanded="false"
		aria-hidden="true"
	>
		パネル3
	</div>
</div>

ただ動かしてみるだけならedit.js もこれベタっと貼っておくだけでもいいですね。私はAPI触るために作ってたのに、なぜかeditの中身も作り込んでいました。（夫に突っ込まれてedit別に作り込まなくてよかったことに気づいた）

ちなみに今回はeditの中身については省きます。

次はこのタグにAPI用のタグを仕込んでいきます。

親のdivにdata-wp-interactive="chiilog-iapi-tabs"を入れます。これの内部でbindなりclickなりいろんなJSが動きます。

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive="chiilog-iapi-tabs"
>
	...
</div>

こんな感じ。

このdata-wp-interactiveに指定したchiilog-iapi-tabsがストア名になります。

view.jsに以下のように書きます。

/**
 * WordPress dependencies
 */
import { store } from '@wordpress/interactivity';

store( 'chiilog-iapi-tabs', {
	state: {},
	actions: {},
	callbacks: {},
} );

例えば以下のようにactionsの中に書いて、ボタンにclickの動作をつけるとコンソールにclickが出ます。

/**
 * WordPress dependencies
 */
import { store } from '@wordpress/interactivity';

store( 'chiilog-iapi-tabs', {
	state: {},
	actions: {
		selectTab: () => {
			console.log( 'click' );
		},
	},
	callbacks: {},
} );

<button
	role="tab"
	class="tab-nav__button"
	data-wp-on--click="actions.selectTab"
	aria-selected="true"
	id="tab-1"
	aria-controls="panel-1"
	tabindex="0"
>
	<span>ナビ1</span>
</button>

無事clickが動作していることを確認したので、ベタ書きしていた記述をブロックに置き換えます。

<?php
/**
 * @var array $attributes The block attributes.
 * @var string $content The block content.
 * @var WP_Block $block The block object.
 *
 * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
 */

$navItems = $attributes['contents'];
?>
<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive="chiilog-iapi-tabs"
>
	<div class="wp-block-chiilog-blocks-iapi-tabs__nav" role="tablist">
		<?php
		if ( $navItems ) :
			foreach ( $navItems as $index => $navItem ) :
				$tabNumber = $index + 1;
				?>
				<button
					role="tab"
					class="wp-block-chiilog-blocks-iapi-tabs__button"
					data-wp-on--click="actions.selectTab"
					aria-selected="<?php echo esc_attr( $index === 0 ? 'true' : 'false' ); ?>"
					id="tab-<?php echo esc_attr( $tabNumber ); ?>"
					aria-controls="panel-<?php echo esc_attr( $tabNumber ); ?>"
					tabindex="<?php echo esc_attr( $index === 0 ? '0' : '-1' ); ?>"
				>
					<?php echo esc_html( $navItem['tabNavText'] ); ?>
				</button>
				<?php
			endforeach;
		endif;
		?>
	</div>
	<div class="wp-block-chiilog-blocks-iapi-tabs__panels">
		<?php echo do_blocks( $content ); ?>
	</div>
</div>

この時点ではaria-selectedとかはまだほぼベタ打ちのままです。

パネル部分はインナーブロックの中にパネルブロック（作成したブロック。インナーブロックはこのパネルブロックしか配置できないように設定）を置く形にしています。

おおよその形にはなったので、タブのJSを書いていきます。

いつものJSならクリックしたナビ以外のaria-selectedを変えたりtabindexを変えたりして実装してるのですが、今回はInteractivity APIを使って実装していくので、

• state.currentTab でカレントのタブを管理
• ボタンそれぞれにdata-wp-context='{ "position": (number) }' をつけてタブの番号を付与
• state.currentTabとcontext.positionが同一であればカレントにする

という処理をしました。

state.currentTabはwp_interactivity_stateで管理するため、render.phpに追加します。

wp_interactivity_state( 'chiilog-iapi-tabs', array (
	'currentTab' => 0
));

ボタンにもAPIのディレクティブをつけていきます。

<button
	role="tab"
	class="wp-block-chiilog-blocks-iapi-tabs__button"
	data-wp-on--click="actions.changeCurrentTab"
	data-wp-bind--aria-selected="state.tabSelected"
	id="tab-<?php echo esc_attr( $tabNumber ); ?>"
	aria-controls="panel-<?php echo esc_attr( $tabNumber ); ?>"
	data-wp-bind--tabindex="state.tabIndex"
	data-wp-context='{ "position": <?php echo esc_attr( $index ); ?> }'
>
	<?php echo esc_html( $navItem['tabNavText'] ); ?>
</button>

さて、次はパネルです。パネルはインナーブロックで管理しているので、ボタンのようにrender.php内で処理することはできません。

なので、パネルブロックにディレクティブをつけるためにrender_blockのフィルターフックを使います。

今回は単一のブロックのみでの動作なので、render_block_{$this->name}のフィルターを使いました。

function add_directives_to_inner_blocks( $block_content, $block ) {
	$panels = new WP_HTML_Tag_Processor( $block_content );
	$panelCount = 0;

	while ( $panels->next_tag() ) {
		foreach ( $panels->class_list() as $class_name ) {
			if ( $class_name === 'wp-block-chiilog-blocks-iapi-tabs-panel' ) {
				$panels->set_attribute( 'data-wp-bind--aria-expanded', 'state.panelExpanded' );
				$panels->set_attribute( 'data-wp-bind--aria-hidden', 'state.panelHidden' );
				$panels->set_attribute( 'data-wp-context', '{ "position": ' . $panelCount . ' }' );
				$panelCount++;
			}
		}
	}

	return $panels->get_updated_html();
}
add_filter( 'render_block_chiilog-blocks/iapi-tabs', 'add_directives_to_inner_blocks', 10, 2 );

ブロック間でデータのやりとりをしたいときはよく使うことになるんだろうなと思います。

WP_HTML_Tag_Processorはブロック作るに限らず色々使い道があるので（aタグをspanに変えたいとか）覚えておくとよさそう。

これで描写側のセットは完了したので、あとはview.jsでJSをゴリゴリしていくだけです。

/**
 * WordPress dependencies
 */
import { getContext, store } from '@wordpress/interactivity';

const { state, actions } = store( 'chiilog-iapi-tabs', {
	state: {
		get panelExpanded() {
			const ctx = getContext();
			return ctx.position === state.currentTab;
		},
		get panelHidden() {
			const ctx = getContext();
			return ctx.position !== state.currentTab;
		},
		get tabSelected() {
			const ctx = getContext();
			return ctx.position === state.currentTab;
		},
		get tabIndex() {
			const ctx = getContext();
			return ctx.position === state.currentTab ? 0 : -1;
		},
	},
	actions: {
		changeCurrentTab: () => {
			const ctx = getContext();
			state.currentTab = ctx.position;
		},
	},
	callbacks: {},
} );

なんということでしょう。書いたのはこれだけ！タブみたいなシンプルなやつだったからというのはあるけど、めちゃくちゃ簡単に動作追加ができました。

ここで終わったと思った？残念！まだ続きます

ふと翌日に複数配置したらどうなるんだ？って配置してみたら、なんとまあ連動して全部動く！

これが例えば決済ボタンだとか、ページで1つしか配置できないようにしているものならsupportsでmultiple: false にしておけばいいけど、これはタブブロック。複数配置することも考えられるもの。あと、ついでにボタンとかパネルについてるidもユニークにしておかねばならぬ。

というわけで、ブロックのclientIdをattributes: tabClientIdに保存して使うことにしました。（save.js でやってたらこんな回りくどいことしなくてももっと簡単だったはず）

<button
	role="tab"
	class="wp-block-chiilog-blocks-iapi-tabs__button"
	data-wp-on--click="actions.changeCurrentTab"
	data-wp-bind--aria-selected="state.tabSelected"
	id="tab-<?php echo esc_attr( $tabClientId ) . '-' . esc_attr( $tabNumber ); ?>"
	aria-controls="panel-<?php echo esc_attr( $tabClientId ) . '-' . esc_attr( $tabNumber ); ?>"
	data-wp-bind--tabindex="state.tabIndex"
	data-wp-context='{ "position": <?php echo esc_attr( $index ); ?> }'
>
	<?php echo esc_html( $navItem['tabNavText'] ); ?>
</button>

肝心のブロックが全部一緒に動いちゃう部分ですが、これは

wp_interactivity_state( 'chiilog-iapi-tabs', array (
	'currentTab' => 0
));

で最初にステートを定義しているのが問題でした。なので、このカレントの管理をブロック自身のコンテキストに持たせるようにしました。

<?php
/**
 * @var array $attributes The block attributes.
 * @var string $content The block content.
 * @var WP_Block $block The block object.
 *
 * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
 */

$navItems    = $attributes['contents'];
$tabClientId = $attributes['tabClientId'];

$context = array(
	'currentTab'  => 0,
);

?>
<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive="chiilog-iapi-tabs"
	data-tab-client-id="<?php echo esc_attr( $tabClientId ); ?>"
	<?php echo wp_interactivity_data_wp_context( $context ); ?>
>
	...
</div>

view.js でもステートを参照していたので、changeCurrentTab をstate.currentTabから context.currentTabに差し替えます。

/**
 * WordPress dependencies
 */
import { getContext, store } from '@wordpress/interactivity';

const { state, actions } = store( `chiilog-iapi-tabs`, {
	state: {
		get panelExpanded() {
			const ctx = getContext();
			return ctx.position === ctx.currentTab;
		},
		get panelHidden() {
			const ctx = getContext();
			return ctx.position !== ctx.currentTab;
		},
		get tabSelected() {
			const ctx = getContext();
			return ctx.position === ctx.currentTab;
		},
		get tabIndex() {
			const ctx = getContext();
			return ctx.position === ctx.currentTab ? 0 : -1;
		},
	},
	actions: {
		changeCurrentTab: () => {
			const ctx = getContext();
			ctx.currentTab = ctx.position;
		},
	},
	callbacks: {},
} );

これでどれだけタブを置いても一緒にカレントが動いてしまうことはなくなりました！

作ってみての感想

最初は難しそうだなーできるかなーと思ってたんですが、案外サクッとできてしまいました。組み合わせてswiperと連動させたりとかもできるのかな…どきどき。

とは言え、書くのにはJSの知識が必要なので、しっかりJS勉強しておかないといけないなあという感じです。まだまだ知識不足感は否めません。

あと、実装するうえで結構ChatGPTに助けてもらいました。

エラー文の解説もそうですが、コードをベタっと貼り付けて「ここがこうなってるんだけどどうして？」って聞くとわりといい返事を返してくれたので、問題の解消のヒント（ときには答え）にかなり役立ちました。頼れる相棒です。答えに「それはホントか？」って思ったら根拠を調べたりするので勉強にもなります。

ちなみに、ChatGPT自体にInteractivity API自体の知識はまだないのでこの辺は聞いてません。

実装中のメモはzennでまとめています。

https://zenn.dev/chiilog/scraps/1129dfe7a551d7

参考にしたサイト、GitHub等

Interactivity APIとはなんぞや？でまずは触ったCookbookのレシピ

上記をもとに作られたより強力なスライダーのリポジトリ。WP_HTML_Tag_Processorまわり等はこちらを参考にしました。

https://github.com/ryanwelcher/iapi-gallery-slider

タブのeditを実装するにあたり、キタジマさんのSnow Monkey Blocksのタブブロックをめちゃくちゃ参考にさせてもらいました。

https://github.com/inc2734/snow-monkey-blocks/tree/master/src/blocks/tabs

ありがとうございました！

投稿 WordPress 6.5 で新登場したInteractivity APIを試してみた は chiilog に最初に表示されました。

https://blockdevelopercookbook.com/recipes/

ブロックの練習できるレシピ集です。WordCamp Asia 2024のワークショップ枠であったらしいです。

同僚のtoro_unitにおすすめしてもらい上から順番にやってみました。これ全部理解して書けたらカスタムブロック作れると言っても過言ではないらしいですよ。

レシピは9つで難易度は様々

私が挑戦したときはレシピは合計9つありました。

ブロックスタイルをつけたりするような簡単なやつから、最新のIntaractivity APIを使ったスライダーまでレベルは様々。

時々掲載順が変わるので「あれ…これやってないのに前にある……」がちょくちょくあります。

スキルレベルで難易度が表示されていますが、実際動かすコードなんかはすでに入っていることが多かったです。（例：Simple Fade-in EffectのフェードインするJSの実装など）

だからって提示されてるコードをコピペして「わー動いたー」じゃやったことにならないので、ファイル開いてこれなにしてるんだろうなーとかここがこの動作を担ってるんだな、とか調べながら進めました。

なので、大体の目安時間が書いてありますが全然その時間では終わらなかったです。

調べながら書いていたメモはzennにおいています。

https://zenn.dev/chiilog/scraps/345b7e5324f1b1

セットアップとかは悩まなくてOK

レシピそれぞれスタンドアローンで動かす用の npx のコードがあります。環境用意するの面倒だし…という言い訳は通用しません。

なお、リポジトリ単位で落としてくる方法もあるので、この辺は好きな方を選択したらいいと思います。

それぞれのレシピの感想

せっかくなのでそれぞれのレシピを軽く振り返ってみようと思います。

Custom Image block style

これはお馴染みのやつです。ブロックにカスタムスタイルを追加する方法。

こちらはプラグインで追加されてますが、私はブロックスタイルはテーマの領域だと思っているので、いつもテーマのfunctions.phpに書いて作業してます。

Block Transforms

ブロックの変換をつくるレシピ。普段全然使わないので実際の作り方に触れられてよかったです。

特定の言葉を入れてエンター押したらブロックに変わるとかいうマジックもやりました。これ使い所どこなんだろう？と思いながらも面白かったです。

Editorial Notes

ブロックにメモを残す機能です。表示側には出ないですが、管理画面でブロック選択すると表示されます。

複数人で更新するメディアとか校正する必要がある記事とかだと嬉しい機能なのかなあと思いつつ、既存ブロックにこういう機能を生やす方法があるんだなあと思うなどしました。

Customize the build process

これはブロックというよりビルドまわりのレシピ。

getWebpackEntryPoints を使うと複数のブロックのエントリーポイント書かなくてよさそうというまなび。このビルドは既存のブロックどうこうというよりカスタムブロックたくさん作るとかのときに特に有効な気がします。

Simple Fade-in Effect

カバーブロックにフェードインのCSSを追加できるようにするレシピ。

WP_HTML_Tag_Processor 使ってすべてのカバーブロックがスクロールに応じて下からふわっとフェードインしてくるようなアニメーションがつきます。

ブロックにクラスつける自体のコードは大したことないけど、フェードインのコードの方が気になってしばらくJSファイルの方を調べてました。

Creating a custom format

書式APIのレシピ。選択範囲にabbr タグがつけられるようになります。

この書式APIのは汎用性が高い（inline-blockを使えるようにしたいとかでよく使う）ので、カスタムブロック作るよりこっちのほうが実は重要なんではないかなーと思ったりしています。

現状、スライダーとかタブとかそういう機能面で拡張しないといけないようなものを除いてパターンでかなり解決できるものが増えているなというのが体感としてあるので、書くならこっちの方が増えそう……かな…？

Word Counter

全ブロックで使ってる文字数のカウントをするレシピ。

やってるとなんかカウントが合わないな…？って思ってたんですが、これは英文が前提となっているので、オプションつけて日本語対応する必要がありました。

以外といろんなドキュメント見たのこのブロックかもしれません。

Post Meta Testimonial Block

カスタムフィールドと連携するブロックのレシピ。

多分仕様通りなんだろうとは思いますが、パネルからカスタムフィールドを表示しているとうまく更新できない罠がありました。

まだあまり調べられてませんが、カスタムフィールドもBlock Bindings APIでブロック作らなくても使いやすくなるのかな…？

Interactive API Gallery Slider

今回一番目玉なレシピ。その分時間かけました。

package.jsonに start: 'wp-scripts start --experimental-modules', 追加し忘れて（正確にはformatコマンドに足してた）ずーっと動かない動かないってブチギレて困ってました。動かないときはpackage.json から見直してみましょう。（自戒）

そしてこのレシピ地味に誤字あったり途中でJS側だけ関数名変わったりしてる罠があるので単にコピペしてると詰みます。これはこれでいい練習になるかな。
見てたら気づくけど、ぱぱっとコピペして進めてると気付かないかも。（これには気づくのにpackage.jsonには気付かないのかとか言わないで）

Interactivity APIは6.5で新搭載になったAPIなので、公式のドキュメントもじっくり見ながら進めました。

難しそうだなとドキドキしてたんですが、ドキュメントしっかりしてるし思ったよりとっつきやすそうだなと思いました。食わず嫌いよくない。

API使ってどうこうっていうより、そもそも動作のロジック考える方が時間使いそう。

ブロック作りたいならこれをやればOK！

一通りやってみて、カスタムブロックに挑戦してみたいならこれを一通りやるといいと思います。Interactivity APIまで網羅してるのがつよい。

もくもく会とかで同士を募って一緒にわいわいやるのも楽しそう。

最初にレシピ通りに進める→ここをこうしたかったらどうする？とかアレンジしてみる、とかですごく力がつくと思います。繰り返しやるのもよさそう。

私は次はInteractivity APIを使ってタブを作ってみようと思ってます。またzennでメモしながら進めます！

投稿 The Block Developers Cookbook をやってみた は chiilog に最初に表示されました。

こんな感じでコンポーネントを書いていたところ、PropsWithChildren を使えばいいじゃん、と教えてもらうなどしました。で、ジェネリクスについて掘り下げて教えてもらったので備忘録。

type Props = PropsWithChildren<{ title: string }>
// type Props = { title: string } & { children?: ReactNode | undefined } と同義
const Heading = ( { title, children }:Props ) => {
  return (
    <>
      <h1>{ title }</h1>
      <div>{ children }</div>
    </>
  );
}

https://typescript-jp.gitbook.io/deep-dive/type-system/generics

https://js.studio-kingdom.com/typescript/handbook/generics

https://qiita.com/k-penguin-sato/items/9baa959e8919157afcd4

ジェネリクスは一言で言うと外から設定できる型定義のこと。

@types/react にはいろいろな便利な型が用意されてるので、自前で時間かけて書くよりもともとあるものを使ったほうが時短になってよい。（そういう型があるってのはコード見ないとわからないけども………）

PropsWithChildrenだけじゃなく、大体の関数にジェネリクスは定義されている。

おなじみ useStateもジェネリクスがあるので、こういうことができる。

// Todoリストの状態管理
const [state, setState] = useState<'ready' | 'inprogress' | 'completed' | ''>('');

//  レビューの星管理
const [reviewStar, setReviewStar] = useState<1 | 2 | 3 | 4 | 5>(1);

useState自体、特に型定義しなくても引数の中身を見て推察してくれるけど、中身を絞りたいときにはとても有用。

もしくは、初期値をnullにした場合、nullしか受け付けてくれなくなるので、ジェネリクスに ReactNode をいれるなど。

// これだと setName で nullしか入らなくなる
const [name, setName] = useState(null);

// ジェネリクスにReactNodeを入れておくと、型がReactNodeになるのでnull以外も設定できる
const [name, setName] = useState<ReactNode>(null);

ジェネリクスは沼らしいので細かく設定しすぎたり時間かけ過ぎたりするのは本末転倒だから気をつける！

投稿 TypeScriptのジェネリクスってなあに は chiilog に最初に表示されました。

https://chiilog.com/2021/02/12/2306/

今度はGitHubにあげました。

https://github.com/chiilog/multiple-swippers

PHPのクラス化はちょっと前からやってたのですが、JavaScriptのクラス化は今回が初めて。ちょこちょこ記述が似てるから前ほど「ヒッ！無理！」とはならなかったあたり無条件反射でワタシニハ無理デスを抜けられたかな。

読み方がわかってくると、クラス化せず整理せず思うがまま書いてるコードより全然読めるじゃないですか？メソッド単位でやってることを追いかければよい。（多分膨大な量のコードをはいって渡されたら泣くと思うけど）

Swiperから追加で対応してるもの

• 再生ボタン/一時停止ボタン
• 次へ/前へボタン（Swiper本体実装とは別）
• ウィンドウ幅でSwiperの有効化・無効化（必要ないときはmediaQueryをnullに設定）
• 同一クラスをページ中に複数設置

セレクタの指定にquerySelectorAllとかquerySelectorを使ってます。クラス指定するとバグったり（複数に対応できない）しました(´・ω・｀)

メソッドのコツ

コツと言うか気をつけておくこと。

• 複数の機能をひとつのメソッドに持たせない
• まず正確にどういう機能をつくるか日本語で書く（←JSに限らずこれがイマイチできてない）
• メソッド名をわかりやすくする（ぱっとメソッド名見て何してるかわかるとよい）

投稿 jQueryをやめてJavaScriptのクラスデビューした は chiilog に最初に表示されました。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

// 引数なし
function example() {
    ....
}

// 引数をいれるとき
function example2( hoge ) {
    return hoge * 2;
}

実行するときは example(); とか example2( 2 ); とかで書く。

throttleとかdebounceやらをかませるときも同じ。（これでこんがらがった）関数は実行されないとなにもしない。

関数は実行されないとなにもしない。（大事なことなので2回）

最近はアロー関数を使ったりもしている。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

const hoge = () => {
    ....
}

こちらも実行はおなじく hoge(); 。Internet Explorerでは使えないみたいですが、そんなブラウザはもうない。（ポリフィルとかを探せばいいらしい。）

投稿 JSの関数の書き方 は chiilog に最初に表示されました。

https://mathtrain.jp/de

ドモルガンの法則！

1：「A または B」でない，という状況は 「A でない」かつ「B でない」という状況と同じ

2：「A かつ B」でない，という状況は 「A でない」または「B でない」という状況と同じ

つまりどういうこと？

さっきの抜粋を式に起こしてみる。

1: A || B ←はんたい→ ! A && ! B

2: ! A && ! B ←はんたい→ A || B

これをJSで使うとこうなる。

function isSliderActive() {
    /**
      * trueになるとき： スライダーが存在し、かつ中身がこわれていないとき
      * falseになるとき: スライダーが存在しないか、中身がこわれているとき
      **/
    return slider && ! slider.destroyed;
}

スライダーがアクティブなら true、そうじゃなければfalseが返ってくる。

毎回if文でウンタラカンタラかつほにゃらら……なんてするより全然わかりやすい。

文字で考えるよりベン図のほうがもっとわかりやすいかも。

まだイマイチ対偶が上手に考えられないから訓練必要。

投稿 ドモルガンの法則を使って返り値をシンプルにする は chiilog に最初に表示されました。

globalThis.addEventListener( 'load', () => { ... } );

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/globalThis

globalThis プロパティは、環境を越えてグローバルな this 値 (すなわちグローバルオブジェクト自身) にアクセスするための標準的な方法を提供します。window や self などの同様のプロパティとは異なり、これはウィンドウのコンテキストでも非ウィンドウのコンテキストでも動作することが保証されています。この方法では、コードがどの環境で実行されているのかを知らなくても、一貫した方法でグローバルオブジェクトにアクセスすることができます。名前を覚えやすくするために、グローバルスコープでは this の値は globalThis であることを忘れないでください。

ESLintとかで怒られるときは、.eslintrcにて

{
	"globals": {
		"globalThis": true
	}
}

を指定する。

投稿 グローバルプロパティはglobalThisがよき は chiilog に最初に表示されました。

こんな定数を用意して navigation.nextElの存在チェックをしようと思ったら、いままでif文はこんなふうに書いてたけど

// optionが存在する、かつnavigation.nextElがある
if ( option && option.navigation.nextEl ) : ...

オプショナルチェイニングを使うともっと簡単に書ける！

if ( option?.navigation?.nextEl ) :

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

上記の例だと、optionがなければその時点でundefinedが返されるので、option自体の存在チェックが不要。べんり。

投稿 オプショナルチェイニングを使って存在チェックをする は chiilog に最初に表示されました。

const hoge = animal + 'はかわいい';

みたいなプラスとシングル（もしくはダブル）クオートで囲ってたのですが、テンプレートリテラルを使えばドシンプルに書ける。

const hoge = `${ animal }はかわいい`;

これをテンプレートリテラルと言うらしい。なるほど。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

｀←これバッククオートと読んでたけど、正しくはグレーブアクセント（Google変換ではグラーブで出てくる）。altでもcmdでもなく、Shift+@で出ます。（いつもわからなくなる）

投稿 文字列と変数を結合するときはテンプレートリテラルで書く は chiilog に最初に表示されました。

ちなみに、上記のような複雑なことをしない場合（ただ単に複数同じクラスのSwiperを設置する）はこんなごちゃごちゃと書かずに公式サイトのサンプルコードを書けば普通に動作します。

Swiperってなによ？はこちらで紹介しています。https://chiilog.com/2018/04/16/965/

公式サイトはこちら。https://swiperjs.com/

主に自分用の備忘録だしJS雑魚だし苦労して書いた（信頼してはいけない、の意）なのでへーこんなことしたんだー程度に見てください。
一応動いてる（と思う）けどきれいなコードではないしもっとシンプルに書けるかも。

やったこと

まず、最初はloadとかresizeをjQueryにまかせていました。私の苦労のはじまりはここでページ中に複数設置してテストしなかったこと。（ブラウザチェック中に気付いて死んだ）

リサイズしたらdestroy部分が何故かエラーを吐く。ナンデ？？あっ、複数設置してるときはそれぞれdestroyしないとダメ？という理解で早々に$('.swiper-container').each()で書き換えたものの、Firefoxでバグるバグる。（あとで見直すとChromeとかでももちろんバグってた）

console.logで carouselBool の真偽値をresizeごとに取ってみると、意図しないところで変な動きをしているのを発見。（trueのはずなのにtrueになったあとfalseになるとかそういう意味不明な動作）そもそもなんでそんな動きになってるんだ？？？？でマジでわからなくて撃沈。

それからSwiperにresizeイベントがあるな、って気付いて書き直したけど、そもそもdestroyしたあとにまたカルーセルを動かすことができなくてこれも撃沈。（destroyしたら新しくSwiperを作り直さなければいけないようだ）

ブチ切れた結果、「そうだjQueryをやめよう」

jQueryはJSわからなくてもある程度手軽に書けるけど、やっぱJSわかってないとこういうときに詰む。

で、割と初めてレベルで（コピペとかで使ったことはあるけど）自前でaddEventListenerを書きました。書いてみて思ったけどJS別にめちゃくちゃハードル高いわけじゃないな？（※私が案件で書かないといけないレベルに限る）

リサイズやらロードやらってもっともっと複雑に書かないといけないと思ってたわけですよ。でもイベントリスナーにタイプ指定するだけ。これは勝った。で、完成したのがGistのコード。console.logで真偽値が正確に取れるかどうかのチェックから始めて、classListとかforEachの書き方を調べ、createCarouselって名前で関数化………。正直泣いたけどちゃんとできたのでヨシ！

JSできねー！！！って言ってる場合じゃなくなってきたので、楽するためにちゃんとTypeScript（とJest？）覚えようと決意しました。（何度もそれTypeScriptのほうが楽だよと洗脳された結果）

投稿 特定のブレークポイント以下でSwiperを動作させないコード は chiilog に最初に表示されました。

WordPress 5.2.2搭載のGutenbergで確認しています（2019/8/30追記）

目次

• 一般ブロック
• フォーマット(整形)
• レイアウト要素
• ウィジェット
• 埋め込み（準備中）

ショートコード

[codepen_embed height=300 theme_id=1 slug_hash=’jwGBh’ user=’knyttneve’ default_tab=’html’ animations=’run’][/codepen_embed]

Gutenbergでもショートコードを使うことが可能です。
上のCodePenはショートコードでembedしてくれるプラグインを入れています。

アーカイブ

デフォルト

• 2024年4月
• 2024年2月
• 2023年12月
• 2021年10月
• 2021年3月
• 2021年2月
• 2020年3月
• 2020年2月
• 2020年1月
• 2019年12月
• 2019年11月
• 2019年10月
• 2019年9月
• 2019年8月
• 2019年7月
• 2019年6月
• 2019年5月
• 2019年4月
• 2019年3月
• 2019年2月
• 2019年1月
• 2018年12月
• 2018年11月
• 2018年10月
• 2018年9月
• 2018年8月
• 2018年7月
• 2018年6月
• 2018年5月
• 2018年4月
• 2018年3月
• 2018年2月
• 2018年1月
• 2017年12月
• 2017年11月
• 2017年10月
• 2017年9月
• 2017年8月
• 2017年7月
• 2017年6月
• 2017年2月

<ul class="wp-block-archives wp-block-archives-list">
	<li><a href="https://chiilog.com/2019/07/">2019年7月</a></li>
	<li><a href="https://chiilog.com/2019/06/">2019年6月</a></li>
	<li><a href="https://chiilog.com/2019/05/">2019年5月</a></li>
</ul>

※ li要素省略しています

左寄せ

• 2024年4月
• 2024年2月
• 2023年12月
• 2021年10月
• 2021年3月
• 2021年2月
• 2020年3月
• 2020年2月
• 2020年1月
• 2019年12月
• 2019年11月
• 2019年10月
• 2019年9月
• 2019年8月
• 2019年7月
• 2019年6月
• 2019年5月
• 2019年4月
• 2019年3月
• 2019年2月
• 2019年1月
• 2018年12月
• 2018年11月
• 2018年10月
• 2018年9月
• 2018年8月
• 2018年7月
• 2018年6月
• 2018年5月
• 2018年4月
• 2018年3月
• 2018年2月
• 2018年1月
• 2017年12月
• 2017年11月
• 2017年10月
• 2017年9月
• 2017年8月
• 2017年7月
• 2017年6月
• 2017年2月

<ul class="wp-block-archives alignleft wp-block-archives-list">
	<li><a href="https://chiilog.com/2019/07/">2019年7月</a></li>
	<li><a href="https://chiilog.com/2019/06/">2019年6月</a></li>
	<li><a href="https://chiilog.com/2019/05/">2019年5月</a></li>
</ul>

中央寄せ

• 2024年4月
• 2024年2月
• 2023年12月
• 2021年10月
• 2021年3月
• 2021年2月
• 2020年3月
• 2020年2月
• 2020年1月
• 2019年12月
• 2019年11月
• 2019年10月
• 2019年9月
• 2019年8月
• 2019年7月
• 2019年6月
• 2019年5月
• 2019年4月
• 2019年3月
• 2019年2月
• 2019年1月
• 2018年12月
• 2018年11月
• 2018年10月
• 2018年9月
• 2018年8月
• 2018年7月
• 2018年6月
• 2018年5月
• 2018年4月
• 2018年3月
• 2018年2月
• 2018年1月
• 2017年12月
• 2017年11月
• 2017年10月
• 2017年9月
• 2017年8月
• 2017年7月
• 2017年6月
• 2017年2月

<ul class="wp-block-archives aligncenter wp-block-archives-list">
	<li><a href="https://chiilog.com/2019/07/">2019年7月</a></li>
	<li><a href="https://chiilog.com/2019/06/">2019年6月</a></li>
	<li><a href="https://chiilog.com/2019/05/">2019年5月</a></li>
</ul>

右寄せ

• 2024年4月
• 2024年2月
• 2023年12月
• 2021年10月
• 2021年3月
• 2021年2月
• 2020年3月
• 2020年2月
• 2020年1月
• 2019年12月
• 2019年11月
• 2019年10月
• 2019年9月
• 2019年8月
• 2019年7月
• 2019年6月
• 2019年5月
• 2019年4月
• 2019年3月
• 2019年2月
• 2019年1月
• 2018年12月
• 2018年11月
• 2018年10月
• 2018年9月
• 2018年8月
• 2018年7月
• 2018年6月
• 2018年5月
• 2018年4月
• 2018年3月
• 2018年2月
• 2018年1月
• 2017年12月
• 2017年11月
• 2017年10月
• 2017年9月
• 2017年8月
• 2017年7月
• 2017年6月
• 2017年2月

<ul class="wp-block-archives alignright wp-block-archives-list">
	<li><a href="https://chiilog.com/2019/07/">2019年7月</a></li>
	<li><a href="https://chiilog.com/2019/06/">2019年6月</a></li>
	<li><a href="https://chiilog.com/2019/05/">2019年5月</a></li>
</ul>

アーカイブ設定：ドロップダウンで表示

<div class="wp-block-archives wp-block-archives-dropdown">
	<label class="screen-reader-text" for="wp-block-archives-5d68d4a3935d1">アーカイブ</label>
	<select id="wp-block-archives-5d68d4a3935d1" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
		<option value="">月を選択</option>
		<option value="/2019/07/"> 2019年7月 </option>
		<option value="/2019/06/"> 2019年6月 </option>
		<option value="/2019/05/"> 2019年5月 </option>
	</select>
</div>

アーカイブ設定：投稿数を表示

• 2024年4月 (4)
• 2024年2月 (1)
• 2023年12月 (1)
• 2021年10月 (1)
• 2021年3月 (1)
• 2021年2月 (6)
• 2020年3月 (1)
• 2020年2月 (1)
• 2020年1月 (2)
• 2019年12月 (1)
• 2019年11月 (1)
• 2019年10月 (3)
• 2019年9月 (1)
• 2019年8月 (2)
• 2019年7月 (2)
• 2019年6月 (3)
• 2019年5月 (3)
• 2019年4月 (3)
• 2019年3月 (3)
• 2019年2月 (2)
• 2019年1月 (3)
• 2018年12月 (5)
• 2018年11月 (3)
• 2018年10月 (3)
• 2018年9月 (4)
• 2018年8月 (4)
• 2018年7月 (2)
• 2018年6月 (4)
• 2018年5月 (3)
• 2018年4月 (3)
• 2018年3月 (4)
• 2018年2月 (3)
• 2018年1月 (4)
• 2017年12月 (5)
• 2017年11月 (3)
• 2017年10月 (6)
• 2017年9月 (4)
• 2017年8月 (5)
• 2017年7月 (5)
• 2017年6月 (1)
• 2017年2月 (12)

<ul class="wp-block-archives wp-block-archives-list">
	<li><a href="https://chiilog.com/2019/07/">2019年7月</a> (1)</li>
	<li><a href="https://chiilog.com/2019/06/">2019年6月</a> (3)</li>
	<li><a href="https://chiilog.com/2019/05/">2019年5月</a> (3)</li>
</ul>

カレンダー

デフォルト

<div class="wp-block-calendar">
	<table id="wp-calendar">
		<thead>
			<tr>
				<th scope="col" title="月曜日">月</th>
				<th scope="col" title="火曜日">火</th>
				<th scope="col" title="水曜日">水</th>
				<th scope="col" title="木曜日">木</th>
				<th scope="col" title="金曜日">金</th>
				<th scope="col" title="土曜日">土</th>
				<th scope="col" title="日曜日">日</th>
			</tr>
		</thead>

		<tfoot>
		<tr>
			<td colspan="3" id="prev"><a href="https://chiilog.com/2019/07/">« 7月</a></td>
			<td class="pad"> </td>
			<td colspan="3" id="next" class="pad"> </td>
		</tr>
		</tfoot>

		<tbody>
		<tr>
			<td colspan="3" class="pad"> </td><td>1</td><td>2</td><td>3</td><td>4</td>
		</tr>
		<tr>
			<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
		</tr>
		<tr>
			<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
		</tr>
		<tr>
			<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
		</tr>
		<tr>
			<td>26</td><td>27</td><td>28</td><td>29</td><td id="today">30</td><td>31</td>
			<td class="pad" colspan="1"> </td>
		</tr>
		</tbody>
	</table>
</div>

左寄せ

<div class="wp-block-calendar alignleft">
	<table id="wp-calendar">
		<caption>2019年8月</caption>
		<thead>
			<tr>
				<th scope="col" title="月曜日">月</th>
				<th scope="col" title="火曜日">火</th>
				<th scope="col" title="水曜日">水</th>
				<th scope="col" title="木曜日">木</th>
				<th scope="col" title="金曜日">金</th>
				<th scope="col" title="土曜日">土</th>
				<th scope="col" title="日曜日">日</th>
			</tr>
		</thead>

		<tfoot>
		<tr>
			<td colspan="3" id="prev"><a href="https://chiilog.com/2019/07/">« 7月</a></td>
			<td class="pad"> </td>
			<td colspan="3" id="next" class="pad"> </td>
		</tr>
		</tfoot>

		<tbody>
		<tr>
			<td colspan="3" class="pad"> </td><td>1</td><td>2</td><td>3</td><td>4</td>
		</tr>
		<tr>
			<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
		</tr>
		<tr>
			<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
		</tr>
		<tr>
			<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
		</tr>
		<tr>
			<td>26</td><td>27</td><td>28</td><td>29</td><td id="today">30</td><td>31</td>
			<td class="pad" colspan="1"> </td>
		</tr>
		</tbody>
	</table>
</div>

中央寄せ

<div class="wp-block-calendar aligncenter">
	<table id="wp-calendar">
		<caption>2019年8月</caption>
		<thead>
			<tr>
				<th scope="col" title="月曜日">月</th>
				<th scope="col" title="火曜日">火</th>
				<th scope="col" title="水曜日">水</th>
				<th scope="col" title="木曜日">木</th>
				<th scope="col" title="金曜日">金</th>
				<th scope="col" title="土曜日">土</th>
				<th scope="col" title="日曜日">日</th>
			</tr>
		</thead>

		<tfoot>
		<tr>
			<td colspan="3" id="prev"><a href="https://chiilog.com/2019/07/">« 7月</a></td>
			<td class="pad"> </td>
			<td colspan="3" id="next" class="pad"> </td>
		</tr>
		</tfoot>

		<tbody>
		<tr>
			<td colspan="3" class="pad"> </td><td>1</td><td>2</td><td>3</td><td>4</td>
		</tr>
		<tr>
			<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
		</tr>
		<tr>
			<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
		</tr>
		<tr>
			<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
		</tr>
		<tr>
			<td>26</td><td>27</td><td>28</td><td>29</td><td id="today">30</td><td>31</td>
			<td class="pad" colspan="1"> </td>
		</tr>
		</tbody>
	</table>
</div>

左寄せ

<div class="wp-block-calendar alignright">
	<table id="wp-calendar">
		<caption>2019年8月</caption>
		<thead>
			<tr>
				<th scope="col" title="月曜日">月</th>
				<th scope="col" title="火曜日">火</th>
				<th scope="col" title="水曜日">水</th>
				<th scope="col" title="木曜日">木</th>
				<th scope="col" title="金曜日">金</th>
				<th scope="col" title="土曜日">土</th>
				<th scope="col" title="日曜日">日</th>
			</tr>
		</thead>

		<tfoot>
		<tr>
			<td colspan="3" id="prev"><a href="https://chiilog.com/2019/07/">« 7月</a></td>
			<td class="pad"> </td>
			<td colspan="3" id="next" class="pad"> </td>
		</tr>
		</tfoot>

		<tbody>
		<tr>
			<td colspan="3" class="pad"> </td><td>1</td><td>2</td><td>3</td><td>4</td>
		</tr>
		<tr>
			<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
		</tr>
		<tr>
			<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
		</tr>
		<tr>
			<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
		</tr>
		<tr>
			<td>26</td><td>27</td><td>28</td><td>29</td><td id="today">30</td><td>31</td>
			<td class="pad" colspan="1"> </td>
		</tr>
		</tbody>
	</table>
</div>

幅広

<div class="wp-block-calendar alignwide">
	<table id="wp-calendar">
		<caption>2019年8月</caption>
		<thead>
			<tr>
				<th scope="col" title="月曜日">月</th>
				<th scope="col" title="火曜日">火</th>
				<th scope="col" title="水曜日">水</th>
				<th scope="col" title="木曜日">木</th>
				<th scope="col" title="金曜日">金</th>
				<th scope="col" title="土曜日">土</th>
				<th scope="col" title="日曜日">日</th>
			</tr>
		</thead>

		<tfoot>
		<tr>
			<td colspan="3" id="prev"><a href="https://chiilog.com/2019/07/">« 7月</a></td>
			<td class="pad"> </td>
			<td colspan="3" id="next" class="pad"> </td>
		</tr>
		</tfoot>

		<tbody>
		<tr>
			<td colspan="3" class="pad"> </td><td>1</td><td>2</td><td>3</td><td>4</td>
		</tr>
		<tr>
			<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
		</tr>
		<tr>
			<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
		</tr>
		<tr>
			<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
		</tr>
		<tr>
			<td>26</td><td>27</td><td>28</td><td>29</td><td id="today">30</td><td>31</td>
			<td class="pad" colspan="1"> </td>
		</tr>
		</tbody>
	</table>
</div>

全幅

<div class="wp-block-calendar alignfull">
	<table id="wp-calendar">
		<caption>2019年8月</caption>
		<thead>
			<tr>
				<th scope="col" title="月曜日">月</th>
				<th scope="col" title="火曜日">火</th>
				<th scope="col" title="水曜日">水</th>
				<th scope="col" title="木曜日">木</th>
				<th scope="col" title="金曜日">金</th>
				<th scope="col" title="土曜日">土</th>
				<th scope="col" title="日曜日">日</th>
			</tr>
		</thead>

		<tfoot>
		<tr>
			<td colspan="3" id="prev"><a href="https://chiilog.com/2019/07/">« 7月</a></td>
			<td class="pad"> </td>
			<td colspan="3" id="next" class="pad"> </td>
		</tr>
		</tfoot>

		<tbody>
		<tr>
			<td colspan="3" class="pad"> </td><td>1</td><td>2</td><td>3</td><td>4</td>
		</tr>
		<tr>
			<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
		</tr>
		<tr>
			<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
		</tr>
		<tr>
			<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
		</tr>
		<tr>
			<td>26</td><td>27</td><td>28</td><td>29</td><td id="today">30</td><td>31</td>
			<td class="pad" colspan="1"> </td>
		</tr>
		</tbody>
	</table>
</div>

カテゴリー

デフォルト

• Catlog
• Webデザイン
• おしらせ
• カリカリマシーン
• コーディング・プログラミング系
• ざっき
• 料理レシピ
• 日記
• 猫
• 猫グッズ
• 登壇系
• 見守りカメラ
• 食器系

<ul class="wp-block-categories wp-block-categories-list">
	<li class="cat-item cat-item-10"><a href="https://chiilog.com/category/design/">Webデザイン</a>
	</li>
	<li class="cat-item cat-item-1"><a href="https://chiilog.com/category/program/">コーディング・プログラミング系</a>
	</li>
	<li class="cat-item cat-item-14"><a href="https://chiilog.com/category/recipe/" title="働きながら夜にささっと作れるレシピから休みの日に作る手の込んだレシピまで">料理レシピ</a>
	</li>
	<li class="cat-item cat-item-83"><a href="https://chiilog.com/category/other/">日記</a>
	</li>
	<li class="cat-item cat-item-65"><a href="https://chiilog.com/category/cat/">猫</a>
	</li>
	<li class="cat-item cat-item-96"><a href="https://chiilog.com/category/podium/">登壇系</a>
	</li>
</ul>

左寄せ

• Catlog
• Webデザイン
• おしらせ
• カリカリマシーン
• コーディング・プログラミング系
• ざっき
• 料理レシピ
• 日記
• 猫
• 猫グッズ
• 登壇系
• 見守りカメラ
• 食器系

<ul class="wp-block-categories wp-block-categories-list alignleft">
	<li class="cat-item cat-item-10"><a href="https://chiilog.com/category/design/">Webデザイン</a>
</li>
	<li class="cat-item cat-item-1"><a href="https://chiilog.com/category/program/">コーディング・プログラミング系</a>
</li>
	<li class="cat-item cat-item-14"><a href="https://chiilog.com/category/recipe/" title="働きながら夜にささっと作れるレシピから休みの日に作る手の込んだレシピまで">料理レシピ</a>
</li>
	<li class="cat-item cat-item-83"><a href="https://chiilog.com/category/other/">日記</a>
</li>
	<li class="cat-item cat-item-65"><a href="https://chiilog.com/category/cat/">猫</a>
</li>
	<li class="cat-item cat-item-96"><a href="https://chiilog.com/category/podium/">登壇系</a>
</li>
</ul>

中央寄せ

• Catlog
• Webデザイン
• おしらせ
• カリカリマシーン
• コーディング・プログラミング系
• ざっき
• 料理レシピ
• 日記
• 猫
• 猫グッズ
• 登壇系
• 見守りカメラ
• 食器系

<ul class="wp-block-categories wp-block-categories-list aligncenter">
	<li class="cat-item cat-item-10"><a href="https://chiilog.com/category/design/">Webデザイン</a>
</li>
	<li class="cat-item cat-item-1"><a href="https://chiilog.com/category/program/">コーディング・プログラミング系</a>
</li>
	<li class="cat-item cat-item-14"><a href="https://chiilog.com/category/recipe/" title="働きながら夜にささっと作れるレシピから休みの日に作る手の込んだレシピまで">料理レシピ</a>
</li>
	<li class="cat-item cat-item-83"><a href="https://chiilog.com/category/other/">日記</a>
</li>
	<li class="cat-item cat-item-65"><a href="https://chiilog.com/category/cat/">猫</a>
</li>
	<li class="cat-item cat-item-96"><a href="https://chiilog.com/category/podium/">登壇系</a>
</li>
</ul>

右寄せ

• Catlog
• Webデザイン
• おしらせ
• カリカリマシーン
• コーディング・プログラミング系
• ざっき
• 料理レシピ
• 日記
• 猫
• 猫グッズ
• 登壇系
• 見守りカメラ
• 食器系

<ul class="wp-block-categories wp-block-categories-list alignright">
	<li class="cat-item cat-item-10"><a href="https://chiilog.com/category/design/">Webデザイン</a>
</li>
	<li class="cat-item cat-item-1"><a href="https://chiilog.com/category/program/">コーディング・プログラミング系</a>
</li>
	<li class="cat-item cat-item-14"><a href="https://chiilog.com/category/recipe/" title="働きながら夜にささっと作れるレシピから休みの日に作る手の込んだレシピまで">料理レシピ</a>
</li>
	<li class="cat-item cat-item-83"><a href="https://chiilog.com/category/other/">日記</a>
</li>
	<li class="cat-item cat-item-65"><a href="https://chiilog.com/category/cat/">猫</a>
</li>
	<li class="cat-item cat-item-96"><a href="https://chiilog.com/category/podium/">登壇系</a>
</li>
</ul>

カテゴリー設定：ドロップダウンで表示

<div class="wp-block-categories wp-block-categories-dropdown">
	<select name="cat" id="wp-block-categories-5" class="postform">
		<option value="-1">カテゴリーを選択</option>
		<option class="level-0" value="10">Webデザイン</option>
		<option class="level-0" value="1">コーディング・プログラミング系</option>
		<option class="level-0" value="14">料理レシピ</option>
		<option class="level-0" value="83">日記</option>
		<option class="level-0" value="65">猫</option>
		<option class="level-0" value="96">登壇系</option>
	</select>
</div>

カテゴリー設定：階層を表示

• Catlog
• Webデザイン
• おしらせ
• カリカリマシーン
• コーディング・プログラミング系
• ざっき
• 料理レシピ
• 日記
• 猫
• 猫グッズ
• 登壇系
• 見守りカメラ
• 食器系

<ul class="wp-block-categories wp-block-categories-list">
	<li class="cat-item cat-item-10"><a href="https://chiilog.com/category/design/">Webデザイン</a>
</li>
	<li class="cat-item cat-item-1"><a href="https://chiilog.com/category/program/">コーディング・プログラミング系</a>
</li>
	<li class="cat-item cat-item-14"><a href="https://chiilog.com/category/recipe/" title="働きながら夜にささっと作れるレシピから休みの日に作る手の込んだレシピまで">料理レシピ</a>
</li>
	<li class="cat-item cat-item-83"><a href="https://chiilog.com/category/other/">日記</a>
</li>
	<li class="cat-item cat-item-65"><a href="https://chiilog.com/category/cat/">猫</a>
</li>
	<li class="cat-item cat-item-96"><a href="https://chiilog.com/category/podium/">登壇系</a>
</li>
</ul>

カテゴリー設定：投稿数を表示

• Catlog (1)
• Webデザイン (5)
• おしらせ (1)
• カリカリマシーン (4)
• コーディング・プログラミング系 (49)
• ざっき (4)
• 料理レシピ (26)
• 日記 (18)
• 猫 (5)
• 猫グッズ (13)
• 登壇系 (8)
• 見守りカメラ (1)
• 食器系 (4)

<ul class="wp-block-categories wp-block-categories-list">
	<li class="cat-item cat-item-10"><a href="https://chiilog.com/category/design/">Webデザイン</a> (5)
	</li>
	<li class="cat-item cat-item-1"><a href="https://chiilog.com/category/program/">コーディング・プログラミング系</a> (37)
	</li>
	<li class="cat-item cat-item-14"><a href="https://chiilog.com/category/recipe/" title="働きながら夜にささっと作れるレシピから休みの日に作る手の込んだレシピまで">料理レシピ</a> (26)
	</li>
	<li class="cat-item cat-item-83"><a href="https://chiilog.com/category/other/">日記</a> (17)
	</li>
	<li class="cat-item cat-item-65"><a href="https://chiilog.com/category/cat/">猫</a> (5)
	</li>
	<li class="cat-item cat-item-96"><a href="https://chiilog.com/category/podium/">登壇系</a> (6)
	</li>
</ul>

最新の記事

デフォルトでリスト表示になっています。
並び替えとカテゴリーの絞り込み、表示件数（最大100件）が選べます。

デフォルト

• Block Bindings APIもうすこし遊んでみた
• WordPress 6.5 で新登場したBlock Bindings APIを試してみた
• WordPress 6.5 で新登場したInteractivity APIを試してみた
• The Block Developers Cookbook をやってみた
• 子連れ目線から振り返るWordCamp Kansai 2024 #wckansai

<ul class="wp-block-latest-posts">
	<li><a href="https://chiilog.com/2019/07/08/2180/">Gutenbergのウィジェットのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/06/26/2182/">JBUG 神戸 #3に参加してきました #JBUG #JBUG神戸</a></li>
	<li><a href="https://chiilog.com/2019/06/14/2169/">テキストのみ含めることができる、シンプルなdlタグを出力するGutenbergブロックつくりました</a></li>
	<li><a href="https://chiilog.com/2019/06/10/2151/">Gutenbergのレイアウトのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/05/28/2135/">これからWordPressを運用するのにおすすめの一冊「WordPressのやさしい教科書。」</a></li>
</ul>

左寄せ

• Block Bindings APIもうすこし遊んでみた
• WordPress 6.5 で新登場したBlock Bindings APIを試してみた
• WordPress 6.5 で新登場したInteractivity APIを試してみた
• The Block Developers Cookbook をやってみた
• 子連れ目線から振り返るWordCamp Kansai 2024 #wckansai

<ul class="wp-block-latest-posts alignleft">
	<li><a href="https://chiilog.com/2019/07/08/2180/">Gutenbergのウィジェットのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/06/26/2182/">JBUG 神戸 #3に参加してきました #JBUG #JBUG神戸</a></li>
	<li><a href="https://chiilog.com/2019/06/14/2169/">テキストのみ含めることができる、シンプルなdlタグを出力するGutenbergブロックつくりました</a></li>
	<li><a href="https://chiilog.com/2019/06/10/2151/">Gutenbergのレイアウトのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/05/28/2135/">これからWordPressを運用するのにおすすめの一冊「WordPressのやさしい教科書。」</a></li>
</ul>

中央寄せ

• Block Bindings APIもうすこし遊んでみた
• WordPress 6.5 で新登場したBlock Bindings APIを試してみた
• WordPress 6.5 で新登場したInteractivity APIを試してみた
• The Block Developers Cookbook をやってみた
• 子連れ目線から振り返るWordCamp Kansai 2024 #wckansai

<ul class="wp-block-latest-posts aligncenter">
	<li><a href="https://chiilog.com/2019/07/08/2180/">Gutenbergのウィジェットのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/06/26/2182/">JBUG 神戸 #3に参加してきました #JBUG #JBUG神戸</a></li>
	<li><a href="https://chiilog.com/2019/06/14/2169/">テキストのみ含めることができる、シンプルなdlタグを出力するGutenbergブロックつくりました</a></li>
	<li><a href="https://chiilog.com/2019/06/10/2151/">Gutenbergのレイアウトのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/05/28/2135/">これからWordPressを運用するのにおすすめの一冊「WordPressのやさしい教科書。」</a></li>
</ul>

右寄せ

• Block Bindings APIもうすこし遊んでみた
• WordPress 6.5 で新登場したBlock Bindings APIを試してみた
• WordPress 6.5 で新登場したInteractivity APIを試してみた
• The Block Developers Cookbook をやってみた
• 子連れ目線から振り返るWordCamp Kansai 2024 #wckansai

<ul class="wp-block-latest-posts alignright">
	<li><a href="https://chiilog.com/2019/07/08/2180/">Gutenbergのウィジェットのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/06/26/2182/">JBUG 神戸 #3に参加してきました #JBUG #JBUG神戸</a></li>
	<li><a href="https://chiilog.com/2019/06/14/2169/">テキストのみ含めることができる、シンプルなdlタグを出力するGutenbergブロックつくりました</a></li>
	<li><a href="https://chiilog.com/2019/06/10/2151/">Gutenbergのレイアウトのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/05/28/2135/">これからWordPressを運用するのにおすすめの一冊「WordPressのやさしい教科書。」</a></li>
</ul>

幅広

• Block Bindings APIもうすこし遊んでみた
• WordPress 6.5 で新登場したBlock Bindings APIを試してみた
• WordPress 6.5 で新登場したInteractivity APIを試してみた
• The Block Developers Cookbook をやってみた
• 子連れ目線から振り返るWordCamp Kansai 2024 #wckansai

<ul class="wp-block-latest-posts alignwide">
	<li><a href="https://chiilog.com/2019/07/08/2180/">Gutenbergのウィジェットのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/06/26/2182/">JBUG 神戸 #3に参加してきました #JBUG #JBUG神戸</a></li>
	<li><a href="https://chiilog.com/2019/06/14/2169/">テキストのみ含めることができる、シンプルなdlタグを出力するGutenbergブロックつくりました</a></li>
	<li><a href="https://chiilog.com/2019/06/10/2151/">Gutenbergのレイアウトのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/05/28/2135/">これからWordPressを運用するのにおすすめの一冊「WordPressのやさしい教科書。」</a></li>
</ul>

全幅

• Block Bindings APIもうすこし遊んでみた
• WordPress 6.5 で新登場したBlock Bindings APIを試してみた
• WordPress 6.5 で新登場したInteractivity APIを試してみた
• The Block Developers Cookbook をやってみた
• 子連れ目線から振り返るWordCamp Kansai 2024 #wckansai

<ul class="wp-block-latest-posts alignfull">
	<li><a href="https://chiilog.com/2019/07/08/2180/">Gutenbergのウィジェットのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/06/26/2182/">JBUG 神戸 #3に参加してきました #JBUG #JBUG神戸</a></li>
	<li><a href="https://chiilog.com/2019/06/14/2169/">テキストのみ含めることができる、シンプルなdlタグを出力するGutenbergブロックつくりました</a></li>
	<li><a href="https://chiilog.com/2019/06/10/2151/">Gutenbergのレイアウトのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/05/28/2135/">これからWordPressを運用するのにおすすめの一冊「WordPressのやさしい教科書。」</a></li>
</ul>

グリッド表示

リスト表示と同じく、左右中央、幅広、全幅を選択できます。
グリッドを選択した場合、「並べ替えと絞り込み」でカラム数の選択もできるようになります。

• Block Bindings APIもうすこし遊んでみた
• WordPress 6.5 で新登場したBlock Bindings APIを試してみた
• WordPress 6.5 で新登場したInteractivity APIを試してみた
• The Block Developers Cookbook をやってみた
• 子連れ目線から振り返るWordCamp Kansai 2024 #wckansai

<ul class="wp-block-latest-posts is-grid columns-3">
	<li><a href="https://chiilog.com/2019/07/08/2180/">Gutenbergのウィジェットのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/06/26/2182/">JBUG 神戸 #3に参加してきました #JBUG #JBUG神戸</a></li>
	<li><a href="https://chiilog.com/2019/06/14/2169/">テキストのみ含めることができる、シンプルなdlタグを出力するGutenbergブロックつくりました</a></li>
	<li><a href="https://chiilog.com/2019/06/10/2151/">Gutenbergのレイアウトのリスト（HTMLコード付き）</a></li>
	<li><a href="https://chiilog.com/2019/05/28/2135/">これからWordPressを運用するのにおすすめの一冊「WordPressのやさしい教科書。」</a></li>
</ul>

投稿メタ設定：投稿日を表示

• Block Bindings APIもうすこし遊んでみた2024年4月15日
• WordPress 6.5 で新登場したBlock Bindings APIを試してみた2024年4月12日
• WordPress 6.5 で新登場したInteractivity APIを試してみた2024年4月11日
• The Block Developers Cookbook をやってみた2024年4月5日
• 子連れ目線から振り返るWordCamp Kansai 2024 #wckansai2024年2月28日

<ul class="wp-block-latest-posts has-dates">
	<li><a href="https://chiilog.com/2019/07/08/2180/">Gutenbergのウィジェットのリスト（HTMLコード付き）</a><time datetime="2019-07-08T23:59:10+09:00" class="wp-block-latest-posts__post-date">2019年7月8日</time></li>
	<li><a href="https://chiilog.com/2019/06/26/2182/">JBUG 神戸 #3に参加してきました #JBUG #JBUG神戸</a><time datetime="2019-06-26T21:09:18+09:00" class="wp-block-latest-posts__post-date">2019年6月26日</time></li>
	<li><a href="https://chiilog.com/2019/06/14/2169/">テキストのみ含めることができる、シンプルなdlタグを出力するGutenbergブロックつくりました</a><time datetime="2019-06-14T01:28:27+09:00" class="wp-block-latest-posts__post-date">2019年6月14日</time></li>
	<li><a href="https://chiilog.com/2019/06/10/2151/">Gutenbergのレイアウトのリスト（HTMLコード付き）</a><time datetime="2019-06-10T19:04:15+09:00" class="wp-block-latest-posts__post-date">2019年6月10日</time></li>
	<li><a href="https://chiilog.com/2019/05/28/2135/">これからWordPressを運用するのにおすすめの一冊「WordPressのやさしい教科書。」</a><time datetime="2019-05-28T17:13:52+09:00" class="wp-block-latest-posts__post-date">2019年5月28日</time></li>
</ul>

RSS

デフォルトはリスト表示です。RSS設定から表示数も選択できます。

デフォルト

<ul class="wp-block-rss">
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1501512/">【黒ウィズ】秋の大感謝祭2019で最大100連分無料ガチャを実施！復帰時に挑みたい“はじまりの塔”を解説【ファミ通App連載企画】</a></div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1502847/">『初音ミク』の新ゲームプロジェクト”プロジェクトセカイ”が始動！ティザームービーも公開</a></div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1493734/">『ラグナロク マスターズ（ラグマス）』子デザートウルフは砂漠の都市モロクで捕まえろ！</a></div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503133/">『TEPPEN』の新カードパック“DAY OF NIGHTMARES”の発売が9/2に決定</a></div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503110/">『ハリー・ポッター：魔法同盟』8/31よりグローバルチャレンジ開催！9/7には待望のドラゴンが出現</a></div></li>
</ul>

グリッド表示

カラム数は変更できます。（デフォルトは2カラム、最大6カラム）

<ul class="wp-block-rss is-grid columns-2">
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1501512/">【黒ウィズ】秋の大感謝祭2019で最大100連分無料ガチャを実施！復帰時に挑みたい“はじまりの塔”を解説【ファミ通App連載企画】</a></div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1502847/">『初音ミク』の新ゲームプロジェクト”プロジェクトセカイ”が始動！ティザームービーも公開</a></div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1493734/">『ラグナロク マスターズ（ラグマス）』子デザートウルフは砂漠の都市モロクで捕まえろ！</a></div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503133/">『TEPPEN』の新カードパック“DAY OF NIGHTMARES”の発売が9/2に決定</a></div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503110/">『ハリー・ポッター：魔法同盟』8/31よりグローバルチャレンジ開催！9/7には待望のドラゴンが出現</a></div></li>
</ul>

RSS設定：投稿者を表示

<ul class="wp-block-rss">
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1501512/">【黒ウィズ】秋の大感謝祭2019で最大100連分無料ガチャを実施！復帰時に挑みたい“はじまりの塔”を解説【ファミ通App連載企画】</a></div><span class="wp-block-rss__item-author">by famitsu_app</span></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1502847/">『初音ミク』の新ゲームプロジェクト”プロジェクトセカイ”が始動！ティザームービーも公開</a></div><span class="wp-block-rss__item-author">by famitsu_app</span></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1493734/">『ラグナロク マスターズ（ラグマス）』子デザートウルフは砂漠の都市モロクで捕まえろ！</a></div><span class="wp-block-rss__item-author">by famitsu_app</span></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503133/">『TEPPEN』の新カードパック“DAY OF NIGHTMARES”の発売が9/2に決定</a></div><span class="wp-block-rss__item-author">by famitsu_app</span></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503110/">『ハリー・ポッター：魔法同盟』8/31よりグローバルチャレンジ開催！9/7には待望のドラゴンが出現</a></div><span class="wp-block-rss__item-author">by famitsu_app</span></li>
</ul>

RSS設定：日付を表示

<ul class="wp-block-rss">
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1501512/">【黒ウィズ】秋の大感謝祭2019で最大100連分無料ガチャを実施！復帰時に挑みたい“はじまりの塔”を解説【ファミ通App連載企画】</a></div><time datetime="" class="wp-block-rss__item-publish-date">2019年8月30日</time> </li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1502847/">『初音ミク』の新ゲームプロジェクト”プロジェクトセカイ”が始動！ティザームービーも公開</a></div><time datetime="" class="wp-block-rss__item-publish-date">2019年8月30日</time> </li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1493734/">『ラグナロク マスターズ（ラグマス）』子デザートウルフは砂漠の都市モロクで捕まえろ！</a></div><time datetime="" class="wp-block-rss__item-publish-date">2019年8月30日</time> </li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503133/">『TEPPEN』の新カードパック“DAY OF NIGHTMARES”の発売が9/2に決定</a></div><time datetime="" class="wp-block-rss__item-publish-date">2019年8月30日</time> </li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503110/">『ハリー・ポッター：魔法同盟』8/31よりグローバルチャレンジ開催！9/7には待望のドラゴンが出現</a></div><time datetime="" class="wp-block-rss__item-publish-date">2019年8月30日</time> </li>
</ul>

RSS設定：抜粋を表示

抜粋の文字数も変更できます。（デフォルトは55文字、最大100文字）

<ul class="wp-block-rss">
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1501512/">【黒ウィズ】秋の大感謝祭2019で最大100連分無料ガチャを実施！復帰時に挑みたい“はじまりの塔”を解説【ファミ通App連載企画】</a></div><div class="wp-block-rss__item-excerpt">『クイズRPG 魔法使いと黒猫のウィズ』の“黒ウィズ 秋の大感謝祭2019”で実施される要素をまとめてお届け！</div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1502847/">『初音ミク』の新ゲームプロジェクト”プロジェクトセカイ”が始動！ティザームービーも公開</a></div><div class="wp-block-rss__item-excerpt">2019年8月30日に発表された『初音ミク』新ゲームプロジェクトの情報をお届け。</div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1493734/">『ラグナロク マスターズ（ラグマス）』子デザートウルフは砂漠の都市モロクで捕まえろ！</a></div><div class="wp-block-rss__item-excerpt">『ラグナロク マスターズ』での子デザートウルフの出現場所や探しかたを紹介。</div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503133/">『TEPPEN』の新カードパック“DAY OF NIGHTMARES”の発売が9/2に決定</a></div><div class="wp-block-rss__item-excerpt">カプコンとガンホーが共同開発したスマホ向けカードゲーム『TEPPEN（テッペン）』の新カードパック“DAY O […]</div></li>
	<li class="wp-block-rss__item"><div class="wp-block-rss__item-title"><a href="https://app.famitsu.com/20190830_1503110/">『ハリー・ポッター：魔法同盟』8/31よりグローバルチャレンジ開催！9/7には待望のドラゴンが出現</a></div><div class="wp-block-rss__item-excerpt">『ハリー・ポッター：魔法同盟』において8月31日22時〜9月2日22時までグローバルチャレンジが開催する</div></li>
</ul>

検索

デフォルト

<form class="wp-block-search" role="search" method="get" action="/">
	<label for="wp-block-search__input-1" class="wp-block-search__label">検索</label>
	<input type="search" id="wp-block-search__input-1" class="wp-block-search__input" name="s" value="" placeholder=""><button type="submit" class="wp-block-search__button">検索</button>
</form>

タグクラウド

デフォルト

CSS Google アナリティクス Gutenberg JavaScript Photoshop pickup TravisCI WordBench WordCamp WordPress きゅうり さつまいも じゃがいも たまご にんじん にんにく アドベントカレンダー イベント エビ カメラ キャットフード サラダ チーズ トマト パフェ ピーマン ブロッコリー ベンガル ベーコン 備忘録 合いびき肉 味噌 大葉 旅行 松本 梅干し 炒め物 猫 玉ねぎ 留守番 結婚式 給餌器 豚肉 長野 鶏肉

<p class="wp-block-tag-cloud">
	<a href="https://chiilog.com/tag/css/" class="tag-cloud-link tag-link-67 tag-link-position-1" style="font-size: 10.52pt;" aria-label="CSS (2個の項目)">CSS</a>
	<a href="https://chiilog.com/tag/fireworks/" class="tag-cloud-link tag-link-2 tag-link-position-2" style="font-size: 8pt;" aria-label="Fireworks (1個の項目)">Fireworks</a>
	<a href="https://chiilog.com/tag/google-%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9/" class="tag-cloud-link tag-link-109 tag-link-position-3" style="font-size: 10.52pt;" aria-label="Google アナリティクス (2個の項目)">Google アナリティクス</a>
	<a href="https://chiilog.com/tag/%e8%b1%9a%e8%82%89/" class="tag-cloud-link tag-link-18 tag-link-position-43" style="font-size: 14.72pt;" aria-label="豚肉 (5個の項目)">豚肉</a>
</p>

※ aタグは省略しています。aタグ自身にスタイル属性でフォントサイズ設定が付与されます。

左寄せ

CSS Google アナリティクス Gutenberg JavaScript Photoshop pickup TravisCI WordBench WordCamp WordPress きゅうり さつまいも じゃがいも たまご にんじん にんにく アドベントカレンダー イベント エビ カメラ キャットフード サラダ チーズ トマト パフェ ピーマン ブロッコリー ベンガル ベーコン 備忘録 合いびき肉 味噌 大葉 旅行 松本 梅干し 炒め物 猫 玉ねぎ 留守番 結婚式 給餌器 豚肉 長野 鶏肉

<p class="wp-block-tag-cloud alignleft">
	<a href="https://chiilog.com/tag/css/" class="tag-cloud-link tag-link-67 tag-link-position-1" style="font-size: 10.52pt;" aria-label="CSS (2個の項目)">CSS</a>
	<a href="https://chiilog.com/tag/fireworks/" class="tag-cloud-link tag-link-2 tag-link-position-2" style="font-size: 8pt;" aria-label="Fireworks (1個の項目)">Fireworks</a>
	<a href="https://chiilog.com/tag/google-%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9/" class="tag-cloud-link tag-link-109 tag-link-position-3" style="font-size: 10.52pt;" aria-label="Google アナリティクス (2個の項目)">Google アナリティクス</a>
	<a href="https://chiilog.com/tag/%e8%b1%9a%e8%82%89/" class="tag-cloud-link tag-link-18 tag-link-position-43" style="font-size: 14.72pt;" aria-label="豚肉 (5個の項目)">豚肉</a>
</p>

中央寄せ

CSS Google アナリティクス Gutenberg JavaScript Photoshop pickup TravisCI WordBench WordCamp WordPress きゅうり さつまいも じゃがいも たまご にんじん にんにく アドベントカレンダー イベント エビ カメラ キャットフード サラダ チーズ トマト パフェ ピーマン ブロッコリー ベンガル ベーコン 備忘録 合いびき肉 味噌 大葉 旅行 松本 梅干し 炒め物 猫 玉ねぎ 留守番 結婚式 給餌器 豚肉 長野 鶏肉

<p class="wp-block-tag-cloud aligncenter">
	<a href="https://chiilog.com/tag/css/" class="tag-cloud-link tag-link-67 tag-link-position-1" style="font-size: 10.52pt;" aria-label="CSS (2個の項目)">CSS</a>
	<a href="https://chiilog.com/tag/fireworks/" class="tag-cloud-link tag-link-2 tag-link-position-2" style="font-size: 8pt;" aria-label="Fireworks (1個の項目)">Fireworks</a>
	<a href="https://chiilog.com/tag/google-%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9/" class="tag-cloud-link tag-link-109 tag-link-position-3" style="font-size: 10.52pt;" aria-label="Google アナリティクス (2個の項目)">Google アナリティクス</a>
	<a href="https://chiilog.com/tag/%e8%b1%9a%e8%82%89/" class="tag-cloud-link tag-link-18 tag-link-position-43" style="font-size: 14.72pt;" aria-label="豚肉 (5個の項目)">豚肉</a>
</p>

右寄せ

CSS Google アナリティクス Gutenberg JavaScript Photoshop pickup TravisCI WordBench WordCamp WordPress きゅうり さつまいも じゃがいも たまご にんじん にんにく アドベントカレンダー イベント エビ カメラ キャットフード サラダ チーズ トマト パフェ ピーマン ブロッコリー ベンガル ベーコン 備忘録 合いびき肉 味噌 大葉 旅行 松本 梅干し 炒め物 猫 玉ねぎ 留守番 結婚式 給餌器 豚肉 長野 鶏肉

<p class="wp-block-tag-cloud alignright">
	<a href="https://chiilog.com/tag/css/" class="tag-cloud-link tag-link-67 tag-link-position-1" style="font-size: 10.52pt;" aria-label="CSS (2個の項目)">CSS</a>
	<a href="https://chiilog.com/tag/fireworks/" class="tag-cloud-link tag-link-2 tag-link-position-2" style="font-size: 8pt;" aria-label="Fireworks (1個の項目)">Fireworks</a>
	<a href="https://chiilog.com/tag/google-%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9/" class="tag-cloud-link tag-link-109 tag-link-position-3" style="font-size: 10.52pt;" aria-label="Google アナリティクス (2個の項目)">Google アナリティクス</a>
	<a href="https://chiilog.com/tag/%e8%b1%9a%e8%82%89/" class="tag-cloud-link tag-link-18 tag-link-position-43" style="font-size: 14.72pt;" aria-label="豚肉 (5個の項目)">豚肉</a>
</p>

幅広

CSS Google アナリティクス Gutenberg JavaScript Photoshop pickup TravisCI WordBench WordCamp WordPress きゅうり さつまいも じゃがいも たまご にんじん にんにく アドベントカレンダー イベント エビ カメラ キャットフード サラダ チーズ トマト パフェ ピーマン ブロッコリー ベンガル ベーコン 備忘録 合いびき肉 味噌 大葉 旅行 松本 梅干し 炒め物 猫 玉ねぎ 留守番 結婚式 給餌器 豚肉 長野 鶏肉

<p class="wp-block-tag-cloud alignwide">
	<a href="https://chiilog.com/tag/css/" class="tag-cloud-link tag-link-67 tag-link-position-1" style="font-size: 10.52pt;" aria-label="CSS (2個の項目)">CSS</a>
	<a href="https://chiilog.com/tag/fireworks/" class="tag-cloud-link tag-link-2 tag-link-position-2" style="font-size: 8pt;" aria-label="Fireworks (1個の項目)">Fireworks</a>
	<a href="https://chiilog.com/tag/google-%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9/" class="tag-cloud-link tag-link-109 tag-link-position-3" style="font-size: 10.52pt;" aria-label="Google アナリティクス (2個の項目)">Google アナリティクス</a>
	<a href="https://chiilog.com/tag/%e8%b1%9a%e8%82%89/" class="tag-cloud-link tag-link-18 tag-link-position-43" style="font-size: 14.72pt;" aria-label="豚肉 (5個の項目)">豚肉</a>
</p>

全幅

CSS Google アナリティクス Gutenberg JavaScript Photoshop pickup TravisCI WordBench WordCamp WordPress きゅうり さつまいも じゃがいも たまご にんじん にんにく アドベントカレンダー イベント エビ カメラ キャットフード サラダ チーズ トマト パフェ ピーマン ブロッコリー ベンガル ベーコン 備忘録 合いびき肉 味噌 大葉 旅行 松本 梅干し 炒め物 猫 玉ねぎ 留守番 結婚式 給餌器 豚肉 長野 鶏肉

<p class="wp-block-tag-cloud alignfull">
	<a href="https://chiilog.com/tag/css/" class="tag-cloud-link tag-link-67 tag-link-position-1" style="font-size: 10.52pt;" aria-label="CSS (2個の項目)">CSS</a>
	<a href="https://chiilog.com/tag/fireworks/" class="tag-cloud-link tag-link-2 tag-link-position-2" style="font-size: 8pt;" aria-label="Fireworks (1個の項目)">Fireworks</a>
	<a href="https://chiilog.com/tag/google-%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9/" class="tag-cloud-link tag-link-109 tag-link-position-3" style="font-size: 10.52pt;" aria-label="Google アナリティクス (2個の項目)">Google アナリティクス</a>
	<a href="https://chiilog.com/tag/%e8%b1%9a%e8%82%89/" class="tag-cloud-link tag-link-18 tag-link-position-43" style="font-size: 14.72pt;" aria-label="豚肉 (5個の項目)">豚肉</a>
</p>

タグクラウド設定：投稿数を表示

CSS (2) Google アナリティクス (2) Gutenberg (12) JavaScript (9) Photoshop (2) pickup (4) TravisCI (2) WordBench (2) WordCamp (2) WordPress (26) きゅうり (2) さつまいも (2) じゃがいも (2) たまご (3) にんじん (4) にんにく (2) アドベントカレンダー (3) イベント (3) エビ (3) カメラ (3) キャットフード (2) サラダ (2) チーズ (3) トマト (3) パフェ (2) ピーマン (3) ブロッコリー (2) ベンガル (2) ベーコン (2) 備忘録 (9) 合いびき肉 (3) 味噌 (3) 大葉 (2) 旅行 (2) 松本 (2) 梅干し (2) 炒め物 (2) 猫 (4) 玉ねぎ (4) 留守番 (2) 結婚式 (2) 給餌器 (2) 豚肉 (5) 長野 (2) 鶏肉 (2)

<p class="wp-block-tag-cloud">
	<a href="https://chiilog.com/tag/css/" class="tag-cloud-link tag-link-67 tag-link-position-1" style="font-size: 10.52pt;" aria-label="CSS (2個の項目)">CSS<span class="tag-link-count"> (2)</span></a>
	<a href="https://chiilog.com/tag/fireworks/" class="tag-cloud-link tag-link-2 tag-link-position-2" style="font-size: 8pt;" aria-label="Fireworks (1個の項目)">Fireworks<span class="tag-link-count"> (1)</span></a>
	<a href="https://chiilog.com/tag/google-%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9/" class="tag-cloud-link tag-link-109 tag-link-position-3" style="font-size: 10.52pt;" aria-label="Google アナリティクス (2個の項目)">Google アナリティクス<span class="tag-link-count"> (2)</span></a>
	<a href="https://chiilog.com/tag/gutenberg/" class="tag-cloud-link tag-link-123 tag-link-position-4" style="font-size: 17.8pt;" aria-label="Gutenberg (9個の項目)">Gutenberg<span class="tag-link-count"> (9)</span></a>
	<a href="https://chiilog.com/tag/javascript/" class="tag-cloud-link tag-link-106 tag-link-position-5" style="font-size: 10.52pt;" aria-label="JavaScript (2個の項目)">JavaScript<span class="tag-link-count"> (2)</span></a>
</p>

思った以上にありましたね！あとは埋め込みだけ・・・早めにがんばります。

投稿 Gutenbergのウィジェットのリスト（HTMLコード付き） は chiilog に最初に表示されました。

Simple Definition List Blocks

タグはこんな感じです↓

dtタグです

ddタグです

<dl class="wp-block-simple-definition-list-blocks-list">
<dt class="wp-block-simple-definition-list-blocks-term">dtタグです</dt>
<dd class="wp-block-simple-definition-list-blocks-details">ddタグです</dd>
</dl>

ホントは .wp-block-simple-definition-list-blocks-list__terms とか .wp-block-simple-definition-list-blocks-list__details とかにしたかったけど私の力量不足。

あと段落タグみたいに、dtタグとddタグを変換できる機能とかもつけたかったけど（ry

なお、このリリース記事を書いてるときに気づいたんですが

Gutenberg プラグイン 5.9.0を有効化しているとdtタグとddタグが消えます。（真顔）

内部で何かが変わったのかなんなのか・・・まだ追えてないし追えるかわからないのでとりあえず報告のみ。（5.9.1で直らないかなあ・・・）

本来、dlはdtとddの他にdivも許可されていたり、ddタグは別のHTMLタグを含められたりといろいろできますが、おそらくそのへんの寛容さ（？）がGutenbergで実装するときに議論が必要になってまだ実装されてないんだろうと思われます。（dlタグについて探したときにそんな議論を見たような気がする）

私が今回作ったのは、もうシンプルにdlの中にはdtとddだけを含められるようにして、更にdtもddもインライン要素のみ入るという超シンプルなものです。

私的にそれができればよかったので・・・。ちなみに、dtとddはregisterBlockStyle でスタイルの追加もできます。やったね！

というわけで、まずはリリースお知らせまで。

投稿 テキストのみ含めることができる、シンプルなdlタグを出力するGutenbergブロックつくりました は chiilog に最初に表示されました。

WordPress 5.2.2搭載のGutenbergで確認しています（2019/8/30追記）

目次

• 一般ブロック
• フォーマット(整形)
• レイアウト要素
• ウィジェット
• 埋め込み（準備中）

今回はボタンなどよくつかうものが出てきます。

ボタン

デフォルト

<div class="wp-block-button">
<a class="wp-block-button__link" href="#">ボタンのテキストを入力</a>
</div>

左寄せ

<div class="wp-block-button alignleft">
<a class="wp-block-button__link" href="#">左寄せのボタン</a>
</div>

中央寄せ

<div class="wp-block-button aligncenter">
<a class="wp-block-button__link" href="#">中央寄せのボタン</a>
</div>

右寄せ

<div class="wp-block-button">
<a class="wp-block-button__link" href="#">右寄せのボタン</a>
</div>

背景色を変える

<div class="wp-block-button">
<a class="wp-block-button__link has-background has-pale-pink-background-color" href="#">背景色を設定</a>
</div>

テキスト色を変える

<div class="wp-block-button">
<a class="wp-block-button__link has-text-color has-luminous-vivid-orange-color" href="#">テキスト色を設定</a>
</div>

背景色・テキスト色にカスタムカラーを設定

<div class="wp-block-button">
<a class="wp-block-button__link has-text-color has-background" href="#" style="background-color:#90d300;color:#141a1d">カスタムカラーを設定</a>
</div>

.wp-block-button がついたdivの中にaタグがあるという構造は変わりません。

個人的に、左寄せとか右寄せとかするとフロートがかかって記事が入力しづらくなるのがなんとかならないかなと思っています。

カラム

デフォルト

<div class="wp-block-columns has-2-columns">
<div class="wp-block-column">
<p>カラムです。デフォルトは2カラムです。</p>
</div>
<div class="wp-block-column">
<p>カラムです。デフォルトは2カラムです。</p>
</div>
</div>

カラムの中にコンテンツを入れるとカラムが選択しづらい！
ブロックが選択しづらいときは、キーカーソルの↑を押してブロック選択を切り替えてますが、これなんとかならないかなあ。（2回目）

それから、flex-wrapは入っていないので自動で折り返したりはしません。
折り返したいときはまた新たにカラムをつくるのが推奨されます。

というか、CSSがたいそう難しい指定をされているので、極力マージンとか触りたくないですね・・・。

メディアと文章

デフォルト（幅広）

デフォルトです。

なぜか幅広が入っている。もうすぐFF14拡張が発売なのでそわそわしています。

<div class="wp-block-media-text alignwide">
<figure class="wp-block-media-text__media">
<img src="https://chiilog.com/wp-content/uploads/2018/12/ff14_02.jpg" alt="" class="wp-image-1911" srcset="https://chiilog.com/wp-content/uploads/2018/12/ff14_02.jpg 768w, https://chiilog.com/wp-content/uploads/2018/12/ff14_02-644x362.jpg 644w, https://chiilog.com/wp-content/uploads/2018/12/ff14_02-640x360.jpg 640w, https://chiilog.com/wp-content/uploads/2018/12/ff14_02-64x36.jpg 64w" sizes="(max-width: 768px) 100vw, 768px">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">デフォルトです。</p>
<p>なぜか幅広が入っている。もうすぐFF14拡張が発売なのでそわそわしています。</p>
</div>
</div>

幅広なし

ぱふぇたべたい

<div class="wp-block-media-text">
<figure class="wp-block-media-text__media">
<img src="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_01.jpg" alt="" class="wp-image-1899" srcset="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_01.jpg 605w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_01-272x362.jpg 272w" sizes="(max-width: 605px) 100vw, 605px">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">ぱふぇたべたい</p>
</div>
</div>

全幅

躍動感あふれるジル

<div class="wp-block-media-text alignfull">
<figure class="wp-block-media-text__media">
<img src="https://chiilog.com/wp-content/uploads/2019/02/jill_08.jpg" alt="" class="wp-image-1960" srcset="https://chiilog.com/wp-content/uploads/2019/02/jill_08.jpg 430w, https://chiilog.com/wp-content/uploads/2019/02/jill_08-202x362.jpg 202w" sizes="(max-width: 430px) 100vw, 430px">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">躍動感あふれるジル</p>
</div>
</div>

画像を右側に変更

ツールチップ的なところで、画像の左右が選択できます

<div class="wp-block-media-text has-media-on-the-right">
<figure class="wp-block-media-text__media">
<img src="https://chiilog.com/wp-content/uploads/2019/03/karikari_04.jpg" alt="" class="wp-image-2007" srcset="https://chiilog.com/wp-content/uploads/2019/03/karikari_04.jpg 806w, https://chiilog.com/wp-content/uploads/2019/03/karikari_04-482x362.jpg 482w, https://chiilog.com/wp-content/uploads/2019/03/karikari_04-768x576.jpg 768w" sizes="(max-width: 806px) 100vw, 806px">
</figure>
<div class="wp-block-media-text__content">
<p>ツールチップ的なところで、画像の左右が選択できます</p>
</div>
</div>

メディアと文章の設定

モバイルで表示するときは上下に表示されます。

<div class="wp-block-media-text is-image-fill">
<figure class="wp-block-media-text__media" style="background-image:url(/wp-content/uploads/2018/12/ff14_eye-1024x538.jpg);background-position:50% 50%">
<img src="https://chiilog.com/wp-content/uploads/2018/12/ff14_eye-1024x538.jpg" alt="" class="wp-image-1915" srcset="https://chiilog.com/wp-content/uploads/2018/12/ff14_eye-1024x538.jpg 1024w, https://chiilog.com/wp-content/uploads/2018/12/ff14_eye-300x158.jpg 300w, https://chiilog.com/wp-content/uploads/2018/12/ff14_eye-690x362.jpg 690w, https://chiilog.com/wp-content/uploads/2018/12/ff14_eye-768x403.jpg 768w, https://chiilog.com/wp-content/uploads/2018/12/ff14_eye.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px">
</figure>
<div class="wp-block-media-text__content">
<p>カラムの幅に合わせて画像が切り抜かれます。</p>
</div>
</div>

幅の調整

ジルは正義。

画像をアップしてからカーソルを合わせると、ぐいっと幅が調整できます。

<div class="wp-block-media-text alignwide" style="grid-template-columns:24% auto">
<figure class="wp-block-media-text__media">
<img src="https://chiilog.com/wp-content/uploads/2018/06/move-1024x538.jpg" alt="" class="wp-image-1214" srcset="https://chiilog.com/wp-content/uploads/2018/06/move-1024x538.jpg 1024w, https://chiilog.com/wp-content/uploads/2018/06/move-300x158.jpg 300w, https://chiilog.com/wp-content/uploads/2018/06/move-690x362.jpg 690w, https://chiilog.com/wp-content/uploads/2018/06/move-768x403.jpg 768w, https://chiilog.com/wp-content/uploads/2018/06/move.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">ジルは正義。</p>
<p>画像をアップしてからカーソルを合わせると、ぐいっと幅が調整できます。</p>
</div></div>

背景色の設定

すやすやジル

<div class="wp-block-media-text has-very-light-gray-background-color">
<figure class="wp-block-media-text__media">
<img src="https://chiilog.com/wp-content/uploads/2019/02/gift_08.jpg" alt="" class="wp-image-1977" srcset="https://chiilog.com/wp-content/uploads/2019/02/gift_08.jpg 806w, https://chiilog.com/wp-content/uploads/2019/02/gift_08-482x362.jpg 482w, https://chiilog.com/wp-content/uploads/2019/02/gift_08-768x576.jpg 768w" sizes="(max-width: 806px) 100vw, 806px">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">すやすやジル</p>
</div>
</div>

メディアと画像はかなり使いやすいイメージです。（サンプルが多くて大変だった）

ただ、レイアウトにgridが使われているのでIE11で注意が必要です。
何をどう頑張っても崩れるので私はこのJSを突っ込みました。（style属性にgrid-template-columnsがつくのでどうやっても最優先にされてしまうのです）

$( function( ) {
	var gridContent = $( '.wp-block-media-text' );

	gridContent.each(function() {
		if ( $( this ).get( 0 ).style.gridTemplateColumns === undefined ) {
			// IEのみ
			var style = $( this ).attr( 'style' );
			var result = style.replace( 'grid-template-columns', '-ms-grid-columns' );
			$( this ).attr( 'style', result );
		}
	});
} );

区切り

デフォルト

<hr class="wp-block-separator">

幅広線

<hr class="wp-block-separator is-style-wide">

ドット

<hr class="wp-block-separator is-style-dots">

ドットのみbefore要素がつきます。

区切り

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

余白の設定でピクセル値での高さを指定できます。スマホとPCで分けたりとかはできません。

続きを見るとかページ区切りは割愛しました。
大体これで網羅できた気がするぞ・・・！

投稿 Gutenbergのレイアウトのリスト（HTMLコード付き） は chiilog に最初に表示されました。

この本の対象者は、ずばり「運用する人」！ぶっちゃけ「Gutenbergで記事を書きたい人」ではないかなと思います。

テーマの作り方とか、プラグインの作り方みたいなのは一切載っていませんので、いわゆるエンジニア系の方々はそういう構築系の本を買ったほうがいいのではと思います。（個人の感想です）

CSSはここから書けるよ、みたいな感じでコードが書いてあるところはありますが、WordPressを使って記事を書くための使い方やいれておくといいプラグイン的なものが大半なので、「制作会社にWordPressのサイトを作ってもらったけど使い方がわからない」という運用担当の方はもちろん、「依頼されて作ったけどドキュメント作るのは面倒時間がかかるな」という制作会社さんはドキュメント代わりにこの本を贈るとよいのではないでしょうか。

一から作ってみたいという人はCHAPETR2から進めよう

CHAPTER1はWordPressってどういうもの？という話や、オープンソースってなあに？という冒頭部分なので、さくさく〜っと軽く読んでいきましょう。

CHAPTER2はインストール手順の章です。サーバーの選定からインストール完了まで、たくさんのキャプチャでわかりやすく紹介されています。

書籍の章通りに手順をすすめていけば、まず導入でつまずくことはないと思います。

運用したいけどどうしたらいいのかわからない！という人はCHAPTER3とCHAPTER5を重点的に

サイトの構築はしないけど、WordPressサイトの運用をするという人は、まずCHAPTER3で管理画面でどういうことができるのかをチェックするといいでしょう。

どこで記事が投稿できるのか、画像管理は？といった管理画面の基本が載っています。

運用するにあたり重点的に見ておいた方がいい節は以下です。

• 01 お知らせなどが表示される「ダッシュボード」
• 02 コンテンツの投稿を管理する「投稿」
• 04 ページの管理を行う「固定ページ」

「メディア」は投稿画面で画像投稿ができますし、「コメント」は投稿型のサイトであればチェックしたほうがよいですが、私が請け負ったサイトで今までコメント機能が活躍していたことはないのであまり使われないのかな？と重点チェックリストから省きました。

プラグインやテーマは該当する担当者や外部の制作会社が面倒を見る部分かと思いますので、「へーこういうこともできるのねー」くらいでよいかと思います。（投稿の仕方覚える方が大事！）

CHAPTER3を確認したら、次はCHAPTER5です。
運用する上ですべての節を重点的に見る必要はないと思います。

投稿に関わるところは、

• 05 ブロックエディターの基本的な使い方
• 06 各ページ、コンテンツの作成
• 07 Google Mapの導入

でしょうか。07のGoogle Mapの導入は、Google Mapだけにかかわらず、HTMLの埋め込みが必要なときに使えるのでチェックしておくのがよさそうです。

CHAPTER5を一通り見ておくと急な修正も自分で対応できるようになるかもしれないので、投稿の仕方をばっちり覚えたらチェックしてみるのもおすすめです。

WordPressの情報収集ができる場も紹介されています

WordPressのコミュニティであるWordPress meetupやWordCampはもちろん、WP ZoomUPというオンライン勉強会、参考になるブログなどが掲載されています。

WordPressはバージョンアップで大きく変わったりする部分があるので（WP5.0で言うところのGutenbergなど）、ホットな情報を手に入れられる場所を知っておくことも大事です。

ジルもおすすめするWordPress運用のための一冊です

ジルも興味津々ですんすんしていましたWPネコ本。
コードを書かなくても作れるので、これからWordPressを始める方にはすごくいい本だと思います。

WordPressのやさしい教科書。 手を動かしながら学ぶ実用サイト作りと正しい運用 5.x対応版

投稿 これからWordPressを運用するのにおすすめの一冊「WordPressのやさしい教科書。」 は chiilog に最初に表示されました。

WordPress 5.2.2搭載のGutenbergで確認しています（2019/8/30追記）

目次

• 一般ブロック
• フォーマット(整形)
• レイアウト要素
• ウィジェット
• 埋め込み（準備中）

今回はあまりバリエーションがなさそうでさくっと終わりそうです。

コード

.hoge {
    color: #000;
}

<pre class="wp-block-code"><code>.hoge {
    color: #000;
}</code></pre>

クラシック

クラシック

クラシックブロックを選択すると、WYSIWYGエディターで書けます。なつかしいですね。
クラシックを選択したら特に特定のクラスのついたブロックが吐き出されるわけではなく、WYSIWYGで書いたソースコードがそのまま出力されます。

カスタムHTML

てすと

てすととはほにゃららがほにゃららでほにゃららのことです

ブロック内で自由にHTMLが書けます。
こちらもクラシックブロックと同様、特定のクラスのついたブロックが吐き出されるわけではなく、カスタムHTMLで書いたソースコードがそのまま出力されます。

整形済みテキスト

整形済みテキストのブロック

<pre class="wp-block-preformatted">整形済みテキストのブロック</pre>

プルクオート

デフォルト

<figure class="wp-block-pullquote">
<blockquote>
<p>プルクオート</p>
<cite>引用元はここです</cite>
</blockquote>
</figure>

左寄せ

<figure class="wp-block-pullquote alignleft">
<blockquote>
<p>プルクオート</p>
<cite>引用元はここです</cite>
</blockquote>
</figure>

右寄せ

<figure class="wp-block-pullquote alignright">
<blockquote>
<p>プルクオート</p>
</blockquote>
</figure>

引用元が未入力でもciteタグがないだけで特に構成は変わらずです。

幅広

<figure class="wp-block-pullquote alignwide">
<blockquote>
<p>プルクオート</p>
<cite>引用元はここです</cite>
</blockquote>
</figure>

全幅

<figure class="wp-block-pullquote alignfull">
<blockquote>
<p>プルクオート</p>
</blockquote>
</figure>

無地を選択

<figure class="wp-block-pullquote is-style-solid-color">
<blockquote>
<p>プルクオート</p>
<cite>引用元はここ</cite>
</blockquote>
</figure>

スタイル：色設定のメインカラーを設定（デフォルト）

<figure class="wp-block-pullquote" style="border-color:#f78da7">
<blockquote class="has-text-color has-luminous-vivid-amber-color">
<p>プルクオート</p>
<cite>引用元はここ</cite>
</blockquote>
</figure>

デフォルトだとfigureにメインカラーが入ります。
テーマによってボーダーが消えていたら表示されませんが、そんな場合はそもそもスタイル設定を組み直したほうが「あれ？」ってならなくてよさそうですね。

スタイル：色設定のメインカラーを設定（無地）

<figure class="wp-block-pullquote has-pale-pink-background-color is-style-solid-color">
<blockquote class="has-text-color has-vivid-red-color">
<p>プルクオート</p>
<cite>引用元はここです</cite>
</blockquote>
</figure>

スタイルを無地に変えると、デフォルトではボーダーについていたカラーが背景色になります。

テーブル

デフォルト

<table class="wp-block-table">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td><s>テーブル</s></td>
</tr>
</tbody>
</table>

インライン要素として、太字、イタリック、リンク、インライン画像、コード、取り消し線が使えます。

テーブルのセル内の一部だけを右寄せにするなどといった高度なことはできないのと、thはまだ設定できません。（ゆくゆく入る予定とか？）

左寄せ

<table class="wp-block-table alignleft">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

中央寄せ

<table class="wp-block-table aligncenter">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

右寄せ

<table class="wp-block-table alignright">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

幅広

<table class="wp-block-table alignwide">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

全幅

<table class="wp-block-table alignfull">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

スタイル：ストライプ

<table class="wp-block-table is-style-stripes">
<tbody>
<tr>
<td>ストライプのテーブル</td>
<td>ストライプのテーブル</td>
</tr>
<tr>
<td>ストライプのテーブル</td>
<td>ストライプのテーブル</td>
</tr>
<tr>
<td>ストライプのテーブル</td>
<td>ストライプのテーブル</td>
</tr>
</tbody>
</table>

テーブル設定：固定幅

<table class="wp-block-table has-fixed-layout">
<tbody>
<tr>
<td>固定幅のテーブル</td>
<td>固定幅のテーブル</td>
</tr>
<tr>
<td>固定幅のテーブル</td>
<td>固定幅のテーブル</td>
</tr>
</tbody>
</table>

Gutenbergのテーブルは固定幅かそうじゃないかは書いてる人に委ねています。

確実に固定幅しか使わないならCSSで設定しておけばいいかもしれませんが、基本的にテーマ側でデフォルトの設定を当てない方がよさそうですね。

色設定（デフォルト）

<table class="wp-block-table has-subtle-light-gray-background-color has-background">
<tbody>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
</tbody>
</table>

デフォルトだと、tableタグに背景色が入ります。

色設定（ストライプ）

<table class="wp-block-table has-subtle-pale-green-background-color has-background is-style-stripes">
<tbody>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
</tbody>
</table>

ストライプを設定した場合、奇数が色設定で設定した色の背景がつきます。

詩

いったいいつ使うんだ・・・

<pre class="wp-block-verse">いったいいつ使うんだ・・・</pre>

使い所がイマイチわからない詩のブロック。きっといつか使うんでしょう。

投稿 Gutenbergのフォーマット(整形)のリスト（HTMLコード付き） は chiilog に最初に表示されました。

導入したプラグインはこちら、AMP です。まんまですね。

AMP https://ja.wordpress.org/plugins/amp/

投稿ページや固定ページ、カスタム投稿ページなど、対応したいテンプレートも管理画面から選択できてよいです。AMPページの確認は、ページURLの末尾にampをつけてアクセスするだけ！

http://example.com/permalink/amp ・・・みたいな感じですね。

CSSとかイケてないからカスタマイズしようと思ったらちょっと手間は増えますが、ただテーマカラーを変えたい！なら管理画面で設定すればOKです。

ちなみに、配色のライトとダークですが、ダークを選ぶとこんな感じになります。

本文にスタイルをあてたり、いらない要素を削除したいときは？

デフォルトでは記事のauthor名やコメントボタン等が表示されますが、それらの要素がいらないときは、テーマフォルダ内にamp フォルダを作り、改変したいファイルを、今度はampのプラグインフォルダ内のtemplatesからコピーして編集します。

※ プラグイン内のtemplateフォルダ内のファイルを編集するのは控えたほうがいいです。
プラグインアップデート時に消えてしまうおそれがあります。

フォルダ階層的にはこんな感じになります。

• mythemename （テーマのフォルダ名）
  • amp
    • meta-author.php
    • meta-comments-link.php
    • style.php
  • archive.php

…

例えば、コメントボタンを消したければ、中身を空っぽにしたmeta-comments-link.php を置く・・・といった感じです。

なんかフックとか使えば消せるような気がしないでもないですが、最も簡単な手段は中身が空のファイルをampフォルダ内に置くことかと思います。（ドキュメント読み解けてない）

本文のスタイルを整える場合は、style.phpをコピーしてきます。
phpファイルですが、中身はスタイルを記述するようになっています。

生のCSSを書くことになりますが、非AMPのスタイルを一部持ってくるくらいであれば、該当するCSSをコピーしてくると早いです。（エディターによってはインデント等が解除されて面倒ですが…）

外部CSSを参照したいのなら、Capital Pさんがまとめているのでこちらを参照されると良いと思います。

一部のタグがamp用のタグに置き換わっているので注意

imgタグなど、一部のタグがamp仕様のタグに置き換わっているので、 .hoge img といったCSSを使う時は .hoge amp-img といった、amp-○○という形式に置き換える必要があります。

置き換えるタグは以下の通り

本文中にsvgアイコンを出力しているような場合は、amp-imgでスタイルを整える必要がありますね。（自分でブロック開発をしない限りはそんなことないと思いますが・・・）

かなりお手軽にAMP対応ができるので、AMP対応を考えている方にはオススメです。

投稿 WordPress のAMP対応プラグインのカスタマイズ は chiilog に最初に表示されました。

デザインに関係なさそうなインライン画像や埋め込み、ウィジェット系は省いています。
必要かもと思ったら追加します。

デフォルトブロックも結構数があるので、セクションで分けてまとめていきます。
（飽きないうちに全部やりきりたい…）

WordPress 5.2.2搭載のGutenbergで確認しています（2019/8/30追記）

見出しブロックについて、未確定ですが確認したことを追記してます（2019/8/30追記）

目次

• 一般ブロック
• フォーマット(整形)
• レイアウト要素
• ウィジェット
• 埋め込み（準備中）

それではさっそくはじめていきます。

段落

これは普通の段落です。

<p>これは普通の段落です。</p>

テキスト設定の文字サイズを特大にしました。

<p class="has-huge-font-size">テキスト設定の文字サイズを特大にしました。</p>

テキスト設定の文字サイズを大にしました。

<p class="has-large-font-size">テキスト設定の文字サイズを大にしました。</p>

テキスト設定の文字サイズを中にしました。

<p class="has-medium-font-size">テキスト設定の文字サイズを中にしました。</p>

テキスト設定の文字サイズを自由に入力しました。

<p style="font-size:27px">テキスト設定の文字サイズを自由に入力しました。</p>

特大、大、中のデフォルトの文字サイズは、add_theme_supportのeditor-font-sizesで指定できます。

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'small', 'themeLangDomain' ),
        'shortName' => __( 'S', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    )
);

ドロップキャップもできます。

<p class="has-drop-cap">ドロップキャップもできます。</p>

見出し

未確定ですが、Gutenbergプラグインを入れてるとstyle属性で出力されているところがクラスになっているようです。コアにその仕様が取り込まれるかはわからないですが、プラグインを入れる場合は以下のようなクラスも用意しておいたほうがよいかも？

プルリクがマージされてるようなのでおそらく合ってるはず。

https://github.com/WordPress/gutenberg/pull/16794

• has-text-align-left
• has-text-align-center
• has-text-align-right

H1の見出しです

<h1>H1の見出しです</h1>

H1の見出しに左配置を入れました

<h1 style="text-align:left">H1の見出しに左配置を入れました</h1>

H1の見出しに中央配置を入れました

<h1 style="text-align:center">H1の見出しに中央配置を入れました</h1>

H1の見出しに右配置を入れました

<h1 style="text-align:right">H1の見出しに右配置を入れました</h1>

h1の見出しは右のブロック設定から選べますが、コンテンツ構造上以下のようにアラートが出ます。とはいえ、エディター上で選べるは選べるので何かしらデザインは入れておいたほうがよさそうですね。

管理画面エディターで選べるのはh1〜h6で、吐き出される配置は全てstyle属性で入るのは同じなので割愛します。

画像

デフォルト

<figure class="wp-block-image">
<img src="https://chiilog.com/wp-content/uploads/2019/02/jill_01.jpg" alt="" class="wp-image-1952">
<figcaption>くそかわチビジル</figcaption>
</figure>

左寄せ

<div class="wp-block-image">
<figure class="alignleft"><img src="https://chiilog.com/wp-content/uploads/2017/11/sweetpotato-1024x538.jpg" alt="" class="wp-image-238" srcset="https://chiilog.com/wp-content/uploads/2017/11/sweetpotato-1024x538.jpg 1024w, https://chiilog.com/wp-content/uploads/2017/11/sweetpotato-300x158.jpg 300w, https://chiilog.com/wp-content/uploads/2017/11/sweetpotato-690x362.jpg 690w, https://chiilog.com/wp-content/uploads/2017/11/sweetpotato-768x403.jpg 768w, https://chiilog.com/wp-content/uploads/2017/11/sweetpotato.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px">
<figcaption>おいしそうなスイートポテト</figcaption>
</figure>
</div>

中央寄せ

<div class="wp-block-image">
<figure class="aligncenter"><img src="https://chiilog.com/wp-content/uploads/2019/03/karikari_05.jpg" alt="" class="wp-image-2009" srcset="https://chiilog.com/wp-content/uploads/2019/03/karikari_05.jpg 705w, https://chiilog.com/wp-content/uploads/2019/03/karikari_05-646x362.jpg 646w, https://chiilog.com/wp-content/uploads/2019/03/karikari_05-640x360.jpg 640w, https://chiilog.com/wp-content/uploads/2019/03/karikari_05-64x36.jpg 64w" sizes="(max-width: 705px) 100vw, 705px">
<figcaption>ごろにゃんのジル</figcaption>
</figure>
</div>

右寄せ

<div class="wp-block-image">
<figure class="alignright">
<img src="https://chiilog.com/wp-content/uploads/2018/11/nikukyu_04.jpg" alt="" class="wp-image-1874" srcset="https://chiilog.com/wp-content/uploads/2018/11/nikukyu_04.jpg 605w, https://chiilog.com/wp-content/uploads/2018/11/nikukyu_04-362x362.jpg 362w" sizes="(max-width: 605px) 100vw, 605px">
<figcaption>にくきうマドレーヌ</figcaption>
</figure>
</div>

幅広

<figure class="wp-block-image alignwide">
<img src="https://chiilog.com/wp-content/uploads/2019/02/gift_08-1.jpg" alt="" class="wp-image-1981" srcset="https://chiilog.com/wp-content/uploads/2019/02/gift_08-1.jpg 605w, https://chiilog.com/wp-content/uploads/2019/02/gift_08-1-272x362.jpg 272w" sizes="(max-width: 605px) 100vw, 605px">
<figcaption>椅子を占拠するジル</figcaption>
</figure>

全幅

<figure class="wp-block-image alignfull">
<img src="https://chiilog.com/wp-content/uploads/2019/03/karikari_02.jpg" alt="" class="wp-image-2004" srcset="https://chiilog.com/wp-content/uploads/2019/03/karikari_02.jpg 806w, https://chiilog.com/wp-content/uploads/2019/03/karikari_02-482x362.jpg 482w, https://chiilog.com/wp-content/uploads/2019/03/karikari_02-768x576.jpg 768w" sizes="(max-width: 806px) 100vw, 806px">
<figcaption>機械相手にごはんをねだるジル</figcaption>
</figure>

位置指定と幅広、全幅でHTMLの構成が若干変わりますね。

ちなみに、alignrightとかalignleftが入ってるとデフォルトでfloatが付与されるので、ここはclearfixを入れるなりして下の要素が回り込まないように注意したいところです。
エディター上でもfloatされるので、記事がとても書きづらくなります。

リスト

• 普通のリストです
  • インデントしました
    • 更にインデントしました

<ul>
<li>普通のリストです<ul>
<li>インデントしました<ul>
<li>更にインデントしました</li>
</ul></li>
</ul></li>
</ul>

1. 番号リストです
   1. インデントしました
      1. 更にインデントしました

<ol>
<li>番号リストです<ol>
<li>インデントしました<ol>
<li>更にインデントしました</li></ol>
</li></ol>
</li>
</ol>

リストは普通のリストですね。インライン要素を入れることもできます。（※こちら段落タグにも同じ機能があります）

ギャラリー

デフォルト

<ul class="wp-block-gallery columns-3 is-cropped">
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2019/02/gift-1024x538.jpg" alt="" data-id="1979" data-link="/2019/02/19/1969/gift/" class="wp-image-1979" srcset="https://chiilog.com/wp-content/uploads/2019/02/gift-1024x538.jpg 1024w, https://chiilog.com/wp-content/uploads/2019/02/gift-300x158.jpg 300w, https://chiilog.com/wp-content/uploads/2019/02/gift-690x362.jpg 690w, https://chiilog.com/wp-content/uploads/2019/02/gift-768x403.jpg 768w, https://chiilog.com/wp-content/uploads/2019/02/gift.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px">
</figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://chiilog.com/wp-content/uploads/2019/02/gift_02.jpg" alt="" data-id="1971" data-link="/2019/02/19/1969/gift_02/" class="wp-image-1971" srcset="https://chiilog.com/wp-content/uploads/2019/02/gift_02.jpg 605w, https://chiilog.com/wp-content/uploads/2019/02/gift_02-272x362.jpg 272w" sizes="(max-width: 605px) 100vw, 605px">
<figcaption>アマゾン袋</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://chiilog.com/wp-content/uploads/2019/02/gift_03.jpg" alt="" data-id="1972" data-link="/2019/02/19/1969/gift_03/" class="wp-image-1972" srcset="https://chiilog.com/wp-content/uploads/2019/02/gift_03.jpg 605w, https://chiilog.com/wp-content/uploads/2019/02/gift_03-272x362.jpg 272w" sizes="(max-width: 605px) 100vw, 605px">
<figcaption>どこかを見つめるジル</figcaption></figure>
</li>
</ul>

デフォルトではカラムに合わせて画像が切り抜かれます。
カラム数は右側にある設定で選択できます。

切り抜きなし

<ul class="wp-block-gallery columns-2">
<li class="blocks-gallery-item">
<figure><img src="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_05.jpg" alt="" data-id="1903" data-link="/2018/12/12/1898/parfait_2018_05/" class="wp-image-1903" srcset="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_05.jpg 605w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_05-362x362.jpg 362w" sizes="(max-width: 605px) 100vw, 605px">
<figcaption>ぱへ</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_06.jpg" alt="" data-id="1904" data-link="/2018/12/12/1898/parfait_2018_06/" class="wp-image-1904" srcset="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_06.jpg 605w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_06-362x362.jpg 362w" sizes="(max-width: 605px) 100vw, 605px">
<figcaption>おいしかったぱへ</figcaption>
</figure></li>
<li class="blocks-gallery-item">
<figure><img src="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018-1024x538.jpg" alt="" data-id="1906" data-link="/2018/12/12/1898/parfait_2018/" class="wp-image-1906" srcset="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018-1024x538.jpg 1024w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018-300x158.jpg 300w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018-690x362.jpg 690w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018-768x403.jpg 768w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px">
<figcaption>ピスタチオさいこう</figcaption>
</figure>
</li>
</ul>

画像の切り抜きをオフにしてカラム数を2に変えてみました。最後の一つが下に落ちています。
どうやら.wp-block-gallery につく、.is-cropped で切り抜き制御してるみたいですね。

左寄せ

<ul class="wp-block-gallery alignleft columns-2 is-cropped">
<li class="blocks-gallery-item">
<figure><img src="https://chiilog.com/wp-content/uploads/2019/03/karikari_01.jpg" alt="" data-id="2003" data-link="/2019/03/25/2002/karikari_01/" class="wp-image-2003" srcset="https://chiilog.com/wp-content/uploads/2019/03/karikari_01.jpg 806w, https://chiilog.com/wp-content/uploads/2019/03/karikari_01-482x362.jpg 482w, https://chiilog.com/wp-content/uploads/2019/03/karikari_01-768x576.jpg 768w" sizes="(max-width: 806px) 100vw, 806px">
<figcaption>叩いてご飯を要求するジル</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2019/02/jill_12.jpg" alt="" data-id="1965" data-link="/2019/02/07/1950/jill_12/" class="wp-image-1965" srcset="https://chiilog.com/wp-content/uploads/2019/02/jill_12.jpg 806w, https://chiilog.com/wp-content/uploads/2019/02/jill_12-482x362.jpg 482w, https://chiilog.com/wp-content/uploads/2019/02/jill_12-768x576.jpg 768w" sizes="(max-width: 806px) 100vw, 806px">
<figcaption>テレビの前を陣取るジル</figcaption>
</figure>
</li>
</ul>

中央寄せ

<ul class="wp-block-gallery aligncenter columns-2 is-cropped">
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2019/01/pcolor_02.jpg" alt="" data-id="1926" data-link="/2019/01/07/1922/pcolor_02/" class="wp-image-1926" srcset="https://chiilog.com/wp-content/uploads/2019/01/pcolor_02.jpg 601w, https://chiilog.com/wp-content/uploads/2019/01/pcolor_02-362x362.jpg 362w" sizes="(max-width: 601px) 100vw, 601px">
<figcaption>ベストカラー</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2019/01/pcolor_01.jpg" alt="" data-id="1925" data-link="/2019/01/07/1922/pcolor_01/" class="wp-image-1925" srcset="https://chiilog.com/wp-content/uploads/2019/01/pcolor_01.jpg 600w, https://chiilog.com/wp-content/uploads/2019/01/pcolor_01-362x362.jpg 362w" sizes="(max-width: 600px) 100vw, 600px">
<figcaption>色物のベストカラー</figcaption>
</figure>
</li>
</ul>

右寄せ

<ul class="wp-block-gallery alignright columns-2 is-cropped">
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2018/12/ff14_02.jpg" alt="" data-id="1911" data-link="/2018/12/16/1908/ff14_02/" class="wp-image-1911" srcset="https://chiilog.com/wp-content/uploads/2018/12/ff14_02.jpg 768w, https://chiilog.com/wp-content/uploads/2018/12/ff14_02-644x362.jpg 644w, https://chiilog.com/wp-content/uploads/2018/12/ff14_02-640x360.jpg 640w, https://chiilog.com/wp-content/uploads/2018/12/ff14_02-64x36.jpg 64w" sizes="(max-width: 768px) 100vw, 768px">
<figcaption>アウラちゃん</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2018/12/ff14_01.jpg" alt="" data-id="1910" data-link="/2018/12/16/1908/ff14_01/" class="wp-image-1910" srcset="https://chiilog.com/wp-content/uploads/2018/12/ff14_01.jpg 768w, https://chiilog.com/wp-content/uploads/2018/12/ff14_01-644x362.jpg 644w, https://chiilog.com/wp-content/uploads/2018/12/ff14_01-640x360.jpg 640w, https://chiilog.com/wp-content/uploads/2018/12/ff14_01-64x36.jpg 64w" sizes="(max-width: 768px) 100vw, 768px">
<figcaption>ミコッテちゃん</figcaption>
</figure>
</li>
</ul>

右寄せと左寄せには、デフォルトのスタイルでmax-widthが入っています。
今回はコードを書いてるので回り込んでいませんが、段落タグなんかは回り込みます。

幅広

<ul class="wp-block-gallery alignwide columns-2 is-cropped">
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_01.jpg" alt="" data-id="1899" data-link="/2018/12/12/1898/parfait_2018_01/" class="wp-image-1899" srcset="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_01.jpg 605w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_01-272x362.jpg 272w" sizes="(max-width: 605px) 100vw, 605px">
<figcaption>佐々木</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_02.jpg" alt="" data-id="1900" data-link="/2018/12/12/1898/parfait_2018_02/" class="wp-image-1900" srcset="https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_02.jpg 806w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_02-482x362.jpg 482w, https://chiilog.com/wp-content/uploads/2018/12/parfait_2018_02-768x576.jpg 768w" sizes="(max-width: 806px) 100vw, 806px">
<figcaption>おしゃん</figcaption>
</figure>
</li>
</ul>

全幅

<ul class="wp-block-gallery alignfull columns-2">
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2018/08/kayanoya_05.jpg" alt="" data-id="1771" data-link="/2018/08/07/1765/kayanoya_05/" class="wp-image-1771" srcset="https://chiilog.com/wp-content/uploads/2018/08/kayanoya_05.jpg 700w, https://chiilog.com/wp-content/uploads/2018/08/kayanoya_05-483x362.jpg 483w" sizes="(max-width: 700px) 100vw, 700px">
<figcaption>茅乃舎のだしソース</figcaption>
</figure></li>
<li class="blocks-gallery-item">
<figure>
<img src="https://chiilog.com/wp-content/uploads/2018/08/kayanoya_02.jpg" alt="" data-id="1770" data-link="/2018/08/07/1765/kayanoya_02/" class="wp-image-1770" srcset="https://chiilog.com/wp-content/uploads/2018/08/kayanoya_02.jpg 700w, https://chiilog.com/wp-content/uploads/2018/08/kayanoya_02-483x362.jpg 483w" sizes="(max-width: 700px) 100vw, 700px">
<figcaption>茅乃舎だし</figcaption>
</figure>
</li>
</ul>

引用タグ

デフォルト

引用タグです

引用元はここです

<blockquote class="wp-block-quote">
<p>引用タグです</p>
<cite>引用元はここです</cite>
</blockquote>

大

大スタイルを選んだとき

引用元はここです

<blockquote class="wp-block-quote is-style-large">
<p>大スタイルを選んだとき</p>
<cite>引用元はここです</cite>
</blockquote>

音声

デフォルト

<figure class="wp-block-audio">
<audio controls="" src="https://chiilog.com/wp-content/uploads/2019/04/cat-cry3.mp3"></audio>
<figcaption>にゃーおーん</figcaption>
</figure>

左寄せ

<figure class="wp-block-audio alignleft">
<audio controls="" src="https://chiilog.com/wp-content/uploads/2019/04/cat-cry3.mp3"></audio>
</figure>

中央寄せ

<figure class="wp-block-audio aligncenter">
<audio controls="" src="https://chiilog.com/wp-content/uploads/2019/04/cat-cry3.mp3"></audio>
</figure>

右寄せ

<figure class="wp-block-audio alignright">
<audio controls="" src="https://chiilog.com/wp-content/uploads/2019/04/cat-cry3.mp3"></audio>
</figure>

幅広

<figure class="wp-block-audio alignwide">
<audio controls="" src="https://chiilog.com/wp-content/uploads/2019/04/cat-cry3.mp3"></audio>
</figure>

全幅

<figure class="wp-block-audio alignfull">
<audio controls="" src="https://chiilog.com/wp-content/uploads/2019/04/cat-cry3.mp3"></audio>
</figure>

音素材持ってないので、効果音ラボ様から拝借しました。

カバー

デフォルト

<div class="wp-block-cover has-background-dim" style="background-image:url(/wp-content/uploads/2019/03/remote.jpg)">
<div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-large-font-size">カバー画像</p>
</div>
</div>

左寄せ

<div class="wp-block-cover has-background-dim-20 has-luminous-vivid-orange-background-color has-background-dim has-parallax" style="background-image:url(/wp-content/uploads/2019/02/gift_08.jpg)">
<div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-large-font-size">行き倒れ寝</p>
</div>
</div>

ブロック設定で背景を固定にして、カラーと透過率を変えてみました。

中央寄せ

<div class="wp-block-cover aligncenter has-background-dim" style="background-image:url(/wp-content/uploads/2018/12/jill_tour04.jpg)">
<div class="wp-block-cover__inner-container">
<h2>デフォルトの段落タグを<br>見出しタグに変えた</h2>
</div>
</div>

右寄せ

<div class="wp-block-cover alignright has-background-dim" style="background-image:url(/wp-content/uploads/2018/08/anicom_01.jpg)">
<div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-large-font-size">オルファクトリーおいしいよ</p>
</div>
</div>

幅広

<div class="wp-block-cover alignwide has-background-dim-10 has-pale-pink-background-color has-background-dim" style="background-image:url(/wp-content/uploads/2018/08/kayanoya_03.jpg)">
<div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-large-font-size">だし三兄弟</p>
</div>
</div>

全幅

<div class="wp-block-cover alignfull has-background-dim-70 has-background-dim" style="background-image:url(/wp-content/uploads/2019/02/jill_03.jpg);background-color:#79919c;background-position:54.377880184331794% 14.583333333333334%">
<div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-large-font-size">ジルはさいこうにかわいい！</p>
</div>
</div>

デフォルトでテキストがセンターにきます。
テキストは段落タグがデフォルトでついてきます。段落タグなので編集可能。

カバーブロックは右側の設定から割と細かく設定が可能です。

• 固定背景
• オーバーレイのカラー
• 背景の透過率

デフォルトでは50%の透過率の黒が入っています。
カラーパレットからの選択、もちろんカスタムカラーで設定もできます。

数値やカスタムカラーを変更した場合、スタイル属性が設定されます。

ファイル

デフォルト

<div class="wp-block-file">
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf">wbkyoto_201704</a>
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf" class="wp-block-file__button" download="">ダウンロード</a>
</div>

左寄せ

<div class="wp-block-file alignleft">
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf">wbkyoto_201704</a>
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf" class="wp-block-file__button" download="">ダウンロード</a>
</div>

中央寄せ

<div class="wp-block-file aligncenter">
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf">wbkyoto_201704</a>
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf" class="wp-block-file__button" download="">ダウンロード</a>
</div>

右寄せ

<div class="wp-block-file alignright">
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf">wbkyoto_201704</a>
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf" class="wp-block-file__button" download="">ダウンロード</a>
</div>

幅広

<div class="wp-block-file alignwide">
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf">wbkyoto_201704</a>
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf" class="wp-block-file__button" download="">ダウンロード</a>
</div>

全幅

<div class="wp-block-file alignfull">
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf">wbkyoto_201704</a>
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf" class="wp-block-file__button" download="">ダウンロード</a>
</div>

ダウンロードボタン非表示、別タブ表示

<div class="wp-block-file">
<a href="https://chiilog.com/wp-content/uploads/2019/04/wbkyoto_201704.pdf" target="_blank" rel="noreferrer noopener">wbkyoto_201704</a>
</div>

ダウンロードボタンの有無が設定できてよいですね。

動画

デフォルト

<figure class="wp-block-video">
<video controls="" src="https://chiilog.com/wp-content/uploads/2019/02/MOV_0605.mp4"></video>
</figure>

左寄せ

<figure class="wp-block-video alignleft">
<video controls="" poster="/wp-content/uploads/2019/03/karikari.jpg" src="https://chiilog.com/wp-content/uploads/2019/02/MOV_0605.mp4"></video>
<figcaption>ポスター画像も設定</figcaption>
</figure>

中央寄せ

<figure class="wp-block-video aligncenter">
<video controls="" muted="" src="https://chiilog.com/wp-content/uploads/2019/02/MOV_0605.mp4"></video>
<figcaption>ミュート設定</figcaption>
</figure>

右寄せ

<figure class="wp-block-video alignright">
<video controls="" src="https://chiilog.com/wp-content/uploads/2019/02/MOV_0605.mp4"></video>
</figure>

幅広

<figure class="wp-block-video alignwide">
<video src="https://chiilog.com/wp-content/uploads/2019/02/MOV_0605.mp4"></video>
</figure>

全幅

<figure class="wp-block-video alignfull">
<video controls="" src="https://chiilog.com/wp-content/uploads/2019/02/MOV_0605.mp4"></video>
</figure>

動画ブロックも色々と設定ができます。

• 自動再生のオンオフ
• ループのオンオフ
• ミュート（消音）のオンオフ
• プレイバックコントロールの表示非表示
• Play inlineの設定（なんだこれは）
• 先読みの設定
• ポスター画像

Play inlineってなんだろう・・・。知ってる人おしえてください。

さて、一般ブロックの一覧はこんな感じです。
うっかりパターン出しまでやってのでめちゃくちゃに時間がかかってもう心が折れそうです。

Gutenberg前提のサイトを作るときの参考になればと思います。

投稿 Gutenbergの一般ブロックのリスト（HTMLコード付き） は chiilog に最初に表示されました。

使用プラグインはタイトルにも書きましたがBreadcrumb NavXTです。
超メジャーですね。いつもお世話になっています。ありがとうありがとう。

さて、本題です。

例えば「トップページ」とか、決まった文章を変えたりするときは管理画面からちょっと変えればそれで済むのですが、今回のように入力したものを出したいときはフィルターフックが必要になります。

フィルターフックを使うことだけは知っていたのでどれどれ？と思いながらプラグインページからぴょんとドキュメントページを見ました。

なるほど、フックには4種類あるのね。多分使うのは「bcn_after_fill」か「bcn_before_fill」なんでしょ？知ってる！と、意気揚々とその２つの使い方を更に調べました。

※結論から言えば、こんな回りくどいフックを使わなくても「bcn_breadcrumb_title」というフックを使えば終わります。

調べたところ、どうやらカスタマイズをするのに使うのはbcn_after_fillが一般的のよう。ふむ。

参考にしたページ：http://notnil-creative.com/blog/archives/981

他にもいろんなページは見ましたが、私の感想は「ただタイトル変えたいだけなのに大仰すぎない？？？」です。

というか、こんなカスタマイズしやすいプラグインがタイトルだけちゃっと変えれるフック本当に用意してないのか？

……と思い、ドキュメントページでおもむろに「title」とページ内検索したところ、やっぱりというか見つかりました。

ちゃんと使い方を書いたページもありました。（https://mtekk.us/archives/guides/changing-the-home-breadcrumb-title/）

最終的に、こんなコードになりました。

function chiilog_breadcrumb_title_swapper( $title, $type, $id ) {
	$custom = get_post_meta( $id, 'my_custom_field', true );
	if ( $custom ) {
		$title = $custom;
	}

	return $title;
}
add_filter( 'bcn_breadcrumb_title', 'chiilog_breadcrumb_title_swapper', 3, 10 );

他にもいろんな細かいフィルターがあるようなので、困ったらまず公式のドキュメントでページ内検索してみるのが良いと思います。

投稿 Breadcrumb NavXT で出力タイトルをフックでカスタマイズする は chiilog に最初に表示されました。