New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code Quality: Improve prefix, better scope, for animations #11752

Merged
merged 5 commits into from Nov 14, 2018

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Nov 12, 2018

This PR maybe fixes #11668. At least, this is the intention. It does two things:

  • It changes the naming scheme for all animations. Instead of having a mix of underscores and dashes for word separation, it uses BEM (to the best of my ability) to add consistency and a new naming convention for all animations.
  • It adds a prefix to all animations, indicating they are for the editor.
  • It moves all keyframe animations out of the mixins file, and into the edit-post style. This is because keyframe definitions don't work well with mixins and are just duplicated.

This PR has been tested for all the animations I could find that were using the ones defined. But please give me a sanity check.

By the way I noticed the following two animations do not appear to be used:

  • editor-animation__animate-fade
  • editor-animation__move-background

Should we remove those? Or can anyone recall where they were intended to be used?

Another question, right now these animations are prefixed editor-animation. Should we find a prefix that indicates these might be used outside of the editor, in the rest of the admin, one day?

Finally — what is the risk associated with changing these animation names? Do we have any way to know if plugin developers might have used these?

@jasmussen jasmussen added this to the 4.4 milestone Nov 12, 2018

@jasmussen jasmussen self-assigned this Nov 12, 2018

@jasmussen jasmussen requested a review from WordPress/gutenberg-core Nov 12, 2018

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Nov 12, 2018

I'd personally suggest removing this file for the auto-imported files, it doesn't make sense to include in a lot of generated stylesheets. Let's make it an explicit import.

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 12, 2018

Edited PR, I don't think this will fix issue #11673.

