Related to #68018
Proposed Changes
Show a banner component to promote Link in Bio sites.
- visuals match the proposed designs #68018 (comment)
- clicking on button opens up the link-in-bio tailored flow
- new tracks even for button clicks
- promotion isn’t shown if the user already has a Link in Bio site
- promotion is dismissable
- support RTL
- automated tests
- manual tests for different screen widths and browsers
There are some things to note:
- I track banner views because we seem to do that mostly elsewhere. Let me know if that is unnecessary.
- The tracks events are minimal – do we want more props sent up?
- I matched the static Figma design quite closely. However, here are some differences:
- The size of the tiles changes according to the available width, so it won’t always look exactly like the mockup.
- I used the
Button
from @wordpress/components
, which has a height of 36px
while the mockup uses 40px
.
- The images were taken from Figma but might need their size changes. Some are
3x
while others are 2x
(or close). I still need to add RTL images also.
- I would like to use
var(...)
where possible but have used values directly from Figma for now.
I added a temp URL parameter to control the number of sites shown for testing and undo the dismiss. Just append sitecount=1
to the URL and refresh.
Example: http://calypso.localhost:3000/sites?sitecount=1
Screenshots
Testing Instructions
- Try it with one site
<live url>/sites?sitecount=1
- Try it with two sites
<live url>/sites?sitecount=2
- Try it with three sites
<live url>/sites?sitecount=3
- Try it with one or two sites with an
rtl
language like Hebrew.
- Try it with mobile
- Try it with various browser window widths from small through to large
Pre-merge Checklist
Related to #
Unfortunately, no screenshots were provided by the developer.