Gutenberg

ブロックの機能としてテキストを編集することができるというのは、最も基本的な機能だと思います。 そこで、今回はブロック制作を始められた方向けに、RichTextコンポーネントというWrodpressが用意してくれているコンポーネントの使い方を説明したいと思います。 この記事の前提事項 この記事は、npx @wordpress/create-blockでブロックの開発環境が構築できていることを前提としています。wordpress/create-blockでの環境開発の構築方法については、他の記事をご覧ください。 当ブログでは次のような記事を公開しているので、良かったら参考にしてください。 同一プラ…

とりあえずブロックのひな型は作れたので、早速オリジナルブロックの作成に取り掛かろうということになるのですが、本番の中味に入る前にちょっと見た目を整えましょう。 ブロックの象徴は何といってもアイコンでしょ。やっぱりオリジナルのアイコンを入れたいですよね。ということで、その方法を説明します。 FontFontAwesomeからダウンロード まず、アイコンを作るのですが、一から作るのはかなり面倒ですので、FontAwesomeなどからフリーのSVGをダウンロードします。 好きなアイコンをクリックして SVG形式でないとダメですよ。 ブロックに登録 そしてブロックプロジェクトのsrcフォルダに入れて下…

どうも、あつまるのテックリードの三井です。 カスタムブロックで日付や時刻を取り扱うとき、管理画面で設定した日付形式・時刻形式で表示したくなるときがあります。 今回は管理画面から日付形式・時刻形式を取得して表示する方法を紹介します。 @wordpress/data を使う 記事編集画面で wp.data.select( 'core' ).getSite() を実行すると一般設定の登録情報が取れます。日付形式は date_format , 時刻形式は time_format というキーで取れます。 実際には useSelect を使って下記のようにするのがいいでしょう。 export functi…

どうも、あつまるのテックリード、三井です。 WordPress は内部的に多種多様な情報を取り扱っています。そしてそれらを取得すための PHP 関数がとても充実しています。一方で Gutenberg のカスタムブロックを開発しているとき、JavaScript 世界からそれらの情報を取得する方法は公式のハンドブックでもなかなか解説されていなかったりします。 今回は、WordPress 管理画面の一般設定画面で登録している情報を JavaScript で取得する方法を解説します。一般設定画面とは下記のような ↓↓↓ 画面ですね。 WordPress 一般設定画面 @wordpress/data を…