Try WordPress logo animation for preview #10896

jasmussen · 2018-10-22T12:04:52Z

This adds a WordPress logo that paints itself when you click preview.

Labelled "Try" because it still needs a few thoughts. We might need to speed up the animation because most previews are super fast and you barely see the animation.

Does it fix #7922?

mtias · 2018-10-22T12:13:40Z

+1 to speeding it up a tiny bit. This looks like a good base.

youknowriad · 2018-10-22T12:28:28Z

Can you add a CHANGELOG entry to the modified package? :)

mtias · 2018-10-22T12:41:46Z

packages/editor/src/components/post-preview-button/index.js

+					<path class="outer" d="M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36" fill="none" />
+					<path class="inner" d="M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z" fill="none" />
+				</svg>
+				<p>Generating preview...</p>


This should be translatable.

Agree, but I think that's blocked on #7725.

Related https://github.com/WordPress/gutenberg/pull/10880/files

jasmussen · 2018-10-22T12:53:24Z

Can you add a CHANGELOG entry to the modified package? :)

Things are moving so fast, I can't even keep up. Can you point me to information on how to do that, then I will?

youknowriad · 2018-10-22T12:55:44Z

@jasmussen Let me know if this helps https://github.com/WordPress/gutenberg/blob/master/CONTRIBUTING.md#maintaining-changelogs

jasmussen · 2018-10-22T12:56:55Z

I sped up the animation a bit. You can see it in https://codepen.io/joen/pen/jepZrB. Any faster and it feels stressful. It's now 1.5s instaed of 3s.

youknowriad · 2018-10-22T13:17:25Z

packages/editor/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 5.0.1 (Unreleased)
+
+- Add animated logo to preview interstitial screen.


I'd just add a title for this. Hesitating between ## New Features which means we'd probably have to pick 5.1.0 as a version of just ## Polish where we'd keep 5.0.1

jasmussen · 2018-10-22T13:20:45Z

I wouldn't call it a new feature, it's such a small thing.

jasmussen · 2018-10-22T13:21:16Z

Reminds me I probably need to add the vendor prefixes for animation manually since this isn't postcssed.

This adds a WordPress logo that paints itself when you click preview. Labelled "Try" because it still needs a few thoughts. We might need to speed up the animation because most previews are super fast and you barely see the animation.

jasmussen · 2018-10-23T07:47:39Z

Polished things up. How are we looking?

youknowriad

LGTM 👍 We can fix the i18n in the corresponding PR #10880

jasmussen · 2018-10-23T09:12:44Z

Awesome, thank you. Merging when the checks pass.

mtias · 2018-10-23T11:09:01Z

Thanks for the quick work on this one.

ocean90 · 2018-10-23T12:52:56Z

@jasmussen Looks like the changelog entry got wrong during the merge because 5.0.1 is already released.

jasmussen · 2018-10-23T13:05:20Z

Thanks @ocean90, and ack! What's the best way for me to find the latest version of these packages in the future? I was busy elsewhere when things were all packaged up and published.

ocean90 · 2018-10-23T13:20:46Z

Good question, probably in the npm directory directly: https://www.npmjs.com/package/@wordpress/editor

But I guess also when the version has already a date assigned. The conflict should have looked like this:

Do you want submit a quick PR for this? #10880 and #10861 are kinda depending on this.

jasmussen · 2018-10-23T13:53:41Z

@ocean90 sorry for the delay, was helping the toddler with her homework. Submitted #10953 which I hope addresses the issue. Let me know if not.

noisysocks · 2018-10-24T00:43:50Z

This is really pretty! 😍

* Try WordPress logo animation for preview This adds a WordPress logo that paints itself when you click preview. Labelled "Try" because it still needs a few thoughts. We might need to speed up the animation because most previews are super fast and you barely see the animation. * Clean up CSS, add vendor prefixes * Tweak the changelog

StaggerLeee · 2018-11-06T04:11:58Z

It will be one of the most popular filters to change/remove this logo. If filter will be possible.
The same as Logo visible on backend login screen.

miscs · 2018-11-21T19:28:54Z

Is a filter planned to remove/change this animation? Would be much appreciated.

noisysocks · 2018-11-21T23:30:21Z

@StaggerLeee @miscs: No filter for changing the animation is currently planned. It sounds like something we could do in a future release, though, if you'd like to open a new issue with the suggestion 🙂

StaggerLeee · 2018-11-22T04:06:40Z

I can hide it with CSS and ! declaration. Or somehow with JS.
Will not opet single one issue here. You just close it.

ducngyn · 2018-11-22T10:54:16Z

Is there a way to change the animation or remove it with a hook or something like that?
Or can I access the CSS properties without altering the Gutenberg core code?

noisysocks · 2018-11-22T21:59:19Z

I've written a proposal for a filter which would let one customise this UI in #12238.

miscs · 2018-11-23T10:32:54Z

Cool, thank you!

ducngyn · 2018-11-23T10:48:29Z

