fix(ras-acc): respect social icons padding (#1615)

This PR addresses an issue where the renderer was not not respecting the social icons padding set in the editor. This also tweaks the default icons padding to 8px (from 7px) to be in-line with the spacing set in RAS-ACC transactional emails.

includes/class-newspack-newsletters-renderer.php

@@ -852,17 +852,18 @@ function ( $block ) {
 				$social_wrapper_attrs = array(
 					'icon-size'     => '24px',
 					'mode'          => 'horizontal',
-					'padding'       => '0',
 					'border-radius' => '999px',
-					'icon-padding'  => '7px',
+					'icon-padding'  => isset( $attrs['className'] ) && 'is-style-filled-primary-text' === $attrs['className'] ? '0px' : '7px',
+					'padding'       => '0',
 				);
 				if ( isset( $attrs['align'] ) ) {
 					$social_wrapper_attrs['align'] = $attrs['align'];
 				} else {
 					$social_wrapper_attrs['align'] = 'left';
 				}
+
 				$markup = '<mj-social ' . self::array_to_attributes( $social_wrapper_attrs ) . '>';
-				foreach ( $inner_blocks as $link_block ) {
+				foreach ( $inner_blocks as $index => $link_block ) {
 					if ( isset( $link_block['attrs']['url'] ) ) {
 						$url = $link_block['attrs']['url'];
 						// Handle older version of the block, where innner blocks we named `core/social-link-<service>`.
@@ -875,8 +876,14 @@ function ( $block ) {
 								'src'              => plugins_url( 'assets/' . $social_icon['icon'], __DIR__ ),
 								'background-color' => $social_icon['color'],
 								'css-class'        => 'social-element',
+								'padding'          => '8px',
 							);
 
+							if ( $index === 0 || $index === count( $inner_blocks ) - 1 ) {
+								$img_attrs['padding-left']  = $index === 0 ? '0' : '8px';
+								$img_attrs['padding-right'] = $index === 0 ? '8px' : '0';
+							}
+
 							$markup .= '<mj-social-element ' . self::array_to_attributes( $img_attrs ) . '/>';
 						}
 					}

tests/test-renderer.php

@@ -313,7 +313,7 @@ public function test_render_social_icons() {
 					'innerHTML'    => '<div></div>',
 				]
 			),
-			'<mj-section padding="0"><mj-column padding="12px" width="100%"><mj-social icon-size="24px" mode="horizontal" padding="0" border-radius="999px" icon-padding="7px" align="left"><mj-social-element href="https://x.com/hi" src="' . $plugin_path . 'assets/white-x.png" background-color="#000000" css-class="social-element"/></mj-social></mj-column></mj-section>',
+			'<mj-section padding="0"><mj-column padding="12px" width="100%"><mj-social icon-size="24px" mode="horizontal" border-radius="999px" icon-padding="7px" padding="0" align="left"><mj-social-element href="https://x.com/hi" src="' . $plugin_path . 'assets/white-x.png" background-color="#000000" css-class="social-element" padding="8px" padding-left="0" padding-right="8px"/></mj-social></mj-column></mj-section>',
 			'Renders social icons'
 		);
 	}