Infotip: Overlay controls tab - colors, offset and placement#55
Infotip: Overlay controls tab - colors, offset and placement#55
Conversation
Preview via Cloudflare R2 Storage⚡️WordPress Playground Preview I will update this comment with the latest preview links as you push more changes to this PR. Note The preview sites are created using WordPress Playground. You can add content, edit settings, and test the pull request as you would on a real site, but please note that changes are not saved between sessions. |
nagpai
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR adds an "Overlay" tab to the infotip UI to allow users to adjust overlay colors, placement, and offset. Key changes include the addition of new overlay controls and UI elements in inline-ui.js, updates to attribute mappings in index.js, style adjustments in editor.scss, and modifications to the web component’s positioning logic in infotip-web-component.js.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/infotip/inline-ui.js | Added OverlayTabContent with overlay offset, placement, and color controls |
| src/infotip/index.js | Updated attribute mappings to support overlay-related properties |
| src/infotip/editor.scss | Updated styles to include overlay tab labels and color settings |
| assets/infotip/infotip-web-component.js | Adjusted floatingUI configuration and arrow positioning to incorporate overlay attributes |
Comments suppressed due to low confidence (1)
src/infotip/inline-ui.js:173
- Using the logical OR operator here will default valuing to 6 even when a valid offset of 0 is provided. Consider replacing '||' with the nullish coalescing operator (??) to explicitly handle undefined or null values.
value={ activeAttributes.offset || 6 }
src/infotip/inline-ui.js
Outdated
| className="overlay-tab-label" | ||
| style={ { alignSelf: 'flex-start' } } | ||
| > | ||
| { __( 'Colors', 'blablablocks-formats' ) } |
There was a problem hiding this comment.
@nagpai Just a small tweak maybe we could go with color instead of colors to keep it in line with the core naming since core uses color 😁.
There was a problem hiding this comment.
@nagpai lets align this with core 💯
To follow we are preaching with our blablablocks "Close To Core"
There was a problem hiding this comment.
Well caught! I will change that :)
Summary
Add an "Overlay" tab to change the following
Related Issue
Closes #52
Testing instructions
Overlaytab and adjust various settings - Text and background color, Offset and placement.