はじめに Webエンジニアの皆さん、日々の業務お疲れ様です。皆さんは、さぞや楽しいエンジニアライフを送っていることでしょう。最近は技術の進歩も落ち着いてきましたので、Rustなんかに手を出して、先行者利益を目論んだりしているのではないでしょうか。 さて、そんな楽しい中、たまにやってくる何とも言い難い案件というのが「WordPressのテーマ作成」です。普段、大規模開発や自社サービスに携わっている方は、WordPressに関わることはないかもしれませんが、請負業務やフリーランスの方には、ふと湧いてくる案件でもあります。そして、何かと言い訳を付け、できる限りWordPress関連の案件は避けているのではないでしょうか。 なぜ、エンジニアはWordPressを嫌うのか エンジニアというのはWordPressを嫌う傾向にありますが、それは何故でしょうか。 プライドがゆるさない WordPress界

普段VagrantのVCCWを使ってWordPressのテーマ開発を行っていたが、 公式VCCWはPHP7.0とかなので、環境としてだいぶ古いVirtualBoxは遅い(気がする)手動で環境作るのがめんどくさい という点で微妙だなと思っていた。 そこで、今時っぽくDockerでWordPressの開発環境を作ろうと思い、奮闘した。 完成版のリポジトリを作ったので、環境構築だけしたい人はリポジトリのREADMEの通りにやると良い。↓ https://github.com/yheihei/wp-docker-template WordPressでテスト駆動開発をやるのに必要なもの テストコードを書かないとWordPressはグダグダになるという自論を持っている。 自分自身もテスト駆動開発じゃ無いと、ろくなコードを書けない体になっているのでテストができる環境が必須である。 WordPressのテ

DX現場支援で顧客と共に 社会変革をリードする メンバーズは、お客さまのDXチームに伴走し、「DX投資のROI最大化」を実現します。 お問い合わせ

7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも

How To Get Started with Attributes in Gutenberg Blocks Jay Hoffmann | March 15, 2018 When I first started building custom blocks with Gutenberg I’d always start with the edit function. Then I’d move to the save function and make sure the right kind of HTML was saved to the database. Attributes were basically an afterthought for me. I had a vague idea that they defined some of the data in my block,

これまで紹介してきたように、GutenbergではブロックにRichTextコンポーネントを追加することができる。たとえば、インライン要素がそれに該当する。このサイトSnow Monkey Blocksでは、「蛍光ペン」という機能があり、このようにハイライトを施すことができるが、要するにそういうものだ。 ある程度HTMLに詳しい方ならば、「なんらかのクラス名をつけたspanタグを挿入できるようにしているのだろう」と気づくだろう。今回はそのやり方についてリソースを提供したい。 単一のタグ 上で紹介した蛍光ペンのようなものはそれほど難しくない。Snow Monkey Blocksでは span.smb-highlighter を付与することで対応している。このためのAPIがregisterFormatTypeというAPIなのだが、まだ文書化されていないアンドキュメンテッドため、サンプルコードな

#この記事は？ Wordpressの新エディタGutenbergをいじってて よく使いそうだと思ったコンポーネントをまとめていきます 追記編集していきます TextControl と TextareaControl テキスト編集のコンポーネント。 onChangeでイベントオブジェクトじゃなく中身の文字列だけが渡されるようになってるので、値の取り出しとかしなくていいので普通にtextareaとか書いちゃうより楽です。 const {TextControl, TextareaControl} = wp.components; registerBlockType('myPlugin/myBlock',{ edit({attributes,className,setAttributes}){ return [ <TextControl onChange={(newText1)=>setAttri

WordPressのGutenbergで選択しているテキストに色（クラス）を付ける Gutenbergはブロック単位ではカラー設定ができますが、選択したテキストだけのカラー設定ができません。 そこでカスタムブロックでテキストカラーの変更をできるようにしてみます。 投稿日2019年02月20日 更新日2019年02月20日 テキストカラーを変更する方法は「Advanced Rich Text Tools for Gutenberg」というプラグインでできます。 ただ、これはインラインスタイルで設定されてしまうので、メンテナンス性が悪いかなと思います。 ということでこのプラグインをベースにして、設定したカラーのクラスを割り当てるように変更してみます。 Advanced Rich Text Tools for Gutenberg カラーパレットの設定 Gutenbergには色を選択するカラーパレ

Gutenbergはそのソースの多くがJavaScriptから構成されている。そこで問題となるのが多言語対応（Internationalizationを略してi18nなどと書く）なのだが、これまでは次のようにやや迂遠な方法を使っていた。 // PHP wp_enqueue_scripts( 'my-script' ); wp_localize_script( 'my-script', 'MyScript', [ 'title' => __( 'My Script', 'my-domain' ), 'description' => __( 'This is my script.', 'my-domain' ), ] ); //JS alert( MyScript.title ); 要するに、これまではPHPで翻訳した文字列を定義し、それをwp_localize_script関数でパスしていた

