Commit 3cb39842c9 for woocommerce
commit 3cb39842c98090f501dcf0e4e0ddbfc944df799f
Author: Oluwaseun Olorunsola <30554163+triple0t@users.noreply.github.com>
Date: Thu May 29 14:26:40 2025 +0100
Enable support for Social Link block in the Email Editor (#58194)
* Enhance social links block functionality in email editor
* Introduce a new social links block with preset variations for popular platforms.
* Unregister unsupported social link variations and disable the icon color picker for the social links block.
* Update the block initialization to include the new enhancements.
This update improves the usability and customization of social links within the email editor.
* Enable social links block in the email editor
* Add social link and social links block renderers to the email editor
* Introduce new classes for rendering individual social link and multiple social links blocks.
* Update the block initialization to include these new renderers, enhancing the email editor's functionality for social sharing options.
* Add social media icons for email editor
* Introduce new icon files for Facebook, GitHub, Instagram, LinkedIn, Twitter, WordPress, and X in various styles (black, brand, white).
* Enhance the visual options available for social links in the email editor, improving customization for users.
* Refactor social links rendering and add utility functions
* Introduce Social_Links_Helper class to provide utility functions for detecting whiteish colors.
* Update Social_Links class to use instance methods instead of static methods for better object-oriented practices.
* Set default icon color to white and adjust background color based on icon color detection, enhancing visual consistency in the email editor.
* Enhance social links rendering with pill shape style support
* Add support for 'is-style-pill-shape' class to adjust anchor styles, including padding and border-radius.
* Update image dimensions for better visual consistency in the social links block.
* Refactor CSS styles for table data elements to ensure proper alignment and padding.
* Enhance social links block functionality in email editor
* Add BlockControls to manage additional settings for social links.
* Update type definitions for better type safety in the social links block.
* Refactor CSS styles for improved customization and visual consistency.
* Ensure proper handling of icon color and background color based on user-defined settings.
* Fix the styles for social links element wrapper. Background color, padding, border, etc now works
* Implement service brand color support in social links rendering
* Add a new method in Social_Links_Helper to retrieve brand colors for various services.
* Update Social_Links class to utilize the service brand color for icon background and text color, enhancing visual consistency based on service branding.
* Fix broken social icon images and ensure they render well on email clients
* Enhance social links functionality by adding support for additional platforms and improving URL handling
* Reintroduce previously commented-out social media platforms in the email editor's social links block.
* Implement URL validation to prepend `mailto:` for email addresses and `https://` for URLs lacking a scheme.
* Add new icon files for Behance, Bluesky, Chain, Discord, and others to improve visual representation in the email editor.
* Add support for size handling in the social links block
* Remove unnecessary BlockControls for size management in the email editor's social links block.
* Introduce new methods in Social_Links_Helper to define and retrieve social link sizes, enhancing customization options.
* Update rendering logic to dynamically adjust icon sizes based on user-defined settings, ensuring better visual consistency.
* Add changelog files
* Fix social links style issues
We switched to em unit due to the well supported nature in email clients https://www.caniemail.com/features/css-unit-em/
* Update CSS for social links block to improve icon color settings and visual consistency.
* Adjust font size calculation for icons and modify padding for better layout.
* Enhance HTML structure for service labels to ensure proper alignment and spacing.
* Update social links to reflect rebranding and remove unused size options
* Change Twitter service name to 'x' and update the URL accordingly.
* Remove the deprecated method for retrieving social link size options from the Social_Links_Helper class, streamlining the codebase.
* Optimize and reduce social icon image sizes
* Fix social icons display on Outlook email clients
* Add default alignment and style for social links block
* Set default alignment to 'center' and apply 'is-style-logos-only' class for improved visual consistency across email clients.
* Fix PHPStan errors
* Add integration and unit tests for Social_Links and Social_Links_Helper classes
* Fix styling issues and ensure support for WYSIWYG experience.
* Refactor Social_Links class to use native str_starts_with function and remove polyfill from Social_Links_Helper. Update PHPStan configuration to ignore errors related to str_starts_with for PHP 7.4 compatibility.
* Enhance WYSIWYG experience by overriding background color for social links block in the editor. This change ensures better visibility for icons without a default background color.
* Remove !important from padding-left in social links block CSS for improved styling consistency in WYSIWYG editor.
diff --git a/packages/js/email-editor/changelog/wooplug-4294-implement-core-social-link-block b/packages/js/email-editor/changelog/wooplug-4294-implement-core-social-link-block
new file mode 100644
index 0000000000..aacf77bd34
--- /dev/null
+++ b/packages/js/email-editor/changelog/wooplug-4294-implement-core-social-link-block
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Enable Social Link block in the Email Editor.
diff --git a/packages/js/email-editor/src/blocks/core/social-links.tsx b/packages/js/email-editor/src/blocks/core/social-links.tsx
new file mode 100644
index 0000000000..3ff0747fa5
--- /dev/null
+++ b/packages/js/email-editor/src/blocks/core/social-links.tsx
@@ -0,0 +1,158 @@
+/**
+ * External dependencies
+ */
+import { InspectorControls } from '@wordpress/block-editor';
+import { addFilter } from '@wordpress/hooks';
+import { registerBlockVariation } from '@wordpress/blocks';
+import type { Block, InnerBlockTemplate } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+// Add support for top social networks
+const supportedVariations = [
+ 'behance',
+ 'bluesky',
+ 'chain', // Link
+ 'discord',
+ 'facebook',
+ 'feed',
+ 'github',
+ 'gravatar',
+ 'instagram',
+ 'linkedin',
+ 'mail',
+ 'mastodon',
+ 'medium',
+ 'patreon',
+ 'pinterest',
+ 'reddit',
+ 'spotify',
+ 'telegram',
+ 'threads',
+ 'tiktok',
+ 'tumblr',
+ 'twitch',
+ 'twitter',
+ 'vimeo',
+ 'wordpress',
+ 'whatsapp',
+ 'x',
+ 'youtube',
+];
+
+function unregisterBlockVariations() {
+ // Remove unsupported social links
+ addFilter(
+ 'blocks.registerBlockType',
+ 'woocommerce-email-editor/disable-social-link-variations',
+ ( settings, name ) => {
+ if ( name === 'core/social-link' ) {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+ return {
+ ...settings,
+ variations: settings.variations.filter( ( variation ) =>
+ supportedVariations.includes( variation.name )
+ ),
+ supports: {
+ ...settings.supports,
+ layout: false,
+ },
+ };
+ }
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+ return settings;
+ }
+ );
+}
+
+function registerCustomSocialLinksBlockVariation() {
+ // Register a custom variation for the social links block
+ // This variation is used to display the social links in the email editor by automatically adding some preset social links
+ const socialLinksVariations: InnerBlockTemplate[] = [
+ {
+ // @ts-expect-error Type not complete.
+ name: 'core/social-link',
+ attributes: {
+ service: 'wordpress',
+ url: 'https://wordpress.org',
+ },
+ },
+ {
+ // @ts-expect-error Type not complete.
+ name: 'core/social-link',
+ attributes: {
+ service: 'facebook',
+ url: 'https://www.facebook.com/WordPress/',
+ },
+ },
+ {
+ // @ts-expect-error Type not complete.
+ name: 'core/social-link',
+ attributes: {
+ service: 'x',
+ url: 'https://x.com/WordPress',
+ },
+ },
+ ];
+
+ registerBlockVariation( 'core/social-links', {
+ name: 'social-links-default',
+ title: 'Social Icons',
+ attributes: {
+ openInNewTab: true,
+ showLabels: false,
+ align: 'center',
+ className: 'is-style-logos-only', // use logo-only style as the default because it's the most common use case and it looks nice on all email clients.
+ },
+ isDefault: true, // set this as the default variation
+ innerBlocks: socialLinksVariations,
+ } );
+}
+
+const disableIconColor =
+ ( BlockEdit: React.ElementType ) => ( props: Block< unknown > ) => {
+ if ( props.name !== 'core/social-links' ) {
+ return <BlockEdit { ...props } />;
+ }
+ // we are doing this because we don't want to show the icon color picker in the social links block (we can't change png image color)
+ // and there isn't a great way to remove the icon color from the core block attributes
+ // eslint-disable-next-line @wordpress/i18n-text-domain -- using core label.
+ const labelText = __( 'Icon color' );
+ const customCss = `
+ .block-editor-tools-panel-color-gradient-settings__item:has([title="${ labelText }"]) {
+ display: none !important;
+ }
+ .block-editor-tools-panel-color-gradient-settings__item:nth-child(2 of .block-editor-tools-panel-color-gradient-settings__item){
+ border-top:1px solid #ddd;
+ border-top-left-radius:2px;
+ border-top-right-radius:2px;
+ }
+ `;
+
+ return (
+ <>
+ <BlockEdit { ...props } />
+ <InspectorControls group="color">
+ <style>{ customCss }</style>
+ </InspectorControls>
+ </>
+ );
+ };
+
+function removeSocialLinksIconColor(): void {
+ addFilter(
+ 'editor.BlockEdit',
+ 'woocommerce-email-editor/disable-social-links-icon-color',
+ disableIconColor
+ );
+}
+
+/**
+ * Enhances the social links and social link blocks
+ */
+function enhanceSocialLinksBlock() {
+ unregisterBlockVariations();
+ registerCustomSocialLinksBlockVariation();
+ removeSocialLinksIconColor();
+}
+
+export { enhanceSocialLinksBlock };
diff --git a/packages/js/email-editor/src/blocks/index.ts b/packages/js/email-editor/src/blocks/index.ts
index 0b0c7ea30d..e1cecb6c82 100644
--- a/packages/js/email-editor/src/blocks/index.ts
+++ b/packages/js/email-editor/src/blocks/index.ts
@@ -25,6 +25,7 @@ import { enhanceButtonsBlock } from './core/buttons';
import { alterSupportConfiguration } from './core/general-block-support';
import { enhanceQuoteBlock } from './core/quote';
import { filterSetUrlAttribute } from './core/block-edit';
+import { enhanceSocialLinksBlock } from './core/social-links';
export function initBlocks() {
filterSetUrlAttribute();
@@ -43,5 +44,6 @@ export function initBlocks() {
extendRichTextFormats();
activatePersonalizationTagsReplacing();
alterSupportConfiguration();
+ enhanceSocialLinksBlock();
registerCoreBlocks();
}
diff --git a/packages/php/email-editor/changelog/wooplug-4294-implement-core-social-link-block b/packages/php/email-editor/changelog/wooplug-4294-implement-core-social-link-block
new file mode 100644
index 0000000000..69cf1889a4
--- /dev/null
+++ b/packages/php/email-editor/changelog/wooplug-4294-implement-core-social-link-block
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add support for rendering Social Link and Social Links block in the Email Editor.
diff --git a/packages/php/email-editor/src/Engine/class-settings-controller.php b/packages/php/email-editor/src/Engine/class-settings-controller.php
index f61988a9a6..94dfe2b176 100644
--- a/packages/php/email-editor/src/Engine/class-settings-controller.php
+++ b/packages/php/email-editor/src/Engine/class-settings-controller.php
@@ -26,6 +26,8 @@ class Settings_Controller {
'core/paragraph',
'core/quote',
'core/spacer',
+ 'core/social-link',
+ 'core/social-links',
);
const DEFAULT_SETTINGS = array(
diff --git a/packages/php/email-editor/src/Engine/content-editor.css b/packages/php/email-editor/src/Engine/content-editor.css
index 3668d54cc5..537ebce275 100644
--- a/packages/php/email-editor/src/Engine/content-editor.css
+++ b/packages/php/email-editor/src/Engine/content-editor.css
@@ -151,4 +151,31 @@ ol.has-background {
filter: none;
padding: 0 2px;
}
-}
\ No newline at end of file
+}
+
+/**
+ * Override the default gap for social links block in the editor.
+ * This is needed because we do not want to have a gap between the social links and also for a WYSIWYG experience.
+*/
+.wp-block-social-links.is-layout-flex {
+ gap: 16px !important;
+}
+
+/**
+ * Override the default padding for social links block in the editor.
+ * This is needed because we do not want to have a padding for the social links block particularly for a WYSIWYG experience.
+*/
+.wp-block-social-links.has-background {
+ padding-left: 0;
+}
+
+/**
+ * Override the default background color for social links block in the editor.
+ * This is mostly for a WYSIWYG experience. These icons don't have a default background color.
+*/
+:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-mail,
+:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-feed,
+:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-chain {
+ background-color:#000;
+ color:#fff;
+ }
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-social-link.php b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-social-link.php
new file mode 100644
index 0000000000..17c41d468b
--- /dev/null
+++ b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-social-link.php
@@ -0,0 +1,30 @@
+<?php
+/**
+ * This file is part of the WooCommerce Email Editor package
+ *
+ * @package Automattic\WooCommerce\EmailEditor
+ */
+
+declare( strict_types = 1 );
+namespace Automattic\WooCommerce\EmailEditor\Integrations\Core\Renderer\Blocks;
+
+use Automattic\WooCommerce\EmailEditor\Engine\Settings_Controller;
+
+/**
+ * Renders a social link block.
+ */
+class Social_Link extends Abstract_Block_Renderer {
+
+ /**
+ * Renders the block content.
+ *
+ * @param string $block_content Block content.
+ * @param array $parsed_block Parsed block.
+ * @param Settings_Controller $settings_controller Settings controller.
+ * @return string
+ */
+ protected function render_content( $block_content, array $parsed_block, Settings_Controller $settings_controller ): string {
+ // We are not using this because the blocks are rendered in the Social_Links block class.
+ return $block_content;
+ }
+}
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-social-links.php b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-social-links.php
new file mode 100644
index 0000000000..7da411bfcb
--- /dev/null
+++ b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-social-links.php
@@ -0,0 +1,406 @@
+<?php
+/**
+ * This file is part of the WooCommerce Email Editor package
+ *
+ * @package Automattic\WooCommerce\EmailEditor
+ */
+
+declare( strict_types = 1 );
+namespace Automattic\WooCommerce\EmailEditor\Integrations\Core\Renderer\Blocks;
+
+use Automattic\WooCommerce\EmailEditor\Engine\Settings_Controller;
+use Automattic\WooCommerce\EmailEditor\Integrations\Utils\Social_Links_Helper;
+/**
+ * Renders the social links block.
+ */
+class Social_Links extends Abstract_Block_Renderer {
+
+ /**
+ * Cache of the core social link services.
+ *
+ * @var array<string, array>
+ */
+ private $core_social_link_services_cache = array();
+
+ /**
+ * Supported image types.
+ *
+ * @var array<string>
+ */
+ private $supported_image_types = array( 'white', 'brand' );
+
+ /**
+ * Renders the block content.
+ *
+ * @param string $block_content Block content.
+ * @param array $parsed_block Parsed block.
+ * @param Settings_Controller $settings_controller Settings controller.
+ * @return string
+ */
+ protected function render_content( $block_content, array $parsed_block, Settings_Controller $settings_controller ): string {
+ $attrs = $parsed_block['attrs'] ?? array();
+
+ $inner_blocks = $parsed_block['innerBlocks'] ?? array();
+
+ $content = '';
+ foreach ( $inner_blocks as $block ) {
+ $content .= $this->generate_social_link_content( $block, $attrs );
+ }
+
+ return str_replace(
+ '{social_links_content}',
+ $content,
+ $this->get_block_wrapper( $block_content, $parsed_block )
+ );
+ }
+
+ /**
+ * Generates the social link content.
+ *
+ * @param array $block The block data.
+ * @param array $parent_block_attrs The parent block attributes.
+ * @return string The generated content.
+ */
+ private function generate_social_link_content( $block, $parent_block_attrs ) {
+ $service_name = $block['attrs']['service'] ?? '';
+ $service_url = $block['attrs']['url'] ?? '';
+ $label = $block['attrs']['label'] ?? '';
+
+ if ( empty( $service_name ) || empty( $service_url ) ) {
+ return '';
+ }
+
+ /**
+ * Prepend emails with `mailto:` if not set.
+ * The `is_email` returns false for emails with schema.
+ */
+ if ( is_email( $service_url ) ) {
+ $service_url = 'mailto:' . antispambot( $service_url );
+ }
+
+ /**
+ * Prepend URL with https:// if it doesn't appear to contain a scheme
+ * and it's not a relative link or a fragment.
+ */
+ if ( ! wp_parse_url( $service_url, PHP_URL_SCHEME ) && ! str_starts_with( $service_url, '//' ) && ! str_starts_with( $service_url, '#' ) ) {
+ $service_url = 'https://' . $service_url;
+ }
+
+ $open_in_new_tab = $parent_block_attrs['openInNewTab'] ?? false;
+ $show_labels = $parent_block_attrs['showLabels'] ?? false;
+ $size = $parent_block_attrs['size'] ?? Social_Links_Helper::get_default_social_link_size();
+
+ $service_brand_color = Social_Links_Helper::get_service_brand_color( $service_name );
+
+ $icon_color_value = $parent_block_attrs['iconColorValue'] ?? '#ffffff'; // use white as default icon color.
+ $icon_background_color_value = $parent_block_attrs['iconBackgroundColorValue'] ?? '';
+
+ $is_logos_only = strpos( $parent_block_attrs['className'] ?? '', 'is-style-logos-only' ) !== false;
+ $is_pill_shape = strpos( $parent_block_attrs['className'] ?? '', 'is-style-pill-shape' ) !== false;
+
+ if ( ! $is_logos_only && Social_Links_Helper::detect_whiteish_color( $icon_color_value ) && ( Social_Links_Helper::detect_whiteish_color( $icon_background_color_value ) || empty( $icon_background_color_value ) ) ) {
+ // If the icon color is white and the background color is white or empty, use the service brand color for the icon background color.
+ $icon_background_color_value = ! empty( $service_brand_color ) ? $service_brand_color : '#000';
+ }
+
+ if ( $is_logos_only ) {
+ // logos only mode does not need background color. We also don't really need the icon color (we can't change png image color anyways).
+ // We set it so that the label text color will reflect the service brand color.
+ $icon_color_value = ! empty( $service_brand_color ) ? $service_brand_color : '#000';
+ }
+
+ $icon_size = Social_Links_Helper::get_social_link_size_option_value( $size );
+
+ $service_icon_url = $this->get_service_icon_url( $service_name, $is_logos_only ? 'brand' : 'white' );
+
+ $service_label = '';
+ if ( $show_labels ) {
+ $text = ! empty( $label ) ? trim( $label ) : '';
+ $service_label = $text ? $text : block_core_social_link_get_name( $service_name );
+ }
+
+ $main_table_styles = $this->compile_css(
+ array(
+ 'background-color' => $icon_background_color_value,
+ 'border-radius' => '9999px',
+ 'display' => 'inline-table',
+ 'float' => 'none',
+ )
+ );
+
+ // divide the icon value by 2 to get the font size.
+ $font_size_value = (int) rtrim( $icon_size, 'px' );
+ $font_size = ( $font_size_value / 2 ) + 1; // inline with core styles.
+ $text_font_size = "{$font_size}px";
+ $anchor_styles = $this->compile_css(
+ array(
+ 'color' => $icon_color_value,
+ 'text-decoration' => 'none',
+ 'text-transform' => 'none',
+ 'font-size' => $text_font_size,
+ )
+ );
+
+ $anchor_html = sprintf( ' style="%s" ', esc_attr( $anchor_styles ) );
+ if ( $open_in_new_tab ) {
+ $anchor_html .= ' rel="noopener nofollow" target="_blank" ';
+ }
+
+ $row_container_styles = array(
+ 'display' => 'block',
+ 'padding' => '0.25em',
+ );
+
+ if ( $is_pill_shape ) {
+ $row_container_styles['padding-left'] = '17px';
+ $row_container_styles['padding-right'] = '17px';
+ }
+ $row_container_styles = $this->compile_css( $row_container_styles );
+
+ // rendering inspired by mjml social. https://documentation.mjml.io/#mj-social.
+ return sprintf(
+ '
+ <!--[if mso | IE]><td><![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="%1$s">
+ <tbody><tr style="%7$s">
+ <td style="vertical-align:middle;font-size:%9$s">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="">
+ <tbody><tr>
+ <td style="vertical-align:middle;">
+ <a href="%2$s" %5$s class="wp-block-social-link-anchor">
+ <img height="%8$s" src="%3$s" style="display:block;" width="%8$s" alt="%4$s">
+ </a>
+ </td>
+ </tr>
+ </tbody></table>
+ </td>
+ ' . ( $service_label ? '
+ <td style="vertical-align:middle;padding-left:6px;padding-right:6px;font-size:%9$s">
+ <a href="%2$s" %5$s class="wp-block-social-link-anchor">
+ <span style="margin-left:.5em;margin-right:.5em"> %6$s </span>
+ </a>
+ </td>
+ ' : '' ) . '
+ </tr>
+ </tbody></table>
+ <!--[if mso | IE]></td><![endif]-->
+ ',
+ esc_attr( $main_table_styles ), // %1$s -> The main table styles.
+ esc_url( $service_url ), // %2$s -> The a href link.
+ esc_url( $service_icon_url ), // %3$s -> The Img src.
+ // translators: %s is the social service name.
+ sprintf( __( '%s icon', 'woocommerce' ), $service_name ), // %4$s -> The Img alt.
+ $anchor_html, // %5$s -> The a styles plus rel and target attributes.
+ esc_html( $service_label ), // %6$s -> The a text (label).
+ esc_attr( $row_container_styles ), // %7$s -> The tr row container styles.
+ esc_attr( $icon_size ), // %8$s -> The icon size.
+ esc_attr( $text_font_size ) // %9$s -> The text font size.
+ );
+ }
+
+ /**
+ * Gets the block wrapper.
+ *
+ * @param string $block_content The block content.
+ * @param array $parsed_block The parsed block.
+ * @return string The block wrapper HTML.
+ */
+ private function get_block_wrapper( $block_content, $parsed_block ) {
+
+ $content = $this->adjust_block_content( $block_content, $parsed_block );
+
+ $table_styles = $content['table_styles'];
+ $classes = $content['classes'];
+ $compiled_styles = $content['compiled_styles'];
+ $align = $content['align'];
+
+ return sprintf(
+ '<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
+ <table class="wp-block-social-links" style="%1$s vertical-align:top;" border="0" width="100%%" cellpadding="0" cellspacing="0" role="presentation">
+ <tr role="presentation">
+ <td class="%2$s" style="%3$s" align="%4$s" role="presentation">
+ <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><![endif]-->
+ %5$s
+ <!--[if mso | IE]></tr></table><![endif]-->
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]></td></tr></table><![endif]-->',
+ esc_attr( $table_styles ),
+ esc_attr( $classes ),
+ esc_attr( $compiled_styles ),
+ esc_attr( $align ),
+ '{social_links_content}'
+ );
+ }
+
+ /**
+ * Adjusts the block content.
+ * Returns css classes and styles compatible with email clients.
+ *
+ * @param string $block_content The block content.
+ * @param array $parsed_block The parsed block.
+ * @return array The adjusted block content.
+ */
+ private function adjust_block_content( $block_content, $parsed_block ) {
+ $block_content = $this->adjust_style_attribute( $block_content );
+ $block_attributes = wp_parse_args(
+ $parsed_block['attrs'] ?? array(),
+ array(
+ 'textAlign' => 'left',
+ 'style' => array(),
+ )
+ );
+ $html = new \WP_HTML_Tag_Processor( $block_content );
+ $classes = 'wp-block-social-links';
+ if ( $html->next_tag() ) {
+ /** @var string $block_classes */ // phpcs:ignore Generic.Commenting.DocComment.MissingShort -- used for phpstan
+ $block_classes = $html->get_attribute( 'class' ) ?? '';
+ $classes .= ' ' . $block_classes;
+ // remove has-background to prevent double padding applied for wrapper and inner element.
+ $block_classes = str_replace( 'has-background', '', $block_classes );
+ // remove border related classes because we handle border on wrapping table cell.
+ $block_classes = preg_replace( '/[a-z-]+-border-[a-z-]+/', '', $block_classes );
+ /** @var string $block_classes */ // phpcs:ignore Generic.Commenting.DocComment.MissingShort -- used for phpstan
+ $html->set_attribute( 'class', trim( $block_classes ) );
+ $block_content = $html->get_updated_html();
+ }
+
+ $block_styles = $this->get_styles_from_block(
+ array(
+ 'color' => $block_attributes['style']['color'] ?? array(),
+ 'spacing' => $block_attributes['style']['spacing'] ?? array(),
+ 'typography' => $block_attributes['style']['typography'] ?? array(),
+ 'border' => $block_attributes['style']['border'] ?? array(),
+ )
+ );
+
+ $styles = array(
+ 'min-width' => '100%', // prevent Gmail App from shrinking the table on mobile devices.
+ 'vertical-align' => 'middle',
+ 'word-break' => 'break-word',
+ );
+
+ $styles['text-align'] = 'left';
+ if ( ! empty( $parsed_block['attrs']['textAlign'] ) ) { // in this case, textAlign needs to be one of 'left', 'center', 'right'.
+ $styles['text-align'] = $parsed_block['attrs']['textAlign'];
+ } elseif ( in_array( $parsed_block['attrs']['align'] ?? null, array( 'left', 'center', 'right' ), true ) ) {
+ $styles['text-align'] = $parsed_block['attrs']['align'];
+ }
+
+ $compiled_styles = $this->compile_css( $block_styles['declarations'], $styles );
+ $table_styles = 'border-collapse: separate;'; // Needed because of border radius.
+
+ return array(
+ 'table_styles' => $table_styles,
+ 'classes' => $classes,
+ 'compiled_styles' => $compiled_styles,
+ 'align' => $styles['text-align'],
+ 'block_content' => $block_content,
+ );
+ }
+
+ /**
+ * 1) We need to remove padding because we render padding on wrapping table cell
+ * 2) We also need to replace font-size to avoid clamp() because clamp() is not supported in many email clients.
+ * The font size values is automatically converted to clamp() when WP site theme is configured to use fluid layouts.
+ * Currently (WP 6.5), there is no way to disable this behavior.
+ *
+ * @param string $block_content Block content.
+ */
+ private function adjust_style_attribute( string $block_content ): string {
+ $html = new \WP_HTML_Tag_Processor( $block_content );
+
+ if ( $html->next_tag() ) {
+ $element_style_value = $html->get_attribute( 'style' );
+ $element_style = isset( $element_style_value ) ? strval( $element_style_value ) : '';
+ // Padding may contain value like 10px or variable like var(--spacing-10).
+ $element_style = preg_replace( '/padding[^:]*:.?[0-9a-z-()]+;?/', '', $element_style );
+
+ // Remove border styles. We apply border styles on the wrapping table cell.
+ $element_style = preg_replace( '/border[^:]*:.?[0-9a-z-()#]+;?/', '', strval( $element_style ) );
+
+ // We define the font-size on the wrapper element, but we need to keep font-size definition here
+ // to prevent CSS Inliner from adding a default value and overriding the value set by user, which is on the wrapper element.
+ // The value provided by WP uses clamp() function which is not supported in many email clients.
+ $element_style = preg_replace( '/font-size:[^;]+;?/', 'font-size: inherit;', strval( $element_style ) );
+ /** @var string $element_style */ // phpcs:ignore Generic.Commenting.DocComment.MissingShort -- used for phpstan
+ $html->set_attribute( 'style', esc_attr( $element_style ) );
+ $block_content = $html->get_updated_html();
+ }
+
+ return $block_content;
+ }
+
+ /**
+ * Gets the service icon URL.
+ *
+ * Default image type is 'white'.
+ *
+ * @param string $service The service name.
+ * @param string $image_type The image type. e.g 'white', 'brand'.
+ * @return string The service icon URL.
+ */
+ public function get_service_icon_url( $service, $image_type = '' ) {
+ $image_type = empty( $image_type ) ? 'white' : $image_type;
+ $service = empty( $service ) ? '' : strtolower( $service );
+
+ if ( empty( $this->core_social_link_services_cache ) ) {
+ $services = block_core_social_link_services();
+ $this->core_social_link_services_cache = is_array( $services ) ? $services : array();
+ }
+
+ if ( ! isset( $this->core_social_link_services_cache[ $service ] ) ) {
+ // not in the list of core services.
+ return '';
+ }
+
+ if ( ! in_array( $image_type, $this->supported_image_types, true ) ) {
+ return '';
+ }
+
+ // Get URL to icons/service.png.
+ $service_icon_url = $this->get_service_png_url( $service, $image_type );
+
+ if ( $service_icon_url && ! file_exists( $this->get_service_png_path( $service, $image_type ) ) ) {
+ // The image file does not exist.
+ return '';
+ }
+
+ return $service_icon_url;
+ }
+
+ /**
+ * Gets the service PNG URL.
+ *
+ * @param string $service The service name.
+ * @param string $image_type The image type. e.g 'white', 'brand'.
+ * @return string The service PNG URL.
+ */
+ public function get_service_png_url( $service, $image_type = 'white' ) {
+ if ( empty( $service ) ) {
+ return '';
+ }
+
+ $image_type = empty( $image_type ) ? 'white' : $image_type;
+ $file_name = "/icons/{$service}/{$service}-{$image_type}.png";
+ return plugins_url( $file_name, __FILE__ );
+ }
+
+ /**
+ * Gets the service PNG path.
+ *
+ * @param string $service The service name.
+ * @param string $image_type The image type. e.g 'white', 'brand'.
+ * @return string The service PNG path.
+ */
+ public function get_service_png_path( $service, $image_type = 'white' ) {
+ if ( empty( $service ) ) {
+ return '';
+ }
+
+ $image_type = empty( $image_type ) ? 'white' : $image_type;
+ $file_name = "/icons/{$service}/{$service}-{$image_type}.png";
+ return __DIR__ . $file_name;
+ }
+}
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/behance/behance-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/behance/behance-brand.png
new file mode 100644
index 0000000000..6cd75803b9
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/behance/behance-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/behance/behance-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/behance/behance-white.png
new file mode 100644
index 0000000000..9e2344cc5a
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/behance/behance-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/bluesky/bluesky-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/bluesky/bluesky-brand.png
new file mode 100644
index 0000000000..e806ad988c
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/bluesky/bluesky-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/bluesky/bluesky-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/bluesky/bluesky-white.png
new file mode 100644
index 0000000000..d8627b8f1f
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/bluesky/bluesky-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/chain/chain-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/chain/chain-brand.png
new file mode 100644
index 0000000000..47f2e2152e
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/chain/chain-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/chain/chain-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/chain/chain-white.png
new file mode 100644
index 0000000000..64d77b08c0
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/chain/chain-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/discord/discord-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/discord/discord-brand.png
new file mode 100644
index 0000000000..50b90bd31c
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/discord/discord-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/discord/discord-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/discord/discord-white.png
new file mode 100644
index 0000000000..95fbae3ca5
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/discord/discord-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/facebook/facebook-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/facebook/facebook-brand.png
new file mode 100644
index 0000000000..ac74eaf61c
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/facebook/facebook-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/facebook/facebook-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/facebook/facebook-white.png
new file mode 100644
index 0000000000..c073971ad0
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/facebook/facebook-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/feed/feed-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/feed/feed-brand.png
new file mode 100644
index 0000000000..24457ae428
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/feed/feed-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/feed/feed-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/feed/feed-white.png
new file mode 100644
index 0000000000..bd9c775cd6
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/feed/feed-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/github/github-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/github/github-brand.png
new file mode 100644
index 0000000000..521e0473bc
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/github/github-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/github/github-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/github/github-white.png
new file mode 100644
index 0000000000..d85be10a81
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/github/github-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/gravatar/gravatar-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/gravatar/gravatar-brand.png
new file mode 100644
index 0000000000..17f6b67621
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/gravatar/gravatar-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/gravatar/gravatar-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/gravatar/gravatar-white.png
new file mode 100644
index 0000000000..f3351c51a8
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/gravatar/gravatar-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/instagram/instagram-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/instagram/instagram-brand.png
new file mode 100644
index 0000000000..8b981bc040
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/instagram/instagram-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/instagram/instagram-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/instagram/instagram-white.png
new file mode 100644
index 0000000000..6d7bcb64dc
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/instagram/instagram-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/linkedin/linkedin-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/linkedin/linkedin-brand.png
new file mode 100644
index 0000000000..1ea4c19cda
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/linkedin/linkedin-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/linkedin/linkedin-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/linkedin/linkedin-white.png
new file mode 100644
index 0000000000..2fadb908a3
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/linkedin/linkedin-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mail/mail-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mail/mail-brand.png
new file mode 100644
index 0000000000..8415b1f5c4
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mail/mail-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mail/mail-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mail/mail-white.png
new file mode 100644
index 0000000000..1049d373ff
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mail/mail-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mastodon/mastodon-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mastodon/mastodon-brand.png
new file mode 100644
index 0000000000..350bd1adcf
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mastodon/mastodon-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mastodon/mastodon-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mastodon/mastodon-white.png
new file mode 100644
index 0000000000..3a517a26c4
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/mastodon/mastodon-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/medium/medium-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/medium/medium-brand.png
new file mode 100644
index 0000000000..31d7fa71ea
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/medium/medium-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/medium/medium-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/medium/medium-white.png
new file mode 100644
index 0000000000..b481cad742
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/medium/medium-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/patreon/patreon-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/patreon/patreon-brand.png
new file mode 100644
index 0000000000..6d56c00d8e
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/patreon/patreon-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/patreon/patreon-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/patreon/patreon-white.png
new file mode 100644
index 0000000000..a7f9ccc515
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/patreon/patreon-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/pinterest/pinterest-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/pinterest/pinterest-brand.png
new file mode 100644
index 0000000000..91012f9feb
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/pinterest/pinterest-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/pinterest/pinterest-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/pinterest/pinterest-white.png
new file mode 100644
index 0000000000..698f68da6a
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/pinterest/pinterest-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/reddit/reddit-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/reddit/reddit-brand.png
new file mode 100644
index 0000000000..9ece960719
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/reddit/reddit-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/reddit/reddit-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/reddit/reddit-white.png
new file mode 100644
index 0000000000..08cb45a6eb
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/reddit/reddit-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/spotify/spotify-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/spotify/spotify-brand.png
new file mode 100644
index 0000000000..2231d29428
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/spotify/spotify-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/spotify/spotify-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/spotify/spotify-white.png
new file mode 100644
index 0000000000..2627ad14be
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/spotify/spotify-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/telegram/telegram-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/telegram/telegram-brand.png
new file mode 100644
index 0000000000..bbee389d0a
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/telegram/telegram-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/telegram/telegram-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/telegram/telegram-white.png
new file mode 100644
index 0000000000..d11197bc43
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/telegram/telegram-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/threads/threads-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/threads/threads-brand.png
new file mode 100644
index 0000000000..367651abb7
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/threads/threads-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/threads/threads-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/threads/threads-white.png
new file mode 100644
index 0000000000..ac31815277
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/threads/threads-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tiktok/tiktok-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tiktok/tiktok-brand.png
new file mode 100644
index 0000000000..649c944252
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tiktok/tiktok-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tiktok/tiktok-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tiktok/tiktok-white.png
new file mode 100644
index 0000000000..632c6554cb
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tiktok/tiktok-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tumblr/tumblr-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tumblr/tumblr-brand.png
new file mode 100644
index 0000000000..5f1f39b87a
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tumblr/tumblr-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tumblr/tumblr-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tumblr/tumblr-white.png
new file mode 100644
index 0000000000..ff827f25ef
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/tumblr/tumblr-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitch/twitch-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitch/twitch-brand.png
new file mode 100644
index 0000000000..6efe6d646e
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitch/twitch-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitch/twitch-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitch/twitch-white.png
new file mode 100644
index 0000000000..53523badc7
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitch/twitch-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitter/twitter-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitter/twitter-brand.png
new file mode 100644
index 0000000000..74a61e9017
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitter/twitter-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitter/twitter-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitter/twitter-white.png
new file mode 100644
index 0000000000..4d8281271c
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/twitter/twitter-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/vimeo/vimeo-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/vimeo/vimeo-brand.png
new file mode 100644
index 0000000000..9efd554882
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/vimeo/vimeo-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/vimeo/vimeo-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/vimeo/vimeo-white.png
new file mode 100644
index 0000000000..208f5a3b3c
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/vimeo/vimeo-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/whatsapp/whatsapp-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/whatsapp/whatsapp-brand.png
new file mode 100644
index 0000000000..77cd7cda81
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/whatsapp/whatsapp-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/whatsapp/whatsapp-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/whatsapp/whatsapp-white.png
new file mode 100644
index 0000000000..bb211d4101
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/whatsapp/whatsapp-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/wordpress/wordpress-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/wordpress/wordpress-brand.png
new file mode 100644
index 0000000000..6faaac1b94
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/wordpress/wordpress-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/wordpress/wordpress-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/wordpress/wordpress-white.png
new file mode 100644
index 0000000000..8dfd0d0bb9
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/wordpress/wordpress-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/x/x-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/x/x-brand.png
new file mode 100644
index 0000000000..d8cd71bee4
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/x/x-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/x/x-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/x/x-white.png
new file mode 100644
index 0000000000..46f5734c3a
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/x/x-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/youtube/youtube-brand.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/youtube/youtube-brand.png
new file mode 100644
index 0000000000..0f496f5faf
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/youtube/youtube-brand.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/youtube/youtube-white.png b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/youtube/youtube-white.png
new file mode 100644
index 0000000000..2fe7510cb2
Binary files /dev/null and b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/icons/youtube/youtube-white.png differ
diff --git a/packages/php/email-editor/src/Integrations/Core/class-initializer.php b/packages/php/email-editor/src/Integrations/Core/class-initializer.php
index 383c7eb23e..5d7d8c9bb5 100644
--- a/packages/php/email-editor/src/Integrations/Core/class-initializer.php
+++ b/packages/php/email-editor/src/Integrations/Core/class-initializer.php
@@ -41,6 +41,8 @@ class Initializer {
$blocks_registry->add_block_renderer( 'core/button', new Renderer\Blocks\Button() );
$blocks_registry->add_block_renderer( 'core/group', new Renderer\Blocks\Group() );
$blocks_registry->add_block_renderer( 'core/quote', new Renderer\Blocks\Quote() );
+ $blocks_registry->add_block_renderer( 'core/social-link', new Renderer\Blocks\Social_Link() );
+ $blocks_registry->add_block_renderer( 'core/social-links', new Renderer\Blocks\Social_Links() );
// Render used for all other blocks.
$blocks_registry->add_fallback_renderer( new Renderer\Blocks\Fallback() );
}
diff --git a/packages/php/email-editor/src/Integrations/Utils/class-social-links-helper.php b/packages/php/email-editor/src/Integrations/Utils/class-social-links-helper.php
new file mode 100644
index 0000000000..2c9120e6fc
--- /dev/null
+++ b/packages/php/email-editor/src/Integrations/Utils/class-social-links-helper.php
@@ -0,0 +1,135 @@
+<?php
+/**
+ * This file is part of the WooCommerce Email Editor package
+ *
+ * @package Automattic\WooCommerce\EmailEditor
+ */
+
+declare( strict_types = 1 );
+namespace Automattic\WooCommerce\EmailEditor\Integrations\Utils;
+
+/**
+ * This class should provide helper functions for the Social Links block.
+ */
+class Social_Links_Helper {
+ /**
+ * Detects if the input color is whiteish.
+ * This is a helper function to detect if the input color is white or white-ish colors when
+ * provided an input color in format #ffffff or #fff.
+ *
+ * @param string $input_color The input color.
+ * @return bool True if the color is whiteish, false otherwise.
+ */
+ public static function detect_whiteish_color( $input_color ) {
+
+ if ( empty( $input_color ) ) {
+ return false;
+ }
+
+ // Remove # if present.
+ $color = ltrim( $input_color, '#' );
+
+ // Convert 3-digit hex to 6-digit hex.
+ if ( strlen( $color ) === 3 ) {
+ $color = $color[0] . $color[0] . $color[1] . $color[1] . $color[2] . $color[2];
+ }
+
+ // Convert hex to RGB.
+ $r = hexdec( substr( $color, 0, 2 ) );
+ $g = hexdec( substr( $color, 2, 2 ) );
+ $b = hexdec( substr( $color, 4, 2 ) );
+
+ // Calculate brightness using perceived brightness formula.
+ // Using the formula: (0.299*R + 0.587*G + 0.114*B).
+ $brightness = ( 0.299 * $r + 0.587 * $g + 0.114 * $b );
+
+ // Consider colors with brightness above 240 as whiteish.
+ // This threshold can be adjusted based on requirements.
+ return $brightness > 240;
+ }
+
+ /**
+ * Gets the brand color for a given service.
+ *
+ * From core: https://github.com/WordPress/gutenberg/blob/edbd36057d3d25b7140af9e90a2adcca02a9201c/packages/block-library/src/social-link/socials-without-bg.scss
+ *
+ * @param string $service_name The name of the service.
+ * @return string The brand color for the service.
+ */
+ public static function get_service_brand_color( $service_name ) {
+ $service_brand_color = array(
+ 'amazon' => '#f90',
+ 'bandcamp' => '#1ea0c3',
+ 'behance' => '#0757fe',
+ 'bluesky' => '#0a7aff',
+ 'codepen' => '#1e1f26',
+ 'deviantart' => '#02e49b',
+ 'discord' => '#5865f2',
+ 'dribbble' => '#e94c89',
+ 'dropbox' => '#4280ff',
+ 'etsy' => '#f45800',
+ 'facebook' => '#0866ff',
+ 'fivehundredpx' => '#000',
+ 'flickr' => '#0461dd',
+ 'foursquare' => '#e65678',
+ 'github' => '#24292d',
+ 'goodreads' => '#382110',
+ 'google' => '#ea4434',
+ 'gravatar' => '#1d4fc4',
+ 'instagram' => '#f00075',
+ 'lastfm' => '#e21b24',
+ 'linkedin' => '#0d66c2',
+ 'mastodon' => '#3288d4',
+ 'medium' => '#000',
+ 'meetup' => '#f6405f',
+ 'patreon' => '#000',
+ 'pinterest' => '#e60122',
+ 'pocket' => '#ef4155',
+ 'reddit' => '#ff4500',
+ 'skype' => '#0478d7',
+ 'snapchat' => '#fff',
+ 'soundcloud' => '#ff5600',
+ 'spotify' => '#1bd760',
+ 'telegram' => '#2aabee',
+ 'threads' => '#000',
+ 'tiktok' => '#000',
+ 'tumblr' => '#011835',
+ 'twitch' => '#6440a4',
+ 'twitter' => '#1da1f2',
+ 'vimeo' => '#1eb7ea',
+ 'vk' => '#4680c2',
+ 'whatsapp' => '#25d366',
+ 'wordpress' => '#3499cd',
+ 'x' => '#000',
+ 'yelp' => '#d32422',
+ 'youtube' => '#f00',
+ );
+ return $service_brand_color[ $service_name ] ?? '';
+ }
+
+ /**
+ * Gets the default social link size.
+ *
+ * @return string The default social link size.
+ */
+ public static function get_default_social_link_size() {
+ return 'has-normal-icon-size';
+ }
+
+ /**
+ * Gets the size option value for a given size.
+ * Source: https://github.com/WordPress/gutenberg/blob/c7c09cfe16c78f9a949956e5d0088cd4c747bdca/packages/block-library/src/social-links/style.scss#L36-L56
+ *
+ * @param string $size The size.
+ * @return string The size option value.
+ */
+ public static function get_social_link_size_option_value( $size ) {
+ $options = array(
+ 'has-small-icon-size' => '16px',
+ 'has-normal-icon-size' => '24px',
+ 'has-large-icon-size' => '36px',
+ 'has-huge-icon-size' => '48px',
+ );
+ return $options[ $size ] ?? '24px'; // default to normal size.
+ }
+}
diff --git a/packages/php/email-editor/tasks/phpstan/phpstan-7.neon b/packages/php/email-editor/tasks/phpstan/phpstan-7.neon
index 67e5351b31..e64d8bd2d6 100644
--- a/packages/php/email-editor/tasks/phpstan/phpstan-7.neon
+++ b/packages/php/email-editor/tasks/phpstan/phpstan-7.neon
@@ -5,3 +5,8 @@ includes:
# Rewrite tested PHP version
parameters:
phpVersion: 70400
+
+ # Ignore specific errors
+ ignoreErrors:
+ - # str_starts_with is not available in PHP 7.4. but polyfilled in core.
+ message: '#^Function str_starts_with not found\.$#'
diff --git a/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Social_Links_Test.php b/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Social_Links_Test.php
new file mode 100644
index 0000000000..c0f8df2cd2
--- /dev/null
+++ b/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Social_Links_Test.php
@@ -0,0 +1,217 @@
+<?php
+/**
+ * This file is part of the WooCommerce Email Editor package
+ *
+ * @package Automattic\WooCommerce\EmailEditor
+ */
+
+declare(strict_types = 1);
+namespace Automattic\WooCommerce\EmailEditor\Integrations\Core\Renderer\Blocks;
+
+use Automattic\WooCommerce\EmailEditor\Engine\Email_Editor;
+use Automattic\WooCommerce\EmailEditor\Engine\Settings_Controller;
+
+/**
+ * Integration test for Social_Links class
+ */
+class Social_Links_Test extends \Email_Editor_Integration_Test_Case {
+ /**
+ * Social_Links renderer instance
+ *
+ * @var Social_Links
+ */
+ private $social_links_renderer;
+
+ /**
+ * Parsed social links block
+ *
+ * @var array
+ */
+ private $parsed_social_links = array(
+ 'blockName' => 'core/social-links',
+ 'attrs' => array(
+ 'openInNewTab' => true,
+ 'showLabels' => true,
+ 'size' => 'has-normal-icon-size',
+ 'className' => 'is-style-logos-only',
+ ),
+ 'innerBlocks' => array(
+ 0 => array(
+ 'blockName' => 'core/social-link',
+ 'attrs' => array(
+ 'service' => 'facebook',
+ 'url' => 'https://facebook.com',
+ 'label' => 'Facebook',
+ ),
+ 'innerBlocks' => array(),
+ 'innerHTML' => '',
+ 'innerContent' => array(),
+ ),
+ 1 => array(
+ 'blockName' => 'core/social-link',
+ 'attrs' => array(
+ 'service' => 'twitter',
+ 'url' => 'https://twitter.com',
+ 'label' => 'Twitter',
+ ),
+ 'innerBlocks' => array(),
+ 'innerHTML' => '',
+ 'innerContent' => array(),
+ ),
+ ),
+ 'innerHTML' => '<ul class="wp-block-social-links is-style-logos-only"></ul>',
+ 'innerContent' => array(
+ 0 => '<ul class="wp-block-social-links is-style-logos-only">',
+ 1 => null,
+ 2 => '</ul>',
+ ),
+ );
+
+ /**
+ * Settings controller instance
+ *
+ * @var Settings_Controller
+ */
+ private $settings_controller;
+
+ /**
+ * Set up before each test
+ */
+ public function setUp(): void {
+ parent::setUp();
+ $this->di_container->get( Email_Editor::class )->initialize();
+ $this->social_links_renderer = new Social_Links();
+ $this->settings_controller = $this->di_container->get( Settings_Controller::class );
+ }
+
+ /**
+ * Test it renders social links content
+ */
+ public function testItRendersSocialLinksContent(): void {
+ $rendered = $this->social_links_renderer->render( '', $this->parsed_social_links, $this->settings_controller );
+ $this->checkValidHTML( $rendered );
+ $this->assertStringContainsString( 'Facebook', $rendered );
+ $this->assertStringContainsString( 'Twitter', $rendered );
+ $this->assertStringContainsString( 'https://facebook.com', $rendered );
+ $this->assertStringContainsString( 'https://twitter.com', $rendered );
+ }
+
+ /**
+ * Test it renders social links with custom colors
+ */
+ public function testItRendersSocialLinksWithCustomColors(): void {
+ $parsed_social_links = $this->parsed_social_links;
+ $parsed_social_links['attrs']['iconBackgroundColorValue'] = '#720eec';
+
+ $rendered = $this->social_links_renderer->render( '', $parsed_social_links, $this->settings_controller );
+ $this->checkValidHTML( $rendered );
+ $this->assertStringContainsString( 'background-color:#720eec;', $rendered );
+ }
+
+ /**
+ * Test it renders social links with pill shape
+ */
+ public function testItRendersSocialLinksWithPillShape(): void {
+ $parsed_social_links = $this->parsed_social_links;
+ $parsed_social_links['attrs']['className'] = 'is-style-pill-shape';
+
+ $rendered = $this->social_links_renderer->render( '', $parsed_social_links, $this->settings_controller );
+ $this->checkValidHTML( $rendered );
+ $this->assertStringContainsString( 'padding-left:17px;', $rendered );
+ $this->assertStringContainsString( 'padding-right:17px;', $rendered );
+ }
+
+ /**
+ * Test it renders social links with different sizes
+ */
+ public function testItRendersSocialLinksWithDifferentSizes(): void {
+ $sizes = array(
+ 'has-small-icon-size' => '16px',
+ 'has-normal-icon-size' => '24px',
+ 'has-large-icon-size' => '36px',
+ 'has-huge-icon-size' => '48px',
+ );
+
+ foreach ( $sizes as $size_class => $expected_size ) {
+ $parsed_social_links = $this->parsed_social_links;
+ $parsed_social_links['attrs']['size'] = $size_class;
+
+ $rendered = $this->social_links_renderer->render( '', $parsed_social_links, $this->settings_controller );
+ $this->checkValidHTML( $rendered );
+ $this->assertStringContainsString( "width=\"{$expected_size}\"", $rendered );
+ $this->assertStringContainsString( "height=\"{$expected_size}\"", $rendered );
+ }
+ }
+
+ /**
+ * Test it renders social links with email service
+ */
+ public function testItRendersSocialLinksWithEmailService(): void {
+ $parsed_social_links = $this->parsed_social_links;
+ $parsed_social_links['innerBlocks'][0]['attrs']['service'] = 'mail';
+ $parsed_social_links['innerBlocks'][0]['attrs']['url'] = 'test@example.com';
+ $parsed_social_links['innerBlocks'][0]['attrs']['label'] = 'My email';
+
+ $rendered = $this->social_links_renderer->render( '', $parsed_social_links, $this->settings_controller );
+ $this->checkValidHTML( $rendered );
+ $this->assertStringContainsString( 'mailto:', $rendered ); // HTML entities of test@example.com -> because of antispambot.
+ $this->assertStringContainsString( 'My email', $rendered );
+ }
+
+ /**
+ * Test it renders social links with relative URL
+ */
+ public function testItRendersSocialLinksWithRelativeUrl(): void {
+ $parsed_social_links = $this->parsed_social_links;
+ $parsed_social_links['innerBlocks'][0]['attrs']['url'] = 'example.com';
+
+ $rendered = $this->social_links_renderer->render( '', $parsed_social_links, $this->settings_controller );
+ $this->checkValidHTML( $rendered );
+ $this->assertStringContainsString( 'https://example.com', $rendered );
+ }
+
+ /**
+ * Test it renders social links with fragment URL
+ */
+ public function testItRendersSocialLinksWithFragmentUrl(): void {
+ $parsed_social_links = $this->parsed_social_links;
+ $parsed_social_links['innerBlocks'][0]['attrs']['url'] = '#section';
+
+ $rendered = $this->social_links_renderer->render( '', $parsed_social_links, $this->settings_controller );
+ $this->checkValidHTML( $rendered );
+ $this->assertStringContainsString( '#section', $rendered );
+ }
+
+ /**
+ * Test it renders social links with open in new tab
+ */
+ public function testItRendersSocialLinksWithOpenInNewTab(): void {
+ $parsed_social_links = $this->parsed_social_links;
+ $parsed_social_links['attrs']['openInNewTab'] = true;
+
+ $rendered = $this->social_links_renderer->render( '', $parsed_social_links, $this->settings_controller );
+ $this->checkValidHTML( $rendered );
+ $this->assertStringContainsString( 'target="_blank"', $rendered );
+ $this->assertStringContainsString( 'rel="noopener nofollow"', $rendered );
+ }
+
+ /**
+ * Test it gets service icon URL
+ */
+ public function testItGetsServiceIconUrl(): void {
+ $service_icon_url_white = $this->social_links_renderer->get_service_icon_url( 'facebook', 'white' );
+ $this->assertStringContainsString( 'Renderer/Blocks/icons/facebook/facebook-white.png', $service_icon_url_white );
+
+ $service_icon_url_brand = $this->social_links_renderer->get_service_icon_url( 'facebook', 'brand' );
+ $this->assertStringContainsString( 'Renderer/Blocks/icons/facebook/facebook-brand.png', $service_icon_url_brand );
+
+ $default_service_icon_url = $this->social_links_renderer->get_service_icon_url( 'facebook', '' );
+ $this->assertStringContainsString( 'Renderer/Blocks/icons/facebook/facebook-white.png', $default_service_icon_url );
+
+ $service_icon_url_black = $this->social_links_renderer->get_service_icon_url( 'facebook', 'black' ); // no support for black image type.
+ $this->assertEquals( '', $service_icon_url_black );
+
+ $non_existing_service_icon_url = $this->social_links_renderer->get_service_icon_url( 'non-existing-service' );
+ $this->assertEquals( '', $non_existing_service_icon_url );
+ }
+}
diff --git a/packages/php/email-editor/tests/unit/Integrations/Utils/Social_Links_Helper_Test.php b/packages/php/email-editor/tests/unit/Integrations/Utils/Social_Links_Helper_Test.php
new file mode 100644
index 0000000000..e8df829b34
--- /dev/null
+++ b/packages/php/email-editor/tests/unit/Integrations/Utils/Social_Links_Helper_Test.php
@@ -0,0 +1,76 @@
+<?php
+/**
+ * This file is part of the WooCommerce Email Editor package
+ *
+ * @package Automattic\WooCommerce\EmailEditor
+ */
+
+declare(strict_types = 1);
+namespace Automattic\WooCommerce\EmailEditor\Integrations\Utils;
+
+/**
+ * Unit test for Social_Links_Helper class
+ */
+class Social_Links_Helper_Test extends \Email_Editor_Unit_Test {
+ /**
+ * Test it detects whiteish colors
+ */
+ public function testItDetectsWhiteishColors(): void {
+ // Test pure white.
+ $this->assertTrue( Social_Links_Helper::detect_whiteish_color( '#ffffff' ) );
+ $this->assertTrue( Social_Links_Helper::detect_whiteish_color( '#fff' ) );
+
+ // Test very light colors.
+ $this->assertTrue( Social_Links_Helper::detect_whiteish_color( '#fafafa' ) );
+ $this->assertTrue( Social_Links_Helper::detect_whiteish_color( '#f5f5f5' ) );
+
+ // Test non-whiteish colors.
+ $this->assertFalse( Social_Links_Helper::detect_whiteish_color( '#000000' ) );
+ $this->assertFalse( Social_Links_Helper::detect_whiteish_color( '#ff0000' ) );
+ $this->assertFalse( Social_Links_Helper::detect_whiteish_color( '#00ff00' ) );
+ $this->assertFalse( Social_Links_Helper::detect_whiteish_color( '#0000ff' ) );
+
+ // Test empty input.
+ $this->assertFalse( Social_Links_Helper::detect_whiteish_color( '' ) );
+ }
+
+ /**
+ * Test it gets service brand colors
+ */
+ public function testItGetsServiceBrandColors(): void {
+ // Test known services.
+ $this->assertEquals( '#0866ff', Social_Links_Helper::get_service_brand_color( 'facebook' ) );
+ $this->assertEquals( '#1da1f2', Social_Links_Helper::get_service_brand_color( 'twitter' ) );
+ $this->assertEquals( '#0d66c2', Social_Links_Helper::get_service_brand_color( 'linkedin' ) );
+ $this->assertEquals( '#f00075', Social_Links_Helper::get_service_brand_color( 'instagram' ) );
+
+ // Test unknown service.
+ $this->assertEquals( '', Social_Links_Helper::get_service_brand_color( 'unknown_service' ) );
+ }
+
+ /**
+ * Test it gets default social link size
+ */
+ public function testItGetsDefaultSocialLinkSize(): void {
+ $this->assertEquals( 'has-normal-icon-size', Social_Links_Helper::get_default_social_link_size() );
+ }
+
+ /**
+ * Test it gets social link size option value
+ */
+ public function testItGetsSocialLinkSizeOptionValue(): void {
+ $sizes = array(
+ 'has-small-icon-size' => '16px',
+ 'has-normal-icon-size' => '24px',
+ 'has-large-icon-size' => '36px',
+ 'has-huge-icon-size' => '48px',
+ );
+
+ foreach ( $sizes as $size_class => $expected_size ) {
+ $this->assertEquals( $expected_size, Social_Links_Helper::get_social_link_size_option_value( $size_class ) );
+ }
+
+ // Test unknown size.
+ $this->assertEquals( '24px', Social_Links_Helper::get_social_link_size_option_value( 'unknown_size' ) );
+ }
+}