Slide for my presentation at WordCamp Osaka 2019, held on 6-7 December, 2019. WordCamp Osaka 2019 (2019年12月6-7日) 登壇スライド。 https://2019.osaka.wordcamp…

{ if (! this.initialized) { search.start(); this.initialized = true; } if (value) { setTimeout(() => { this.$el.querySelector('input').focus(); }, 100); } }); }, }" x-dialog x-model="searchModalIsOpen" x-cloak class="fixed inset-0 z-10" @keydown.slash.meta.window="searchModalIsOpen = !searchModalIsOpen" @keydown.k.meta.window="searchModalIsOpen = !searchModalIsOpen" @keydown.escape.window="searchM

Wordpress5.0リリースから標準エディターとなったGutenergのカスタマイズが結構充実しているので自分が主に使っているもの、使う予定のものをメモ。 随時追加していく予定です。 開発環境 Wordpress 5.0 create-guten-block 1.13.0 npm 6.4.1 node 10.13.0 ブロックのカスタマイズをする場合、create-guten-blockを使うとほとんど設定を行う必要なく開発ができます。 実装方法などこちらでまとめてます。 ブロックのカスタマイズ 独自のブロック要素の追加や既存のブロックのカスタマイズについて。 ブロックの追加 registerBlockType関数で独自のブロック要素を登録します。 registerBlockTypeの第一引数にブロック要素の名前を入れるのですが、「名前空間/ブロック名」という形式で指定する必要がありま

さて、これまでBefore Gutenbergの連載では、ブロックの作り方などを説明してきたが、純粋にReactだけを使いたい場合やReactコンポーネントを作る方法については説明してこなかった。今回はその方法を説明しよう。 ポイント1. ReactおよびReactDOMは同梱されている WordPress 5.0以降、ReactおよびReactDOMは同梱されている。したがって、自分のプラグインなりテーマなりに含める必要はない。たとえば、 my-script.js が自分のプラグインのJSだとすると…… <?php // wp-elementを指定すると、reactやらreact-domやらが入ってくる。 // 依存関係に wp-element を指定する。 wp_enqueue_script( 'my-plugin-js', 'path/to/my-script.js', [ 'wp-

WordPress 5 から導入されたブロックエディタの Gutenberg は JavaScript で記述されたフロントエンドのプロジェクトで、 Node.js のパッケージマネージャーの npm で管理されています。Gutenberg は単一のパッケージではなく、多数のパッケージから構成されている巨大プロジェクトです。GitHub のリポジトリを見てみると、./packages というフォルダの中に大量のパッケージが同梱されているのが分かります。 たくさんの npm パッケージが 1 つのリポジトリに同梱されている このように 1 つのリポジトリの中に複数のパッケージを同梱するリポジトリの運用方法は monorepo (モノレポ・モノリポ)と呼ばれています。この記事では、モノレポのメリットやモノレポを実現するためのツールである Lerna を紹介します。 モノレポのメリット・デメリッ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Gutenbergに対応したテーマを利用している場合は特に困らないが、WordPress 5.0でカスタムテーマを使っていた場合、対応が必要になる。今回はその指針およびリソースを紹介しよう。 新たに追加された様々なブロックに対応 Gutenbergから追加されたブロックは最低限のスタイルが当たっているのだが、リンクなどはコンフリクトを起こすことがある。たとえば、「ファイル」というブロックを挿入した場合、筆者が自分のブログで利用しているオリジナルテーマ”Kyom”では、次のように変な感じになってしまった。 「ダウンロード」リンクが見えない。 このCSS自体を修正することはそれほど手間ではないが、こういう「いままで想定していなかったデフォルトスタイル」が結構たくさんある。プルクオート、区切り線、ボタン、カバー画像…… これらに対応する場合、まとめてやるためにはGutenberg Block U

メジャーアップデートにより、Wordpress5.0では、従来のビジュアルエディタからブロック型のエディタであるGutenberg（グーテンベルク）に変わりました。 “Gutenberg” とは、WordPress の新しいエディター体験を作り出すためのプロジェクト名です。このプロジェクトのゴールは、誰でもリッチな投稿のレイアウトができるような、ブログ投稿や固定ページ編集における新しい体験を作ることにあります。 Gutenbergの特徴 少ないプラグインでより多くを実現 モダンで、マルチメディア重視のレイアウトを作成 すべての画面サイズと端末で動作 実際のサイトと同様に表示されるエディター Gutenbergの問題点とは？ 一見便利で進化したように見えるエディタGutenbergですが、問題点があるとすれば、現在のビジュアルエディタでカスタマイズをしている方は、それらの互換性がなくなったり

Gutenberg についてのよくある質問はこちらに移動しました (Gutenberg ハンドブック内)。 その他の Make WordPress ハンドブックの日本語翻訳をお探しの方はこちらをご覧ください。

