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つです。

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

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

npm dployを使って自動デプロイしてみた。

日頃、極々小規模の開発しかしないので、Transmit で充分満足していたのですが、 npm で自動デプロイが出来ると知って試してみました。

npm : dploy – npm

公式サイト:DPLOY

git の差分をみて自動デプロイしてくれる賢い子。sftp もいけるよ!

“npm dployを使って自動デプロイしてみた。” の続きを読む

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からタグを取得してみる” の続きを読む

【CSS(SASS)のライブラリ化?計画】ハンバーガーメニューをCSSだけで作ろう

JavaScriptが時の人になって暫く経ちましたが、まだまだ喧々諤々やっているよう(に見える)ので、なるべく近づかないで済ませる方法を模索しています。
その方が軽いはずだしゆーざーふれんどりーだと思っています。(JS自体は好きです。いつもお世話になっております。ハンバーガーメニューがゆーざーふれんどりーかどうかとか難しい話は振らないでください。)

この数年、Sassを導入して、命名規則を変えてから、とうとう、ようやく、ねんがんの、CSSのモジュール化が出来るようになってきたので、ちまちま書き溜めて行こうかと思っています。
ヒトサマに使ってもらえるようなソースでは全然無いのですが、人目に晒してブラッシュアップしていくのが良いかなと思うので。

今日は良くあるハンバーガーメニューをCSSだけで作るというのを書いておこうと思います。
方法は色々とあって、たくさんソースも落ちていますが、アテクシ流の書き方をメモしておきたいと思います。
(タイトルのライブラリ化とは別になんかnpmとかで呼び出せるとかそんなんじゃなくて、コピペで済むぐらいのフワッとした意味なので怒らないでください。)

大体の仕組みとしてはcheckboxでオンオフの判別をして、transformtransitionでアニメーションを作ります。
~(チルダ)で要素を紐付けられるようにするのが肝
iOSでは動作確認済み。Chrome系も大丈夫なはず。

CSSと言っていますが、SASSで書いています。
PostCSSとかnextcssとか試したいけれどまだ手を出せていません。

あと命名規則は最近SMACSSとBEMをベースに、

prefix-block__element–modifier(ex. l-global__header)

みたいな書き方するようにしてて気持ち悪かったらごめんなさい。
m-はモジュール、l-はレイアウトです。

で、もいっこのポイントとしては、ハンバーガーメニューではほぼ無いと思うんですが、後々やっぱりJS使うかーとかにもなりがちなので、動きの部分を別に書くようにしています。これオススメ。

“【CSS(SASS)のライブラリ化?計画】ハンバーガーメニューをCSSだけで作ろう” の続きを読む

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

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

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

[svg]logo[/svg]

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

phpの中なら

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

で。

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

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

【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた

GWに私は何をしているのでしょうか。

前回に引き続き、SVGについて。

前回のやり方ではCSSに読み込むスプライト画像が出来ないのでどうしようかなあと調べていたら、またまた良いものを発見しました。

TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax

postcss-inline-svg というライブラリです。

CSSそのものにSVGをインライン化するのを自動化してくれるライブラリ。神発見したと思った。って言っても、css inline svg npm で検索すれば直ぐ出てくるんだけども。

問題はPostCSSで作られているということです。Sassに慣れきってるのでPostCSS環境に合わせるの面倒・・・と思ったけれど、そこはnpm-scriptsの良いところ。これまでも、node-sassでcssに変換した後にautoprefixerを通していたので、さらにpostcss-inline-svg すれば良いだけでは・・・!?

と思って、package.jsonに

"svginline": "npx postcss *.css --use postcss-inline-svg -d ../ --no-map",

としたら出来ちゃった。IE11でも動作しちゃった、のでご報告したいと思います。npm-scriptsを使ってる前提です。

“【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた” の続きを読む