Social icons

Go back to the list of Blocks

The Social Icons block is a simple block that allows you to add various social media icons to your post or page with links to your profiles. By doing that, you increase the visibility of your social media profiles and drive traffic to them.

A screenshot of the social icons block filled with social icons

Steps to add the block:

  1. Create a new line in your post. 
  2. Type in “/social” in the editor
a screenshot showing the second step

3. Select the block from the fly-out menu. 
The block, with a placeholder, will appear. The placeholder will be there until you add icons to the block.

A screenshot of the block placeholder

Note: This method of adding the block and the icons will be available in the WordPress 5.6 release.

Detailed instructions on adding blocks can be found here.

How to add social icons and the links to your profiles 

  1. Select the Social icons block to reveal its options. 
  1. Click on the plus button to reveal the available social media platforms.  
    A menu with some social media platforms will appear. 
A screenshot of the menu with the social media platforms.

3. If you do not see the platform you need in the menu, type the name of the platform in the search box.

A screenshot of the third step - looking for the platform in the search box.

4. Select the icon from the menu to add it to the block. 

5. Click on the icon within the block to reveal the address input field.

A screenshot of the social icon with the address input field.

6. Add the relevant URL in the input field and press Enter. 

You will need to repeat these steps for each of the social media profiles you want to add. 

Block Toolbar Block Toolbar

This block has two toolbars. One is the parent toolbar that appears when you select the whole block. The other toolbar appears when you click on the individual icons.

The buttons available in the parent toolbar 

The Social icons parent toolbar has five buttons: 

A screenshot of the block placeholder with the toolbar buttons

Transformer:

You can transform the Social Icons block into a Group or Columns. Clicking the Transformer button also allows you to change the style of the Social icons. There are three styles available: Default, Logos only, and Pill Shape.

A screenshot of the transform options available in the toolbar.

Drag block button:

With the drag button, you can drag the block and place it anywhere in the post.

Move up and move down button: 

You can move the block up or down within the post or page by clicking the move up and down buttons. 

The Change Alignment button 

The change alignment button allows you to: 

  • Align left – Make the block left-aligned.
  • Align center – Make the block alignment centered.
  • Align right – Make the block align right.
  • Wide width – Increase the width of the block beyond the content size.
  • Full width – extend the block to cover the full width of the screen.

Note: “Wide width” and “Full width” alignment need to be enabled by your site’s Theme. 

More Options:

Hide Block Settings

The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

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

Duplicate

Duplicate can be used to duplicate 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 content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them 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. You can for instance add a common background color or other blocks to the group.

Remove Block

With the Remove Block option, you can delete the selected block from your content.

The separate toolbar for the individual icons

The toolbar that appears when you press on the individual icons has four buttons:   

Select parent: 

Clicking on this button will return the parent toolbar. 

Drag block button:

With the drag button, you can drag the block and place it anywhere in the post.

Move left and right: 

These buttons allow you to move the social icon left or right within the block. 

More Options:

Hide Block Settings

The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy the icon to the clipboard.

Duplicate

Duplicate can be used to duplicate the social icon.

Move To

If you select Move To, you will get a blue line above the icon. You can then use the up and down arrows on your keyboard to move the line to the spot where you want to place the icon. To place the icon in the selected spot, press Enter.

Remove Block

With the Remove Block option, you can delete the selected icon from the block.

Top ↑

Block Settings Block Settings

There are two different sets of settings that appear depending on  where in the block you click. The settings for the whole block appear when you select the block. The settings for the individual icons appear when you click on an individual icon.

A screenshot of the sidebar for all icons.

The block settings for the Parent block (All icons) 

When you select the Social Icons block, you will see the following settings in the sidebar. 

Styles

Allows you to change the style of the icons in the block. You can choose among three styles: Default, Logos only, and Pill shape. If you prefer one of the styles, and you would like to see it appear every time to add the block to your content, you can set it as a default style. Click on the Default style dropdown menu, and select the default style you prefer.

Link settings

Opens links in a new tab. Using the toggle switch you control whether the linked profile will open in a new browser tab or not. 

Advanced

The HTML Anchor is a useful tool for creating page jumps. If you toggle the block to its HTML view, you’ll see that the HTML Anchor input is added as a CSS ID to the heading tag. You can also see the CSS class in the block HTML.

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

The block settings for individual icons The block settings for individual icons

These settings appear in the sidebar, when you click on the individual social icons. 

A screenshot of the sidebar settings for individual icons.

Link label 

In the Social Icon sidebar settings, you can add a Link label. The label helps screen reader users understand the context of the link. 

Advanced 

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

Changelog

  • Created 2020-11-13

Was this article helpful? How could it be improved?