feat(author-profile-social): add support for colors, block spacing, brand style

src/blocks/author-profile-social/block.json

@@ -21,11 +21,20 @@
 			"default": 24
 		}
 	},
+	"styles": [
+		{ "name": "default", "label": "Default", "isDefault": true },
+		{ "name": "brand", "label": "Brand" }
+	],
 	"supports": {
+		"color": {
+			"enableContrastChecker": false,
+			"background": true,
+			"text": true
+		},
 		"html": false,
 		"spacing": {
-			"margin": true,
-			"padding": true
+			"blockGap": [ "horizontal", "vertical" ],
+			"margin": true
 		}
 	}
 }

src/blocks/author-profile-social/class-author-profile-social-block.php

@@ -157,7 +157,7 @@ private static function render_social_flat( array $attributes, WP_Block $block,
 
 		foreach ( $social_links as $service => $social_data ) {
 			$service_label = ucfirst( $service );
-			$output       .= '<li>';
+			$output       .= '<li data-service="' . esc_attr( $service ) . '">';
 			$output       .= sprintf( '<a href="%s" aria-label="%s">', esc_url( $social_data['url'] ), esc_attr( $service_label ) );
 
 			$svg = ! empty( $social_data['svg'] ) ? $social_data['svg'] : Social_Icons::get_svg( $service );
@@ -202,20 +202,95 @@ private static function get_block_wrapper_attributes( WP_Block $block, array $at
 		);
 
 		\WP_Block_Supports::$block_to_render = $previous;
+
+		// Strip color classes/styles from wrapper so only the icon link (via CSS vars) is colored.
+		$wrapper_attributes = preg_replace( '/\bhas-[\w-]+-(color|background-color)\b/', '', $wrapper_attributes );
+		$wrapper_attributes = preg_replace( '/\bhas-text-color\b/', '', $wrapper_attributes );
+		$wrapper_attributes = preg_replace( '/\bhas-background\b/', '', $wrapper_attributes );
+		$wrapper_attributes = preg_replace( '/\s+/', ' ', $wrapper_attributes );
+
 		return $wrapper_attributes;
 	}
 
 	/**
-	 * Build wrapper style from block attributes.style (spacing, color, border, etc.) and block-specific vars.
-	 * Uses the style engine so presets (e.g. var:preset|spacing|20) are converted to CSS.
+	 * Convert a preset token (var:preset|type|slug) to a CSS variable reference.
+	 *
+	 * @param string $value Raw value, e.g. "var:preset|spacing|20" or "#fff".
+	 * @return string CSS value, e.g. "var(--wp--preset--spacing--20)" or "#fff".
+	 */
+	private static function preset_to_css( string $value ): string {
+		if ( preg_match( '/^var:preset\|([^|]+)\|(.+)$/', $value, $matches ) ) {
+			return sprintf( 'var(--wp--preset--%s--%s)', $matches[1], $matches[2] );
+		}
+		return $value;
+	}
+
+	/**
+	 * Resolve a color value from attributes (preset slug or custom style token).
+	 *
+	 * @param array  $attributes Block attributes.
+	 * @param string $preset_key Top-level preset attribute key (e.g. "textColor").
+	 * @param string $style_key  Key under style.color (e.g. "text").
+	 * @return string|null CSS color value or null.
+	 */
+	private static function resolve_color( array $attributes, string $preset_key, string $style_key ): ?string {
+		if ( ! empty( $attributes[ $preset_key ] ) && is_string( $attributes[ $preset_key ] ) ) {
+			return sprintf( 'var(--wp--preset--color--%s)', $attributes[ $preset_key ] );
+		}
+		$custom = $attributes['style']['color'][ $style_key ] ?? null;
+		if ( ! empty( $custom ) && is_string( $custom ) ) {
+			return self::preset_to_css( $custom );
+		}
+		return null;
+	}
+
+	/**
+	 * Resolve blockGap into row-gap and column-gap CSS values.
+	 *
+	 * @param array $attributes Block attributes.
+	 * @return array{row: string|null, column: string|null}
+	 */
+	private static function resolve_block_gap( array $attributes ): array {
+		$block_gap = $attributes['style']['spacing']['blockGap'] ?? null;
+		$result = [
+			'row'    => null,
+			'column' => null,
+		];
+
+		if ( empty( $block_gap ) ) {
+			return $result;
+		}
+
+		if ( is_string( $block_gap ) ) {
+			$val             = self::preset_to_css( $block_gap );
+			$result['row']    = $val;
+			$result['column'] = $val;
+			return $result;
+		}
+
+		if ( is_array( $block_gap ) ) {
+			$row = $block_gap['vertical'] ?? $block_gap['top'] ?? null;
+			$col = $block_gap['horizontal'] ?? $block_gap['left'] ?? null;
+
+			$result['row']    = is_string( $row ) ? self::preset_to_css( $row ) : null;
+			$result['column'] = is_string( $col ) ? self::preset_to_css( $col ) : null;
+		}
+
+		return $result;
+	}
+
+	/**
+	 * Build wrapper inline style with custom CSS variables for icon sizing, gap, and color.
+	 * Block supports (margin, etc.) are handled by get_block_wrapper_attributes().
 	 *
 	 * @param array $attributes Block attributes.
 	 * @param int   $icon_size  Icon size in pixels.
-	 * @return string Inline style string.
+	 * @return string Inline style string for the block wrapper.
 	 */
 	private static function get_wrapper_style( array $attributes, int $icon_size ): string {
-		$parts = [];
+		$parts    = [];
 		$style = $attributes['style'] ?? null;
+
 		if ( ! empty( $style ) && is_array( $style ) ) {
 			$styles = wp_style_engine_get_styles(
 				$style,
@@ -225,7 +300,31 @@ private static function get_wrapper_style( array $attributes, int $icon_size ):
 				$parts[] = $styles['css'];
 			}
 		}
+
+		$is_brand = ! empty( $attributes['className'] ) && str_contains( $attributes['className'], 'is-style-brand' );
+		$gap      = self::resolve_block_gap( $attributes );
+
+		if ( null !== $gap['row'] ) {
+			$parts[] = sprintf( '--icon-row-gap: %s;', $gap['row'] );
+		}
+		if ( null !== $gap['column'] ) {
+			$parts[] = sprintf( '--icon-column-gap: %s;', $gap['column'] );
+		}
+
+		if ( ! $is_brand ) {
+			$icon_color      = self::resolve_color( $attributes, 'textColor', 'text' );
+			$icon_background = self::resolve_color( $attributes, 'backgroundColor', 'background' );
+
+			if ( null !== $icon_color ) {
+				$parts[] = sprintf( '--icon-color: %s;', $icon_color );
+			}
+			if ( null !== $icon_background ) {
+				$parts[] = sprintf( '--icon-background: %s;', $icon_background );
+			}
+		}
+
 		$parts[] = sprintf( '--icon-size: %dpx;', absint( $icon_size ) );
+
 		return implode( ' ', $parts );
 	}
 }

src/blocks/author-profile-social/edit.jsx

@@ -28,6 +28,55 @@ const fetchAllServiceKeys = () => {
 	return allServiceKeysCache;
 };
 
+const presetToVar = value => {
+	if ( typeof value !== 'string' ) {
+		return value;
+	}
+	return value.replace( /^var:preset\|([^|]+)\|(.+)$/, 'var(--wp--preset--$1--$2)' );
+};
+
+const resolveColor = ( presetSlug, customValue ) => {
+	if ( presetSlug ) {
+		return `var(--wp--preset--color--${ presetSlug })`;
+	}
+	if ( typeof customValue === 'string' ) {
+		return presetToVar( customValue ) || customValue;
+	}
+	return undefined;
+};
+
+const resolveBlockGap = blockGap => {
+	if ( ! blockGap ) {
+		return {};
+	}
+	if ( typeof blockGap === 'string' ) {
+		const val = presetToVar( blockGap ) || blockGap;
+		return { '--icon-row-gap': val, '--icon-column-gap': val };
+	}
+	const result = {};
+	const row = blockGap.vertical ?? blockGap.top;
+	const col = blockGap.horizontal ?? blockGap.left;
+	if ( typeof row === 'string' ) {
+		result[ '--icon-row-gap' ] = presetToVar( row ) || row;
+	}
+	if ( typeof col === 'string' ) {
+		result[ '--icon-column-gap' ] = presetToVar( col ) || col;
+	}
+	return result;
+};
+
+const COLOR_CLASS_RE = /^has-([\w-]+-)?(color|background-color)$|^has-text-color$|^has-background$/;
+
+const stripColorFromBlockProps = rawBlockProps => {
+	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+	const { color, backgroundColor: bg, ...cleanStyle } = rawBlockProps.style || {};
+	const cleanClassName = ( rawBlockProps.className || '' )
+		.split( ' ' )
+		.filter( c => ! COLOR_CLASS_RE.test( c ) )
+		.join( ' ' );
+	return { ...rawBlockProps, className: cleanClassName, style: cleanStyle };
+};
+
 /**
  * Edit component for the Author Social Links inner block.
  *
@@ -40,16 +89,68 @@ const fetchAllServiceKeys = () => {
 export default function Edit( { attributes, setAttributes, clientId } ) {
 	const AuthorContext = getSharedAuthorContext();
 	const author = useContext( AuthorContext );
-	const { iconSize } = attributes;
+	const { iconSize, style: styleAttr, textColor, backgroundColor, className } = attributes;
 	const hasPopulated = useRef( false );
 	const [ allServiceKeys, setAllServiceKeys ] = useState( null ); // null = loading
 
-	const blockProps = useBlockProps( {
-		className: 'wp-block-newspack-author-profile-social',
+	const isBrand = ( className || '' ).split( ' ' ).includes( 'is-style-brand' );
+	const iconSizeValue = typeof iconSize === 'number' ? iconSize : parseInt( iconSize ?? 24, 10 ) || 24;
+	const iconColor = resolveColor( textColor, styleAttr?.color?.text );
+	const iconBackground = resolveColor( backgroundColor, styleAttr?.color?.background );
+
+	// Hide color panel when "Brand" is active; rename labels when "Default".
+	useEffect( () => {
+		const sidebar = document.querySelector( '.interface-complementary-area' );
+		if ( ! sidebar ) {
+			return;
+		}
+
+		const COLOR_LABEL_MAP = {
+			Text: __( 'Icon color', 'newspack-plugin' ),
+			Background: __( 'Icon background', 'newspack-plugin' ),
+		};
+
+		const updateColorPanel = container => {
+			container.querySelectorAll( '.color-block-support-panel' ).forEach( el => {
+				el.style.display = isBrand ? 'none' : '';
+			} );
+
+			if ( isBrand ) {
+				return;
+			}
+
+			container.querySelectorAll( '.block-editor-panel-color-gradient-settings__color-name' ).forEach( el => {
+				if ( COLOR_LABEL_MAP[ el.textContent ] ) {
+					el.textContent = COLOR_LABEL_MAP[ el.textContent ];
+				}
+			} );
+			container.querySelectorAll( '.components-menu-item__item' ).forEach( el => {
+				if ( COLOR_LABEL_MAP[ el.textContent ] ) {
+					el.textContent = COLOR_LABEL_MAP[ el.textContent ];
+				}
+			} );
+		};
+
+		updateColorPanel( sidebar );
+
+		const observer = new MutationObserver( () => updateColorPanel( sidebar ) );
+		observer.observe( sidebar, { childList: true, subtree: true } );
+
+		return () => observer.disconnect();
+	}, [ isBrand ] );
+	const gapVars = resolveBlockGap( styleAttr?.spacing?.blockGap );
+
+	const rawProps = stripColorFromBlockProps( useBlockProps( { className: 'wp-block-newspack-author-profile-social' } ) );
+	const blockProps = {
+		...rawProps,
 		style: {
-			'--icon-size': `${ roundIconSize( iconSize ) }px`,
+			...rawProps.style,
+			'--icon-size': `${ roundIconSize( iconSizeValue ) }px`,
+			...gapVars,
+			...( ! isBrand && iconColor && { '--icon-color': iconColor } ),
+			...( ! isBrand && iconBackground && { '--icon-background': iconBackground } ),
 		},
-	} );
+	};
 
 	// Get inner blocks (stable reference from the store).
 	const innerBlocks = useSelect( select => select( 'core/block-editor' ).getBlocks( clientId ), [ clientId ] );
@@ -118,9 +219,9 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 				<PanelBody title={ __( 'Settings', 'newspack-plugin' ) }>
 					<SelectControl
 						label={ __( 'Icon size', 'newspack-plugin' ) }
-						value={ iconSize ?? 24 }
+						value={ iconSizeValue }
 						options={ getIconSizeOptions() }
-						onChange={ value => setAttributes( { iconSize: value } ) }
+						onChange={ value => setAttributes( { iconSize: Number( value ) || 24 } ) }
 						__next40pxDefaultSize
 					/>
 					{ missingServices.length > 0 && (

src/blocks/author-profile-social/editor.scss

@@ -6,7 +6,8 @@
 		.block-editor-block-list__layout {
 			display: flex;
 			flex-wrap: wrap;
-			gap: var(--wp--preset--spacing--20, 0.5rem);
+			column-gap: var(--icon-column-gap, var(--wp--preset--spacing--20, 0.5rem));
+			row-gap: var(--icon-row-gap, var(--wp--preset--spacing--20, 0.5rem));
 		}
 
 		// Remove default block margins in horizontal layout

src/blocks/author-profile-social/style.scss

@@ -7,7 +7,8 @@
 		list-style: none;
 		margin: 0;
 		padding: 0;
-		gap: var(--wp--preset--spacing--20, 0.5rem);
+		column-gap: var(--icon-column-gap, var(--wp--preset--spacing--20, 0.5rem));
+		row-gap: var(--icon-row-gap, var(--wp--preset--spacing--20, 0.5rem));
 
 		li {
 			line-height: 0;
@@ -28,4 +29,49 @@
 			text-transform: uppercase;
 		}
 	}
+
+	// Brand style: per-service colors override --icon-background / --icon-color
+	&.is-style-brand .author-profile-social__list {
+		--icon-color: #fff;
+
+		li[data-service="bluesky"] {
+			--icon-background: #0a7aff;
+		}
+		li[data-service="email"] {
+			--icon-background: #1e1e1e;
+		}
+		li[data-service="facebook"] {
+			--icon-background: #0866ff;
+		}
+		li[data-service="instagram"] {
+			--icon-background: #f00075;
+		}
+		li[data-service="linkedin"] {
+			--icon-background: #0d66c2;
+		}
+		li[data-service="myspace"] {
+			--icon-background: #000;
+		}
+		li[data-service="phone"] {
+			--icon-background: #1e1e1e;
+		}
+		li[data-service="pinterest"] {
+			--icon-background: #e60122;
+		}
+		li[data-service="soundcloud"] {
+			--icon-background: #ff5600;
+		}
+		li[data-service="tumblr"] {
+			--icon-background: #011835;
+		}
+		li[data-service="twitter"] {
+			--icon-background: #000;
+		}
+		li[data-service="wikipedia"] {
+			--icon-background: #000;
+		}
+		li[data-service="youtube"] {
+			--icon-background: #f00;
+		}
+	}
 }

src/blocks/author-social-link/class-author-social-link-block.php

@@ -67,7 +67,7 @@ public static function render_block( array $attributes, string $content, WP_Bloc
 		$svg           = self::get_social_service_svg( $author, $service );
 		$service_label = ucfirst( $service );
 
-		$output  = '<li class="wp-block-newspack-author-social-link">';
+		$output  = '<li class="wp-block-newspack-author-social-link" data-service="' . esc_attr( $service ) . '">';
 		$output .= sprintf( '<a href="%s" aria-label="%s">', esc_url( $url ), esc_attr( $service_label ) );
 
 		if ( $svg ) {

src/blocks/author-social-link/edit.jsx

@@ -29,6 +29,7 @@ export default function AuthorSocialLinkEdit( { attributes, context } ) {
 
 	const blockProps = useBlockProps( {
 		className: 'wp-block-newspack-author-social-link',
+		'data-service': service,
 	} );
 
 	const url = getServiceUrl( author, service );