Try: Remove opacity animation on canvas. #32266
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jasmussen
added
the
General Interface
|
Followup to #30802. |
|
Size Change: -646 B (0%) Total Size: 1.86 MB
ℹ️ View Unchanged
|
ellatrix
reviewed
May 27, 2021
| @@ -220,8 +220,6 @@ export default function VisualEditor( { styles } ) { | |||
| <AnimatePresence> | |||
| <motion.div | |||
There was a problem hiding this comment.
Could you also remove this div and AnimatePresence?
There was a problem hiding this comment.
Aren't they needed for the canvas to be able to animate when you shift viewports or go into template editing mode? This is the full context:
<AnimatePresence>
<motion.div
key={ isTemplateMode ? 'template' : 'post' }
>
There was a problem hiding this comment.
You removed the animation for that motion.div, so it won't do anything anymore.
ellatrix
approved these changes
May 27, 2021
|
Also worth noting that we should do some performance improvements on load. E.g. prioritise rendering the blocks above the fold. See #32237 to mark the start of an effort to improve loading performance. |
I don't necessarily disagree or have a strong opinion. But I'd like to keep this PR smallish, and just focus on the opacity rather than removing any divs. They should be removed if they are now unused, of course — but in reading the code context, they still appear needed. Aren't they? |
Right, both of those components are now no longer needed. :) |
|
I removed the various wrappers, and in my testing the sweet viewport changing animation is still there. I'd appreciate a sanity check. To be clear, I think great animation is key to ensuring a fluid and excellent experience, so I appreciate the original intent of this one, and would encourage further exploration. It was just this particular opacity that, upon testing it for a few weeks, didn't feel just right. |
|
The change looks good to me! |
|
Thanks as always. |
youknowriad
reviewed
May 28, 2021
| @@ -217,36 +217,28 @@ export default function VisualEditor( { styles } ) { | |||
| layout={ defaultLayout } | |||
| /> | |||
| ) } | |||
| <AnimatePresence> | |||
| <motion.div | |||
There was a problem hiding this comment.
I wonder if we had style targeting that div, specifically something about making it full height
There was a problem hiding this comment.
I'm not sure what the best way is to search for this. The wrapping container, .edit-post-visual-editor__content-area, only appears once, and does not appear to target any child divs.
It worked well in my testing, but I'll keep an eye on this and follow up on anything that needs it!
youknowriad
added
Backport to WP 6.7 Beta/RC
youknowriad
pushed a commit
that referenced
this pull request
May 31, 2021
* Try: Remove opacity animation on canvas. * Remove divs.
5 tasks
nylen
pushed a commit
to nylen/wordpress-develop-svn
that referenced
this pull request
Jun 1, 2021
This includes the following fixes: - Generate babel polyfill dynamically WordPress/gutenberg#31279 - Improve the List View component WordPress/gutenberg#31290 WordPress/gutenberg#32063 - Template mode: - Fix embed dimensions WordPress/gutenberg#32057 - Update the welcome guide WordPress/gutenberg#32055 WordPress/gutenberg#32026 - Don’t display the notice at the same time as the welcome guide WordPress/gutenberg#32076 - Remove MetaBoxes WordPress/gutenberg#32315 - Update the title area WordPress/gutenberg#32037 - Widgets Screen: - Fix unsaved changes WordPress/gutenberg#31757 - Fix toolbar alignment WordPress/gutenberg#31991 - Fix block toolbar position after scroll WordPress/gutenberg#32212 - Fix the visible widget area header WordPress/gutenberg#32262 - Fix legacy widgets preview WordPress/gutenberg#32260 - - Block Widgets in the customizer: - Fix customizer title overlapping block toolbar WordPress/gutenberg#32140 - Fix styling issues WordPress/gutenberg#32072 - Fix escape key events WordPress/gutenberg#32175 - Add preferences menu group label WordPress/gutenberg#32259 - Fix creating and replacing legacy widgets WordPress/gutenberg#32005 - Fix the welcome guide’s image WordPress/gutenberg#32264 WordPress/gutenberg#32302 - Fix Cover to Image transform duotone error WordPress/gutenberg#32006 - Remove filter_var usage from blocks WordPress/gutenberg#32046 - Fix image width for aligned Post Featured Image block WordPress/gutenberg#32070 - Prevent excessive Image block re-rendering WordPress/gutenberg#32102 - Remove gutenberg domain from core blocks WordPress/gutenberg#32152 - Use the block editor context class for the the different settings filters WordPress/gutenberg#32159 - Fix Latest Posts block grid view WordPress/gutenberg#32160 - Fix preset classes generation per block WordPress/gutenberg#32190 - Fix logic to enable custom colors and gradients WordPress/gutenberg#32200 - Update the Site Logo logic to use a dedicated site option WordPress/gutenberg#32229 - Limit the Latest Posts block’s featured image width WordPress/gutenberg#32245 - Remove opacity animation in the canvas. WordPress/gutenberg#32266 - Make the focus style valid CSS WordPress/gutenberg#32305 - Fix theme.json styles for the core/list block WordPress/gutenberg#32343 - Fix PHP notice when calling render_block WordPress/gutenberg#32135 Props nosolosw, noisysocks. See #52991. git-svn-id: https://develop.svn.wordpress.org/trunk@51051 602fd350-edb4-49c9-b593-d223f7449a82
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jun 1, 2021
This includes the following fixes: - Generate babel polyfill dynamically WordPress/gutenberg#31279 - Improve the List View component WordPress/gutenberg#31290 WordPress/gutenberg#32063 - Template mode: - Fix embed dimensions WordPress/gutenberg#32057 - Update the welcome guide WordPress/gutenberg#32055 WordPress/gutenberg#32026 - Don’t display the notice at the same time as the welcome guide WordPress/gutenberg#32076 - Remove MetaBoxes WordPress/gutenberg#32315 - Update the title area WordPress/gutenberg#32037 - Widgets Screen: - Fix unsaved changes WordPress/gutenberg#31757 - Fix toolbar alignment WordPress/gutenberg#31991 - Fix block toolbar position after scroll WordPress/gutenberg#32212 - Fix the visible widget area header WordPress/gutenberg#32262 - Fix legacy widgets preview WordPress/gutenberg#32260 - - Block Widgets in the customizer: - Fix customizer title overlapping block toolbar WordPress/gutenberg#32140 - Fix styling issues WordPress/gutenberg#32072 - Fix escape key events WordPress/gutenberg#32175 - Add preferences menu group label WordPress/gutenberg#32259 - Fix creating and replacing legacy widgets WordPress/gutenberg#32005 - Fix the welcome guide’s image WordPress/gutenberg#32264 WordPress/gutenberg#32302 - Fix Cover to Image transform duotone error WordPress/gutenberg#32006 - Remove filter_var usage from blocks WordPress/gutenberg#32046 - Fix image width for aligned Post Featured Image block WordPress/gutenberg#32070 - Prevent excessive Image block re-rendering WordPress/gutenberg#32102 - Remove gutenberg domain from core blocks WordPress/gutenberg#32152 - Use the block editor context class for the the different settings filters WordPress/gutenberg#32159 - Fix Latest Posts block grid view WordPress/gutenberg#32160 - Fix preset classes generation per block WordPress/gutenberg#32190 - Fix logic to enable custom colors and gradients WordPress/gutenberg#32200 - Update the Site Logo logic to use a dedicated site option WordPress/gutenberg#32229 - Limit the Latest Posts block’s featured image width WordPress/gutenberg#32245 - Remove opacity animation in the canvas. WordPress/gutenberg#32266 - Make the focus style valid CSS WordPress/gutenberg#32305 - Fix theme.json styles for the core/list block WordPress/gutenberg#32343 - Fix PHP notice when calling render_block WordPress/gutenberg#32135 Props nosolosw, noisysocks. See #52991. git-svn-id: https://develop.svn.wordpress.org/trunk@51051 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jun 1, 2021
This includes the following fixes: - Generate babel polyfill dynamically WordPress/gutenberg#31279 - Improve the List View component WordPress/gutenberg#31290 WordPress/gutenberg#32063 - Template mode: - Fix embed dimensions WordPress/gutenberg#32057 - Update the welcome guide WordPress/gutenberg#32055 WordPress/gutenberg#32026 - Don’t display the notice at the same time as the welcome guide WordPress/gutenberg#32076 - Remove MetaBoxes WordPress/gutenberg#32315 - Update the title area WordPress/gutenberg#32037 - Widgets Screen: - Fix unsaved changes WordPress/gutenberg#31757 - Fix toolbar alignment WordPress/gutenberg#31991 - Fix block toolbar position after scroll WordPress/gutenberg#32212 - Fix the visible widget area header WordPress/gutenberg#32262 - Fix legacy widgets preview WordPress/gutenberg#32260 - - Block Widgets in the customizer: - Fix customizer title overlapping block toolbar WordPress/gutenberg#32140 - Fix styling issues WordPress/gutenberg#32072 - Fix escape key events WordPress/gutenberg#32175 - Add preferences menu group label WordPress/gutenberg#32259 - Fix creating and replacing legacy widgets WordPress/gutenberg#32005 - Fix the welcome guide’s image WordPress/gutenberg#32264 WordPress/gutenberg#32302 - Fix Cover to Image transform duotone error WordPress/gutenberg#32006 - Remove filter_var usage from blocks WordPress/gutenberg#32046 - Fix image width for aligned Post Featured Image block WordPress/gutenberg#32070 - Prevent excessive Image block re-rendering WordPress/gutenberg#32102 - Remove gutenberg domain from core blocks WordPress/gutenberg#32152 - Use the block editor context class for the the different settings filters WordPress/gutenberg#32159 - Fix Latest Posts block grid view WordPress/gutenberg#32160 - Fix preset classes generation per block WordPress/gutenberg#32190 - Fix logic to enable custom colors and gradients WordPress/gutenberg#32200 - Update the Site Logo logic to use a dedicated site option WordPress/gutenberg#32229 - Limit the Latest Posts block’s featured image width WordPress/gutenberg#32245 - Remove opacity animation in the canvas. WordPress/gutenberg#32266 - Make the focus style valid CSS WordPress/gutenberg#32305 - Fix theme.json styles for the core/list block WordPress/gutenberg#32343 - Fix PHP notice when calling render_block WordPress/gutenberg#32135 Props nosolosw, noisysocks. See #52991. Built from https://develop.svn.wordpress.org/trunk@51051 git-svn-id: http://core.svn.wordpress.org/trunk@50660 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott
pushed a commit
to gMagicScott/core.wordpress-mirror
that referenced
this pull request
Jun 1, 2021
This includes the following fixes: - Generate babel polyfill dynamically WordPress/gutenberg#31279 - Improve the List View component WordPress/gutenberg#31290 WordPress/gutenberg#32063 - Template mode: - Fix embed dimensions WordPress/gutenberg#32057 - Update the welcome guide WordPress/gutenberg#32055 WordPress/gutenberg#32026 - Don’t display the notice at the same time as the welcome guide WordPress/gutenberg#32076 - Remove MetaBoxes WordPress/gutenberg#32315 - Update the title area WordPress/gutenberg#32037 - Widgets Screen: - Fix unsaved changes WordPress/gutenberg#31757 - Fix toolbar alignment WordPress/gutenberg#31991 - Fix block toolbar position after scroll WordPress/gutenberg#32212 - Fix the visible widget area header WordPress/gutenberg#32262 - Fix legacy widgets preview WordPress/gutenberg#32260 - - Block Widgets in the customizer: - Fix customizer title overlapping block toolbar WordPress/gutenberg#32140 - Fix styling issues WordPress/gutenberg#32072 - Fix escape key events WordPress/gutenberg#32175 - Add preferences menu group label WordPress/gutenberg#32259 - Fix creating and replacing legacy widgets WordPress/gutenberg#32005 - Fix the welcome guide’s image WordPress/gutenberg#32264 WordPress/gutenberg#32302 - Fix Cover to Image transform duotone error WordPress/gutenberg#32006 - Remove filter_var usage from blocks WordPress/gutenberg#32046 - Fix image width for aligned Post Featured Image block WordPress/gutenberg#32070 - Prevent excessive Image block re-rendering WordPress/gutenberg#32102 - Remove gutenberg domain from core blocks WordPress/gutenberg#32152 - Use the block editor context class for the the different settings filters WordPress/gutenberg#32159 - Fix Latest Posts block grid view WordPress/gutenberg#32160 - Fix preset classes generation per block WordPress/gutenberg#32190 - Fix logic to enable custom colors and gradients WordPress/gutenberg#32200 - Update the Site Logo logic to use a dedicated site option WordPress/gutenberg#32229 - Limit the Latest Posts block’s featured image width WordPress/gutenberg#32245 - Remove opacity animation in the canvas. WordPress/gutenberg#32266 - Make the focus style valid CSS WordPress/gutenberg#32305 - Fix theme.json styles for the core/list block WordPress/gutenberg#32343 - Fix PHP notice when calling render_block WordPress/gutenberg#32135 Props nosolosw, noisysocks. See #52991. Built from https://develop.svn.wordpress.org/trunk@51051 git-svn-id: https://core.svn.wordpress.org/trunk@50660 1a063a9b-81f0-0310-95a4-ce76da25c4cd
F-Wilke
pushed a commit
to FiliagoDev/WordPress
that referenced
this pull request
Jul 31, 2021
This includes the following fixes: - Generate babel polyfill dynamically WordPress/gutenberg#31279 - Improve the List View component WordPress/gutenberg#31290 WordPress/gutenberg#32063 - Template mode: - Fix embed dimensions WordPress/gutenberg#32057 - Update the welcome guide WordPress/gutenberg#32055 WordPress/gutenberg#32026 - Don’t display the notice at the same time as the welcome guide WordPress/gutenberg#32076 - Remove MetaBoxes WordPress/gutenberg#32315 - Update the title area WordPress/gutenberg#32037 - Widgets Screen: - Fix unsaved changes WordPress/gutenberg#31757 - Fix toolbar alignment WordPress/gutenberg#31991 - Fix block toolbar position after scroll WordPress/gutenberg#32212 - Fix the visible widget area header WordPress/gutenberg#32262 - Fix legacy widgets preview WordPress/gutenberg#32260 - - Block Widgets in the customizer: - Fix customizer title overlapping block toolbar WordPress/gutenberg#32140 - Fix styling issues WordPress/gutenberg#32072 - Fix escape key events WordPress/gutenberg#32175 - Add preferences menu group label WordPress/gutenberg#32259 - Fix creating and replacing legacy widgets WordPress/gutenberg#32005 - Fix the welcome guide’s image WordPress/gutenberg#32264 WordPress/gutenberg#32302 - Fix Cover to Image transform duotone error WordPress/gutenberg#32006 - Remove filter_var usage from blocks WordPress/gutenberg#32046 - Fix image width for aligned Post Featured Image block WordPress/gutenberg#32070 - Prevent excessive Image block re-rendering WordPress/gutenberg#32102 - Remove gutenberg domain from core blocks WordPress/gutenberg#32152 - Use the block editor context class for the the different settings filters WordPress/gutenberg#32159 - Fix Latest Posts block grid view WordPress/gutenberg#32160 - Fix preset classes generation per block WordPress/gutenberg#32190 - Fix logic to enable custom colors and gradients WordPress/gutenberg#32200 - Update the Site Logo logic to use a dedicated site option WordPress/gutenberg#32229 - Limit the Latest Posts block’s featured image width WordPress/gutenberg#32245 - Remove opacity animation in the canvas. WordPress/gutenberg#32266 - Make the focus style valid CSS WordPress/gutenberg#32305 - Fix theme.json styles for the core/list block WordPress/gutenberg#32343 - Fix PHP notice when calling render_block WordPress/gutenberg#32135 Props nosolosw, noisysocks. See #52991. Built from https://develop.svn.wordpress.org/trunk@51051 git-svn-id: http://core.svn.wordpress.org/trunk@50660 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
The animation that's added to the canvas when switching viewport size is great:
It's smooth, snappy, and just wonderful.
However there's also an opacity fade-in when the page initially loads; I'm less a fan of that:
Here's how it looks on a very long document for me:
before.mov
This PR removes that opacity, and it immediately feels a bit snappier to me:
after.mov
How has this been tested?
Check out the PR, then reload a long document in the post editor.
Checklist:
*.native.jsfiles for terms that need renaming or removal).