georgestephanis-custom-css.php

<?php

/**
 * Plugin name: Georgestephanis Custom CSS
 */

namespace Georgestephanis\CustomCSS;

add_action( 'admin_menu', function() {
	add_theme_page(
		__( 'Theme Custom CSS' ),
		__( 'CSS' ),
		'edit_theme_options',
		'georgestephanis-custom-css',
		__NAMESPACE__ . '\admin_page'
	);
} );

add_action( 'admin_enqueue_scripts', function() {
	if ( 'appearance_page_georgestephanis-custom-css' === get_current_screen()->id ) {
		$settings = wp_enqueue_code_editor( [ 'type' => 'text/css' ] );

		// Bail if user disabled CodeMirror.
		if ( false === $settings ) {
			return;
		}

		$settings['codemirror']['readOnly'] = true;

		wp_add_inline_script(
			'code-editor',
			sprintf(
				'jQuery( function() { wp.codeEditor.initialize( "customizer-css", %1$s ); wp.codeEditor.initialize( "blockeditor-css", %1$s ); } );',
				wp_json_encode( $settings )
			)
		);
	}
});

function admin_page() {
	?>
	<div class="wrap">
		<h1 class="wp-heading-inline"><?php _e( 'Theme CSS' ); ?></h1>

		<h3><?php _e( 'Custom CSS from the Customizer (Older System)' ); ?></h3>

		<?php
		$custom_css = wp_get_custom_css();

		if ( $custom_css ) {
			printf( '<textarea id="customizer-css" disabled>%1$s</textarea>', $custom_css );
		} else {
			echo '<textarea id="customizer-css" disabled></textarea>';
		}
		?>

		<h3><?php _e( 'Custom CSS from the Full Site Editor (Newer System)' ); ?></h3>

		<?php
		$global_styles = \WP_Theme_JSON_Resolver::get_user_data();

		if ( $global_styles ) {
			printf( '<textarea id="blockeditor-css">%1$s</textarea>', $global_styles->get_stylesheet( [ 'custom-css' ] ) );
		} else {
			echo '<textarea id="blockeditor-css"></textarea>';
		}
		?>

	</div>
	<?php
}