Pinterest Embed

Go back to the list of Blocks

With the Pinterest embed block, you can embed pins, boards (a collection of pins), and Pinterest profiles into your posts and pages. You don’t need a Pinterest account to be able to use it, but only public pins, boards, and profiles can be embedded.

Examples of Pinterest embeds:

Left image: Example of an individual pin embed. Right image: Example of a Pinterest profile embed.

Steps to embed Pinterest pins, boards, and profiles

  1. First, find the pin, board, or profile on Pinterest that you want to embed, and copy its URL from the browser bar.
  1. Go to your post or page and add the Pinterest embed block. One way to do this is to press the “/” key to open the block inserter and type /pinterest.

Detailed instructions on adding blocks can be found in this guide.

  1. Paste the link into the text box and click the “Embed” button.

If the link can be successfully embedded into your post/page, you will see the preview in your block editor.

If you use a URL that can’t be embedded, the block displays the message: “Sorry, this content could not be embedded.” You will have two choices: try again with a different URL or convert it to a link.

  1. Click the “Preview” button in the top right corner of the post/page to see how it will look on the front-end.

Block Toolbar

Besides the “Mover” and “Drag & Drop Handle”, the Block Toolbar for the Pinterest embed block shows four buttons:

  • Transform to – also the icon for the block
  • Change alignment
  • Edit URL, and
  • More Options

Transform to

The first option will allow you to transform a Pinterest embed into a Paragraph. This will convert the pin, board, or Pinterest profile embedded to a link. You also can transform a Pinterest embed into Columns or into a Group.

Transforming it into a Group will give you the ability to change the following, among other options:

  • The background color around the Pinterest embed
  • The padding, margin, and block spacing dimensions
  • The border settings of the block (width, style, color, and radius)

Note: you can preview what each block (paragraph, column, or group) will look like by hovering the mouse over each option.

Left image: Editor view of a Pinterest embed as a group with color, dimension, and border settings. Right image: Front-end preview of a Pinterest embed with a grey background.

Change Alignment

  • None – Default alignment option
  • Wide width – Increase the width of the post beyond the content size
  • Full width – Extend the block to cover the full width of the screen
  • Align left – Make the block left-aligned
  • Align center – Make the block alignment centered
  • Align right – Make the block right-aligned

Edit URL

Via the edit URL, you can change the Pinterest embed URL in the embed block. Overwrite the existing URL and click on the “Embed” button on the right.

More Options

Hide more settings

The “Hide more settings” option hides (or shows) the block setting panel in the editor’s sidebar.

Copy

“Copy” can be used to copy the selected block and paste it wherever you want in the editor.

Duplicate

Duplicate the selected 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”, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected block to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

Using the “Edit as HTML” option lets you modify the HTML code of the embed block.

Add to Reusable blocks

This option allows you to add the selected block to a list of reusable blocks that you can use on other posts or pages as well.

Group

Select the “Group” option if you want to create a group of blocks and treat them as a unit. This allows you to add a common background color or other blocks to the group, as well as to change the padding and block spacing controls, among other options.

Remove Embed

With the “Remove Embed” option, you can delete the selected block from your content.

Top ↑

Block Settings

Advanced

In the Advanced tab, located in the block settings sidebar, you can add additional CSS class(es) to your block. This allows you to write custom CSS and style the block as you see fit.

Top ↑

Changelog

  • Created 2022-03-24

Was this article helpful? How could it be improved?