Introduction to the Text Blocks

The WordPress Block Library

When you are searching through the Block Inserter to see which options are available, the library separates the list of blocks into types to make it easier to find what you need. For example, there is a section containing the media blocks where you can insert images, galleries, and your own videos. If you have installed a plugin to expand the editor’s capabilities, its custom blocks might also have their own section.

In this tutorial, we are going to focus our attention on the five most important text blocks to increase your awareness of their features and develop your confidence using the settings panel and block toolbar to modify their styles.

We want you to be as comfortable using the WordPress editor to write content as you are with other word processing software like Microsoft Word and Google Docs. That is why we are concentrating only on the main text blocks.

Our guide to creating a post in WordPress looked at the different ways of inserting blocks, so it is worth reading if you are not sure about the process. However, we are using the slash command because the shortcut is a really efficient method to add content, especially when your post contains lots of text, such as a media studies essay.

We will begin with an overview of the essential text blocks (paragraph, heading, list, pullquote, and table) with brief explanations why each one can help communicate your message effectively to your target audience. We will then look at the block toolbar options and what common modifications are available in the settings panel.

You can add a new post by clicking in the toolbar at the top of the admin screen. If you don’t have a local installation of WordPress on your computer or a site hosted on a server, you can always experience the editor by following this link: https://wordpress.org/gutenberg/.

Assuming you are already familiar with the main areas of the Gutenberg interface, let’s get writing.

Paragraph Block

The paragraph block is the default block type and is probably the one you will use the most across your website. Paragraphing your work helps your readers follow the flow of information because taking a new line is a clear signal the topic of the sentences has changed.

When you add a new post, the editor opens with space for the post title and a paragraph block:

Type your title where it says “Add title” and press the enter (or return) key to access the first paragraph block.

Now you can write your content in the same way you use other word processing software. Keep typing lots of random information and press the enter key when you need to take a new paragraph. WordPress automatically creates the paragraph blocks, so you don’t have to worry about any coding.

The Heading Block

Subheadings are a presentational device used to separate the different topics or aspects of your post. They can help you organise your thoughts and improve the clarity of your information. A good heading will describe the content and let your readers know what comes next.

To insert a heading block, hit enter and start typing “/heading”. Don’t forget the forward slash because it lets the WordPress editor know you want to change the block type. This is the slash command function.

You should see a list of blocks appear while you are typing. Go ahead and click “Heading” from the menu or press enter if the relevant block is highlighted. Now just write your attention grabbing heading.

It is important to note the post title is automatically given the <h1> tag, so you should use <h2> for any subsequent headings. Don’t worry if you are not familiar with HTML because WordPress takes care of writing the code.

The List Block

The list block is for adding bullet points and numbered lists. There are several reasons you might want to organise your writing into a list:

• They are an effective way to convey information to your audience because they can break complex content down into more manageable chunks.
• They are more efficient so readers are able to get through the information quicker compared working their way through a bloated sentence.
• They can be visually appealing.

Again, press the enter button to insert a new paragraph block and then start typing “/list” to change the block. Write an item in the first bullet point and then press enter to add more. When you want to insert the next block, just hit the enter key twice. Try it and see the process in action.

Pullquotes

Pull quotes are a design feature commonly used in magazines and news websites to hook the reader’s attention. You simply take a short phrase from story and give it a more dominant position on the page.

Use the slash command to insert a pullquote block – press enter and type “/pullquote”. You then add the quotation and citation. Of course, most WordPress themes will change the shape and style of the pullquote to match their own designs, so your pullquote block might look a little different to the example above.

Tables

Tables are used to organise and present information which is too detailed or complicated to be described effectively in paragraphs. The rows and columns enable readers to appreciate the data with a quick glance and make some sense of the results. If you want to arrange your own data into a table, press enter to insert a new block, type “/table” and select the option by clicking the link or press enter if the option is highlighted.

You can then choose the number of columns and rows for your table:

Click the “Create Table” button and start inserting information into the cells. The WordPress editor is a user-friendly word processing tool which takes care of displaying your text online – even tables.

The next part of this tutorial focuses on styling the blocks with the block toolbar and the settings panel.

The Block Toolbar

Each block type comes with its own specific toolbar so you can modify the block in the editor. This is a screenshot the paragraph block toolbar:

The first icon identifies this is a paragraph block. However, you can click this “transformer” button to convert the paragraph block into another block type and keep your existing content.

Most word processing tools position the toolbar at the top of the screen. By contrast, WordPress floats the toolbar beside the block you are editing for quick and easy access. If you would rather dock the toolbar to the top of the editor, click the vertical ellipsis icon to open “Options” and tick the first value “Top Toolbar”.

Layout

The next two options in the toolbar are for arranging and rearranging your blocks. You can drag and drop the block to another part of your post using the “Drag” icon or move the block up and down by clicking one of the arrows in the move function . If you have been inserting blocks and adding content, practice changing their order and become more comfortable with this essential feature.

Formatting

You can adjust the alignment of the text by clicking the next icon . There are also options to change the text weight to bold and use italics for emphasis. Most word processors have the same features so you should already be familiar with selecting and modifying text.

The chain link icon is used to add a hyperlink to the text so you can direct users to other parts of your website or somewhere else on the internet.

The down arrow opens a menu with more rich text controls. For example, you can highlight individual pieces of information or use the strikethrough mark to show some of the text should be removed. The _subscript and ^superscript options might be useful for formulae and equations.

Block Options

The final icon reveals more options to customise your block further, such as the ability to duplicate the block or lock it into position. You can also use the “Remove…” link to delete the block.

The Settings Panel

There are some common styles available in the settings panel. You can change the colour and typography of the block. It is important to note changes made here will be applied to the whole block and, if your post contains three paragraphs, for example, each paragraph will have its own block which can be styled and modified without impacting the other paragraphs.

Task

Try to replicate the awful and unreadable style applied to this paragraph block by changing the values available in the colour and typography :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lectus quis mauris pulvinar aliquet nec in massa. Vestibulum auctor maximus odio id imperdiet. In non nisl scelerisque, tincidunt orci ut, maximus velit. Ut convallis fermentum nunc pretium varius. Sed nunc magna, sodales non lectus id, posuere finibus nibh. In pharetra ex risus, ac aliquet mauris elementum ut. Integer urna purus, laoreet quis augue vulputate.

Final Thoughts

We hope you can now approach the editing canvas with the same confidence you would if you were writing a document in the word processor of your choice. Keep practicing. Also, the block toolbar and settings for each block type will include other specific options to style and modify your writing. Change the values. Make your work messy. Enjoy the experience.