Wordpress Gutenberg よく使いそうなコンポーネントまとめ - Qiita
#この記事は？ Wordpressの新エディタGutenbergをいじってて よく使いそうだと思ったコンポーネントをまとめていきます 追記編集していきます TextControl と TextareaControl テキスト編集のコンポーネント。 onChangeでイベントオブジェクトじゃなく中身の文字列だけが渡されるようになってるので、値の取り出しとかしなくていいので普通にtextareaとか書いちゃうより楽です。 const {TextControl, TextareaControl} = wp.components; registerBlockType('myPlugin/myBlock',{ edit({attributes,className,setAttributes}){ return [ <TextControl onChange={(newText1)=>setAttri
ブロックエディターでアイキャッチ画像パネルに説明文を追加する – Capital P – WordPressメディア
COVID-19によってWordCamp Asia 2020が中止された頃は「ちょっと大げさだったんじゃないの？」と思ったものだが、まさかWHOによってパンデミックと宣言されるまでになるとは思いもよらず、自宅勤務を余儀なくされる毎日である。 さて、今回は「アイキャッチ画像の設定パネルに説明文を追加する」という非常によくありそうなTipsを紹介する。 WordPressに慣れ親しんでいると忘れがちだが、「アイキャッチ画像」というのはあまり一般的な用語ではない。「外連味けれんみのない記事」というぐらい一般的ではない。また、テーマ次第では必ずしも投稿のシングルページに表示されるとは限らないので、次のような要望はよく上がるだろう。 「アイキャッチ画像」を「ヘッダー画像」や「カバー画像」に変えたい。どこに表示されるかについての説明文を追加したい（例・この画像は記事一覧ページと個別記事ページに表示され
Gutenberg MediaUpload コンポーネント和訳 - Qiita
このページは Gutenberg の MediaUpload コンポーネントのリファレンス 2019年11月18日版を和訳したものです。 MediaUpload は WordPress のメディアモーダルを開くボタンを描画するコンポーネントです。 設定 これはメディアファイルを扱うコアブロックとの統合を可能にするために必要なプレースホルダコンポーネントです。デフォルトでは何も描画しませんが、components.MediaUpload フィルタでオーバーライドする方法を提供します。 import { addFilter } from '@wordpress/hooks'; import MediaUpload from './media-upload'; const replaceMediaUpload = () => MediaUpload; addFilter( 'editor.Med
【PDF無料】2023年最新：WordPress6.2マニュアル（グーテンベルグGutenberg版） ／ THE MANUAL｜浅見 ゆたか
※2023年8月追記 WordPress6.2の仕様に合わせたマニュアル（ver1.3）をアップしました。（6.2版を作ってる最中に6.3がリリースされちゃったので、一つ前のバージョンでごめんなさい） 埼玉県の横瀬町という小さな町で、Web制作を中心としたクリエイティブを手掛ける合同会社 浅見制作所の浅見（@azamixx821）と申します。 弊社の制作実績もまとめています、よろしければぜひチェックしてみてください！ 普段制作させていただいているWebサイト案件では、主にWordPressを利用しているのですが、クライアント様にマニュアルを要望いただくことが少なくありません。 しかしながら、Web記事では使い方やマニュアルが存在するのですが、意外とこのWeb記事を見て使ってみてくださいとご案内しても、印刷できるマニュアルを求められることが多く… この度、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
WordPress Gutenberg スライダーを表示するブロックの作り方
WordPress スライダーを表示するブロックの作成 WordPress のブロックエディタ Gutenberg でスライダーのプラグイン Swiper を使ってスライダーを表示するカスタムブロックの作り方についての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 ブロックの基本的な作成方法や環境の構築方法については以下を御覧ください。 関連ページ カスタムブロック MediaUpload で複数の画像を挿入 スライダーでアイキャッチ画像を表示するブロックを作成 Gutenberg ブロックの作成（JSX を使用しない場合） Gutenberg ブロック開発の環境構築 JSX を使った Gutenberg ブロックの作り方 ダイナミックブロックの作り方 カスタムカードブロックの作り方 Code-Prett
Gutenberg ブロック作成 attributes の source と selector プロパティ | Web Design Leaves
Gutenberg ブロック作成 attributes の source と selector プロパティ CATEGORY: WordPress | TAG: Gutenberg 2020年9月2日 関連ページ：WordPress Gutenberg ブロックの作成 Gutenberg で編集可能なブロックを作成する際に、 例えば、複数の RichText コンポーネントを使う場合、attributes（属性）の source プロパティや selector プロパティ、type プロパティを適切に設定する必要があります。 適切に設定されていないと、一見問題ないように見えても、ページを再読み込みするとブロックが壊れて、コンソールを確認すると Block validation: Block validation failed のエラーが表示される場合があります。 以下は複数の RichTe
WordPress JSX を使った Gutenberg ブロックの作り方
WordPress JSX を使った Gutenberg ブロックの作り方 WordPress のブロックエディタ Gutenberg で JSX を使って独自のブロックを作成する方法について。 JSX を使用するための環境構築は @wordpress/scripts（wp-scripts）を使っています。基本的なブロックの作成方法、JSX の基本的な使い方、WordPress のコンポーネントの使い方、webpack.config.js を使った環境のカスタマイズ（複数のエントリーポイントの設定方法）などについての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 以下はすでに Node.js がインストールされていて、WordPress のローカル環境が設定済みであることを前提にしています。また、コマンド
WordPress カスタムブロック MediaUpload で複数の画像を挿入
WordPress カスタムブロック MediaUpload で複数の画像を挿入 WordPress の Gutenberg で MediaUpload コンポーネントを使って画像を挿入するブロックを作成する際に複数の画像を挿入する方法や MediaUpload の基本的な使い方についての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 基本的には MediaUpload コンポーネントの multiple プロパティを true にし、onSelect プロパティのコールバック関数で画像オブジェクトの配列を受け取って処理します。また、gallery プロパティを true にするとギャラリー機能が使えるので便利です。 以下はすでに Node.js がインストールされていて、WordPress のローカル環
WordPressのGutenbergで画像を挿入できるカスタムブロックを作成する | webOpixel
Posted: 2018.09.28 / Category: WordPress / Tag: Gutenberg Gutenbergでブロックにメディアアップローダで画像を挿入できるようにしてみます Gutenberg 3.9 を使用します。 Gutenbergブロックの開発環境の構築 開発環境はCreate Guten Blockで構築されたものを使用します。 よかったらこちらの記事もご覧ください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する 準備 src/block.jsにこれから作成するファイルをインポートします。 block-imageというディレクトリ名にしてこの中に作成します。 src/block.js import './block-image/block.js' 新たに作成したブロックを追加してみてください。 編集できるよ
WordPress Gutenberg ブロック開発の環境構築
WordPress 関連リンク JavaScript ビルド環境のセットアップ（@wordpress/scripts） @wordpress/create-block パッケージ ブロックの作成 チュートリアル（create-block） JavaScript Build Setup（英語） @wordpress/create-block（英語） Create a Block Tutorial（英語） @wordpress/scripts (wp-script) npm 関連リンク @wordpress/scripts @wordpress/create-block 関連ページ Node.js を Mac にインストール（nodebrew の使い方） npm の基本的な使い方 webpack の基本的な使い方 React を使ってみる（基本的な使い方） このページ以外にも以下のようなブロッ
WordPress Gutenbergブロック開発 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
こんにちは！3児のパパエンジニアの笹垣です。弊社では、WordPressをベースにしたサイト制作についてもよくご相談をいただくのですが、今回はWordPressバージョン5から導入された「Gutenberg」のカスタムブロック開発について備忘録も兼ねてご紹介します。 はじめに WordPressバージョン5が正式リリースされてから4か月。 最新機種の登場はもちろん、Mac OSやiOSのバージョンアップが大好物な自分にとって、WordPress v5リリース時はそこそこ興奮したのを覚えています。 WordPress 5.0 “ベボ” v4以前のWysiwygエディター（Classic Editor）は“ブログ”という側面が強く、エディターのツールバーと改行を駆使して記事を書く形で、行間の調整に苦労したり編集者ごとのトンマナの統一が難しく、案件によってはカスタムフィールドを複数作成して回避す
@wordpress/wp-env と @wordpress/create-block で簡単にブロック開発環境を作る
@wordpress/create-blockと@wordpress/wp-envの2つでブロック開発環境の構築を試しました。 結果、今までのやり方の導入時に悩んでいた事柄に悩まされなくなるほど簡易に実行できました。 前提 ローカル(Mac使用)にWPを立ち上げてブロック開発できる環境を作る @wordpress/wp-envと@wordpress/create-blockを使う Sassを使いコンパイルする(今回はSCSS) 個別に大量のパッケージをインストールとか、依存関係とか、アレが足りないとか、コレのバージョンが違うとか、環境ごとに設定を作らなければならないとか、そういうので時間を取られるのは嫌なので楽に作ることを目的にしています。 概要 @wordpress/create-blockを実行 Dockerをインストール(wp-envの実行に必要) @wordpress/wp-env
Gutenberg InnerBlocks 入れ子のブロックを作る | スタッフブログ | 北九州・福岡のウェブアクセシビリティ専門Web制作会社
こんにちは。ましじめの田村です。 私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。 興味を持っていただけた方は、ぜひご覧ください。 https://amzn.to/3A8kNHC このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。 こんにちは。ましじめの田村です。 Gutenbergで入れ子のブロックを作りたい場合がありました。 a-blog cmsで言う所のカスタムユニットグループの枠といったところでしょうか。 マニュアルを確認してみると次の方法で作成可能でした。 Nested Blocks 基本はこちら import { InnerBlocks } from '@wordpress/block-editor'; edit : <InnerBlocks /> save: <
既存ブロックを活用したInnerBlocksテンプレートの紹介 – Capital P – WordPressメディア
Gutenberg導入以前からカスタムフィールド製造業界では「入稿の制限」を目的としてACFなどが活用されてきた。多くの場合、レイアウト上の工夫や入稿フローの固定化（e.g. ライターへの説明を省く）が目的なのだが、似たようなことはブロックエディターでも活用できる。 ただ、「ブロックを作るのが大変」という人も多いと思われるので、今回は既存のブロックを組み合わせただけのブロックの作り方を紹介しよう。以前紹介したブロックの入れ子をもっとカジュアルにしたやり方である。 たとえば、下記の様なレイアウトを想定する。 画像は人気テーマOceanWPのデモから。 これはよく見るブロックで、基本的な構成要素は以下の3つ。 画像（アイコン）見出しテキスト（段落） いずれもコアブロックとして含まれているものなので、三つ組み合わせれば完成だ。このためには InnerBlocks のテンプレート機能を利用すること
Gutenbergメモ Templatesとplaceholderを使う – WEBUTUBUTU
WordPressのGutenberg用のTemplatesが便利そうなので、多少試したことを記載しています。 Templates ハンドブックでは上記ページにあります。 特徴 PHPファイルに記述することで、予めブロックを配置した状態で書き始められる もともと用意されているcoreのブロックだけではなく、独自に作成したブロックも使用可能 attibutesの設定によるが、placeholderなどの指定もできる template_lockを記述して、「移動不可/追加不可/削除不可」と「移動可/追加不可/削除不可」の状態が設定できる 簡単に書けば、ひな形を作成して手間を減らせる便利な仕組みです。 既存記事での動作 テンプレートなしの状態から設定した場合、既存記事にはテンプレートの反映を拒否できる選択肢がでる テンプレートを反映後に変更した場合でも、反映前に配置されたブロックは消えない(テン
WordPress5.0からGuternberg用に追加されたテーマサポート機能（add_theme_support）一覧 | WEMO
1. editor-color-palette : 色設定（カラーピッカー）のカスタマイズ 色設定（カラーピッカー）のカスタマイズ用の機能として、'editor-color-palette'が追加されています。 例：色選択を３色のみにする。 add_theme_support( 'editor-color-palette', array( array( 'name' => '白', 'slug' => 'white', 'color' => '#fff', ), array( 'name' => '黒', 'slug' => 'black', 'color' => '#000', ), array( 'name' => '赤', 'slug' => 'red', 'color' => 'red', ), ) ); 上記のコードをfunctions.phpに記述することで、以下のように色設定
Gutenbergにオリジナルなブロックを作成する方法（静的編） | HPcode（えいちぴーこーど）
プラグインを作成 独自のブロックはプラグインで作成するのが一般的なようです。 プラグインの詳しい作り方については以下をご参考ください。 https://haniwaman.com/my-plugin/ my-gutenbergをpluginsフォルダ内に作成してindex.phpを作成して以下を記述します。 「My Gutenberg」というプラグインがプラグイン一覧に表示されるようになるので、有効化しておきます。 Gutenbergブロックの作成方法 ブロック用のスクリプトを登録ブロックの定義を登録ブロックの内容を登録 1.ブロック用のスクリプトを登録と2.ブロックの定義を登録はinitをフックにしてregisterを登録します。3.ブロックの内容を登録については、JavaScriptで記述していきます。 ブロック用のスクリプトを登録 WordPressでスクリプトを登録するためのwp_
Gutenbergでオリジナルのブロックパターン登録方法 - ブロックエディター私的マニュアル（α）
Gutenbergでオリジナルのブロックパターン登録方法 Posted: 2020/7/16 Updated: 2020/7/16 これはプラグイン版のGutenberg（ver 8.5.1）を有効化して確認しています。UI等は変更になる可能性が大いにあります！（現に、8.4からブロック選択のUIが変わっています） プラグインを入れれば同様の動作は確認できますが、開発版とも言えるものなので、本番環境へ導入するのは相当の理由がない限り控えましょう。 前回のブログで、WordPress 5.5 に新しく「ブロックパターン」が追加されることを紹介しました。 今回は、自分で新しいブロックパターンを登録する方法をご紹介します。 ブロックエディターハンドブックには、パターンの登録・削除・パターンのカテゴリー登録・パターンのカテゴリー削除の方法が載っています。 パターンを登録する register_bl
GutenbergのブロックスタイルをPHPで簡単に追加する | エビスコム - EBISUCOM
『グーテンベルク時代のWordPressノート テーマの作り方 2（ランディングページ＆ワンカラムサイト編）』ではJavaScriptファイルを用意してブロックスタイルを追加する方法を紹介しましたが、最新のGutenberg（バージョン6.2）ではPHPだけでも簡単に追加できるようになりました。 たとえば、functions.phpに次のように register_block_style() の設定を追加すると、見出しブロックに「デザイン01」と「デザイン02」の２つのブロックスタイルが追加され、見出しのデザインを切り替えることができるようになります。 register_block_style( 'core/heading', array( 'name' => 'design01', 'label' => 'デザイン01', 'inline_style' => '.is-style-desi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
