Read More Block

Go to the List of Blocks

The Read More block allows you to add links in the query loop block that direct visitors to the posts. With this block, you get more flexibility to customize the Read More links and make them look appealing

To add a Read More block, click the (+) icon to open the block inserter pop-up window and search for the Read More block. Click on it to add the block to your page template.

You can also type /read-more and hit enter in a new paragraph block to add the Read More block quickly. 

Detailed instructions on adding blocks can be found here.

Block toolbar

Each block has its own toolbar which contains unique controls that let you customize or configure the block.

Block toolbar in Read More block

The Read More block has the following options on its toolbar:

Transform to:

Transform  in Read More block

If you click the Transform button, you’ll see the options to convert the Read More block into Columns and Group blocks.

Block moving tools

Moving tools  in Read More block

There are two block-moving tools for the Read More block. The six dots icon lets you drag and drop the Read More block and reposition it anywhere on the editor, while the up and down arrows let you move the Read More block up or down on the editor.

Detailed instructions on moving a block within the editor can be found here

Text editing options:

Text editing option  in Read More block

Bold and Italics

Bold and italics formatting have their own formatting buttons on the toolbar for your convenience. Alternatively, use keyboard shortcuts when formatting. The shortcuts are as follows:

  • CTRL+b (Windows) or Command+b (macOS) for bold
  • CTRL+i (Windows) or Command+i (macOS) for italics

More Text Formatting Options

More text formatting options  in Read More block

If you click the down arrow icon, the toolbar will open a drop-down menu that contains more text formatting options.

  • Highlight lets you pick a custom text and background colors to make the text more noticeable.
Color options  in Read More block
  • Inline code formats the text into a code snippet and prevents the code from being executed.
  • Inline image allows you to add an image to the text. You can set the desired pixel width for the image.
Adding Inline image  in Read More block
  • Keyboard input adds the <kbd> tag to the text, making it render using the monospace font on the browser.
  • Strikethrough adds a line that runs through the selected text.
  • Subscript and superscript allow you to change the text to a subscript or superscript format.

More options

More options  in Read More block

Show/Hide more settings

The show or hide more settings option opens or closes the block settings panel on the editor’s sidebar.

Copy

Copy the selected block into the clipboard to paste it anywhere you want in the block editor.

Duplicate

Create a copy of the selected block that shows immediately after the current block.

Insert before

Insert a new block before the selected block(s).

Insert after

Insert a new block after the selected block(s).

Move to

If you select move to, a blue line will appear on the editor, indicating the new position for the selected block. Use your keyboard’s up and down arrows to move the blue line. When the line is in the desired position, press Enter to move the selected block to that position.

Lock

If you select the lock, a pop-up window will appear to set the block locking attribute to the selected block. You can opt to disable movement, prevent removal, or both for the selected block.

For more details about Lock, refer More Options.

Make template part

Allows you to make a new template part from the selected block. A pop-up window will appear to name the template part and select the template area.

Add to Reusable blocks

Make the selected block a reusable block. A pop-up window will appear to set the name for the block.

Group

Turn the selected block(s) into a group of blocks so you can configure them as a unit.

Remove Read More

Delete the selected block from the content.

Top ↑

Block settings

Block sidebar  in Read More block

Every block has specific options in the block settings panel. To open it, select the block and click the cog icon next to the Publish button.

Link settings

Link settings  in Read More block

If you enable the Open in new tab option, the link will load the post in a new tab.

Color

Color settings  in Read More block

The Read More block provides options to customize the text and background color. A small pop-up will appear when you click on the text or background option. Choose from the default color or click the upper rectangle area to pick a custom color using the color picker.

Color options in Read More block

Typography

Typography  in Read More block

The Typography settings let you change the font size using the four preset options or the custom size option. If you opt to use the custom size, you can select the custom font size units with the choice of PX, EM, or REM.

Other available typography options include Decoration – underline and strikethrough formatting.

You can add more typography options by opening the View options and checking the settings you want to use. These are the available options:

  • Font family
  • Appearance
  • Line height
  • Letter case
  • Letter spacing
More typography options  in Read More block

If you enable the options, you’ll see more settings in the typography section.

More typography  in Read More block

Dimensions

The Dimensions settings allow you to customize the padding and margin for the block. Padding is the space between the block outline and the block content, while margin is the gap to other blocks.

Dimensions in Read More block

Select one of six available units to specify the padding and the margin:

  • PX
  • %
  • EM
  • REM
  • VW
  • VH

There’s also an option to unlink sides for padding and margin, allowing to set a different value for each side.

Dimensions  in Read More block

Border

The Border settings allow you to create a border for the selected block. You can define the border width value using one of the six available unit options, similar to padding and margin.

Border settings  in Read More block

Click the three dots icon to open the View option and add color and radius settings. The radius settings let you use a slider or define the value for the border ends radius. You can also unlink the radii to define a different radius for each border corner.

Border radius  in Read More block

Advanced

The Advanced section lets you add CSS classes to use a custom style for the selected Read More block.

Advanced CSS  in Read More block

Changelog:

  • Created 2022-07-18

Was this article helpful? How could it be improved?