Base Styles: Extract long-content-fade to its own file so it can be imported and reused.

[vykes-mac]

What?

Extract the long-content-fade mixin to it's own file.

Why?

So that it can be easily reused by importing when needed. Whenever we need to use it we don't have to include the other mixins in the _mixins.scss which might cause collision in other codebases.

How?

I'm moving the long-content-fade mixin from the _mixins.scss file into it's own file so it can be imported and reused easily.

Testing Instructions

1. Checkout his branch to your local repo
2. Verify _long-content-fade.scss can be imported without build errors.
3. In editor add a search block and remove buttons and labels. Preview the post:
   - in html remove search block .wp-block-search__inside-wrapper
   - add class

.search-component__input-fade {
	display: flex;
	align-items: center;
	border-radius: 0;
	flex: 1 1 auto;
	height: 100%;
	position: relative;
	&::before {
		@include long-content-fade( $direction: right, $size: 70px, $z-index: 2, $color: #fff, $edge: 1px );
		border-radius: inherit;
	}
}

5. Verify the long-content-fade is still applied as shown below:
   
   Notice fading edges where the text overflows.

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @vykes-mac! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[danielbachhuber]

Looks great, @vykes-mac ! Thanks for the detailed description 😊

[github-actions]

Congratulations on your first merged pull request, @vykes-mac! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[jeffpaul]

@vykes-mac checking back in to see if you're able to confirm your username on WordPress.org so that we can properly credit you within the WordPress 6.2 release later this month?

[vykes-mac]

Hi @jeffpaul my username on wordress.org is vykesmac.

[jeffpaul]

@vykes-mac wonderful, thank you! If you follow the steps in #46485 (comment), then next time this will happen automatically and I won't have to chase down this thread to remember/find your WordPress.org account... thanks!