[WordCamp Osaka 2018] Gutenbergで作るランディングページ改定版

今日、2018年6月2日に開催されるWordCamp Osaka 2018にWordPressの次期エディターであるGutenbergのお話で登壇しました。

WordBench Osaka & Kyotoでお話した内容と基本同じではあるのですが、半年経つとGutenbergのテーマサポートなどの方法が変更されていたりと、大幅な改定を行いました（大変でしたっ）。

Contents

使用したスライド

【WordCamp Osaka 2018】Gutenbergで作るランディングページ from takashi ono

Gutenbergってなんだ？

GutenbergとはWordPressの5.0からコアに搭載予定のエディターになります。
エディターインターフェースといったほうがしっくり来るかも。

今までエディタとは大きく異なり、ブロックと呼ばれるコンテンツのまとまりを組み上げることによってページを作成するのが大きな特徴です。

パブリッシングプラットフォームであるWordPressのパブリッシングを大きく変える壮大なプロジェクトで、このエディターの導入には大きな苦労が伴うと思われます。

WixやJimdoなど、最近は誰でも簡単に編集ができるプラットフォームが多くなってきました。

そういった環境の変化にユーザーは敏感です。より簡単な方に流れていくのは人の真理でもあります。

今はWordPressのシェアは世界一ですが、そのようなユーザーのことを思うと、未来はどうなっているかは誰にもわかりません。

その未来を見据えたプロジェクトがGutenbergエディターだと私は感じています。

Gutenbergの使い方

当日は、デモサイトを利用して参加者に触っていただく機会を設けました。

Gutenberg 対応のテーマの作り方

ここが半年前と大きく異なる部分でした。

add_theme_support の gutenberg がなくなり、それぞれがテーマサポートとして独立しました。

// Gutenberg Wide Alignment
// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#wide-alignment
add_theme_support( 'align-wide' );

// Gutenberg custom colors disable 
// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#disabling-custom-colors-in-block-color-palettes
add_theme_support( 'disable-custom-colors' );

// Gutenberg color palette
// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes
add_theme_support( 'editor-color-palette',
    array(
        'name' => 'Blue',
        'color' => '#21759b',
    ),
    array(
        'name' => 'Orange',
        'color' => '#d54e21',
    ),
    array(
        'name' => 'Gray',
        'color' => '#464646',
    ),
    array(
        'name' => 'White',
        'color' => '#ffffff',
    )
);

/**
 * カラーパレットの背景色を定義
 * https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes
 */

.has-blue-background-color {
    background-color: #21759b;
}

.has-blue-color {
    color: #21759b;
}

.has-orange-background-color {
    background-color: #d54e21;
}

.has-orange-color {
    color: #d54e21;
}

.has-gray-background-color {
    background-color: #464646;
}

.has-gray-color {
    color: #464646;
}

.has-white-background-color {
    background-color: #ffffff;
}

.has-white-color {
    color: #ffffff;
}