Load Scripts Organizer CSS/SCSS inside Gutenberg editor

You write your theme styles in a Scripts Organizer CSS or SCSS code block, and the front end looks right. The Gutenberg editor does not load those styles, so headings, buttons and your own classes look different while you edit. This snippet loads the CSS of chosen Scripts Organizer code blocks inside the Gutenberg editor, so the editor canvas matches the site.

The snippet

<?php
/**
 * Load the CSS of Scripts Organizer code blocks into the Gutenberg editor canvas.
 */

// ===== Config =====
function dpc_scorg_editor_css_block_ids(): array {
	// IDs of the CSS/SCSS code blocks to load (the number in the URL when you edit the block: post=33).
	$ids = array( 33 );
	// ===== End of config =====

	return array_filter( array_map( 'absint', (array) apply_filters( 'dpc_scorg_editor_css_block_ids', $ids ) ) );
}

/**
 * Compiled CSS files of one code block: SCSS writes {id}-header-compiled.css, CSS writes {id}-header.css.
 * The same for the footer part.
 */
function dpc_scorg_editor_css_files( int $id ): array {
	if ( ! defined( 'SCORG_UPLOADS_DIR_CSS' ) || ! defined( 'SCORG_UPLOADS_URL_CSS' ) ) {
		return array();
	}

	$files = array();
	foreach ( array( 'header', 'footer' ) as $part ) {
		foreach ( array( "{$id}-{$part}-compiled.css", "{$id}-{$part}.css" ) as $name ) {
			$path = SCORG_UPLOADS_DIR_CSS . '/' . $name;
			if ( is_readable( $path ) ) {
				$files[ $path ] = SCORG_UPLOADS_URL_CSS . '/' . $name;
				break;
			}
		}
	}

	return $files;
}

add_filter( 'block_editor_settings_all', 'dpc_scorg_editor_css' );

function dpc_scorg_editor_css( $settings ) {
	foreach ( dpc_scorg_editor_css_block_ids() as $id ) {
		foreach ( dpc_scorg_editor_css_files( $id ) as $path => $url ) {
			$css = (string) file_get_contents( $path );
			if ( function_exists( 'SCORG_process_colors' ) ) {
				$css = SCORG_process_colors( $css ); // Oxygen/Elementor/Bricks color tokens, as on the front end.
			}
			if ( '' === trim( $css ) ) {
				continue;
			}

			$settings['styles'][] = array(
				'css'     => $css,
				'baseURL' => $url, // Relative url() paths resolve next to the file.
				'source'  => 'dpc-scorg-' . $id,
			);
		}
	}

	return $settings;
}

Find the code block ID

Open the CSS or SCSS code block you want in the editor. The ID is the number in the browser address bar, for example post.php?post=33&action=edit means 33. Put that number in $ids; add more IDs separated by commas, such as array( 33, 48 ).

Scripts Organizer saves each block’s code as a file in wp-content/uploads/scripts-organizer/css/. An SCSS block is compiled to 33-header-compiled.css, a plain CSS block is saved as 33-header.css, and the footer part gets the same names with footer. The snippet looks for those files, prefers the compiled one, and skips IDs without a file.

How it works

block_editor_settings_all holds the styles the editor applies to its canvas, the same list add_editor_style() and theme.json fill. The snippet adds the content of each file there.
The editor scopes these styles to the content area, so your h1 or .button rules style the post you edit and not the WordPress admin around it.
baseURL makes relative paths such as url(img/bg.png) resolve next to the CSS file, as they do on the front end.
If you use Oxygen, Elementor or Bricks color tokens in Scripts Organizer, the code runs them through Scripts Organizer’s own color function, so the editor gets the same values as the front end.
The older version of this post hard-coded block 118 while its text said 33, used generic function names, and passed a URL to add_editor_style(). For a URL WordPress downloads the file over HTTP on every editor load, which fails on many local and protected sites.

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Everywhere, tick PHP under Script location, paste the code into the PHP editor, set your block IDs and publish. Leave Action/Hook empty.

Keep your CSS/SCSS code block as it is; this is a second, separate code block that only reads its file. The editor settings are built in wp-admin when the post or site editor loads; Everywhere covers that, while Conditions only runs on the front end.

Customise it

Add block IDs from another snippet with the dpc_scorg_editor_css_block_ids filter.
Load other stylesheets into the editor in a plugin or theme: see CSS In Gutenberg editor.

Gotchas

Styles that depend on the front-end page structure, such as body.home .hero, do not match inside the editor, which has its own wrapper.
After you change the CSS/SCSS block, reload the editor to see the new styles.
Classic editor screens and the Customizer are not affected.

In the Scripts Organizer library Import it with one click from Scripts Organizer.