Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressブロックエディターの使い方(Gutenbergチュートリアル)

WordPressのブロックエディターは、コンテンツを書いたりサイトを編集したりするための初期設定のエディターです。2019年にGutenbergというニックネームで導入され、古いクラシックエディターに取って代わった。

ブロックエディターは、簡単で直感的な方法でコンテンツを作成し、WordPressサイトを編集することができます。

このチュートリアルでは、WordPressブロックエディターを使いこなし、視覚的に美しいブログ投稿やページを作成する方法をご紹介します。

How to use the WordPress block editor

ブロックエディター(Gutenberg)とクラシックエディターの違いは?

ブロックエディターに入る前に、Gutenbergブロックエディターと旧クラシックエディターの違いを比較し、理解しよう。

WordPressのクラシックエディターはこんな感じだった:

Older classic editor in WordPress

基本的な設定オプションを備えたテキストエディターボックスがあった。機能と外観はかなり限られていた。

WordPressのブロックエディターはこんな感じです:

Block editor in WordPress

ご覧の通り、WordPressでコンテンツを作成するための2つのエディターは全く異なるものです。

旧クラシックエディターは、マイクロソフトのワードに似た書式設定ボタンを備えたテキストエディターだった。

新しいエディターは「ブロック」と呼ばれる異なるアプローチを採用している(だからブロックエディターという名前になった)。

ブロックは、レイアウトを作成するために編集画面に追加できるコンテンツ要素です。投稿やページに追加する各項目がブロックです。

例えば、段落、画像、動画、ギャラリー、音声、リストなどのブロックを追加できます。一般的なコンテンツ要素にはすべてブロックがあり、WordPressプラグインによってさらに追加することができます。

WordPressブロックエディターはクラシックエディターより優れているのか?

WordPressのブロックエディターは、投稿やページにさまざまなタイプのコンテンツを追加するシンプルな方法を提供します。

例えば、以前はクラシックエディターを使ってコンテンツにテーブルを追加したい場合、別途テーブルプラグインが必要だった。

ブロックエディターを使えば、テーブルブロックを追加し、カラムと行を選択するだけで、コンテンツを追加し始めることができる。

Table block example

コンテンツ要素を上下に移動したり、個々のブロックとして編集したり、メディアリッチなコンテンツを簡単に作成できます。

最も重要なのは、WordPressのブロックエディターが使いやすく、習得しやすいことだ。

これは、最初のブログを始めたばかりのWordPress初心者や、DIYでビジネスサイトを構築しているすべてのWordPress初心者に絶大なメリットをもたらします。

そこで、WordPressのブロックエディターを使って、プロのように優れたコンテンツを作成する方法を検証してみよう。

Gutenbergチュートリアルで扱う内容は以下の通りです:

準備はいいかい?さあ、飛び込もう。

動画チュートリアル

Subscribe to WPBeginner

もし、文章での説明がお望みなら、このまま読み進めてほしい。

Gutenbergを使う – WordPressブロックエディター

ブロックエディターは直感的でフレキシブルに設計されています。古いWordPressエディターとは見た目が異なりますが、クラシックエディターでできることはすべてできます。

まず、クラシック・エディターで行っていた基本的なことを、ブロック・エディターでどのように行うかを説明しよう。

ブロックエディターを使って新規ブログ投稿やページを作成する

通常と同じように、新しいブログ投稿やページを作成します。WordPress管理画面の投稿日 ” 新規投稿を追加メニューをクリックするだけです。ページを作成する場合は、代わりにPages ” Add Newメニューをクリックします。

Add new post in WordPress

これでブロックエディターが起動する。

ブロックエディターでブロックを追加する方法

投稿やページの最初のブロックはタイトルです。

マウスを使ってタイトルの下に移動するか、キーボードのTabキーを押してカーソルを下に移動し、書き始めることができます。

The title block

初期設定では、次のブロックはParagraphブロックです。これによりユーザーはすぐに書き始めることができます。

しかし、何か違うものを追加したい場合は、エディターの左上、既存のブロックの下、またはブロックの右側にある新規ブロック追加ボタン[+]をクリックしてください。

Add new block buttons

ボタンをクリックすると、ブロックの追加メニューが表示され、上に検索バー、下によく使われるブロックが表示されます。

タブをクリックしてブロックカテゴリーをブラウズしたり、キーワードを入力して特定のブロックを素早く検索することができる。

Add new block animation

マウスを使ってボタンをクリックしたくない場合は、キーボードショートカットを使うこともできる。

まず「/」と入力してブロックを検索し、キーボードのEnterキーを押してブロックを挿入する。

Add new block using keyboard shortcut command

新規エディターでブロックを操作する

各ブロックの上部にはツールバーが表示されます。ツールバーのボタンは編集するブロックによって変わります。

