Gutenbergを試してみる5（ショートコードと埋め込み）

WordPressの新しいエディターGutenbergについて、
少しずつ記述しています。
記述中にGutenbergも4.0.0にアップデートされました。
リリースが近づいてきている感があります。

Gutenbergのリリーススケジュール

WordPress5.0のリリーススケジュールがでたようです。
https://make.wordpress.org/core/2018/10/03/proposed-wordpress-5-0-scope-and-schedule/
11/19にリリースというスケジュールですが「1月にずらせ」というメッセージがたくさんですね。

このコメントの中に、

If you have concerns about clients upgrading sites themselves before they’re ready, you can test how it’ll work now, by installing the Gutenberg and Classic Editor plugins on WordPress 4.9.8: if the site continues to work as expected, then you should install the Classic Editor plugin on their site now, and any subsequent upgrade to 5.0 will cause the Classic Editor to remain the default. (If the site doesn’t work as expected, please file a bug report, so we can get that fixed up.)

google 翻訳で↓

あなたが準備が整う前にサイトをアップグレードしているクライアントについて懸念がある場合は、WordPress 4.9.8にGutenbergとClassic Editorのプラグインをインストールすることで、どのように動作するかをテストすることができます。 サイトにClassic Editorプラグインをインストールする必要があります。その後5.0にアップグレードすると、Classic Editorはデフォルトのままになります。 （サイトが期待どおりに動作しない場合は、バグレポートを提出してください。

とあります。
ClassicEditorプラグインをインストールしておくと、wordpressを5.0にアップグレードするとClassicEditorがデフォルトになる・・とあります。
有効化しておく必要があるのか、不明瞭なところもありますが、現時点でClassicEditorを使い続けることを決めている方はClassicEditorプラグインをインストールしておくべきでしょう。
（本記事記載は2018/10/18です）

さて、
5回目はショートコードと埋め込みブロックについて試しています。

ショートコード

たとえば、有名な送信フォームプラグインのContact Form 7は、プラグインの設定で作成したフォーム情報を、記事内ではショートコードで入力します。

ショートコードの挿入

ショートコードの挿入はウィジェットカテゴリからショートコードブロックを使って入力します。

ショートコードはこの青枠内に、[]付きで入力します。
ビジュアルエディタ上はこのままの表示です。

コードエディタ

<!-- wp:shortcode -->
[contact-form-7 id="1340" title="お問い合わせ"]
<!-- /wp:shortcode -->

プレビュー画面にすると、
ショートコードで設定した内容が表示されます。

埋め込み

WordPressを埋め込み

これまで、サイト内リンクの場合、直にURLを記入すると、
リンク先のブログカードが作成されて表示されました。

ですが、Gutenbergではブロックのタイプが段落であれば文字列として表示されるだけです。

WordPressサイトを埋め込む場合、
埋め込みカテゴリからWordPressブロックを選択、URLを入力します。

URLを入力し、保存すると、

ブログカードがビジュアルエディタ上でも表示されます。

コードエディタ

<!-- wp:core-embed/wordpress {"url":"https://localhost/wordpress/blog/XXXX/xxxxxxxx/","type":"wp-embed","providerNameSlug":"テスト用サイト","className":"wp-has-aspect-ratio wp-embed-aspect-1-1"} -->
<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-テスト用サイト wp-has-aspect-ratio wp-embed-aspect-1-1"><div class="wp-block-embed__wrapper">
https://localhost/wordpress/blog/XXXX/xxxxxxxx/
</div></figure>
<!-- /wp:core-embed/wordpress -->

ただ、この埋め込み先が表示されるようになると、
ビジュアルエディタの動きが若干挙動不審に・・なり・・・
また、うっかりクリックしてしまうと・・・リンク先へ移動してしまいます。
(Gutenberg 4.0.0にアップデート後、リンク先へ移動する前にメッセージが表示されるようになりました。)

twitterを埋め込み

twitterやyoutube、instagramなどのSNSを埋め込むこともできます。

コードエディタ

<!-- wp:core-embed/twitter {"url":"https://twitter.com/WordPress","type":"rich","providerNameSlug":"twitter"} -->
<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/WordPress
</div></figure>
<!-- /wp:core-embed/twitter -->

埋め込みできるURL、できないURLについては定かではありませんが、
これまで同様、ホワイトリストに沿っていると考えられます。

[Embeds « WordPress Codex]
(https://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F)

埋め込みブロックを使うことで以前より明確にカードを表示できるので、
評価できるポイントと思います。

Gutenbergを試してみる1
Gutenbergを試してみる2
Gutenbergを試してみる3（画像を使った投稿）
Gutenbergを試してみる4（再利用可能ブロック）