[HelpHub] Previous Post

[femkreations]

What is the new page you are requesting?

New article required for the Previous Post block

New page

• Create a new article for the Previous Post block
• Make sure the URL slug under Permalink is: previous-post-block
• At the top of the page, under the title, add the  ‘Link back to blocks’ reusable block.
• Convert all reusable blocks to a ‘regular block’.

Update for 6.2

• Add arrows to post navigation link 40684

Update for 6.1

• Post Navigation Link: add design controls 41378

General

• Make sure all screenshots are relevant to the latest version
• Make sure videos, if any, are up to date
• Add ALT tags for the images
• Make sure the headings are in sentence case
• Convert all reusable blocks to a ‘regular block’.
• Update the changelog at the end of the article

[blogsmithteam]

@femkreations I'll take this one if available :)

[femkreations]

@blogsmithteam Assigned to you. Let me know if you still want to work on this one as well.

[femkreations]

Notes

1. We are not adding detailed updates for the Block settings as we are revamping the block settings for all the block articles
2. Some of the PRs for 6.1 have great videos that can be added to the article (even for the Block settings section)

[carolinan]

I am not up to date with all the discussions, so I am sorry if this has already been answered.
Is it set in stone that the previous post and the next post should be presented as separate blocks?
Because they are block variations. The actual block is called post navigation link.

[pls78]

I'm picking this up 🙂

[zzap]

A quick guideline https://github.com/WordPress/Documentation-Issue-Tracker/blob/main/guides/new-article-block-editor.md

[zzap]

@carolinan

I am not up to date with all the discussions, so I am sorry if this has already been answered. Is it set in stone that the previous post and the next post should be presented as separate blocks? Because they are block variations. The actual block is called post navigation link.

End users don't really know what block variation is, nor should they. The only criteria for end-user docs is "can they see and use it in their dashboard". These blocks can be selected separately from the inserter, so we have to document it. We can and will explain the purpose of these blocks (and how they are used by themes), but we still need to document and explain everything that is user-facing in WordPress.

[pls78]

Previous Post Block

Use the Previous Post block to display a Previous link which automatically points to the previous post or page to the one currently being viewed.

Click the (+) icon to open the block inserter pop-up window and search for the Previous post blocks.

You can also use the keyboard shortcut /previous-post to quickly add the Previous post block.

Detailed instructions on adding blocks can be found here.

Block toolbar

To view the block toolbar, click on the block, and the toolbar will be displayed.

Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor.

The Previous post block shows seven buttons in the block toolbar:

• Transform to
• Drag
• Move up/down
• Change text alignment
• Bold
• Italic
• Options

Transform to

The transform button on the Previous post block toolbar

Click on the Transform button to convert the Previous post block into a Columns or Group block.

Drag icon

The drag icon on the Previous post block toolbar

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag it to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move arrows

The move arrows on the Previous post block toolbar

The up and down arrow icons can be used to move the block up and down on the page.

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

Change text alignment

Change alignment tool on the Previous post block toolbar

Use the change text alignment tool to change the text alignment for the Post Navigation Link blocks. The following is a list of the block width options:

• Align text left
• Align text center
• Align text right

Bold

You can select the text in the Previous post block and use the Bold option or Ctrl+b or Cmd+b on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

You can select any text inside the Previous post block and use the Italic option orCtrl+i or Cmd+b on your keyboard to italicize it, which usually appears slanted to the right.

Options

Options on a block toolbar gives you more features to customize the block.

• Copy block adds the Previous post block to the clipboard. Then, you can paste it anywhere you want in the block editor.
• Duplicate creates a copy of the selected block that appears after the current block.
• Insert Before inserts a new block before the selected block(s).
• Insert After inserts a new block after the selected block(s).
• Move to lets you use a blue line on the editor to indicate 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.
• Copy styles copies all the block style options to clipboard.
• Past styles after you have copied the style options to clipboard you can go to another block and click Paste styles to apply the copied styles.
• Lock allows you to prevent the block from being removed, moved, or both.
  In case you're trying to lock a group block, you will see an option to also apply the same lock settings to all blocks nested inside.
• Group allows you to create a group of blocks and treat them as a unit.
• Remove Post Navigation Link deletes the selected block from the content.

Block Settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon below the block description, in the sidebar.

Click Display the title as a link to use the previous post/page title as link text. If you activate this toggle, another toggle Include the label as part of the link appears, allowing you to include in the link the custom label (if you have specified one).

Under the Arrow section you can select between three options:

• None no arrow is displayed beside the link.
• Arrow displays a left-headed arrow (←) to the left of the link.
• Chevron displays a chevron («) to the left of the link.

Advanced

The Advanced section lets you add CSS class(es) to your block. This will allow you to write custom CSS and styles for the block.

Additional CSS settings for the Previous post block

Block Styles

Colors

The Previous post block provides color settings options to change the text, link, and background colors.
Specifically:

• text color applies to the arrow (if any)
• link color applies to the link to the previous post
• background color applies to the whole block

For details, refer to this support article: Color settings overview

Typography

The Previous post block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.

For details, refer to this support article: Typography settings overview

[pls78]

@zzap The above is ready for review 🙂

[dottxado]

@zzap I will wait for your review on this issue to update the issue #238 I'm working on 😄

[Leonardus-Nugraha]

Content reviewed and published. Thanks @pls78!
https://wordpress.org/documentation/article/previous-post-block/