Gutenberg にカスタムブロックを追加してみよう

こんにちは、mimiです。

Gutenberg 3.0 がリリースされて、本年中のWordPress 5.0 リリースが現実味を帯びてきましたね。そろそろ、カスタムブロックの作り方ぐらい予習しておいても良さそうな感じなのでやってみました。

といってもやり方は
Creating Block Types – The new Gutenberg editing experience – WordPress
に全部載っているんですけども。

前提として Gutenberg プラグイン自体もインストールされている必要があります。

1. gutenberg-examples をダウンロード

https://github.com/WordPress/gutenberg-examples をダウンロードします。

これが WordPress のプラグインとして扱われます。ダウンロードしたものをプラグインディレクトリに入れてください。

2. 有効化の前にコメントアウト

現状、2018/06/14の時点では、そのまま有効化するとエラーが出るので、gutenberg-examples-master/index.php 内をいくつかコメントアウトします。

include '01-basic/index.php';
//include '01-basic-esnext/index.php';
include '02-stylesheets/index.php';
include '03-editable/index.php';
//include '03-editable-esnext/index.php';
include '04-controls/index.php';
//include '04-controls-esnext/index.php';
include '05-recipe-card/index.php';
//include '05-recipe-card-esnext/index.php';

ESnext で書いた場合のサンプルも入っているのですが、npm install して build しないと動かないようになっています。

ESnext の記述に慣れておいた方が良いので、書き方はそちらで覚えた方が良いと思いますが、ここでは取り敢えずカスタムブロックを表示することを目標にします。

3. サンプルがレイアウト要素として表示されます

有効化して、記事作成すると、「ブロックの追加」から追加したサンプルがレイアウト要素として表示されます。Example: Basic、Example: Stylesheets、Example: Recipe Cardの3つです。

日本語化してない時に撮ったスクショですみません。

ちょっとしたカスタムブロックなら、このサンプルを弄るだけで作れると思います。
お試しあれ。

WordPress 4.9.6がリリースされました。

WordPressの4.9.6がリリースされました。
ちょっと、いつものマイナーアップデートとは違うようです。

プライバシーポリシーのページを作成しましょう

このプライバシーおよびメンテナンスリリースには、37の拡張機能、51のバグ修正、2つのタスクが含まれています。(中略)欧州連合の一般データ保護規制(GDPR)に関連する変更には、コメント、プライバシーポリシーページ、およびデータ処理が含まれます。

https://codex.wordpress.org/Version_4.9.6


ということで、話題のGDPRに対応したので、プライバシーポリシーページの作成を促すようになっています。

このブログにも(当然のように!)無かったので、試しに作成してみました。

“WordPress 4.9.6がリリースされました。” の続きを読む

Gutenberg Meetup vol.2に参加してきた

Gutenberg Meetup vol.2 – connpass

に参加してきました!赤坂とか何年ぶりでしょうか。

そもそも、Gutenbergとは

えー、ここで言うGutenbergとは活版印刷技術の発明者ではなくて、WordPressに近々導入されるテキストエディタのプロジェクトの名前です。絶賛開発中。

現在はプラグインの形でリリースされていますが、WordPress5.0で公式エディタとして統合される予定になっているそうです。

一般向けの公式の紹介ページ的なのは多分ココ
The new Gutenberg editing experience – WordPress – A new editing experience for WordPress is in the works, code name Gutenberg. Read more about it and test it!
開発者向けなページは多分ココ
Introduction – The new Gutenberg editing experience – WordPress

えー、今この記事自体を頑張ってGutenbergで書いているのですが、6日前にアップデートが出ていました、今気がついた・・・(!)。リリースノートを見ると30個以上の変更点があるみたいです。アップデートしたら大分と改善されてたYO!もうほんと只今絶賛全力シャカリキに開発中です。

Githubのページはここ。多分、ココ見たほうが早いと思います。
WordPress/gutenberg: Printing since 1440. Development hub for the editor focus in core. Beta plugin is available from the official WordPress repository.

あ・・・!もしかしてショートコードの改行が効かない問題、解決したんじゃ・・・?!

TEST TEST 

あ、やっぱりそれはまだ駄目ぽいですね・・・。でも大分と期待される動きに近づいて来ています。凄いな・・・。

という訳で、いずれ来るGutenbergの荒波を共に乗り越えよう

というタカイココロザシを持った方々が集まった今日のMeetup、とても楽しかったです。参加者が10人ぐらい?で、言いたいことも聞きたいこともバシバシ発言できる丁度良い規模だったかも。

“Gutenberg Meetup vol.2に参加してきた” の続きを読む

vue.jsとAxiosを使ってWP REST APIからタグを取得してみる

