Code Snippet: Oxygen Seitenbreite im Gutenberg Editor

<?php
/*
Plugin Name:  MA Oxygen Gutenberg Editor Width
Description:  Set Gutenberg editor width to page width defined in Oxygen
Author:       <a href="https://www.altmann.de/">Matthias Altmann</a>
Project:      Code Snippet: Apply Oxygen page width to Gutenberg editor
Version:      1.1.1
Description:  en: https://www.altmann.de/en/blog-en/code-snippet-oxygen-page-width-in-gutenberg-editor/
              de: https://www.altmann.de/blog/code-snippet-oxygen-seitenbreite-im-gutenberg-editor/
Copyright:    © 2020-2024, Matthias Altmann

TESTED WITH:
Product		Versions
--------------------------------------------------------------------------------------------------------------
PHP 		7.4, ..., 8.1
WordPress	5.9, ..., 6.4.2, 6.4.3, 6.5, 6.5.3
Oxygen		4.0, ..., 4.8.1, 4.8.2, 4.8.3
--------------------------------------------------------------------------------------------------------------


VERSION HISTORY
Date		Version		Description
--------------------------------------------------------------------------------------------------------------
2024-05-23	1.1.1		Changes:
						- Improved page width evaluation, now including nested templates
2024-05-22	1.1.0		Changes:
						- Code redesign as class
						- Removed jQuery dependency
						- Compatibility to Oxygen 4.8.3 with changed post meta keys
2022-05-18	1.0.4		Changes:
						- Migrated JavaScript to ES6
2022-02-12				Tested with PHP 8.0, WordPress 5.9, Oxygen 4.0 beta 1
						Changes:
						- Adaptions for WP 5.9: Gutenberg editor class of post header to show width adaptions
						  (Reverted with 1.0.4, since WP now has same class again)
2021-10-03	1.0.3		Bug Fix:
						- Fixed max-width for Gutenberg full-width Group element
2021-03-21	1.0.2		Bug Fix: 
						- Only initialize if Oxygen plugin is active
                          (Thanks to Adrien Robert for reporting!)
2020-12-10	1.0.1		Bug Bixes:
						- Removed alert script (left behind by mistake!)
						- Optimized editor ready detection
						  (Thanks to Nico Weinreich for reporting and the improved script!)
2020-11-16	1.0.0		Initial Release for the Oxygen community


==============================================================================================================
Description
==============================================================================================================
Gutenberg editor has a default page width of 580 pixels (before WP 5.9) or 840px (as of WP 5.9). 
While that is fine for standard blogging websites, it's difficult to create page content without having a clue 
about the actual available page width.

This Code Snippet tries to evaluate the actual page width from Oxygen settings and changes the Gutenberg editor 
width accordingly.

Page Width Evaluation:
1) Read default page width from global Oxygen settings
2) Evaluate default post/page template's width
3) Detect specific template for this page
   - either any type of special template like front page, archive, etc.
   - or the template assigned manually to this post/page, 
   and check for template specific page width
4) If no width specified in template, also check for parent templates (nested templates)
5) Emit CSS to adapt Gutenberg editor to the max-width evaluated by the previous steps, 
   and JS to show a notice in the top bar about the width and where it is defined

Limitations:
This snippet reads the page width defined in global settings or from a specific template and applies that page 
width to the Gutenberg editor. 
The snippet DOES NOT detect any paddings, margins, sidebars etc. in the actual template that might influence 
the final available space. 
That means the width defined for the Gutenberg editor is only a better guessing of available space and sure 
not pixel perfect. Do not rely on the width of the Gutenberg editor for pixel perfect design but use it as a 
rough frame to get a better idea of the available width while editing. 

Performance:
The snippet is only called when creating a new or editing an existing post or page.
The Oxygen global settings as well as the post details have already been retrieved from the database at this 
point. The evaluation of the Oxygen template to be used will require a few other database requests, depending 
on the template nesting levels. 
There should be no noticeable performance impact: Runtime on a local test setup was around 0.02 sec.
*/

if (!class_exists('MA_OxygenGutenbergEditorWidth')) :
class MA_OxygenGutenbergEditorWidth {
	const TITLE							= 'MA Oxygen Gutenberg Editor Width';
	const SLUG							= 'ma-oxygen-gutenberg-editor-width';
	const SHRT 							= 'maogew';
	const VERSION						= '1.1.1';

