Paragraph Block – Overview & How to Use Guide

This is a simple text-only block for adding a single paragraph of content.

Paragraph Block Description

Paragraph Block is the most important one in the Gutenberg Editor. It will be used more than any other block. So let&;s see what this block can do and how to use it.

Video Walkthrough of Paragraph Block


How to add Paragraph Block?

Well, this is the only Block already added to a new page/post. But obviously there a couple more ways you can a Paragraph Block in Gutenberg Editor.

  1. Click on the (+) icon and search for "Paragraph" and click it.
  2. Simply hit "Enter" key at the end of a paragraph and you will get a new paragraph block automatically added.

Paragraph Block Toolbar Controls

Paragraph Block Toolbar
Paragraph Block Toolbar

Paragraph Block Toolbar is divided into three parts. Let&x27;s understand what all these controls can do. This toolbar appears on top of the block while you are editing it.

Transform Option

Transform Paragraph Block
Transform Paragraph Block

Transform control allow you to change/transform your block with another compatible block by just a click. You may be wondering when you will use this. Let&x27;s assume you wrote a paragraph and realized this should be a Quote, all you need to is just click on the transform option and select Quote. Your text will be converted to a quote.

Paragraph Block can be transformed into the following blocks.

  • Headline
  • List
  • Preformatted
  • Quote
  • Subhead
  • Verse

Alignment Options

Paragraph Block Alignment Options
Paragraph Block Alignment Options

These options allow you to simply align your paragraph text to left, center or right. Nothing complicated here you must be already familiar with these options in classic .

Formatting Options

Paragraph Block Text Formatting Options
Paragraph Block Text Formatting Options
Text Formatting Options

These are the basic text formatting options there. You can bold, italic or strikethrough your text. You may also link your text using the link option. You must be familiar with these options as well from the classic editor before.


Paragraph Block Inspector/Sidebar Controls

Paragraph Block Inspector Controls
Paragraph Block Inspector Controls

Paragraph Block sidebar controls are divided into four panels.

Text Settings: You will see two controls in this panel. A drop Cap toggle to set the first letter of the text as a drop cap. The second control is "Font Size" to adjust the font-size of your text.

Paragraph Block Text Settings
Paragraph Block Text Settings

Background Color: In this panel, you get a color palette. You can choose a color to set as the paragraph background.

Paragraph Block Background Color Options
Paragraph Block Background Color Options

Text Color: Similar to Background color panel, you will see the color palette here as well. Select a Color here for your text.

Paragraph Block Text Color Options
Paragraph Block Text Color Options

Block Alignment: You get alignment controls here to align the block to left, center or right. This is different from the Alignment controls you get in the Block toolbar, which aligns the text and this one aligns the block itself.

Additional CSS Class: Here you can add a custom CSS class to this block. This option is available for almost all blocks in Gutenberg.

Gutenberg Editor is right now in the development phase. This block may receive more updates and changes in future. This guide will be updated when any updates related to this block comes out.


Also published on Medium.