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;
}
.mailpoet-personalization-tag-popover__content-button {
padding-top: 10px;
text-align: center;
}
}

View File

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

View File

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