With this code you can apply custom CSS classes and Styles in the Block Editor and Frontend. just write your custom CSS classes and add those classes to the blocks you want to apply styles.
$snn_custom_css_block_editor_frontend = '
.pp1 {
color: red;
}
.pp2 {
color: blue;
}
';
function snn_custom_gutenberg_styles($editor_settings, $editor_context) {
global $snn_custom_css_block_editor_frontend; // Declare as global
$editor_settings['styles'][] = array('css' => $snn_custom_css_block_editor_frontend);
return $editor_settings;
}
add_filter('block_editor_settings_all', 'snn_custom_gutenberg_styles', 10, 2);
function snn_print_styles_in_footer() {
global $snn_custom_css_block_editor_frontend;
echo '<style>' . $snn_custom_css_block_editor_frontend . '</style>';
}
add_action('wp_footer', 'snn_print_styles_in_footer');