Code Snippet: Oxygen Page Width in Gutenberg Editor

<?php
/*
Project: 		Code Snippet: Apply Oxygen page width to Gutenberg editor
Version:		1.0.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/
Author:			Matthias Altmann (https://www.altmann.de/)
Copyright:		© 2020, Matthias Altmann


==============================================================================================================
Description
==============================================================================================================
Gutenberg editor has a default page width of 580 pixels. 
While that is fine for standard blogging websites, it's difficult to create page content without having a clue 
of 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 global page width from global Oxygen settings
2) Detect specific template for this page
   - either any type of special template like front page, archive, etc.
   - or the template assigned manually to this page, 
   and check for template specific page width
3) Emit some CSS to adapt Gutenberg editor to the max-width evaluated by the previous steps.

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 page or post.
The Oxygen global settings as well as the post details have already been retrieved from the database at this 
point. The only details we still have to read from the database is the metadata for the page specific template.
There should be no noticeable performance impact.

Version History:
Date		Version		Description
--------------------------------------------------------------------------------------------------------------
2020-11-16	1.0.0		Initial Release for the Oxygen community
2020-12-10	1.0.1		Bug Bixes:
						- Removed alert script (left behind by mistake!) and optimized editor ready detection
						  (Thanks to Nico Weinreich for reporting and the improved script!)
*/

add_action('admin_head-post.php', 'maltmann_oxygen_gutenberg_editor_width');
add_action('admin_head-post-new.php', 'maltmann_oxygen_gutenberg_editor_width');


function maltmann_oxygen_gutenberg_editor_width() {
	global $post;
	// exit if we don't have a post object
	if (!isset($post)) return;
	
	$width = null; 

	// 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';
	}

	$post_id = null;
	$template = null;

	// get archive template
	if ( is_archive() || is_search() || is_404() || is_home() || is_front_page() ) {
		if ( is_front_page() ) {
			$post_id 	= get_option('page_on_front');
		} else if ( is_home() ) {
			$post_id 	= get_option('page_for_posts');
		} else  {
			$template 	= ct_get_archives_template();
		}
	} 
	
	if ($post_id || (!$template)) {
		
		if (!$post_id) 
			$post_id = $post->ID;

		// check post specific settings
		$ct_other_template = get_post_meta($post_id, 'ct_other_template', true );
		
		if (!empty($ct_other_template) && $ct_other_template > 0) { // specific template
			// try getting specific template
			$template = get_post($ct_other_template);
		} elseif ($ct_other_template != -1) { // try getting default template if not explicitly set to not use any template at all
			if (	intval($post_id) == intval(get_option('page_on_front')) 
				|| 	intval($post_id) == intval(get_option('page_for_posts'))) {
				$template = ct_get_archives_template( $post_id );

				if(!$template) {  // if not template is set to apply to front page or blog posts page, then use the generic page template, as these are pages
					$template = ct_get_posts_template( $post_id );
				}
			} else {
				$template = ct_get_posts_template( $post_id );
			}
		} elseif ($ct_other_template == -1) { // -1 = no template!
			$width = 'none';
		}
	} else {
		// get default archives template
		$template 	= ct_get_archives_template();
	}

	if ($template) {
		$template_meta = maybe_unserialize( get_post_meta($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';
		}
	}


	if ($width) {	
		// style inspired by plugin "Editor Full Width Gutenberg" (https://wordpress.org/plugins/editor-full-width/)
		echo sprintf('<style id="maltmann-gutenberg-editor-width-style">
			body.gutenberg-editor-page .editor-post-title__block, 
			body.gutenberg-editor-page .editor-default-block-appender, 
			body.gutenberg-editor-page .editor-block-list__block {
				max-width: %1$s !important;
			}
			.block-editor__container .wp-block {
				max-width: %1$s !important;
			}
			/*code editor*/
			.edit-post-text-editor__body {
				max-width: %1$s !important;	
				margin-left: 2%%;
				margin-right: 2%%;
			}
			</style>',$width);
		$script = <<<MALTMANN_END_OF_SCRIPT
<script id="maltmann-gutenberg-editor-width-script">
let blockLoaded = false;
let blockLoadedInterval = setInterval(function () {
 // post-title-0 is ID of Post Title textarea
 if (document.getElementById('post-title-0')) {
  var widthHint = jQuery('<div style="display:inline-block;">Editor width adapted to %s.</div>');
  jQuery('.edit-post-header-toolbar').append(widthHint);
  blockLoaded = true;
 }
 if (blockLoaded) { clearInterval(blockLoadedInterval); }
}, 500);
</script>
MALTMANN_END_OF_SCRIPT;
		echo sprintf($script,$width);
	}
}