REST APIと私とvueと、みたいなのが流行っているらしいとは聞いていましたが、静的コンテンツまで生成出来るとか聞いて、ガタっとなりました。それ私がやりたいやつじゃん、と。GW最終日のネタに決定。

でもまあ、先ずはvueもREST APIも全然分からんので、取り敢えずWordPressからデータを取得するアレコレを触ってみたのでメモしておきます。

要るもの

  • vue.js — Javascriptのフレームワーク。たぶん。簡単簡単って書いてあるけど、まだ全然仲良くなれない。最近人気らしい。
  • axios.js — ブラウザとNode.jsのためのHTTPクライアント。かしこい。
  • wordpress — ディファクトスタンダードなCMS。腐れ縁。4.7から勝手にREST APIを出すようになってます。肥大化したCMSの起死回生なるか。

・・・これしか要らない、という意味では超簡単かも。コマンドラインも基本必要ない。

“vue.jsとAxiosを使ってWP REST APIからタグを取得してみる” の続きを読む

インラインSVGを出してくれるショートコード

SVGをインライン化出来たので、記事内とかでも使いやすいようにショートコード化してみました。

ひねりも何もありませんが、これでlogo.svgていうファイル名なら、

[svg]logo[/svg]

と書くと出力してくれます。

phpの中なら

echo do_shortcode( '[svg]logo[/svg]' );

で。

適切なwidthとheightをCSSで指定するのを忘れずに。

※ 記事内でSVGを使うケースがあるのか?という人には必要ないコードです。
SVGスプライトをnpm-scriptsで作ってみるを前提にしています。

WordBench三鷹@ミタカフェにて所感

WordBench三鷹@ミタカフェに参加してきました。土曜日開催の勉強会、しかも近所ってほんと有難い!隔月で開催されるそうで、早速次回も参加表明してきました。LT枠で(!)。

会った人たちにPHPカンファレンス2009とWordCampがーって言いまくってたけれど、WordPressのブースがあっただけかもしれない。10年弱前の事ってことでお許しください。

ブロガーになりたい人が結構いることとか、10年でWordPressの認知度がこんなに変わっていて、ブログって何?美味しいの?っていう時代からやってる身としては何とも感慨深い集まりでした。

私的には、グーテンベルグとGoogleの動向が知りたかったんだけれど、そんな事より一般ユーザーとブロガーに会えて、彼らのニーズが全然違う事を知れて凄く面白かった。

仕事としてWordPressを使う時には、要らないものを剥ぎ取ってコアだけ残した自作テーマから構築していくし、なるべくプラグイン使わないようにするし、サイズダウンとスピードアップに注力して作ります。最早必要としているのはWordPressを使っているというお題目だけだったり、管理UIの見慣れ感だけだったりするわけです。なんでこれをWordPressで?っていう案件も増えてきました。

だから、WordPressが外側だけどんどんリッチになっていくのを少し面倒くさいように思っていたのです。

でも、世間のニーズとしてはグーテンベルグが正しいのかもなあ。と。同時に開発者としてはWordPressからの脱却を考えるべきなのかなあ、とかも。まあしばらくは無理でしょうけれど。

次回のLTで、CSSのいろはを話すべきか、npm-scriptsを使ったSASSの導入を話すべきか、迷っています。それとも、オススメのテーマ、とかの方が良いのかな。個人的には最新公式テーマのTwenty Seventeen最強説を唱えたいのだけれども。

まあ、医者の不養生で、このサイトもロクに手入れをしていないので、こんな人がアレコレ言っても信じてもらえないかも知れませんが。ぎゅんぎゅん動きまくるように改築しようかな。

それと、ミタカフェの、気取らなくってお菓子が沢山あって落ち着く感じも気に入りました。MBPの環境整えたからリモートも可能になったし、今度またお邪魔してみたいと思います。

あと、名刺入れちゃんとしたの探そう。

【Twenty Seventeenのちょこっと解説】バージョン1.5がリリースされてた。

こんにちは、みみです。

そういえばそろそろTwenty Eighteenまだ出ないのかなーとか思ってたら、Twenty Seventeenの1.5がリリースされていました。

Twenty Seventeen Theme Changelog « WordPress Codex
https://codex.wordpress.org/Twenty_Seventeen_Theme_Changelog#Version_1.5

Various code improvements for formatting. (#41057)
Use consistent wording when referring to the front page in inline docs. (#42666)
Correct the number of recent posts in a comment in template-parts/page/content-front-page-panels.php. (#42621)
Remove unnecessary comment in front-page.php. (#42820)Underline links in comments. (#43317)

ということで大した変更はなさそうですが、そもそも1.3と1.4のリリース見逃してたよね・・・。特に大事がなくてほんとに良かった・・・。

“【Twenty Seventeenのちょこっと解説】バージョン1.5がリリースされてた。” の続きを読む