例えば、下のスクリーンショットでは、Paragraphブロックで作業しており、テキスト整列、太字、斜体、リンク挿入などの基本的な書式設定ボタンが表示され、3つのドットメニューの下にその他のオプションが用意されています。

Block toolbar

ツールバーだけでなく、各ブロックは編集画面の右カラムに表示される独自のブロック設定を持つことができる。

これらの設定は、編集するブロックによって異なります。例えば、「段落」ブロックでは、テキスト、背景、リンクの色、タイポグラフィを編集できます。

Additional block settings in the side column

ブロックを上下に動かしたり、並べ替えたりできる。

その場合は、クリックしてドラッグまたはドロップするか、ブロックツールバーの上下ボタンをクリックしてください。

関連 WordPressでブロックを削除する方法をご覧ください。

グループとカラムでブロックを整理する

ブロックエディターには、コンテンツレイアウトを管理・整理する便利なツールも用意されている。

キーボードのShiftキーを押しながらブロックをクリックすると、複数のブロックを選択できます。

Transform blocks in Groups or Columns

その後、ツールバーのブロックタイプボタンをクリックして、選択したブロックをグループまたはカラムに変換する。

その後、グループブロック全体にスタイルを適用し、配置や間隔を変更することができます。

Style group blocks

ブロックエディターでは、空のグループまたはカラムブロックを追加することもできます。

その後、他のブロックで埋めることができる。

Adding a columns block in WordPress

各カラムには必要に応じてブロックタイプを追加できる。

これにより、さまざまな使用ケースに対応した美しいレイアウトを作成することができる。

Colums block settings

Gutenbergでのブロックの保存と再利用

ブロックを使う最大の利点のひとつは、ブロックを保存して再利用できることだ。これは、記事やページに特定のコンテンツスニペットを頻繁に追加する必要があるサイトオーナーやブロガーにとって特に便利です。

各ブロックのツールバーの右隅にあるメニューボタンをクリックするだけです。メニューから「パターンの作成」オプションを選択します。

Create reusable block pattern

注:グループやカラム全体を再利用ブロックとして使用することもできます。これにより、セクション全体を保存し、必要なときにいつでも使用することができます。

このポップアップが表示され、このパターンの名前を入力する必要があります。再利用するときにわかりやすいように、何でもかまいません。

次に、オプションでカテゴリーを設定することができる。これにより、パターンを整理して並べ替えることができる。

Create pattern

次に、「作成」ボタンをクリックしてパターンを保存します。WordPressはあなたのパターンとその中のすべてのブロックを保存します。

パターンを再利用するには、追加したい投稿やページを編集するだけです。

次に、[+]ブロック追加ボタンをクリックするか、/キーボードショートカットを使用します。あなたが付けた名前を入力することでパターンを見つけることができます。

Insert pattern

パターンにより、サイトオーナーはアクションコール、ソーシャルメディアボタン、バナーなど、よく使われる要素を簡単にレイアウトに追加することができます。

WordPressテーマやプラグインに独自のパターンが付属している場合もありますし、WordPressBlock Patternsライブラリで他の人が作成したパターンを見つけることもできます。

もっと助けが必要な場合は、WordPressブロックパターンの見つけ方と使い方に関する初心者向けガイドを区切りで用意しています。

Gutenbergブロックエディターでの公開とオプションの管理

WordPressの投稿には、たくさんのメタデータが含まれています。これには、公開した日付、カテゴリーやタグ、アイキャッチ画像などの情報が含まれます。

これらのオプションはすべてエディター画面の右カラムにきちんと配置されている。

Post and page settings in block editor

Gutenbergでのプラグインオプション設定

WordPressプラグインは、ブロックエディターのAPIを利用して、編集画面内で設定を統合することができます。

人気のあるプラグインには、独自のブロックが付属しているものもあります。

例えば、WordPressの最高のお問い合わせフォームプラグインであるWPFormsでは、ブロックを使ってコンテンツにフォームを追加することができます。

WPForms block example

他のWordPressプラグインもブロックエディター画面に設定を追加することができます。

例えば、All In One SEO for WordPressでは、ブロックエディターの下部でSEO設定を編集することができます:

All in One SEO settings example

同様に、WooCommerceを使ってオンラインストアを運営している場合、WooCommerceにも独自のブロックがあることにお気づきでしょう。

これらのブロックを使えば、WordPressの投稿やページに商品を追加することができます。

WooCommerce blocks in block editor

ブロックエディターで一般的なブロックを追加する

ブロックエディターは、旧クラシックエディターが行っていたすべてのことができる。

しかし、以前よりも素早くエレガントに物事を進めることができる。さらに、コード不要のオプションの数々でコンテンツをスタイリングできるなど、より多くのことができる。

一般的に使用できるブロックをいくつか紹介しよう。

