Adjust Gutenberg component usage to minimize warnings in console
[MAILPOET-6379]
This commit is contained in:
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
@ -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 }
|
||||||
|
Reference in New Issue
Block a user