github-actions[bot]
commented
12 months ago Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.
Open femkreations opened 12 months ago
github-actions[bot]
commented
12 months ago Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.
github-actions[bot]
commented
12 months ago Heads up @femkreations - the "block editor" label was applied to this issue.
cgarofalo
commented
11 months ago @femkreations Please assign me to this issue. Thanks.
abhansnuk
commented
11 months ago Thank you for volunteering @cgarofalo
abhansnuk
commented
11 months ago Hello @cgarofalo just checking in for how you are getting on with this update. Thanks so much.
cgarofalo
commented
11 months ago @abhansnuk I'm still working on it. I've got a massive markdown document, as well as taking new screenshots. There are also videos. I'm continuing to work on it today.
cgarofalo
commented
11 months ago @abhansnuk, here is the write-up in markdown:
The Social Icons block allows you to add icons linking to your social media profiles or sites. This helps to increase the visibility of your social media profiles and drive traffic to them.
[social_icons_block.png] Alt Text: A screenshot of the social icons block filled with social icons.
You can also type /social-icons and hit enter in a new paragraph block to quickly insert a Social Icons block.
[add_social_icons_block.png] Alt Text: A dialogue box showing the Social Icons block selected.
[add_social_icons.png] Alt Text: Placeholder to add social media icons to the Social Icons block.
Detailed instructions on adding blocks
[search_social_icons.png] Alt Text: A dialogue box showing the list of social media platforms available.
[searchbox_social_icons.png] Alt Text: A dialogue box showing a text box to search for an available platform.
Select the icon from the menu to add it to the Social Icons block.
Click on the icon within the block to show the URL or email input field (Mail icon).
[social_icons_url_input.png] Alt Text: A dialogue box prompting a URL entry.
Add the URL for the social media profile in the input field and press Enter. If omitted, WordPress will automatically set the default protocol to https.
Repeat these steps for each social media profile you want to add.
Note: When adding a Mail icon, you only need to type the email address. WordPress will automatically create a link that will open a new email screen in an email client when clicked on.
Each block has its own block-specific controls that allow you to manipulate the block right in the editor.
The Social Icons block has two toolbars. One is the parent toolbar that appears when you select the Social Icons block. The other toolbar appears when you click on the individual social icons in the block.
The Social Icons block toolbar has five buttons:
[social_icons_toolbar.png] Alt Text: Social Icons block parent toolbar.
You can transform the Social Icons block into a Group or Columns. You can also transform the style of the Social Icons block. Three styles are available: Default, Logos only, and Pill Shape.
[social_icons_tranform_to.png] Alt Text: A dialogue showing the "transform to" options and styles.
[social_icon_toolbar_drag.png] Alt Text: The Social Icons block parent toolbar with the drag icon outlined in red.
To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag 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.
[social_icon_toolbar_move_handles.png] Alt Text: The Social Icons block parent toolbar with the move icon outlined in red.
The up and down arrow icons can be used to move a block up and down on the page.
Get more information about moving a block within the editor.
[social_icon_toolbar_justification.png] Alt Text: A dialogue box displaying the Social Icons Block justification options.
The change items justification tool lets you change the horizontal placement of the items inside the Social Icons block. There are four options to choose from:
[social_icon_toolbar_alignment.png] Alt Text: A dialogue box displaying the Social Icons Block alignment options.
The change alignment tool allows you to change the alignment of the social icons in the block. Here are the options available:
[social_icon_toolbar_size.png] Alt Text: A dialogue box displaying the Social Icons Block size options.
You can change the size of the icons by choosing one of the four preset icon sizes:
[social_icons_sizes.mp4]
These controls allow you to copy, duplicate, and edit your block as HTML.
Read about these and other settings.
The toolbar that appears when you press on the individual icons has four buttons:
[social_icon_toolbar_individual_icon.png] Alt Text: The block toolbar for the individual social icons within the Social Icons block.
[social_icon_toolbar_individual_icon_selected.png] Alt Text: Select social icons block.
This will take you to the parent Social Icons block toolbar. You will have the option to drag, move, and change item justification and alignment.
Each social icon toolbar also has more options explained above.
[social_icon_toolbar_individual_icon_more_options] Alt Text: More options for individual icons toolbar.
Every block has specific options in the editor sidebar besides those found in the block toolbar. If you do not see the sidebar, click the ‘sidebar’ icon.
[social_icons_block_settings.png] Alt Text: Sidebar icon to display the block's options in the sidebar.
There are two different sets of Block settings for the Social Icons block.
When you select the Social Icons block, you will see the following settings in the sidebar.
[social_icons_sidebar_block_options.png] Alt Text: Settings sidebar tab for the Social Icons block.
With Layout settings, you can add justification to the social icons within the Social Icons block.
You can also change the orientation of the social icons to horizontal or stack them vertically, one below the other, if you have multiple social icons within the Social Icons block.
Allow to wrap to multiple lines toggle button lets you display the social icons in multiple lines when needed.
Open links in a new tab: Using the toggle switch, you control whether or not the linked profile will open in a new browser tab.
Show labels: Using this toggle switch, you can show or hide the labels for the social icons.
[social_icon_with_label.png] Alt Text: Blue WordPress social icon with label Caption: Sample social icon with label
[social_icons_advanced_tab_with_css_class.png] Alt Text: Advanced settings with the default Styles CSS classes added by WordPress based on the Styles chosen.
The HTML Anchor is a helpful 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's 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.
Based on which style you choose for the Social Icons block in the Styles settings, WordPress automatically adds a CSS class to the Social Icons block in the Advanced settings panel under Additional CSS class(es).
[social_icons_sidebar_block_style_options.png] Alt Text: Styles settings sidebar tab for the Social Icons block
The Styles settings allow you to change the style of the icons in the block. You can choose among three styles: Default, Logos only, and Pill shape. Hover over the Styles buttons to get a preview of the styles.
[social_icons_styles.mp4]
Default icons have their respective brand colors. With the Color settings, you can change the background and foreground color for all icons in the block to match your website branding. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.
[social_icons_color_styles_sidebar.png] Alt Text: Social Icons Block Sidebar Styles tab displaying the color options.
Clicking on the selected color allows you to set the alpha filter, which creates a certain level of color transparency.
[social_icons_alpha_filter.png] Alt Text: Dialogue box showing the advanced color settings, including the alpha filter
[social_icons_alpha_filter.mp4]
Besides color settings for individual icons, it is possible to set the background color for the entire Social icons block.
[social_icons_background_color.mp4]
See this guide for more information about changing colors.
Dimension sliders control how groups of blocks are placed alongside one another by changing the values for padding, margin, and other dimensions. Click the settings icon to enter custom dimensions.
[social_icons_dimentions.png] Alt Text: A sidebar showing the block's dimension controls.
Learn more about dimension controls.
When you click on the individual social icons in the Social Icons block, you get a different set of Block settings in the sidebar.
In the Social Icon sidebar settings, you can add a Link label. The label helps screen reader users understand the context of the link.
A new customizable “rel” attribute for the Social Icons block addresses the need to claim ownership of your WordPress sites on social networks.
To achieve this, these social networks require users to set a link back to their URL with the rel="me" attribute. With this new setting, it is possible to configure the “rel” attribute for each social icon displayed on your WordPress site.
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.
Update 2023-11-15
abhansnuk
commented
11 months ago Thank you @cgarofalo for all your efforts on this, and replying to the general message on all tickets on the progress check. Winstina may also have some input on this task as trying to find her comments and join the two up - waiting to confirm if this is the one she has been working on too.
To other reviewers, please do not move this to done for now. I have messaged Winstina on Slack too so we can incorporate her work too.
abhansnuk
commented
11 months ago In the meantime, @cgarofalo do you have access to the HelpHub CMS itself?
cgarofalo
commented
10 months ago @abhansnuk I do not.
Article: https://wordpress.org/documentation/article/social-icons/
Updates for 6.4
Reference
General