1.WordPressブロックエディターで画像を追加する

WordPressのブロックエディターには、すぐに使えるImageブロックがあります。ブロックを追加し、画像ファイルをアップロードするか、メディアライブラリから選択するだけです。

Adding image block in WordPress

また、コンピューターから画像をドラッグ&ドロップすると、エディターが自動的にImageブロックを作成します。

画像を追加すると、ブロック設定が表示され、altテキスト、画像解像度サイズ、画像へのリンクの追加など、画像のメタデータを追加することができます。

Image block settings in WordPress

詳しくは、WordPressで画像を追加する方法のチュートリアルをご覧ください。

2.ブロックエディターでのリンクの追加

ブロックエディターにはテキストを追加できるブロックがいくつかあります。最もよく使われるのはパラグラフブロックで、ツールバーにリンク挿入ボタンがあります。

その他、よく使われるテキストブロックには、すべてツールバーにリンクボタンがあります。

Add link block editor WordPress

キーボードショートカット(MacではCommand + K、WindowsコンピューターではCTRL + K)を使ってリンクを挿入することもできます。

3.Gutenbergで画像ギャラリーを追加する

ギャラリーブロックは画像ブロックと同じように機能します。ギャラリーブロックを追加し、画像ファイルをアップロードまたは選択します。

Gallery block example

詳しくは、WordPressで画像ギャラリーを作成するガイドをご覧ください。

4.Gutenbergを使ってWordPress投稿にショートコードを追加する

すべてのショートコードはクラシックエディターと同じように動作します。単にパラグラフブロックに追加することもできますし、ショートコードブロックを使うこともできます。

Shortcode block in the block editor

ブロックエディターで他のコンテンツブロックを調べる

Gutenbergエディターは、新しいブロックを導入することで、WordPressの長年の使い勝手の問題を解決することを約束した。

以下は、ユーザーが大いに役立つと思われるお気に入りである。

1.WordPressでテキストの横に画像を追加する

旧エディターでは、多くのユーザーがテキストの横に画像を配置することができませんでした。メディア&テキストブロックを使えば、それが可能になります。

Media and text block

このシンプルなブロックには、2つのブロックが横に並んで配置されており、画像とその横にテキストを簡単に追加することができます。

2.WordPressの投稿とページにボタンを追加する

旧エディターでもう一つ面倒だったのは、ブログ投稿やページにボタンを追加することだった。ボタン用のショートコードを作成するプラグインを使うか、HTMLモードに切り替えてコードを書かなければならなかった。

幸い、GutenbergにはButtonブロックがあり、投稿やページに素早くボタンを追加することができます。

Buttons in block editor

ボタンにリンクを追加したり、色を変更したりすることができます。詳しくは、WordPressで簡単にボタンを追加する方法の投稿をご覧ください。

3.ブログ投稿やランディングページに美しいカバー画像を追加する

また、投稿やページにカバー画像や背景色を追加できるカバーブロックもおすすめです。

カバー画像は、ページの新しいセクションやストーリーの冒頭によく使用される幅の広い画像です。見た目も美しく、魅力的なコンテンツレイアウトを作ることができます。

表紙ブロックを追加し、使用したい画像をアップロードするだけです。カバーのオーバーレイカラーを選択したり、固定背景画像にしてユーザーがページをスクロールしたときにパララックス効果を出すこともできます。

Cover block

詳しくは、WordPressのカバー画像とアイキャッチ画像の違いについての投稿をご覧ください。

4.投稿内にテーブルを作成する

クラシックエディターには、WordPressの投稿にテーブルを追加するボタンはありませんでした。プラグインを使うか、カスタマイザーでCSSやHTMLを記述してテーブルを作成する必要があった。

ブロックエディターには初期設定のテーブルブロックがあり、投稿やページにテーブルを追加するのがとても簡単になりました。ブロックを追加し、挿入したいカラムと行の数を選択するだけです。

Table block example

これでテーブルの行にデータを追加し始めることができます。必要であれば、いつでも行やカラムを追加することができ、2つの基本スタイルオプションが利用可能です。

5.マルチカラムコンテンツの作成

マルチカラムコンテンツの作成も、クラシックエディターではまったく扱えない問題だった。

幸いなことに、ブロックエディターではカラムブロックを追加することができる。

Multi column contet block

このカラムブロックは非常に柔軟である。最大6カラムまで並べることができるし、各カラムの中に他のブロックを使うこともできる。

Gutenbergをプロ並みに使いこなすためのボーナスヒント

ブロックエディターを見ていると、実際のコンテンツを作成するよりも、ブロックの追加や調整に多くの時間を費やすのではないかと思うかもしれない。

ブロックエディターは驚くほど高速で、ごく基本的な使い方を数分するだけでも、何も考えずに瞬時にブロックを追加できる。

