Iterations on the welcome guide #21847
Conversation
enriquesanchez
requested review from
ajitbohra,
chrisvanpatten,
jorgefilipecosta and
youknowriad
as code owners
|
Size Change: +264 kB (23%) 🚨 Total Size: 1.11 MB
ℹ️ View Unchanged
|
|
Here's the current state of this PR:
There are some issues that I'm still working through:
|
|
@mapk @pablohoneyhoney @mtias I'd appreciate it if you could please give this PR a test and let me know what you think about the issues I mentioned in the comment above. |
Hey @enriquesanchez, I created 9e6d4e8 which deprecates the Guide component's My commit just modifies the markup and does not implement any of the necessary CSS changes. (I'll leave that up to you! 😛) If you'd like to add my commit to your branch and play with it, you can run: |
|
Thank you @noisysocks! |
|
Here's an update after the lastest round of changes:
|
|
@ballio2000 These look great! I think we can move forward and generate the gif files. |
|
@enriquesanchez @mtias Please find the optimized GIFs attached. They're all set to play once and stop. Let me know if you all need anything else. |
|
I've been trying to implement the ... we can't make use of the I found this other technique that uses the The above includes both media elements, and the ... but that won't work. As far as I can tell, this is not going to work because I was able to get this technique to work on a Codepen, but only if I use a URL of the SVG. It's actually really cool:
@noisysocks What do you think of this technique? Would we be able to use the URL of the SVG instead? If so, where would we store the images? We'd also need a place to store the animated GIFs. |
|
cc @jasmussen and @kjellr for some |
|
To include the prefers-reduced-motion mix-in you can simply do this: ☝️ that's just a code sample, the mixin is the key bit. Include that after the animation you add, and it should work. If it is to reduce an animation instead, include that: |
|
Thanks for the feedback @jasmussen! I'm still a bit confused, how is the mixin supposed to swap the image file? We have an animated GIF and want to change it for a static SVG. The tricky part is that these images are not declared as CSS background properties, they are declared inline. This is why I was looking at using the motion query in the |
|
Oh my mistake, the mixin won't help you there. Apologies. You'll want to go straight to the prefers-reduced-motion query and write conditional css that hides the gif and shows the svg inside the query. There's some code here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion Let me know if that helps. I'm afk for the rest of the day but if you don't get it working you can leave a note and I'll whip something up tomorrow. |
Thank you @jasmussen, that's a great idea. @noisysocks I don't suppose we can do something like: ...and then conditionally hide/show either of those images based on the motion query? I'm assuming because I just tried it and got some BABEL failures. Is there any other way we could accomplish this? |
|
Your snippet looks good except that you need to wrap the two images with export const CanvasImage = ( props ) => (
<>
<img
className="edit-post-welcome-guide__image__01"
alt=""
src="https://enriquesanchez.mx/illustration.gif"
{ ...props }
/>
<img
className="edit-post-welcome-guide__image__01alt"
alt=""
src="data:image/svg+xml,%3Csvg fill='none' height='240' viewBox='0 0 312 240' width='312' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0h312v240h-312z' fill='%2300a0d2'/%3E%3Cpath d='m48 32c0-1.1046.8954-2 2-2h212c1.105 0 2 .8954 2 2v208h-216z' fill='%23fff'/%3E%3Cpath d='m60 38h191.455v34h-191.455z' fill='%23ddd'/%3E%3Cpath d='m151 49v11l5-4.125 5 4.125v-11h-5z' fill='%23000' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='m48 80h216v74h-216z' fill='%23e3e3e3'/%3E%3Crect height='16.5' rx='1.53571' stroke='%23000' stroke-width='1.5' width='16.5' x='147.75' y='108.75'/%3E%3Cpath d='m154 120v-6l5 3z' fill='%23000'/%3E%3Cpath d='m60 163h91.4727v49h-91.4727z' fill='%23ddd'/%3E%3Cpath d='m159.982 163h91.4727v49h-91.4727z' fill='%23ddd'/%3E%3Cg stroke='%23000' stroke-width='1.5'%3E%3Crect height='16.5' rx='1.25' width='16.5' x='97.75' y='179.75'/%3E%3Cpath d='m98 192 4.571-3.333 3.429 2.222 4-3.889 4 3.889' stroke-linejoin='round'/%3E%3Cpath d='m208.917 196v-15.111'/%3E%3Cpath d='m204.472 196v-15.111'/%3E%3Cpath d='m212.333 180.75h-8.889'/%3E%3Cpath d='m203.139 184.889v4.071c-1.928-.353-3.389-2.041-3.389-4.071s1.461-3.718 3.389-4.071z' fill='%23000'/%3E%3C/g%3E%3Cpath d='m60 220h191v20h-191z' fill='%23ddd'/%3E%3C/svg%3E"
{ ...props }
/>
</>
);We shouldn't use I suspect that all of these inline |
|
Thanks for the feedback @noisysocks!
Correct, I was just using that external URL temporarily to test, will make sure I update it.
Right, I was assuming I'll put the animated GIF files in |
|
I added the animated GIFs as data URI and all seems to work 👍 This is ready to be tested. If you're on a Mac, you can test the On Windows 10, go to Settings, select Ease of Access, select Display, select Show animations in Windows. When no preference has been set, you should see the animated GIFs play once (no loop). If you set your display to reduced motion, then you should not see the animated GIF's and a static illustration should appear instead. |
Yes, I think moving every SVG and GIF image to |
Co-authored-by: Robert Anderson <[email protected]>
Closes #19209, still WIP.
This PR updates the Welcome Guide following the iterations proposed on #19209. It updates the layout.
This PR can be tested on gutenberg.run/21847