The standard WordPress social icon block. The following can be done in the block settings (this is not a perfect reproduction, so it should work correctly):
*Changes other than “Text changes” will be specified collectively in the parent block
- Change icon color
- Change button size
- Display text (service name)
- Change text
- Button placement (left, right, center, evenly spaced)
- Open link in new tab
However, you can only specify a single URL as the destination when clicked, so you cannot basically perform the action of displaying a posting form with an embedded title and destination URL like a typical share button; you can only simply transition to the page you want to display on that SNS (such as your profile).
However, you can still easily create link buttons to social media sites with icons, so if you’re OK with this specification, you can easily add something that looks like a share button, just like a normal block.
However, if there are a certain number of buttons in this block, they can be displayed reasonably well even if they are evenly spaced, but if there aren’t, the space between the blocks will be too wide and it will look a bit strange.
So I tried to make it look pretty good.
- Divide the number of buttons by the content width to make the button width equal to the number of buttons.
- Use standard rounded square buttons instead of circles or ovals
- Center the icon and text
- The expansion during hover is too large, so make it more subdued.
When you actually display it, it looks like this (links to social media sites where you do not have accounts are set up on the homepage of this site).
However, simply adding style code can be problematic if you want to display it in a different way, so we will add a block style and use the style selection button to display it in this way.
Adding block styles
Add the following code to the functions.php of your active theme.
function pwcn_register_block_design_styles_sosial_link(){
register_block_style('core/social-links', array(
'name' => 'pwcn-slink-square',
'label' => __( 'Rectangle',''),
));
}
add_action('init','pwcn_register_block_design_styles_sosial_link');After adding, if you insert the social icon block on the post editing screen and then open the Style tab, a button called “Rectangle” will be added, as shown below.
Selecting this button will have no effect until you apply the style code in the next section.
Adding style code
In the code below, change the “handle name” part to the handle name in the style.css of the enabled theme, then add it to functions.php.
function pwcn_social_links_block_style_init(){
//Putting style code together
$custom_css = "
.is-style-pwcn-slink-square li.wp-social-link.wp-block-social-link {
flex: 1;
border-radius: 4px;
text-align: center;
}
.is-style-pwcn-slink-square li.wp-social-link.wp-block-social-link a {
justify-content: center;
}
.is-style-pwcn-slink-square .wp-block-social-link:hover:hover {
transform: scale(1.02);
}
";
wp_add_inline_style( 'handle name', $custom_css );
wp_add_inline_style( 'wp-edit-blocks', $custom_css );
}
add_action( 'init', 'pwcn_social_links_block_style_init',9999);
add_action( 'wp_enqueue_scripts', 'pwcn_social_links_block_style_init');After adding the code, save and reload the post edit screen to which you added the social icon block, and you should see that it now looks like the demo (you may need to clear your cache depending on your environment).
This block has a slightly complex structure, with a flex box inside a flex box, and the styles for centering the icon and text seem to be different on the front end and in the editor, so there are a few extra lines of code, but if you can output it with just this code there shouldn’t be any major issues.
As an aside, the above code is output to the front end as an inline style in style.css and is also applied to the block side, so you can make the appearance almost the same, so it’s useful to remember the code format.
