Sun. Sep 24th, 2023

Today, one of my clients encountered a strange issue while editing a Woocommerce product in WordPress. He complained that the product description is all empty while editing a product from the WP admin panel. On further investigation, I found out that the text is in the editor but appears in white and hence is not visible unless you use dark mode.

When checking the source code from the Chrome developer panel I noticed the following code:

.js .tmce-active .wp-editor-area {
color: #fff;
}

Clearly, one of the plugins in the site was overwriting the CSS code for the editor area text color. To fix the issue, I just had to add a CSS code to the child theme functions.php that would add the required CSS code in the admin area of the site you could do this using a WordPress hook:

add_action('admin_head', 'wpbred_fix_editor_white_text_issue');
/**
 * WordPress Editor text color issue
 * Developer: https://www.wpbred.com team
 *
 * @return void
 */

function wpbred_fix_editor_white_text_issue() {
	echo '<style>
		.js .tmce-active .wp-editor-area {
			color: #000!important;
		}
	} 
	</style>';
}

By Support

Leave a Reply

%d bloggers like this: