From 38e147c76c4b83358bce8092a238f9ceb0e2a3cc Mon Sep 17 00:00:00 2001 From: hz-tyfoon Date: Wed, 10 May 2023 22:16:43 +0600 Subject: [PATCH 1/2] reapplied changes by coping the 2 files --- .../src/components/link-control/index.js | 141 +++++++----------- .../link-control/settings-drawer.js | 114 ++++---------- 2 files changed, 84 insertions(+), 171 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 142ffd6db1e50..f9c91b7e634a4 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -6,7 +6,8 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Button, Spinner, Notice } from '@wordpress/components'; +import { Button, Spinner, Notice, TextControl } from '@wordpress/components'; +import { keyboardReturn } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { useRef, useState, useEffect } from '@wordpress/element'; import { focus } from '@wordpress/dom'; @@ -98,7 +99,10 @@ import { DEFAULT_LINK_SETTINGS } from './constants'; */ const noop = () => {}; - +const __newOnChangeForLinkControl = ( callback1, callback2, value ) => { + callback1( value ); + callback2( value ); +}; /** * Renders a link control. A link control is a controlled input which maintains * a value associated with a link (HTML anchor element) and relevant settings @@ -112,7 +116,6 @@ function LinkControl( { settings = DEFAULT_LINK_SETTINGS, onChange = noop, onRemove, - onCancel, noDirectEntry = false, showSuggestions = true, showInitialSuggestions, @@ -136,18 +139,18 @@ function LinkControl( { const textInputRef = useRef(); const isEndingEditWithFocus = useRef( false ); - const [ settingsOpen, setSettingsOpen ] = useState( false ); + const [ newValue, setNewValue ] = useState( value ); const [ internalUrlInputValue, setInternalUrlInputValue ] = - useInternalInputValue( value?.url || '' ); + useInternalInputValue( newValue?.url || '' ); const [ internalTextInputValue, setInternalTextInputValue ] = - useInternalInputValue( value?.title || '' ); + useInternalInputValue( newValue?.title || '' ); const [ isEditingLink, setIsEditingLink ] = useState( forceIsEditingLink !== undefined ? forceIsEditingLink - : ! value || ! value.url + : ! newValue || ! newValue?.url ); const { createPage, isCreatingPage, errorMessage } = @@ -192,8 +195,6 @@ function LinkControl( { isEndingEditWithFocus.current = false; }, [ isEditingLink, isCreatingPage ] ); - const hasLinkValue = value?.url?.trim()?.length > 0; - /** * Cancels editing state and marks that focus may need to be restored after * the next render, if focus was within the wrapper when editing finished. @@ -203,12 +204,11 @@ function LinkControl( { wrapperNode.current.ownerDocument.activeElement ); - setSettingsOpen( false ); setIsEditingLink( false ); }; const handleSelectSuggestion = ( updatedValue ) => { - onChange( { + __newOnChangeForLinkControl( onChange, setNewValue, { ...updatedValue, title: internalTextInputValue || updatedValue?.title, } ); @@ -216,16 +216,11 @@ function LinkControl( { }; const handleSubmit = () => { - if ( - currentUrlInputValue !== value?.url || - internalTextInputValue !== value?.title - ) { - onChange( { - ...value, - url: currentUrlInputValue, - title: internalTextInputValue, - } ); - } + __newOnChangeForLinkControl( onChange, setNewValue, { + ...newValue, + url: currentUrlInputValue, + title: internalTextInputValue, + } ); stopEditing(); }; @@ -240,44 +235,19 @@ function LinkControl( { } }; - const resetInternalValues = () => { - setInternalUrlInputValue( value?.url ); - setInternalTextInputValue( value?.title ); - }; - - const handleCancel = ( event ) => { - event.preventDefault(); - event.stopPropagation(); - - // Ensure that any unsubmitted input changes are reset. - resetInternalValues(); - - if ( hasLinkValue ) { - // If there is a link then exist editing mode and show preview. - stopEditing(); - } else { - // If there is no link value, then remove the link entirely. - onRemove?.(); - } - - onCancel?.(); - }; - const currentUrlInputValue = propInputValue || internalUrlInputValue; const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length; const shownUnlinkControl = - onRemove && value && ! isEditingLink && ! isCreatingPage; + onRemove && newValue && ! isEditingLink && ! isCreatingPage; - const showSettings = !! settings?.length; + const showSettingsDrawer = !! settings?.length; // Only show text control once a URL value has been committed // and it isn't just empty whitespace. // See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927. - const showTextControl = hasLinkValue && hasTextControl; - - const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage; + const showTextControl = newValue?.url?.trim()?.length > 0 && hasTextControl; return (
) } - { isEditing && ( + { ( isEditingLink || ! newValue ) && ! isCreatingPage && ( <>
+ { showTextControl && ( + + ) } + + > +
+
+
{ errorMessage && ( ) } - { value && ! isEditingLink && ! isCreatingPage && ( + { newValue && ! isEditingLink && ! isCreatingPage && ( setIsEditingLink( true ) } hasRichPreviews={ hasRichPreviews } hasUnlinkControl={ shownUnlinkControl } @@ -342,42 +334,15 @@ function LinkControl( { /> ) } - { isEditing && ( + { showSettingsDrawer && (
- { ( showSettings || showTextControl ) && ( - - ) } - -
- - -
+
) } - { renderControlBottom && renderControlBottom() }
); diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js index 0cb12f2c5904c..0110f57c1aaed 100644 --- a/packages/block-editor/src/components/link-control/settings-drawer.js +++ b/packages/block-editor/src/components/link-control/settings-drawer.js @@ -1,97 +1,45 @@ /** * WordPress dependencies */ -import { - Button, - TextControl, - __unstableMotion as motion, - __unstableAnimatePresence as AnimatePresence, -} from '@wordpress/components'; -import { settings as settingsIcon } from '@wordpress/icons'; -import { useReducedMotion, useInstanceId } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; +import { ToggleControl, VisuallyHidden } from '@wordpress/components'; -/** - * Internal dependencies - */ -import Settings from './settings'; +const noop = () => {}; -function LinkSettingsDrawer( { - settingsOpen, - setSettingsOpen, - showTextControl, - showSettings, - textInputRef, - internalTextInputValue, - setInternalTextInputValue, - handleSubmitWithEnter, +const LinkControlSettingsDrawer = ( { value, settings, - onChange, -} ) { - const prefersReducedMotion = useReducedMotion(); - const MaybeAnimatePresence = prefersReducedMotion - ? Fragment - : AnimatePresence; - const MaybeMotionDiv = prefersReducedMotion ? 'div' : motion.div; + setNewValue = noop, +} ) => { + if ( ! settings || ! settings.length ) { + return null; + } - const id = useInstanceId( LinkSettingsDrawer ); + const handleSettingChange = ( setting ) => ( newValue ) => { + setNewValue( { + ...value, + [ setting.id ]: newValue, + } ); + }; - const settingsDrawerId = `link-control-settings-drawer-${ id }`; + const theSettings = settings.map( ( setting ) => ( + + ) ); return ( - <> -