[HelpHub] Social Icons block

[femkreations]

Article: https://wordpress.org/documentation/article/social-icons/

Updating for 6.2

• Add rel attribute for Social Icons 45469
• Add anchor support for dynamic blocks 44771

Updating for 6.1

• Enable alpha on color pickers 43453
• Social links: add background color block supports 43293
• Social Link: Automatically prepend emails with mailto protocol 42186
• Social Links: Set the default protocol to 'https' if not specified 42167
• Added WhatsApp icon to the Social Icon Block 42137

Updating for 6.0

• Block Styles: Show style preview when hovered or focused. 34522

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

Notes

1. We are not adding detailed updates for the Block settings - Typography, Color, Layout, Dimension and Border and for the More Options setting in the block toolbar. Pls mention the settings included for the block and link to the detailed settings pages instead.
2. Pls make 6.2 updates first and then move to 6.1.
3. Some of the PRs have great videos that can be added to the article
4. For 6.1, you can pick the screenshots added in the comments previously, if they are relevant.

[maitreyie-chavan]

@femkreations Please assign this to me

[femkreations]

@maitreyie-chavan I have added a new task for 6.2. PLs let me know if you have any questions.

[sagargurnani99]

Please assign this to me as discuss in the triage.

[sagargurnani99]

@zzap As per my understanding, it is an enhancement and needs documentation. But, what I don't understand it that, do I need to share only the description of the above issue? If not, then please guide me. If yes, then how can I specify its location. I mean where on the article page should it be inserted?

[zzap]

Hello @sagargurnani99, you can add proposed changes (the actual content) in this issue, as a comment. Someone will review it and update the page in documentation. Thank you.

[sagargurnani99]

Updating for 6.2

- Add rel attribute for Social Icons 45469

Introducing a new customizable "rel" attribute for the Social Icons block, which addresses the need for users to claim ownership of their WordPress sites on social networks like IndieWeb and Mastodon.

To achieve this, these social networks require users to set a link back to their URL with the rel="me" attribute. With the addition of this new option in the Social Icons block, users can conveniently claim their WordPress sites by customizing this new attribute which empowers users to take control of their online presence. Thus, leveraging the intuitive interface of the Gutenberg editor, users can easily configure the "rel" attribute for each social icon displayed on their WordPress sites.

By enabling users to customize the "rel" attribute for social icons, this feature empowers them to effectively control and manage their online identities.

How to use it?

1. Within the Gutenberg editor, add a Social Links block to a page or template.
2. Select the Social Links block and locate the "rel" attribute option in the block inspector.
3. Enter a custom value for the "rel" attribute, such as "me" or "nofollow".
4. Save your changes.
5. Inspect the element on the rendered page and confirm that it has the correct rel attribute on the <a> element.

- Add anchor support for dynamic blocks 44771

In the recent update to WordPress Gutenberg blocks the support for the new "anchor" function is added. Anchors allow you to create direct links to specific blocks on a page. This update adds a new feature to the blocks, providing a field where you can define a unique identifier (ID) for each block. Additionally, a convenient button is added to copy the direct link associated with the block.

With this enhancement, you can easily create links that direct users to a particular block within a page. By assigning an ID to a block, you can generate a URL that directly navigates to that specific block's content. This is especially useful for longer pages or sections with multiple blocks, enabling users to access specific information more efficiently.

How to use it?

1. Enter a unique ID for a block.
2. Look for the button with the link.
3. Copy this link to create the direct link associated with the block.

Overall, this update enhances the functionality of Gutenberg blocks by enabling the use of anchors. It provides an intuitive way to link directly to specific blocks, improving navigation and user experience on WordPress-powered websites.

[zzap]

Screenshot for rel attribute

[zzap]

Add anchor support for dynamic blocks WordPress/gutenberg#44771 is developers only change. HTML anchors were already enabled for all blocks.

[zzap]

Screenshot and video for alpha on color pickers

alpha-color.webm

[zzap]

Video for block styles preview

styles-preview.webm

[zzap]

Screenshots that need updating

More options

Block settings

Block styles settings

[zzap]

This article is completely up to date with all WordPress versions. Thank you to everyone contributing ❤️