この方法を使えば、ワークフローがどれほど速くなるか、すぐにわかるだろう。

ここでは、WordPressブロックエディターでより速く作業するための、パワーユーザー向けのボーナスヒントをご紹介します。

1.ブロックツールバーを上部に移動する

上のスクリーンショットで、すべてのブロックの上部にツールバーが表示されていることにお気づきかもしれません。このツールバーはエディターの一番上に移動させることができます。

トップツールバー」オプションにアクセスするには、画面右上の三点ボタンをクリックする。

Move block toolbar to the top

2.キーボードショートカットを使う

Gutenbergには、あなたのワークフローをより素早く簡単にする便利なショートカットがいくつか用意されています。まずすぐに使い始めるべきは、/.

エディターが一致するブロックを表示するので、それを即座に追加することができる。

その他のショートカットについては、画面右上の三点メニューをクリックし、「キーボードショートカット」を選択してください。

Use keyboard shortcuts in block editor

すると、使用できるすべてのキーボードショートカットのリストがポップアップ表示されます。このリストには、WindowsユーザーとMacユーザーで異なるショートカットが表示されます。

3.メディアをドラッグ&ドロップしてメディアブロックを自動作成

Gutenbergでは、画面上の任意の場所にファイルをドラッグ&ドロップすると、自動的にブロックが作成されます。

例えば、個別画像や動画ファイルをドロップすると、ブロックを作成してくれます。また、複数の画像ファイルをドロップしてギャラリーブロックを作成することもできます。

Drag ad drop file uploads in block editor

4.YouTube、Twitter、Vimeo、その他のエンベッドの追加

ブロックエディターは、WordPressコンテンツへのサードパーティコンテンツの埋め込みを簡単にします。人気のあるサードパーティ・サービスのブロックがすべて用意されています。

Embed blocks


しかし、埋め込みURLをコピー&ペーストすれば、自動的にブロックが作成されます。

例えば、YouTube動画のURLを追加すると、自動的にYouTube埋め込みブロックが作成され、動画が表示されます。

YouTube embed in block editor

初期設定の埋め込みオプションはFacebookとInstagramの埋め込みには使えませんが、回避策があります。WordPressでFacebookやInstagramの投稿を埋め込むための投稿をご覧ください。

WordPressのGutenbergブロックエディターにブロックを追加する

WordPressのブロックエディターでは、開発者が独自のブロックを作成することができます。いくつかの優れたWordPressプラグインは、新しいエディター用のブロックバンドルを提供しています。

そのいくつかを紹介しよう:

1.Spectra WordPress Gutenberg ブロック

Spectra blocks

Spectra WordPress Gutenberg Blocksは、コンテンツにデザイン要素を追加するのに役立つ、多くの高度なブロックを備えたブロックライブラリです。

人気のWordPressテーマAstraの開発者たちによって作られたSpectraは、コードを書くことなく美しいデザインを作成するのに役立ちます。

詳しくはスペクトラのレビューをご覧ください。

2.パブリッシュプレスブロック

PublishPress blocks

PublishPress Blocksは、Gutenbergブロックエディターを拡張するための追加ブロックが付属しているもう一つの強力なブロックライブラリです。

美しいレイアウトオプション、スライダー、ボタン、アイコン、イメージギャラリー、マップ、タブ、テスティモニアル、アコーディオンなどが含まれています。

3.スタッキング可能 – Gutenbergブロック

Stackable blocks

Stackable – Gutenberg Blocksは、サイトで使える美しいデザインのGutenbergブロックのコレクションです。コンテナ、投稿、おすすめグリッド、アコーディオン、画像ボックス、アイコンリスト、コールトゥアクションなどのブロックが含まれています。

Gutenbergについてよくある質問 – WordPressのブロックエディター

GutenbergがWordPressの初期設定エディターになってから、その使い方について多くの質問をいただくようになりました。ここでは、ブロックエディターに関するよくある質問にお答えします。

1.ブロックエディターで過去の投稿やページはどうなりますか?まだ編集できますか?

ブロックエディターは古い投稿やページには影響しません。ブロックエディターは自動的にクラシックエディターを含むブロックで開きます。

Convert to blocks

古いエディター内で編集することもできるし、古い投稿をブロックに変換してブロックエディターを使うこともできる。

2.古いエディターを使い続けることはできますか?

はい、古いエディターを使い続けることができます。Classic Editorプラグインをインストールして有効化するだけです。

有効化した場合、ブロックエディターは無効化され、クラシックエディターを使い続けることができます。

クラシックエディターは2024年までサポートされる予定です。ブロックエディターに慣れるために、今すぐ使い始めてください。

3.ブロックエディターが使用しているプラグインやテーマと合わない場合はどうすればよいですか?

