Adjust Gutenberg component usage to minimize warnings in console

[MAILPOET-6379]
This commit is contained in:
Jan Lysý
2024-12-18 21:49:14 +01:00
committed by Aschepikov
parent 29254bc962
commit 69d1714487
3 changed files with 7 additions and 6 deletions

View File

@ -82,6 +82,7 @@
width: 400px; width: 400px;
} }
.mailpoet-personalization-tag-popover__content-button { .mailpoet-personalization-tag-popover__content-button {
padding-top: 10px;
text-align: center; text-align: center;
} }
} }

View File

@ -19,9 +19,7 @@ const PersonalizationTagsPopover = ( {
onUpdate, onUpdate,
}: PersonalizationTagsPopoverProps ) => { }: PersonalizationTagsPopoverProps ) => {
const [ isPopoverVisible, setIsPopoverVisible ] = useState( false ); const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >( const [ anchor, setAnchor ] = useState< HTMLElement | null >( null );
null
);
const [ updatedValue, setUpdatedValue ] = useState( '' ); const [ updatedValue, setUpdatedValue ] = useState( '' );
const [ originalValue, setOriginalValue ] = useState( '' ); const [ originalValue, setOriginalValue ] = useState( '' );
@ -47,7 +45,7 @@ const PersonalizationTagsPopover = ( {
); );
setOriginalValue( textContent ); setOriginalValue( textContent );
setUpdatedValue( textContent ); setUpdatedValue( textContent );
setPopoverAnchor( commentSpan ); setAnchor( commentSpan );
setIsPopoverVisible( true ); setIsPopoverVisible( true );
} }
}; };
@ -63,11 +61,11 @@ const PersonalizationTagsPopover = ( {
return ( return (
<> <>
{ isPopoverVisible && ( { isPopoverVisible && anchor && (
<Popover <Popover
position="bottom right" position="bottom right"
onClose={ () => setIsPopoverVisible( false ) } onClose={ () => setIsPopoverVisible( false ) }
anchorRef={ popoverAnchor } anchor={ anchor } // Directly use commentSpan as the anchor
className="mailpoet-personalization-tag-popover" className="mailpoet-personalization-tag-popover"
> >
<div className="mailpoet-personalization-tag-popover__content"> <div className="mailpoet-personalization-tag-popover__content">
@ -75,6 +73,7 @@ const PersonalizationTagsPopover = ( {
label={ __( 'Personalization Tag', 'mailpoet' ) } label={ __( 'Personalization Tag', 'mailpoet' ) }
value={ updatedValue } value={ updatedValue }
onChange={ ( value ) => setUpdatedValue( value ) } onChange={ ( value ) => setUpdatedValue( value ) }
__nextHasNoMarginBottom // To avoid warning about deprecation in console
/> />
<div className="mailpoet-personalization-tag-popover__content-button"> <div className="mailpoet-personalization-tag-popover__content-button">
<Button <Button

View File

@ -92,6 +92,7 @@ export function RichTextWithButton( {
label={ finalLabel } label={ finalLabel }
className={ `mailpoet-settings-panel__${ attributeName }-text` } className={ `mailpoet-settings-panel__${ attributeName }-text` }
help={ help } help={ help }
__nextHasNoMarginBottom // To avoid warning about deprecation in console
> >
<PersonalizationTagsModal <PersonalizationTagsModal
isOpened={ isModalOpened } isOpened={ isModalOpened }