WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応） - NxWorld
以前Gutenbergのデフォルトブロックを非表示にする方法について紹介したことがありますが、その後バージョンアップによってフック変更（allowed_block_types() → allowed_block_types_all()）・新ブロック追加・ブロックスラッグの変更・方法によっては一部ブロックの表示制御ができなくなるなど何かと変更がありました。 新ブロックや埋め込みブロック関連などまだ内容を把握しきれてなかったり不明点も多いんですが、現状の最新版であるVer 5.8対応版の備忘録として分かる範囲で再度まとめました。 はじめに 以下では必要ブロックを指定するホワイトリスト形式と逆に不要ブロックを指定するブラックリスト形式の2パターンを紹介しており、それぞれをPHPのみで実装する方法とJavaScriptも用いて実装する方法とで同じく2パターン紹介しています。 ただ、以前は可能だった
WordPress：Gutenbergのブロックパターンやパターンカテゴリを追加・削除する方法 - NxWorld
WordPress 5.5のリリースに伴いGutenbergへ新たに追加されたブロックパターンのカスタマイズで、デフォルトで用意されているブロックパターンやパターンカテゴリで不要なものを削除したり、逆にオリジナルのブロックパターンやパターンカテゴリを追加する方法です。 ブロックパターンを削除する ボタンを2つ横並びにしたブロックやイメージ・テキストのカラムブロックなど、ブロックパターンには予めデフォルトパターンとして10種類が用意されています。 それらが不要な場合はunregister_block_pattern()を用いてfunctions.phpへ下記のように記述します。 add_action( 'init', 'remove_default_block_pattern' ); function remove_default_block_pattern() { $patterns =
Before Gutenberg – 投稿別に既存のエディターを有効にする – Capital P – WordPressメディア
もうWordPress 5.0がリリースされたので、Beforeでもなんでもなくなってしまったが、連載タイトルを変えるわけにはいかないので、そのままにする。WordPress 5.0からGutenbergことブロック・エディターがデビューとなったのだが、まだ対応が終わっていない方も多いだろう。そこで、今回は特定の投稿タイプおよび投稿だけクラシックエディターにする方法を紹介する。 Classic Editorプラグインは何をしているのか さて、Classic Editorプラグインを入れておこうというアドバイスを以前お伝えしたが、実はニュースをお伝えした当初と異なり、現在のClassic Editorは非常に薄いプラグインとなっている。何をしているかというと、ブロックエディターのオン・オフを切り替えているだけなのだ。 前はたくさんあったJSがいまは1つだけ。 筆者はてっきり以前のエディターを
【WordPress】カスタムブロックの作り方を書いてみた - Qiita
はじめに WordPress 5.0からGutenbergと呼ばれるブロックエディターがデフォルトのエディターとして採用されました。 そのため、今後はこのブロックエディターによる開発が増えてくると思われます。 個人的には、今までのWysiWygエディターに不満を感じていたわけではありませんが、ブロックエディターという選択肢が増えたことで、できる事の幅が増えてくる と思います。 本記事では、このブロックエディターの新規ブロック（以降、カスタムブロック）の作り方を記載して行きます。 ブロックエディターとは？ ブロックエディターは、名前の通り、HTMLをブロックように積み上げてHTMLを作成していくエディターです。 詳細は、以下を参照ください。 ブロックエディターの特徴の1つとして、上記リンク先のページにも記載がありますが、 実際のサイトと同様に表示されるエディター。 であることです。 これから
Gutenbergブロック作成（チュートリアル）と開発環境の準備 - Qiita
Gutenbergブロック作成について 公式のチュートリアルに沿って、実際にカスタムブロックを作成してみます。 公式のチュートリアルはこちらです。 2020年1月7日現在では、日本語訳はありません。そのため、ちょっと主観を入れながら記事にしてみます。 (全ページ訳して書き溜めておいてから公開したかったのですが、時代に取り残される前に公開だけしておこうというわけで中途半端にも公開しておこうと思ったらすでに5月です) カスタムブロック作成の流れ カスタムブロック作成の流れは大雑把に書くと以下になります。 1. カスタムブロック登録用プラグインを作成する 2. ブロックをJavaScriptで作成する 3. 2で作成したJavaScriptをプラグインにて読み込み/登録する（ここはPHPで行う） カスタムブロックHelloWorld 公式が出しているチュートリアルでは、「Getting Star
WordPress ブロックエディター(Gutenberg)カスタマイズあれこれ - Qiita
WordPress 5.0から導入されたブロックエディター(Gutenberg)のカスタマイズ方法や、関連するオプション、新しく導入された設定について見ていきます。オフィシャルの テーマサポート の内容をベースに、独自の情報を追加しています。 更新履歴 2021/06/11 - ブロックフォントサイズの shortName が無くなったので削除。ブロックパターンの削除、カスタム単位、カスタム行間について追加。 2021/01/10 - グラデーション設定を追加。 2020/06/19 - 投稿タイプ別に使えるブロックを制限する方法を追加。 2020/05/24 - ブロックスタイルの削除について追加。 2020/04/22 - 後方互換性についての注意を追加。ダークモードの記載追加。 2020/02/20 - Gutenberg 7.5 でインラインの文字色編集が追加されたので記載。 20
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
カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない
ここのところ、記事も書かずに何をしていたかというと、いわゆるWordPressでの実験を試みておりました。そのうちの一環として取り組んでいたのが、WordPress 5.0から正式採用された新エディタ「Gutenberg」のカスタマイズ。 そんなカスタマイズ作業をする中で、これは楽になると感じたのが「Block Lab」というプラグインです。 カスタムフィールド的に実装可能 Block Lab 公式サイト 当ブログメディアの執筆環境は、しばらく前からブラウザ環境にしていたわけですが、それに伴って裏側を整備していて、例えばフキダシレイアウトや注釈、追記といったレイアウト、さらには外部リンクや内部リンクをカードタイプで表示させるといったことをショートコードで実装していました。 それらのショートコードは執筆画面でもしっかり展開されるよう、Shortcake(Shortcode UI)というプラグ
WordPress：Gutenbergでデフォルト表示されているブロックを非表示にする方法 | NxWorld
July 26, 2021 追記 バージョンアップによってフック変更・新ブロック追加・ブロックスラッグの変更などあったために、ここで紹介している内容をそのまま利用できない部分があります。 Ver 5.8以降でのブロック表示制御については、「WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応）」を参考にしてください。 正確には表示させたいものを再度設定するという形なので、特定のブロックを非表示にするのにはもっと適した方法がありそうですが、とりあえず備忘録。 Gutenbergには下のイメージのように沢山のブロックが用意されており、現時点の最新であるVer 5.0.1で5グループの63種類あります。 これらのブロックを利用することで様々な見栄えを表現することができるのですが、中にはサイトやクライアントにとっては不要なものもあったり、場合によってはデ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress ブロックエディター（Gutenberg）ブロック一覧表 - Qiita
Block Editor HandbookのBlocksチュートリアルを和訳する 【step.1】│anchoko.