@mixin animate_fade {
animation: animate_fade 0.1s ease-out;
@mixin editor-animation__animate-fade {

This comment has been minimized.

@youknowriad

youknowriad Nov 12, 2018

Contributor

This doesn't seem to be used, I'll just remove

animation-fill-mode: forwards;
}
@mixin move_background {
@mixin editor-animation__move-background {

This comment has been minimized.

@youknowriad

youknowriad Nov 12, 2018

Contributor

This doesn't seem to be used either, I'd consider removing too.

This comment has been minimized.

@jasmussen

jasmussen Nov 12, 2018

Contributor

There's this test for this specific animation:

	it( 'should ignore keyframes', () => {
		const callback = wrap( '.my-namespace' );
		const input = `
		@keyframes editor-animation__move-background {
			from {
				background-position: 0 0;
			}
		}`;
		const output = traverse( input, callback );

		expect( output ).toMatchSnapshot();
	} );

I agree it doesn't seem to be used, but I'm also not quite sure either what this test does or what to do with it. Any suggestions?

This comment has been minimized.

@youknowriad

youknowriad Nov 12, 2018

Contributor

you can just replace it with any animation (defined or not)

This comment has been minimized.

@youknowriad

youknowriad Nov 12, 2018

Contributor

To clarify, it's only testing that this editor styles wrapping behavior doesn't touch the animations.

}
@mixin slide_in_right {
@mixin editor-animation__slide-in-right {

This comment has been minimized.

@youknowriad

youknowriad Nov 12, 2018

Contributor

This is used only once, I'd consider moving it to the place it's used :)

}
@mixin slide_in_top {
@mixin editor-animation__slide-in-top {

This comment has been minimized.

@youknowriad

youknowriad Nov 12, 2018

Contributor

Also used once.

@mixin region_focus($speed: 0.2s) {
animation: editor_region_focus $speed ease-out;
@mixin editor-animation__region-focus($speed: 0.2s) {

This comment has been minimized.

@youknowriad

youknowriad Nov 12, 2018

Contributor

Also used once, and seem very specific to region focus, so just move it there.

to {
margin-top: 0;
}
@mixin editor-animation__rotation($speed: 1s) {

This comment has been minimized.

@youknowriad

youknowriad Nov 12, 2018

Contributor

Also used once.

@jdevalk

This comment has been minimized.

Contributor

jdevalk commented Nov 12, 2018

Looking very good, also agree with all of @youknowriad's comments, removing a lot of these would make everything smaller :)

Mostly happy to see that if you work through his comments I think we're only left with 3 @mixins. Not 100% sure how this works in Gutenberg but would this remove them from block-library/style.css entirely?

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 12, 2018

Good feedback, will address all points in a bit.

Not 100% sure how this works in Gutenberg but would this remove them from block-library/style.css entirely?

I tested reloading that specific CSS file in a separate tab to verify this worked, and yes indeed moving the keyframe rules from the mixins file removes them from the block-library/style.css file.

One note for perhaps a separate ticket — /* These comments */ are not stripped from minified CSS files, whereas // These comments are stripped. Which means there are a bunch of empty heading-specific CSS comments there, even though perhaps they shouldn't be.

jdevalk added a commit to jdevalk/gutenberg that referenced this pull request Nov 12, 2018

Make cssnano remove all comments
As referenced by @jasmussen [here](WordPress#11752 (comment)), this should fix the fact that `/*` style comments are not removed by cssnano.

youknowriad added a commit that referenced this pull request Nov 12, 2018

Make cssnano remove all comments (#11754)
* Make cssnano remove all comments

As referenced by @jasmussen [here](#11752 (comment)), this should fix the fact that `/*` style comments are not removed by cssnano.

* Linting.

jasmussen added some commits Nov 12, 2018

Code Quality: Improve prefix, better scope, for animations
This PR maybe fixes #11673, maybe fixes #11668. At least, this is the intention. It does two things:

- It changes the naming scheme for all animations. Instead of having a mix of underscores and dashes for word separation, it uses BEM (to the best of my ability) to add consistency and a new naming convention for all animations.
- It adds a prefix to all animations, indicating they are for the editor. Though perhaps we should have a more _admin_ specific prefix given these might one day be used outside the admin?
- It moves all keyframe animations out of the mixins file, and into the edit-post style. This is because keyframe definitions don't work well with mixins and are just duplicated.

This PR has been tested for all the animations I could find that were using the ones defined. But please give me a sanity check.

By the way I noticed the following two animations do not appear to be used:

- editor-animation__animate-fade
- editor-animation__move-background

Should we remove those? Or can anyone recall where they were intended to be used?
Address feedback.
This retires a few animations, and moves others that are only used once to their respective scopes.
Address comment.
Gallery related, in #11668 (comment).

@jasmussen jasmussen force-pushed the improve/style-scoping branch from a0737cb to 8f232ce Nov 13, 2018

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 13, 2018

Okay, I think I addressed everything.

@jdevalk

This comment has been minimized.

Contributor

jdevalk commented Nov 13, 2018

👍 except for the failing build ;)

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 13, 2018

Restarting, hoping it passes this time :D There's been some travis shenanigans lately.

@@ -19,6 +19,15 @@
height: 4px;
border-radius: 100%;
transform-origin: 6px 6px;
@include animate_rotation;
animation: editor-animation__rotation 1s infinite linear;

This comment has been minimized.

@youknowriad

youknowriad Nov 14, 2018

Contributor

Could we give it a name using our guidelines: components-spinner__animation ?

}
}
@keyframes editor-animation__slide-in-top {

This comment has been minimized.

@youknowriad

youknowriad Nov 14, 2018

Contributor

could this be edit-post-fullscreen-mode__slide-in-animation?

body.is-fullscreen-mode & {
top: 0;
}
}
}
@keyframes editor-animation__slide-in-right {

This comment has been minimized.

@youknowriad

youknowriad Nov 14, 2018

Contributor

This could be edit-post-layout__slide-in-animation

// These keyframes should not be part of the _animations.scss mixins file.
// Because keyframe animations can't be defined as mixins properly, they are duplicated.
// Since hey are intended only for the editor, we add them here instead.
@keyframes editor-animation__loading-fade {

This comment has been minimized.

@youknowriad

youknowriad Nov 14, 2018

Contributor

maybe more edit-post__loading-fade-animation

@mixin modal_appear() {
animation: modal-appear 0.1s ease-out;
@mixin editor-animation__modal-appear() {

This comment has been minimized.

@youknowriad

youknowriad Nov 14, 2018

Contributor

This mixin doesn't seem useful as use only once, we can move it and rename it as well?

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 14, 2018

Okay I think I got all those fixed. Final look?

@jdevalk

This comment has been minimized.

Contributor

jdevalk commented Nov 14, 2018

😍 thanks @jasmussen

}
}
@keyframes edit-post__modal-appear-animation {

This comment has been minimized.

@youknowriad

youknowriad Nov 14, 2018

Contributor

haha, almost :P This should be components-modal__appear-animation :)

"Root Package" - "last folder" __ "some name"

This comment has been minimized.

@jasmussen

jasmussen Nov 14, 2018

Contributor

Haha, it'll stick on my brain any day now! Thank you.

@youknowriad

LGTM 👍 Thanks for the updates @jasmussen Feel free to merge after the last minor comment.

@jasmussen jasmussen merged commit 88a6950 into master Nov 14, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the improve/style-scoping branch Nov 14, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Make cssnano remove all comments (WordPress#11754)
* Make cssnano remove all comments

As referenced by @jasmussen [here](WordPress#11752 (comment)), this should fix the fact that `/*` style comments are not removed by cssnano.

* Linting.

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Code Quality: Improve prefix, better scope, for animations (WordPress…
…#11752)

* Code Quality: Improve prefix, better scope, for animations

This PR maybe fixes WordPress#11673, maybe fixes WordPress#11668. At least, this is the intention. It does two things:

- It changes the naming scheme for all animations. Instead of having a mix of underscores and dashes for word separation, it uses BEM (to the best of my ability) to add consistency and a new naming convention for all animations.
- It adds a prefix to all animations, indicating they are for the editor. Though perhaps we should have a more _admin_ specific prefix given these might one day be used outside the admin?
- It moves all keyframe animations out of the mixins file, and into the edit-post style. This is because keyframe definitions don't work well with mixins and are just duplicated.

This PR has been tested for all the animations I could find that were using the ones defined. But please give me a sanity check.

By the way I noticed the following two animations do not appear to be used:

- editor-animation__animate-fade
- editor-animation__move-background

Should we remove those? Or can anyone recall where they were intended to be used?

* Address feedback.

This retires a few animations, and moves others that are only used once to their respective scopes.

* Address comment.

Gallery related, in WordPress#11668 (comment).

* Address feedback.

* Address final point.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment