Use children and avoid prop drilling (#50963)

Author: getdave

packages/block-editor/src/components/link-control/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice } from '@wordpress/components';
+import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
@@ -19,6 +19,7 @@ import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
 import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchInput from './search-input';
 import LinkPreview from './link-preview';
+import LinkSettings from './settings';
 import useCreatePage from './use-create-page';
 import useInternalValue from './use-internal-value';
 import { ViewerFill } from './viewer-slot';
@@ -376,22 +377,28 @@ function LinkControl( {
 						<LinkControlSettingsDrawer
 							settingsOpen={ settingsOpen }
 							setSettingsOpen={ setSettingsOpen }
-							showTextControl={ showTextControl }
-							showSettings={ showSettings }
-							textInputRef={ textInputRef }
-							internalTextInputValue={
-								internalControlValue?.title
-							}
-							setInternalTextInputValue={
-								setInternalTextInputValue
-							}
-							handleSubmitWithEnter={ handleSubmitWithEnter }
-							value={ internalControlValue }
-							settings={ settings }
-							onChange={ createSetInternalSettingValueHandler(
-								settingsKeys
+						>
+							{ showTextControl && (
+								<TextControl
+									__nextHasNoMarginBottom
+									ref={ textInputRef }
+									className="block-editor-link-control__setting block-editor-link-control__text-content"
+									label="Text"
+									value={ internalControlValue?.title }
+									onChange={ setInternalTextInputValue }
+									onKeyDown={ handleSubmitWithEnter }
+								/>
 							) }
-						/>
+							{ showSettings && (
+								<LinkSettings
+									value={ internalControlValue }
+									settings={ settings }
+									onChange={ createSetInternalSettingValueHandler(
+										settingsKeys
+									) }
+								/>
+							) }
+						</LinkControlSettingsDrawer>
 					) }
 
 					<div className="block-editor-link-control__search-actions">

packages/block-editor/src/components/link-control/settings-drawer.js

@@ -3,7 +3,6 @@
  */
 import {
 	Button,
-	TextControl,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
@@ -12,24 +11,7 @@ import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import Settings from './settings';
-
-function LinkSettingsDrawer( {
-	settingsOpen,
-	setSettingsOpen,
-	showTextControl,
-	showSettings,
-	textInputRef,
-	internalTextInputValue,
-	setInternalTextInputValue,
-	handleSubmitWithEnter,
-	value,
-	settings,
-	onChange,
-} ) {
+function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 	const prefersReducedMotion = useReducedMotion();
 	const MaybeAnimatePresence = prefersReducedMotion
 		? Fragment
@@ -68,24 +50,7 @@ function LinkSettingsDrawer( {
 						} }
 					>
 						<div className="block-editor-link-control__drawer-inner">
-							{ showTextControl && (
-								<TextControl
-									__nextHasNoMarginBottom
-									ref={ textInputRef }
-									className="block-editor-link-control__setting block-editor-link-control__text-content"
-									label="Text"
-									value={ internalTextInputValue }
-									onChange={ setInternalTextInputValue }
-									onKeyDown={ handleSubmitWithEnter }
-								/>
-							) }
-							{ showSettings && (
-								<Settings
-									value={ value }
-									settings={ settings }
-									onChange={ onChange }
-								/>
-							) }
+							{ children }
 						</div>
 					</MaybeMotionDiv>
 				) }