WordPressのGutenbergで選択しているテキストに色（クラス）を付ける
WordPressのGutenbergで選択しているテキストに色（クラス）を付ける Gutenbergはブロック単位ではカラー設定ができますが、選択したテキストだけのカラー設定ができません。 そこでカスタムブロックでテキストカラーの変更をできるようにしてみます。 投稿日2019年02月20日 更新日2019年02月20日 テキストカラーを変更する方法は「Advanced Rich Text Tools for Gutenberg」というプラグインでできます。 ただ、これはインラインスタイルで設定されてしまうので、メンテナンス性が悪いかなと思います。 ということでこのプラグインをベースにして、設定したカラーのクラスを割り当てるように変更してみます。 Advanced Rich Text Tools for Gutenberg カラーパレットの設定 Gutenbergには色を選択するカラーパレ
WordPress JSX を使った Gutenberg ブロックの作り方
WordPress JSX を使った Gutenberg ブロックの作り方 WordPress のブロックエディタ Gutenberg で JSX を使って独自のブロックを作成する方法について。 JSX を使用するための環境構築は @wordpress/scripts（wp-scripts）を使っています。基本的なブロックの作成方法、JSX の基本的な使い方、WordPress のコンポーネントの使い方、webpack.config.js を使った環境のカスタマイズ（複数のエントリーポイントの設定方法）などについての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 以下はすでに Node.js がインストールされていて、WordPress のローカル環境が設定済みであることを前提にしています。また、コマンド
Gutenbergで既存のブロックにカスタム設定を追加する方法
Posted: 2019.03.12 / Category: WordPress / Tag: Gutenberg Gutenbergはサイドバーに「高度な設定」というクラス名を入力できる欄があるのですが、これだとクラス名を覚えていなくてはいけなくて、制作者以外の人に入力してもらうのが難しいですよね。 ということで今回はサイドバーに設定項目を追加してボタンでクラスの切り替えをできるようにしてみます。 動作環境 WordPress 5.1 Create Guten Block Create Guten Blockの導入は下記も参考にしてください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する 完成イメージ 段落のマージンをボタンで切り替えて調節できるようにしてみます。 コンポーネントの読み込み 最初に必要なコンポーネントを読み込みます。 blo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
