Add explanatory comments

packages/block-editor/src/components/colors-gradients/dropdown.js

@@ -22,6 +22,9 @@ import {
  */
 import ColorGradientControl from './control';
 
+// Conditionally wraps the `ColorGradientSettingsDropdown` color controls in an
+// `ItemGroup` allowing for a standalone group of controls to be
+// rendered semantically.
 const WithItemGroup = ( { isItemGroup, children } ) => {
 	if ( ! isItemGroup ) {
 		return children;
@@ -38,6 +41,8 @@ const WithItemGroup = ( { isItemGroup, children } ) => {
 	);
 };
 
+// When the `ColorGradientSettingsDropdown` controls are being rendered to a
+// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
 const WithToolsPanelItem = ( {
 	isItemGroup,
 	settings,
@@ -73,9 +78,13 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 	</HStack>
 );
 
+// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
+// or as a `Button` if it isn't e.g. the controls are being rendered in
+// a `ToolsPanel`.
 const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => {
 	const { isItemGroup, colorValue, label } = settings;
 
+	// Determine component, `Item` or `Button`, to wrap color indicator with.
 	const ToggleComponent = isItemGroup ? Item : Button;
 	const toggleClassName = isItemGroup
 		? 'block-editor-panel-color-gradient-settings__item'
@@ -93,6 +102,13 @@ const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => {
 	);
 };
 
+// Renders a collection of color controls as dropdowns. Depending upon the
+// context in which these dropdowns are being rendered, they may be wrapped
+// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,
+// the may be individually wrapped in a `ToolsPanelItem` with the toggle as
+// a regular `Button`.
+//
+// For more context see: https://github.com/WordPress/gutenberg/pull/40084
 export default function ColorGradientSettingsDropdown( {
 	colors,
 	disableCustomColors,
@@ -114,6 +130,8 @@ export default function ColorGradientSettingsDropdown( {
 		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
 
 	return (
+		// Only wrap with `ItemGroup` if these controls are being rendered
+		// semantically.
 		<WithItemGroup isItemGroup={ isItemGroup }>
 			{ settings.map( ( setting, index ) => {
 				const controlProps = {
@@ -141,6 +159,8 @@ export default function ColorGradientSettingsDropdown( {
 
 				return (
 					setting && (
+						// If not in an `ItemGroup` wrap the dropdown in a
+						// `ToolsPanelItem`
 						<WithToolsPanelItem
 							key={ index }
 							isItemGroup={ isItemGroup }