We’ve made some big upgrades to the editor. Our new block-based editor is the first step toward an exciting new future with a streamlined editing experience across your site. You’ll have more flexibility with how content is displayed, whether you are building your first site, revamping your blog, or write code for a living. Building with Blocks The new block-based editor won’t change the way any o

今年もアドベントカレンダーの季節がやってきた。12/24まで毎日ブログを更新する予定である。もちろん、筆者一人ではかなり辛いものがあるので、Capitalistの皆さんにもご助力をお願いしたい。 さて一発目の内容だが、例によってGutenbergネタである。前回があまりに複雑な内容だったためか、ほとんど反応がなかった。よって、今回はシンプルな内容にとどめたい。今回は、ブロックのアイコンをカスタムSVGにする方法である。 この真ん中の「アフィリエイト」みたいなやつ。 カスタムブロックのアイコンプロパティ これまでの連載を読んできた方ならご存知の通り、カスタムブロックを作成する場合、アイコンを指定することができる。 registerBlockType( 'capitalp/block', { title: 'Capital Pのブロック', icon: '', // ←これ category:

先日RC1がリリースされ、いよいよWordPress 5.0のリリースが近づいてきた。といっても、まだリリース日が確定していないのだが……。今回はプラグインやテーマ作者にとって気になる、互換性の保ちかたについてちょっとしたティップスを紹介しよう。 筆者はいくつかのプラグインをリリースしているのだが、そのうちの一つにHamazonというものがある。これはAmazon, DMM, PHG(itunes)のアフィリエイトコードを差し込むものだ。実装はショートコードだが、Shorcakeに対応しているので、ビジュアルエディタでも使うことができる。 ビジュアルエディターにも対応している。Shorcakeを入れていない場合はただのショートコードを挿入。 さて、これをGutenbergに対応させたいのだが、Gutenbergでショートコードをビジュアルとして表示する手段は提供されていないので、ブロックを

WordPressの新しいエディタGutenbergは紆余曲折を経てReactでの開発を続けており、2018年5月ぐらいのリリースを目指しているようだ。新しいAPIも整備されつつあり、カスタムフィールド製造業界を震撼させたメタボックスも新しいAPIが整備されつつある。 さて、いずれにせよ、投稿編集画面に新しい時代が訪れることは間違いないので、それをどのように作っているのかについて知っておくのは悪いことではない。 Reactに関する前提知識 今回の記事ではあまり詳細に立ち入らないが、Reactは昨今のJavascript開発を牽引するライブラリであり、2010年ごろのJavascript開発とは圧倒的に違っている。圧倒的に変わった点として、次のようなものがある。 npmを使ったパッケージ管理。npm install というコマンドをなんでかよくわからないまま打たされている人も多いだろう。基本

home デザイナーズブログ web デザイン WordPress に Gutenbergがやってくるヤァ!ヤァ!ヤァ! – ACF & カスタム投稿タイプ & テキストエディターにHTML… WordPress 4.9.8がリリースされて、いよいよ Gutenberg の足音が聞こえてくる季節になりました。 Gutenberg という名の通り、WordPress においては大きな変革であることは間違いないと思う。 今までのエディターでは実現が難しかった表現が、それほどリテラシーのないユーザーでも実現できる可能性がある。 もちろん今までのエディターを使い慣れている人にとっては、ちょっと戸惑うかも知れないけど、慣れるまでにそれほど時間はかからない気がする。 で、実際どういうエディターなのかということは、使ってみないとよくわからないので、『Gutenberg』をテーマにしたイベントが Word

WordPressの次期エディター「Gutenberg」が使える状態なら、投稿や固定ページの編集画面で使うことができると思います。 この Gutenberg をカスタム投稿タイプでも使う方法があります。 Gutenberg をカスタム投稿タイプでも使う方法Gutenberg は REST API を利用しているので、カスタム投稿タイプで REST API が使えるよう有効にする必要があります。 カスタム投稿タイプで REST API を有効にする方法最近ではカスタム投稿タイプの作成を管理画面でささっと作成できるプラグインも人気ですが、実際にコードを書いてカスタム投稿タイプを作成している方は「register_post_type」関数を使っているはず・・・。 なので「register_post_type」のパラメーターに以下のコードを含めると、カスタム投稿タイプを REST API に対応で

この連載ではGutenbergがリリースされる前にやっておくべきことをまとめているのだが、Gutenbergがもたらしたもっとも大きな変更点として、Reactの導入がある。これにより、次の新しい要素が導入される。 ES6/ES Next React + JSX さて、以上の概念について慣れ親しんでいる人は特に驚きはないだろうが、これまでjQueryぐらいでしかJavaScriptを学んでこなかった方は本稿を読んで今後の参考にしてほしい。 TL;DR ES6とは、新しいJavaScriptだが、ブラウザ互換性のために色々工夫する必要がある。 WordPressではES5による記法を提供しているが、ES6(ESNext)で書くべきである。 挫折した人はツール類の登場を待つか、Webアセンブラーに転職しよう。 ちなみに、TL;DRとは、”Too Long, Don’t Read”の略で、長文ブロ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert