From 79cacc584f26bb0c5f3ea869c5914dfbe81455b3 Mon Sep 17 00:00:00 2001
From: HILAYTRIVEDI <52625748+HILAYTRIVEDI@users.noreply.github.com>
Date: Thu, 17 Mar 2022 10:43:11 +0530
Subject: [PATCH] Social Icons: Avoid loss of previously selected background
 color when switching back from "Logos Only" style (#39276)

* Background color issue fixed

* Add missing ref, micro-refactor and lint

* Add entry to changelog

Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>
---
 packages/block-library/CHANGELOG.md           |  4 ++++
 .../block-library/src/social-links/edit.js    | 20 ++++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 8469bdb4270908..d0c48dae9dbe93 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Social Icons: Avoid loss of previously selected background color when switching back from "Logos Only" style ([#39276](https://github.com/WordPress/gutenberg/pull/39276)).
+
 ## 7.1.0 (2022-03-11)
 
 ## 7.0.0 (2022-02-10)
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index ee5425174c67af..ed148909ad1b30 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -7,7 +7,7 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { Fragment, useEffect } from '@wordpress/element';
+import { Fragment, useEffect, useRef } from '@wordpress/element';
 import {
 	BlockControls,
 	useInnerBlocksProps,
@@ -58,6 +58,7 @@ export function SocialLinksEdit( props ) {
 
 	const {
 		iconBackgroundColorValue,
+		customIconBackgroundColor,
 		iconColorValue,
 		openInNewTab,
 		showLabels,
@@ -66,18 +67,27 @@ export function SocialLinksEdit( props ) {
 	} = attributes;
 	const usedLayout = layout || getDefaultBlockLayout( name );
 
-	// Remove icon background color if logos only style selected.
-	const logosOnly =
-		attributes.className?.indexOf( 'is-style-logos-only' ) >= 0;
+	const logosOnly = attributes.className?.includes( 'is-style-logos-only' );
+
+	// Remove icon background color when logos only style is selected or
+	// restore it when any other style is selected.
+	const backgroundBackup = useRef( {} );
 	useEffect( () => {
 		if ( logosOnly ) {
+			backgroundBackup.current = {
+				iconBackgroundColor,
+				iconBackgroundColorValue,
+				customIconBackgroundColor,
+			};
 			setAttributes( {
 				iconBackgroundColor: undefined,
 				customIconBackgroundColor: undefined,
 				iconBackgroundColorValue: undefined,
 			} );
+		} else {
+			setAttributes( { ...backgroundBackup.current } );
 		}
-	}, [ logosOnly, setAttributes ] );
+	}, [ logosOnly ] );
 
 	const SocialPlaceholder = (
 		<li className="wp-block-social-links__social-placeholder">