プロジェクトGutenbergの開発期間が長かったため、プラグインやテーマの作成者は、コードの互換性をテストするのに十分な時間があった。

ただし、プラグインやテーマによっては、ブロックエディターとうまく動作しない可能性もあります。その場合は、Classic Editorプラグインをインストールするか、Gutenbergサポートを追加するよう開発者にリクエストするか、代替のプラグインやテーマを探すとよいだろう。

4.Gutenbergのヒントやトリックについてさらに詳しく知りたいのですが?

WPBeginnerはWordPressのブロックエディターについて学ぶのに最適な場所です。私たちはインターネット上で最大のWordPressリソースサイトです。

ブロックエディターを使いこなすために、新しい投稿を公開し、古いリソースを更新していきます。

また、ご質問等ございましたら、コメントするか、サイトのお問い合わせフォームからお気軽にお問い合わせください。

5.Gutenbergの問題に遭遇していますか?

WordPressのブロックエディターでトラブルが発生した場合ユーザーが遭遇する ブロックエディターの一般的なトラブルとその解決方法をすべてまとめたトラブルシューティングガイドを作成しました

ボーナス・リソース

以下は、ブロックエディターをより効率的に使うための追加リソースです:

このチュートリアルでWordPressブロックエディターの使い方を学んでいただけたでしょうか。また、サイトスピードを改善するためのWordPressパフォーマンスガイドの完全版や、中小企業に最適なメールマーケティングサービスの比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

224件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. jeff

    I inserted a hyperlink on a phrase and I want to change the font color for that phrase. how do I do that? please help

    • WPBeginner Support

      If only for that specific phrase, you would need to edit the text as HMTL to add styling to that phrase at the moment

      管理者

  3. Anne

    Hello!
    I created a column block with 3 columns. Added content and everything was distributed across the page width equally. Then I added a 4th column and now the column block no longer distributes across the entire page width. It’s seems like it has “squooshed” (sorry, can’t think of a better word right now), all 4 columns and shrunk the info as well. I tried various alignments for each individual column and it still would not spread the entire block back out. Hope this makes sense and hope you can help. Thanks!!

    • WPBeginner Support

      It sounds like what you added to your largest column has a minimum width that is not allowing the content to adjust which would be the root of your problem.

      管理者

  4. Mark Watts

    I’m struggling with the Gutenberg block editor. Heres a couple of questions but there will surely be many more to come.

    How do I add a pdf document so it opens when I click a link? Used to create and highlight the link text then select “add media” and all worked fine.

    When I try to add a link from within the paragraph block I no longer see a list of possible pages and posts so that I can chose. How do I get this list.

    • WPBeginner Support

      You would manually need to take the link from the document in your media library unless you wanted to embed it. In the paragraph block, there is the link button which is third from the right, as you type into it the dropdown should appear

      管理者

  5. Tuan

    This upgrade so stupid. I spent more time to write. Haiz

    • WPBeginner Support

      Learning a new interface can certainly be troublesome but as the interface improves it should slowly become better to use :)

      管理者

  6. Jennifer

    I’ve searched and can’t find an applicable answer to my issue, so I’m hoping you can help me.

    I upgraded to the new block system for our website this past week. I need to find and copy the url for one of our buttons (it’s a redirect to PayPal), but I can’t find the url anywhere.

    There’s no “edit button” when I hover over the button in the block. I checked the html and couldn’t find it there, either – the only thing I could see were the image files for the button itself.

    Clicking on the button live still redirects correctly, so I know the link is working – I just can’t find it.

    Any advice?

    Thanks!

    Jennifer

    • WPBeginner Support

      When you select the block there should be the block settings on the right-hand side where you would find the link settings for where the button links to if it was transferred as an image. If it is a button block then there should be the url beneath the button where you can edit it.

      管理者

  7. Franklyn Fosu

    Please help me resolve the “Update failed” issue when trying to publish my articles using the Gutenberg.

  8. Carlos Goncalves

    How to use the new advanced Css option. I Tried to put some code there, but It´s not run.

  9. Candi Clark

    On the top right of my block edit page, it doesn’t say publish. The button says update. When I click that button it says page has updated but when I go take a look at it on my website it hasn’t changed. Did something not upgrade correctly to have that button not say publish?

    • WPBeginner Support

      You may want to check any caching that you have on your site that could be causing the problem.

      管理者

  10. Jim Kielbaso

    How do I go back to the old version? There was nothing wrong with it, and this version does not add anything. In fact, it makes it MUCH more confusing. It is NOT user-friendly, and it has been very frustrating. Upgrades should only be made to improve something, not just for the sake of changing.

  11. Sufyan Shaikh

    Good article.

    • WPBeginner Support

      Thank you :)

      管理者

  12. AlannaMH

    How do I change the font of text in blocks?

  13. Viktor

    Time consuming, if you go to WP you will see very negative comments
    For me the solution was to activate a plugin called “Disable Gutenberg”
    I understand there´s a learning curve…but I pass..sorry

    • WPBeginner Support

      If you’re not ready to use the Gutenberg editor then using a plugin like that is certainly understandable.

      管理者

  14. Frank Kinghorn

    I am a complete novice in website writing and decided to use WP because it seemed to have good support. At that time I did not realise WPbeginner existed but wow! now that I’ve found various guides from wpbeginner I am convinced that I made the right choice. Specifically, this guide on the new editor is fantastic. Even its existence helped me out of a deep hole: I have installed WP on my pc so I can play with it before starting my first real website but got stumped because when I got to the stage of trying to edit a page there was no sign of the editor shown in the “Getting Started with WordPress” guide by iThemes. I spent hours trying to see if my download to my pc was corrupted or if I was missing something simple – now I know the classic editor has been replaced! Sorry for the long post but a real thank you for this guide and the several other documents I have found from WPbeginner.

    • WPBeginner Support

      Thank you, glad our site and articles could help you get up and running with WordPress :)

      管理者

  15. vivek

    everytime i try to publish ..all i get is Auto Draft.
    cant understand what is going on

  16. Aaron P

    Thanks for a great article! This really helped me make the transition. I was hesitant to switch, but now that I’ve played around for a while I like the new block editor.

    • WPBeginner Support

      You’re welcome, glad our article could ease the transition :)

      管理者

  17. Matthew Pan

    Hi, thanks for this, was really helpful.

    May I ask, for adding a button block, I’m currently unable to add one such that it opens up in a new tab. There used to be an easy checkbox for this. Do you know how to do so?
    2. Adding a button in WordPress posts and pages

    Thanks!

    • WPBeginner Support

      When adding a link you should have an option with three dots that you can click to have the open in new tab option again.
      There is a button block you can use to add a button to your posts and pages :)

      管理者

  18. sally

    How do I use Grammarly app with this new editor, because I cannot see Grammarly popping down there to correct my mistakes or even show me my mistakes? Thank you.

    • WPBeginner Support

      Once you reach the second line in a paragraph block the Grammarly check should appear in the bottom corner. If it’s not appearing you could reach out to Grammarly’s support and they should be able to help ensure it appears correctly in your editor.

      管理者

  19. Linn

    Hi, as a brandnew beginner, I took two courses on Wordpress 5 by Morten on Lynd. Gutenberg is easy to use. However, I still don’t know how to build header and footer with Gutenberg. I need a full width color background, onto which I add several buttons such as “about,” “services,” “products,” etc. Can you help?

  20. Ima

    Do you know if they have been able to fix the scrolling issue in the block editor? It is really annoying that you can’t scroll to the bottom of the block section without having to go to the Settings section and scroll there. I have googled and googled some more, and I am not finding a solution. Thanks so much!

    • WPBeginner Support

      Unless I hear otherwise, the error shouldn’t be an issue but you could reach out to the WordPress.org support for if the specific error you are running into was resolved.

      管理者

  21. Steve Briese

    Come on, folks. These are not the people who created Wordpress. These are the people who are kind enough to help you adjust to the blocks. How many times do they need to tell you to install the Classic Editor plugin if you don’t like blocks? I don’t know if I like blocks or not, but I feel more confident in testing them after reading this introduction. Thank You!

    • WPBeginner Support

      Glad our article could help :)

      管理者

  22. Sandeep

    Hi, after I installed WordPress 5.1 , using Gutenberg if go to write text, on top of first word one line will come . I am not getting what’s issue. Can tell how to solve this

    • WPBeginner Support

      Have you tried disabling all of your plugins to see if this could be a plugin specific issue?

      管理者

  23. Denny Gibson

    I’ve found no way to wrap text around images. Am I missing something or is this not as popular as I thought?

    • WPBeginner Support

      You would want to use the Media&Text block to have your text wrap with the block editor

      管理者

  24. Tom Schulte

    Is there a way to still code in html in the block editor?
    I ask this because the block editor inserted an extra wide space between 2 lines which I did not want. I could and did use the classic editor’s text option to get rid of the extra space.

    • WPBeginner Support

      Yes, you can use the ellipses in the top right to swap to HTML or you could use a classic block if you only wanted to edit a specific section in HTML

      管理者

  25. Rick Swift

    I grudgingly started using this new block mentality, and I wasn’t happy about it. I am glad I found your article, though, because it has made navigating this new concept much easier.

    Wondering if anyone has had this experience though. While adding tags to my Document, I will add the tags, hit enter and the little box doesn’t expand at all. I have NO idea how to see my tags that I have entered.

    I use WooThemes – Canvas

    Very frustrating experience right now.

    • WPBeginner Support

      If you have not already, you may want to try disabling your plugins and/or swapping themes to see if it is a conflict with one of those that is preventing the auto-expanding tag section from displaying properly.

      管理者

  26. Charles

    Maybe one day I will figure out how to use this, but at the moment it seems impossible. I have used over a dozen word processors, and various web editors, but that experience is not helping me now.
    I would like to indent a number of paragraphs. Sounds simple, but I have not found a way to do it. What is the use of having a paragraph block that can’t indent?
    Last time I gave up on putting in a table and went back to editing HTML in the old system.

    • WPBeginner Support

      While the paragraph block does not have an indent option at the moment, should you use the block editor again you could add an indent using the Classic block

      管理者

  27. Craig Wallace

    So the concept of allocating a Template to a new page is gone?

    As far as I can see, when you are making a new page ‘from blocks’ there is not way to select a template that you may have constructed in the old way? (i.e. the drop down for templates is no where to be seen).

    • WPBeginner Support

      You would want to check under page attributes to set the template for a page if your current theme has templates.

      管理者

  28. Nina Haeringer

    How do you increase font size in a list block? I have looked everywhere. I am new to WordPress and find it not very user friendly but I’m trying to get the hang of it. I need to be able to increase list block font size. Please help.

  29. Mario Garcia

    I just installed the new Word Press (blocks) and I am having trouble because Ido the title block fine, then whatever I type for the second block appears duplicated when I do the preview: I see that block under the title TWICE in the post. What am I doing wrong?

    • WPBeginner Support

      You may want to check with your theme’s support to ensure that this is not a style of your specific theme

      管理者

  30. Ericka

    I’m trying to navigate the new Block editor. I’m simply looking for the “read more” button that you use to be able to simply click a button on the Classic editor and it would place the “read more” button to divide the text on the home page.

    • WPBeginner Support

      It was renamed into the More block :)

      管理者

  31. TEGA PERKINS ODJEGBA

    How do I increase the size of my block, I have read through the guide several times. You did not address that.
    If I want to increase the writings in a block, how do I do that, and is it possible to join two block?

    • WPBeginner Support

      It would depend on what you’re trying to change. You can copy and paste the content then remove the block you moved the content from but there is not a simple merge button at the moment. If you’re looking for the font size, that is normally governed by your theme’s CSS

      管理者

  32. Kelsey

    I can’t figure out how to do a “read more” option so that the first few sentences of a blog show up as a preview on the main blog page. Any insight? Also is there a way to change the colour of the font of hyperlink? Thanks!!

  33. Vicky

    Great introduction, thank you!

    • WPBeginner Support

      You’re welcome :)

      管理者

  34. Curry

    Under the classic edit I could place a picture within a paragraph and keep everything inside the margins. I have not been able to do it with Guttenberg. I have followed the instructions re: media-paragraph block and it appears to work fine. But when I switch to preview it places the picture before the paragraph. If I simple add a new bloick I can only place the picture left or right but then it is outside the margins of the script – which does not look good. Very frustrating. Looking for help.

    • WPBeginner Support

      Your browser window may not be wide enough for the text to not automatically be placed below, you would want to reach out to the support for your specific theme to see if the styling needs to be updated for it to work with the block editor.

      管理者

  35. Curry

    I have followed your instructions for placing an image next to text in the new Gutenberg Editor. It looks fine – until I click on Preview. It then shows up as a large picture prior to the text. I have been unable to get it to transfer into Preview correctly

    • WPBeginner Support

      If you are on mobile it may be stacking the text and image due to the advanced settings for the image in that block.

      管理者

  36. Debra Oakland

    Since this new format will no longer size my Fotolia cover photos as they wereiin the old editor, (I need them wide and narrow) I chose The Cover Block which widened and narrowed the photo. I put the title in the center of the cover block. The article says no title (obviously) so I need to change the permalink. I can’t delete the uncategorized and the number after it to put the proper permalink in. Just trying to work things out without going back to the old editor. Can’t find any info on changing this permalink. Hoping this makes sense. Thank you for this tutorial, it’s very helpful.

  37. Silke

    Hi, how do I assign a menu to the footer bar wo it appearing underneath as well? Atm I create a custom footer menu. By assigning it to ‘Footer menu’ in Dashboard/Appearance/Menus it automatically appears on the page. If I now assign it to the footer bar I’ll have the menu twice.
    Here’s the problem: If I DON’t assign ‘footer menu’ to my custom footer menu it’s not available in the footer bar editor.

    • WPBeginner Support

      Your theme may have a specific setting that could be causing an issue. If you reach out to your specific theme’s support and let them know about it not appearing/appearing twice

      管理者

  38. Mark Braunstein

    I don’t have time to learn a new editor. Nor do I want to. Change is not always good. I have lost days of work. Thanks!

    If it was better, then Microsoft Word would operate like Gutenberg. Really doesn’t matter. It needs to operate in a way we all know. Not some fancy theoretical method. Productivity is key, and if we cannot make it work, we have lost productivity. We dont need a better mousetrap, simply one that works. I guess I have to find another site platform.

    I and I guess many others find it counter intuitive. There was once a button to use the Classic editor but now I cannot find it. I don’t want to keep adding plugins to my sight. They are fraught with bugs.

  39. Cheryll

    I have been so confused and it already feels time consuming trying to learn this new way if doing things. As someone who is not tech savvy but really enjoys diy, this has set me back. Your article has definitely been helpful though so a huge thank you!

  40. Virginia

    I find this Gutenberg time-consuming and not worth the effort, yet I feel I must make it work.
    However, I am not seeing those marks at the left of the blocks, and can’t figure out how to move them.
    Also, when I insert a pull quote it messes up the spacing of the other blocks and I can’t figure out how to fix that either.

    • WPBeginner Support

      For the quote, you may want to check with your theme’s support about the styling. For the icons on the left, they should appear when you hover your mouse near the block’s left side as long as you have more than one block. You may want to expand your browser window to see if that allows you to see them.

      管理者

      • Virginia

        Thank you. I figured out what the issue is. I have to enable Jet Pack for the icons to show. The weird thing is, I have to enable it for each post individually. I still hate this “improvement”.

  41. Kevin

    Thanks for the helpful post. I haven’t tried WP Blocks yet, but it looks like it could be useful. I’ve been using Elementor for the past eight months and Blocks seems similar.

    Can I make templates w/ blocks so that I can use the same layout on many pages/posts?

    Thanks again.

  42. Mike How

    Hi,

    I upgraded to Wordpress 5 and my updates page tells me I have the latest version. I have no gutenburg block editor, however. I see that the classic editor is activated on my list of plug ins. I’d like to try the block editor, but don’t know if it’s installed as I didn’t reactivate the classic editor after the update. What should I do? Just deactivate the classic editor? or use the prompt to re install Wordpress 5? or something else? Goes without saying that I’ll back up first. Please advise

  43. Sheriena

    I am trying to learn the new Gutenberg by practicing writing a post. My problem is after so many paragraphs the yoast plugin block is in front of the paragraphs so I can’t see what I am typing.

    • WPBeginner Support

      You may want to reach out to the support for the Yoast plugin to let them know about that for them to take a look into it.

      管理者

    • Hank Baust

      I have started edit with blocks and after a certain number I also can’t add any more. Is there a max page length for using blocks? The Yoast Plugin is at the bottom of the page but I don’t know it that is stopping additional blocks.

      • WPBeginner Support

        By default, there is not a max height. If you are being prevented from adding blocks by a plugin, if you reach out to that plugin’s support they should be able to assist in avoiding that issue.

        管理者

  44. Janet Donaldson

    Block editing is not working at all on my site. It refuses to update and will not save any of my changes. I’m a little confused, how is this so much better? And there’s this huge tutorial on how to use it? That’s not making my life easier.

  45. Tim Bolen

    This Gutenberg is a real disappointment. I have 31 writers at who, with Wordpress prior, could create superb health care articles, simply, right on the page – letting the content creative juices flow. Now, we have ANGRY writers, stumbling around in some batch of idiot boxes, losing focus – sending me whole articles via e-mail attachment for ME to figure out.

    I ran out of swear words in the first 24 hours.

    These people remind me of the Coca-Cola “New Coke” debacle.

    Want to help? Start with what Gutenberg can ADD to a page or post, then go back and show how to do it using blocks. I am up for new things – but show me WHY I would want to do that, first.

  46. Adnan

    i like your site

    • WPBeginner Support

      Glad you like our site :)

      管理者

  47. Chris

    Hi
    How well tested for responsiveness across various devices is Gutenberg ?
    Chris

  48. Ryan

    Really good article. I’m not a fan of this so far.

    A couple reasons are:

    1. I don’t see how to change the font face.

    2. I can’t re-size table cell widths by dragging.

    3. I don’t really need blocks.

  49. Mathukutty P. V.

    Today I tried to add a giphy gif but error showed could not embed. I tried some blocks and created 3/4 posts. Multi column blocks is a new information. Thanks.

  50. Rama Rao

    Good article.

  51. Archer

    So many things to upgrade on wordpress (ex. Search fuction), but nooooo, lets change something that works and make it harder, more time consuming and confusing. Hey investors, we now have a hipster editor, look how great we are.
    Gutenberg should be something optional and not mandatory.

    • Editorial Staff

      Hi Archer,

      You can always install the Classic Editor plugin to keep the old editor :)

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。