BlockEditorを使おう！ – ページ 2 – Kansai WordPress Meetup @神戸

フォーマットのブロックを使ってみよう！

フォーマットでは、主に表示形式を決めるのブロックが整っています。

通常のサイト構築であれば、テーブルブロック以外はそんなに使う機会はないかもしれません。

なお、これらは見た目を整えるブロックではないことには注意です。
見た目に関するブロックについては、「レイアウト」カテゴリのブロック群としてまとまっています。
次のページで紹介します。

表（テーブル）ブロック

サイト名	概要	URL
WordPress.org	WordPressの総本山！	https://wordpress.org/
WordPress.com	Automatic社ご提供、無料から使えるWordPressホスティングサービス！	https://wordpress.com/
WordPress.tv	過去に行われたWordCampのセッションも動画で公開されています！	https://wordpress.tv/
サイト名	概要	URL

WordPressのサイトについての表

表（テーブル）を追加するブロックです。
行・列の設定と、ヘッダーセクション（thead）,フッターセクション（tfoot）の設定が可能です。

なお、現時点ではプラグインなどで拡張していない状態ではテーブルの結合などができないため、必要に応じてプラグインなどの導入も検討してください

コードブロック

<a href="https://wordpress.org">WordPress.orgのサイトへいく</a>
こんな感じでHTMLのコードを表示できます。

クラシックブロック

昔懐かしいクラシックなエディタで編集できるブロックです。
（ただし、ちょっと違いますが・・・）
古い記事はこのブロックに自動変換されるので、コアのバージョンを大幅にアップさせる場合は注意が必要です。

カスタムHTMLブロック

カスタムHTMLブロック！自分なりにHTMLがかけますが、扱いが難しいです。何もしないとレイアウトがくずれちゃいますね？改行も <br>を毎回書いてあげる必要があります。
・・・この項目はh4タグからこの文章までカスタムHTMLブロックで打っています。
分かりましたか？ご察しの通り、JavaScriptもかけます。下に現在の時間が表示されてますでしょうか？
※WordPress.comでは動作しないようです。

setInterval(function(){ const now = new Date(); document.getElementById(“blockeditorCustomHtmlInnerPTime”).innerHTML = now.toLocaleTimeString(); },1000);

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

// いわゆるPreタグですね。
// スペースやタブなどの表示が入力された通り表示されます
　　var wappusu = ['wapuu','wappuu','wappupu']
　　console.log(...wappusu)

プルクオートブロック

Priceless, and also free
WordPress.org
https://wordpress.org/download/

引用ブロックと似ていますが、より強調した表現となります。

詩ブロック

なんだかポエミーな投稿を入力しましょう。

特別なスペーシングにより、詩や歌詞などの挿入に有効だそうです（ブロックの説明より）

このセクションでは、フォーマットのブロック群をざっくり紹介しました。

次は、一般ブロックと同じくらいよく使うレイアウト関係のブロックをご紹介いたします！