WordPress 5.0がリリースされて以来、筆者は”Gutenberg lang:ja”でtwitter検索することを趣味にしているのだが、テーマが対応していないことによる怨嗟の声が聞こえてくる。有料テーマなら対応しておけばよかったのに……とは思うが、これは逆に考えるとビジネスチャンスでもある。 ただ実際、対応といっても国内有料テーマの利便性は豊富なショートコードなので、ブロックエディタとは相性がわるいし挿入ボタンも置けなくなったので「似たブロックをつくって移行をお願いする」しか方法がないはずなんですよね。でもそれは微妙だから迷っているうちに今…みたいな。か、単にめんどい — キタジマタカシ?Snow Monkey 開発者 (@inc2734) December 14, 2018 そこで、今回はZange Themeという架空の人気有償テーマがあり、そのテーマの提供するショートコードz

これまでブロックの作成方法などについて触れてきたが、Twenty Twentyなどに見られるように、WordPressコアやプラグインの提供するブロック機能に依存し、あくまでスタイルの拡張に徹底するというのも一つの戦略ではある。 カスタムブロックについて「自分はプログラマーではないのでちょっと……」などと思っている人でも手軽にできる、ブロックスタイルの追加方法を説明する。 スタイルの登録 Gutenbergのデフォルトブロックのうち、たとえば区切り線は「スタイル」という概念がある。 区切り線、要するに hr はスタイルを選ぶことができる。 この実装がどうなっているかというと、スタイルを選ぶごとにCSSのクラスが付与されるという形だ。hrを例にとると、デフォルトで以下の3種類。 上から順に、次の様なクラスが割り当てられている。 クラスなしあるいは is-style-defaultis-sty

やってやろうじゃないかメカアジャイル！ / Let's do it, mechanical agile!

近々本格的にリリースが予定されているWordPressの新エディタ「Gutenberg（ブロックエディタ）」の概要・チュートリアル・関連リソースなどが掲載されていたりまとめているサイトの備忘録です。 リリース後、より開発者向けとかスニペット情報を中心に掲載するようなサイトもいろいろ出てきそうな気はしますが現時点で目についたものです。 October 01, 2020 追記 一部サイト名・リンク先を修正しました。 「Gutenberg News」はクローズしたようなので削除しました。 Gutenberg Handbook WordPress.orgでGutenbergについて掲載されているページで、概要や設計解説をはじめ、API・テンプレート・ブロック作成・関連リファレンスなどがまとめられています。

WordPress Advent Calendar 2017 23日目に空きが生じたようなので、埋め草を投下します。 本記事では、Gutenbergプラグインを開発するためにはどのような知識が必要か、概観することを目標にします。それぞれの技術については、解説記事がいくらでもあるので深掘りはしません。 本記事のターゲットは以下のような読者です。 WordPressプラグインを作ったことがある（または、作り方を知っている） JavaScriptの基本的な知識がある 変数定義にvarをつけないといけない理由がわかる 現行のブラウザ(IE11含む)で動作するのはES5であることを知っている ES2015（またはESNext）という仕様があることを知っている React.js、Babel、webpackといったキーワードを聞いたことがある GutenbergとモダンJavaScript WordPr

カスタムブロックですが、WP-CLIを使うのが正直一番楽です。 WP-CLIのある開発環境を用意する VCCWやWockerがカスタマイズできて便利ですが、黒い画面に抵抗のある人はLocal by Flywheel使いま […] WP-CLIのある開発環境を用意する VCCWやWockerがカスタマイズできて便利ですが、黒い画面に抵抗のある人はLocal by Flywheel使いましょう。これもデフォルトで入ってます。 https://blog.mismithportfolio.com/web/20161218flywheelwpcli WP-CLIのバージョンが古いことがあるので、要注意です。 # wp cli version WP-CLI 1.4.1 # wp cli check-update +---------+-------------+--------------------

この記事は古いです。 下記など公式ドキュメントを参照ください。 https://developer.wordpress.org/block-editor/ 自己紹介 石川栄和 @kurudrive 株式会社ベクトル 代表取締役 / フロントエンドエンジニア 好きなもの : スケボー / スプラトゥーン2 ■ こんなの作ってます WordPressテーマ「Lightning」 WordPressテーマ「BizVektor」 見積書・請求書管理用WordPressテーマ 「BillVektor」 お城めぐりGPSスタンプラリー戦国攻城記 スケボーブログ 今日の内容 Gutenbergとは？ Gutenbergの特徴 Web制作者が最低限抑えておきたいポイント はじめてのブロック開発 とりあえず作ってみる 任意のclassをつける 編集可能にする ツールバーをつける 画像とテキストのブロック 編

Gutenbergでより凝ったレイアウトを簡単に作成できたり、いろいろと細かく設定ができるブロックをさらに追加してくれるプラグインのまとめです。 中には特定のテーマ向けとして作られているプラグインもあるので一般的なテーマでは一部ブロックが使えないとか機能が制限されている場合もあるものの、基本的にはどのテーマでも利用することができます。 また、容易にブロックを追加できるだけでなく、オリジナルブロックを自作しようと思っているときに作り方などの参考にもなると思います。 紹介しているブロック数・機能・設定については、このエントリー公開時のものになります。 Snow Monkey Blocks プラグイン名にも含まれている「Snow Monkey」というテーマ向けとして作成されたプラグインで、作者が日本の方なのでブロックの使い方や更新情報などについても日本語でチェックすることができます。 テーマと併