Image text hovers have wrong styles

[Olekrut]

Description

Image text hovers have wrong styles

Step-by-step reproduction instructions

1. add text hover to image
2. check alignment and bottom-gap
3. compare frontend and backend

Screenshots, screen recording, code snippet

https://jam.dev/c/52f29ff3-b170-452b-9aa7-56193e3364a8

URL and/or Code editor

No response

How to fix it

No response

Other information

No response

[dosubot[bot]]

Hey there, @Olekrut! Great to see you diving into another adventure with us. How’s everything going on your end?

Based on the information provided, it seems like the issue you're experiencing with the image text hovers might be due to a lack of specific handling for 'text' hover types in the getImageHoverPreviewObject function. This function is responsible for generating the hover styles based on the provided properties (props), but it appears that it does not specifically handle the case for 'text' hover types beyond the initial check that includes it with transitionDurationEffects. This could lead to a lack of specific styling or transformations applied to text hovers, causing discrepancies between the frontend and backend representations.

To address this issue, additional logic should be added to the getImageHoverPreviewObject function to handle 'text' hover types explicitly. This would involve defining the desired styles and transformations for text hovers to ensure consistency between the frontend and backend visualizations.

I found some similar issues in the maxi-blocks repository that might be helpful:

1. Weird hover for text on backend which was last updated on November 09, 2023
2. Hover on blocks which was last updated on September 15, 2023
3. Hover effect preview on the backend doesn't work which was last updated on September 15, 2023

These issues were resolved by adding or modifying the code related to hover effects. You might find the discussions and solutions in these issues helpful for understanding and resolving your current issue.

Please note that the exact code in the getImageHoverPreviewObject function that handles the 'text' hover types is not present in the provided context. The context contains the implementation of a React component named HoverEffectControl which deals with hover effect settings for an image block, including settings for 'text' hover types, but does not include a function named getImageHoverPreviewObject.

If you need further assistance, please provide more details about the issue, such as the exact steps to reproduce the issue, any error messages you're seeing, and the specific version of MaxiBlocks you're using. This will help me provide a more accurate and helpful response.

Sources

• Weird hover for text on backend
• Hover on blocks
• Hover effect preview on the backend doesn't work
• src/blocks/image-maxi/styles.js
• src/blocks/image-maxi/components/hover-effect-control/index.js

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[elzadj]

https://github.com/maxi-blocks/maxi-blocks/issues/5694