Thanks a lot!
Is there a way to work around this before the filter is released?
I can't access the .editor-post-preview-button__interstitial-message class from any css-file and !important is also not working.

StaggerLeee · 2018-11-23T14:37:02Z

Thanks @noisysocks.

jasmussen added the [Type] Enhancement A suggestion for improvement. label Oct 22, 2018

jasmussen self-assigned this Oct 22, 2018

jasmussen requested a review from a team October 22, 2018 12:04

mtias reviewed Oct 22, 2018

View reviewed changes

chrisvanpatten mentioned this pull request Oct 22, 2018

Make preview placeholder text translatable #10880

Merged

4 tasks

youknowriad reviewed Oct 22, 2018

View reviewed changes

jasmussen force-pushed the try/preview-animation branch from 65e5cec to 1436fdb Compare October 23, 2018 07:35

Try WordPress logo animation for preview

0262373

This adds a WordPress logo that paints itself when you click preview. Labelled "Try" because it still needs a few thoughts. We might need to speed up the animation because most previews are super fast and you barely see the animation.

jasmussen force-pushed the try/preview-animation branch from 1436fdb to 0262373 Compare October 23, 2018 07:37

Clean up CSS, add vendor prefixes

a5ccdae

jasmussen added this to the 4.2 milestone Oct 23, 2018

Tweak the changelog

ca3626f

youknowriad approved these changes Oct 23, 2018

View reviewed changes

jasmussen merged commit 68b454c into master Oct 23, 2018

jasmussen deleted the try/preview-animation branch October 23, 2018 09:20

youknowriad modified the milestones: 4.2, 4.1 - UI freeze Oct 24, 2018

noisysocks mentioned this pull request Nov 22, 2018

Add filter for customising the WordPress logo animation for preview #12238

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try WordPress logo animation for preview #10896

Try WordPress logo animation for preview #10896

jasmussen commented Oct 22, 2018

mtias commented Oct 22, 2018

youknowriad commented Oct 22, 2018

mtias Oct 22, 2018

jasmussen Oct 22, 2018

youknowriad Oct 22, 2018

jasmussen commented Oct 22, 2018

youknowriad commented Oct 22, 2018

jasmussen commented Oct 22, 2018

youknowriad Oct 22, 2018

jasmussen commented Oct 22, 2018

jasmussen commented Oct 22, 2018

jasmussen commented Oct 23, 2018

youknowriad left a comment

jasmussen commented Oct 23, 2018

mtias commented Oct 23, 2018

ocean90 commented Oct 23, 2018

jasmussen commented Oct 23, 2018

ocean90 commented Oct 23, 2018

jasmussen commented Oct 23, 2018

noisysocks commented Oct 24, 2018

StaggerLeee commented Nov 6, 2018 •

edited

Loading

miscs commented Nov 21, 2018

noisysocks commented Nov 21, 2018

StaggerLeee commented Nov 22, 2018 •

edited

Loading

ducngyn commented Nov 22, 2018 •

edited

Loading

noisysocks commented Nov 22, 2018

miscs commented Nov 23, 2018

ducngyn commented Nov 23, 2018

StaggerLeee commented Nov 23, 2018

		@@ -1,3 +1,7 @@
		## 5.0.1 (Unreleased)

		- Add animated logo to preview interstitial screen.

Try WordPress logo animation for preview #10896

Try WordPress logo animation for preview #10896

Conversation

jasmussen commented Oct 22, 2018

mtias commented Oct 22, 2018

youknowriad commented Oct 22, 2018

mtias Oct 22, 2018

Choose a reason for hiding this comment

jasmussen Oct 22, 2018

Choose a reason for hiding this comment

youknowriad Oct 22, 2018

Choose a reason for hiding this comment

jasmussen commented Oct 22, 2018

youknowriad commented Oct 22, 2018

jasmussen commented Oct 22, 2018

youknowriad Oct 22, 2018

Choose a reason for hiding this comment

jasmussen commented Oct 22, 2018

jasmussen commented Oct 22, 2018

jasmussen commented Oct 23, 2018

youknowriad left a comment

Choose a reason for hiding this comment

jasmussen commented Oct 23, 2018

mtias commented Oct 23, 2018

ocean90 commented Oct 23, 2018

jasmussen commented Oct 23, 2018

ocean90 commented Oct 23, 2018

jasmussen commented Oct 23, 2018

noisysocks commented Oct 24, 2018

StaggerLeee commented Nov 6, 2018 • edited Loading

miscs commented Nov 21, 2018

noisysocks commented Nov 21, 2018

StaggerLeee commented Nov 22, 2018 • edited Loading

ducngyn commented Nov 22, 2018 • edited Loading

noisysocks commented Nov 22, 2018

miscs commented Nov 23, 2018

ducngyn commented Nov 23, 2018

StaggerLeee commented Nov 23, 2018

StaggerLeee commented Nov 6, 2018 •

edited

Loading

StaggerLeee commented Nov 22, 2018 •

edited

Loading

ducngyn commented Nov 22, 2018 •

edited

Loading