	//-------------------------------------------------------------------------------------------------------------------
	function __construct(){
		add_action('wp_loaded', [$this,'init']);
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Initializes functionality if Gutenberg editor is to be shown.
	 */
	public function init(){
		if (!defined('CT_VERSION')) return;
		
		// check if on edit page
		global $pagenow;
		$editor = false;
		if ($pagenow == 'post-new.php') $editor = true;
		if (($pagenow == 'post.php') && ($_REQUEST['action']??'' == 'edit')) $editor = true;
		if (!$editor) return;
		
		// check if post type supports Gutenberg
		$post_id = isset($_REQUEST['post']) ? $_REQUEST['post'] : 0;
		$edit_with_gutenberg = true;
		if ( isset($_REQUEST['post_type']) ) {
			if ( !post_type_supports($_REQUEST['post_type'], 'editor') ) {$edit_with_gutenberg = false;}
		} else if ( $post_id > 0 ) {
			$post = get_post($post_id);
			if ( $post != null && !post_type_supports($post->post_type, 'editor') ) {$edit_with_gutenberg = false;}
		}
		if (!$edit_with_gutenberg) return;

		add_action('admin_head', [$this, 'set_gutenberg_editor_width']);
	}

	//-------------------------------------------------------------------------------------------------------------------
	public function set_gutenberg_editor_width() {
		$st = microtime(true);
		global $post;
		// exit if we don't have a post object
		if (!isset($post)) return;
		
		$post_id = get_the_id();
		$width = null; 
		$defined_by = '';
	
		// Oxygen pre or post 4.8.3?
		$meta_function_name = function_exists('oxy_get_post_meta') ? 'oxy_get_post_meta' : 'get_post_meta';

		// 1) Check Oxygen global settings for a defined page width
		$ct_global_settings = maybe_unserialize(get_option('ct_global_settings'));
		if ($ct_global_settings && is_array($ct_global_settings) && array_key_exists('max-width',$ct_global_settings)) {
			$width = $ct_global_settings['max-width'].'px';
			$defined_by = 'Oxygen Global Settings';
		}

		// 2) Get default post template
		$template = ct_get_posts_template($post_id);

		// 3a) special template for front or blog page?
		// front and blog page IDs will be automatically "translated" to teh correct language post ID by PolyLang
		$front_id = intval(get_option('page_on_front'));
		$blog_id = intval(get_option('page_for_posts'));
		if (in_array($post_id, [$front_id, $blog_id])) {
			$archives_template = ct_get_archives_template($post_id);
			if ($archives_template) $template = $archives_template;
		}


		// 3b) Check if manually assigned template
		$ct_other_template = intval(call_user_func($meta_function_name, $post_id, 'ct_other_template', true));
		if ($ct_other_template > 0) {
			// use manually assigned template
			$template = get_post($ct_other_template);
		}
		if ($ct_other_template == -1) { // -1 means "None"
			// no template, no editor width change
			return;
		}
		
		if ($template) {
			FIND_TEMPLATE:
			$template_meta = maybe_unserialize(call_user_func($meta_function_name, $template->ID, 'ct_page_settings', true));
			if ($template_meta && is_array($template_meta) && array_key_exists('max-width',$template_meta)) {
				if (!empty($template_meta['max-width'])) {
					$width = $template_meta['max-width'].'px';
					$defined_by = sprintf('template "%s"',$template->post_title);
				} else {
					// 4) any parent template?
					if ($parent_template = intval(call_user_func($meta_function_name, $template->ID, 'ct_parent_template', true))) {
						$parent_template = get_post($parent_template);
						if ($parent_template) {
							$template = $parent_template;
							goto FIND_TEMPLATE;
						}
					}
				}
			}
		}
	
		// 5) Emit CSS and JS
		if ($width) {	
			// style inspired by plugin "Editor Full Width Gutenberg" (https://wordpress.org/plugins/editor-full-width/)
			echo sprintf('<style id="%1$s-style">
				body.block-editor-page .editor-post-title__block, 
				body.block-editor-page .editor-default-block-appender, 
				body.block-editor-page :not(.wp-block) > .block-editor-block-list__block:not([data-align="full"]) {
					max-width: %2$s !important;
				}
				.block-editor__container .wp-block:not([data-align="full"] {
					max-width: %2$s;
				}
				/*code editor*/
				.edit-post-text-editor__body {
					max-width: %2$s !important;	
					margin-left: 2%%;
					margin-right: 2%%;
				}
				</style>',self::SHRT, $width);
			$shrt = self::SHRT;
			$script = <<<END_OF_SCRIPT
			<script id="{$shrt}-script">
			let blockLoadedInterval = setInterval(function () {
				let toolbars = document.getElementsByClassName('edit-post-header-toolbar');
				if (toolbars.length>0) {
					let toolbar = toolbars[0];
					let div = document.createElement('div');
					div.innerHTML = 'Editor width {$width} defined by {$defined_by}';
					toolbar.appendChild(div);
					clearInterval(blockLoadedInterval);
				}
			}, 500);
			</script>
			END_OF_SCRIPT;
			echo $script;
		}
		$et = microtime(true);
		// timing: error_log(sprintf('%s runtime: %.4f s.',self::TITLE, $et-$st));
	}
}
//===================================================================================================================
// Initialize
if (is_admin() && !wp_doing_ajax() && !wp_doing_cron() ) {
	new MA_OxygenGutenbergEditorWidth();
}
endif;