custom css fade in for media & text box

Hi @lboogie28. I may be able to help with your issue. Are you referring to the built-in “Media & Text” block that you can insert via the editor?

If so, can you tell me which theme you are using? Or, whether it is a block or classic theme?

In general, you should be able to visit the Appearance > Customize page in your WordPress admin. You may not see this if using a block theme, but you can access it via yoursite/wp-admin/customize.php.

From the Customizer screen, you should see an Additional CSS panel. Open it to add custom CSS. To target the Media & Text block, you can use the following CSS selector:

.wp-block-media-text {
}

For the “media” part of the Media & Text block, target:

.wp-block-media-text__media {
}

For the “content” part of the Media & Text block, target:

.wp-block-media-text__content {
}

Let me know if this helps or if you need further assistance.

Hi @greenshady
Thank you so much for this! That is correct – I am referring to the Media & Text block inserted via the editor. I am using the Quadrat theme, block (not classic)

It’s the media side that I would like to fade in – I have tried both of the below separately and then together:

.wp-block-media-text {
}
.wp-block-media-text__media {
}
and nothing has happened yet. Please let me know if I have formatted this correctly/if there’s anything I need to change? Once again, thanks so much for your help with this

Are you trying to do this with a javascript or with CSS ?

Sorry, I thought you were asking where to add your custom CSS code and which selectors to target. The code I posted above will not do anything on its own. It’s more of a starting point for custom code.

Generally speaking, fade effects (there are tons of different ones) are handled with JavaScript for the best cross-browser compatibility. It’s probably possible to create some effects via CSS alone, but I’d need to see the specific effect you’re going for to know. If you have a link to an example effect, I can check it.

There are plugins, such as Editor Plus, that offer block animations like Fades. That might feel like overkill for a single effect, but I believe that plugin lets you enable/disable some features that you want or do not want.

Thanks @greenshady. I’m looking for something quite simple really, just to add a little movement to the page. How the elements fade in here for example https://www.statesofmind.org/maybe slightly faster. Thank you for the plugin in suggestion also, I will have a look at it – I had installed some others but the feature was available for galleries only, so great to hear Editor Plus works on blocks

@mrtom414 that’s a great question, it looks like javascript is the better option as the other respondent about has mentioned above re. cross-browser compatibility? very much a novice to all of this so I really appreciate the input, thank you guys

What you might want to do is add a library like Animate.css which uses classes to animate. In the advanced section of the blocks there is an section for additional classes. Add the classes from the library you need in this section.

You could just enqueue the scripts in a plugin instead of the theme. If you place it in the theme and you change theme you lose the effect. If you place it in a plugin you can change themes without effecting the post. You don’t really want to use the customizer for 2 reasons. First it been disabled in the new FSE themes and second it will limit your effect to the current theme you are using.

Just look at documentation for creating a plugin and enqueuing styles. Note: you will need to enqueue styles for both the editor and the front end. If you just enqueue the style it will show on the front end and not in the editor.

• This reply was modified 2 years, 5 months ago by mrtom414.

@greenshady Editor Plus has everything I need, thank you so much!
Final question – is the css you’ve given above something I can use on these effects to isolate the fades to media only, or is that not possible when using plugins?

I’m happy the plugin handles your needs. It’s actually one of my go-to solutions when I’m being lazy about coding my own solutions.

The CSS I provided earlier would not help when working with the plugin. I misunderstood what you were asking at first, so you can just ignore that. If you ever decide to write custom CSS and/or JavaScript, you can use the “selectors” to build your custom thing. But, they are nothing more than starting points for that sort of thing.