{
  "generator": "Code Snippets v3.6.4",
  "date_created": "2024-05-23 13:08",
  "snippets": [
    {
      "id": 23,
      "name": "MA Oxygen Gutenberg Editor Width",
      "desc": "<p>Adapt Gutenberg Editor Width to Page Width defined in Oxygen (global or specific template).</p>\n<p>Version 1.1.1, 2024-05-23 <br />© 2020-2024, Matthias Altmann</p>\n<p>Info: <br />en: <a href=\"https://www.altmann.de/en/blog-en/code-snippet-oxygen-page-width-in-gutenberg-editor/\" target=\"_blank\" rel=\"noopener\">https://www.altmann.de/en/blog-en/code-snippet-oxygen-page-width-in-gutenberg-editor/</a> <br />de: <a href=\"https://www.altmann.de/blog/code-snippet-oxygen-seitenbreite-im-gutenberg-editor/\" target=\"_blank\" rel=\"noopener\">https://www.altmann.de/blog/code-snippet-oxygen-seitenbreite-im-gutenberg-editor/</a></p>",
      "code": "/*\nPlugin Name:  MA Oxygen Gutenberg Editor Width\nDescription:  Set Gutenberg editor width to page width defined in Oxygen\nAuthor:       <a href=\"https://www.altmann.de/\">Matthias Altmann</a>\nProject:      Code Snippet: Apply Oxygen page width to Gutenberg editor\nVersion:      1.1.1\nDescription:  en: https://www.altmann.de/en/blog-en/code-snippet-oxygen-page-width-in-gutenberg-editor/\n              de: https://www.altmann.de/blog/code-snippet-oxygen-seitenbreite-im-gutenberg-editor/\nCopyright:    © 2020-2024, Matthias Altmann\n\nTESTED WITH:\nProduct\t\tVersions\n--------------------------------------------------------------------------------------------------------------\nPHP \t\t7.4, ..., 8.1\nWordPress\t5.9, ..., 6.4.2, 6.4.3, 6.5, 6.5.3\nOxygen\t\t4.0, ..., 4.8.1, 4.8.2, 4.8.3\n--------------------------------------------------------------------------------------------------------------\n\n\nVERSION HISTORY\nDate\t\tVersion\t\tDescription\n--------------------------------------------------------------------------------------------------------------\n2024-05-23\t1.1.1\t\tChanges:\n\t\t\t\t\t\t- Improved page width evaluation, now including nested templates\n2024-05-22\t1.1.0\t\tChanges:\n\t\t\t\t\t\t- Code redesign as class\n\t\t\t\t\t\t- Removed jQuery dependency\n\t\t\t\t\t\t- Compatibility to Oxygen 4.8.3 with changed post meta keys\n2022-05-18\t1.0.4\t\tChanges:\n\t\t\t\t\t\t- Migrated JavaScript to ES6\n2022-02-12\t\t\t\tTested with PHP 8.0, WordPress 5.9, Oxygen 4.0 beta 1\n\t\t\t\t\t\tChanges:\n\t\t\t\t\t\t- Adaptions for WP 5.9: Gutenberg editor class of post header to show width adaptions\n\t\t\t\t\t\t  (Reverted with 1.0.4, since WP now has same class again)\n2021-10-03\t1.0.3\t\tBug Fix:\n\t\t\t\t\t\t- Fixed max-width for Gutenberg full-width Group element\n2021-03-21\t1.0.2\t\tBug Fix: \n\t\t\t\t\t\t- Only initialize if Oxygen plugin is active\n                          (Thanks to Adrien Robert for reporting!)\n2020-12-10\t1.0.1\t\tBug Bixes:\n\t\t\t\t\t\t- Removed alert script (left behind by mistake!)\n\t\t\t\t\t\t- Optimized editor ready detection\n\t\t\t\t\t\t  (Thanks to Nico Weinreich for reporting and the improved script!)\n2020-11-16\t1.0.0\t\tInitial Release for the Oxygen community\n\n\n==============================================================================================================\nDescription\n==============================================================================================================\nGutenberg editor has a default page width of 580 pixels (before WP 5.9) or 840px (as of WP 5.9). \nWhile that is fine for standard blogging websites, it's difficult to create page content without having a clue \nabout the actual available page width.\n\nThis Code Snippet tries to evaluate the actual page width from Oxygen settings and changes the Gutenberg editor \nwidth accordingly.\n\nPage Width Evaluation:\n1) Read default page width from global Oxygen settings\n2) Evaluate default post/page template's width\n3) Detect specific template for this page\n   - either any type of special template like front page, archive, etc.\n   - or the template assigned manually to this post/page, \n   and check for template specific page width\n4) If no width specified in template, also check for parent templates (nested templates)\n5) Emit CSS to adapt Gutenberg editor to the max-width evaluated by the previous steps, \n   and JS to show a notice in the top bar about the width and where it is defined\n\nLimitations:\nThis snippet reads the page width defined in global settings or from a specific template and applies that page \nwidth to the Gutenberg editor. \nThe snippet DOES NOT detect any paddings, margins, sidebars etc. in the actual template that might influence \nthe final available space. \nThat means the width defined for the Gutenberg editor is only a better guessing of available space and sure \nnot pixel perfect. Do not rely on the width of the Gutenberg editor for pixel perfect design but use it as a \nrough frame to get a better idea of the available width while editing. \n\nPerformance:\nThe snippet is only called when creating a new or editing an existing post or page.\nThe Oxygen global settings as well as the post details have already been retrieved from the database at this \npoint. The evaluation of the Oxygen template to be used will require a few other database requests, depending \non the template nesting levels. \nThere should be no noticeable performance impact: Runtime on a local test setup was around 0.02 sec.\n*/\n\nif (!class_exists('MA_OxygenGutenbergEditorWidth')) :\nclass MA_OxygenGutenbergEditorWidth {\n\tconst TITLE\t\t\t\t\t\t\t= 'MA Oxygen Gutenberg Editor Width';\n\tconst SLUG\t\t\t\t\t\t\t= 'ma-oxygen-gutenberg-editor-width';\n\tconst SHRT \t\t\t\t\t\t\t= 'maogew';\n\tconst VERSION\t\t\t\t\t\t= '1.1.1';\n\n\t//-------------------------------------------------------------------------------------------------------------------\n\tfunction __construct(){\n\t\tadd_action('wp_loaded', [$this,'init']);\n\t}\n\t//-------------------------------------------------------------------------------------------------------------------\n\t/**\n\t * Initializes functionality if Gutenberg editor is to be shown.\n\t */\n\tpublic function init(){\n\t\tif (!defined('CT_VERSION')) return;\n\t\t\n\t\t// check if on edit page\n\t\tglobal $pagenow;\n\t\t$editor = false;\n\t\tif ($pagenow == 'post-new.php') $editor = true;\n\t\tif (($pagenow == 'post.php') && ($_REQUEST['action']??'' == 'edit')) $editor = true;\n\t\tif (!$editor) return;\n\t\t\n\t\t// check if post type supports Gutenberg\n\t\t$post_id = isset($_REQUEST['post']) ? $_REQUEST['post'] : 0;\n\t\t$edit_with_gutenberg = true;\n\t\tif ( isset($_REQUEST['post_type']) ) {\n\t\t\tif ( !post_type_supports($_REQUEST['post_type'], 'editor') ) {$edit_with_gutenberg = false;}\n\t\t} else if ( $post_id > 0 ) {\n\t\t\t$post = get_post($post_id);\n\t\t\tif ( $post != null && !post_type_supports($post->post_type, 'editor') ) {$edit_with_gutenberg = false;}\n\t\t}\n\t\tif (!$edit_with_gutenberg) return;\n\n\t\tadd_action('admin_head', [$this, 'set_gutenberg_editor_width']);\n\t}\n\n\t//-------------------------------------------------------------------------------------------------------------------\n\tpublic function set_gutenberg_editor_width() {\n\t\t$st = microtime(true);\n\t\tglobal $post;\n\t\t// exit if we don't have a post object\n\t\tif (!isset($post)) return;\n\t\t\n\t\t$post_id = get_the_id();\n\t\t$width = null; \n\t\t$defined_by = '';\n\t\n\t\t// Oxygen pre or post 4.8.3?\n\t\t$meta_function_name = function_exists('oxy_get_post_meta') ? 'oxy_get_post_meta' : 'get_post_meta';\n\n\t\t// 1) Check Oxygen global settings for a defined page width\n\t\t$ct_global_settings = maybe_unserialize(get_option('ct_global_settings'));\n\t\tif ($ct_global_settings && is_array($ct_global_settings) && array_key_exists('max-width',$ct_global_settings)) {\n\t\t\t$width = $ct_global_settings['max-width'].'px';\n\t\t\t$defined_by = 'Oxygen Global Settings';\n\t\t}\n\n\t\t// 2) Get default post template\n\t\t$template = ct_get_posts_template($post_id);\n\n\t\t// 3a) special template for front or blog page?\n\t\t// front and blog page IDs will be automatically \"translated\" to teh correct language post ID by PolyLang\n\t\t$front_id = intval(get_option('page_on_front'));\n\t\t$blog_id = intval(get_option('page_for_posts'));\n\t\tif (in_array($post_id, [$front_id, $blog_id])) {\n\t\t\t$archives_template = ct_get_archives_template($post_id);\n\t\t\tif ($archives_template) $template = $archives_template;\n\t\t}\n\n\n\t\t// 3b) Check if manually assigned template\n\t\t$ct_other_template = intval(call_user_func($meta_function_name, $post_id, 'ct_other_template', true));\n\t\tif ($ct_other_template > 0) {\n\t\t\t// use manually assigned template\n\t\t\t$template = get_post($ct_other_template);\n\t\t}\n\t\tif ($ct_other_template == -1) { // -1 means \"None\"\n\t\t\t// no template, no editor width change\n\t\t\treturn;\n\t\t}\n\t\t\n\t\tif ($template) {\n\t\t\tFIND_TEMPLATE:\n\t\t\t$template_meta = maybe_unserialize(call_user_func($meta_function_name, $template->ID, 'ct_page_settings', true));\n\t\t\tif ($template_meta && is_array($template_meta) && array_key_exists('max-width',$template_meta)) {\n\t\t\t\tif (!empty($template_meta['max-width'])) {\n\t\t\t\t\t$width = $template_meta['max-width'].'px';\n\t\t\t\t\t$defined_by = sprintf('template \"%s\"',$template->post_title);\n\t\t\t\t} else {\n\t\t\t\t\t// 4) any parent template?\n\t\t\t\t\tif ($parent_template = intval(call_user_func($meta_function_name, $template->ID, 'ct_parent_template', true))) {\n\t\t\t\t\t\t$parent_template = get_post($parent_template);\n\t\t\t\t\t\tif ($parent_template) {\n\t\t\t\t\t\t\t$template = $parent_template;\n\t\t\t\t\t\t\tgoto FIND_TEMPLATE;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\n\t\t// 5) Emit CSS and JS\n\t\tif ($width) {\t\n\t\t\t// style inspired by plugin \"Editor Full Width Gutenberg\" (https://wordpress.org/plugins/editor-full-width/)\n\t\t\techo sprintf('<style id=\"%1$s-style\">\n\t\t\t\tbody.block-editor-page .editor-post-title__block, \n\t\t\t\tbody.block-editor-page .editor-default-block-appender, \n\t\t\t\tbody.block-editor-page :not(.wp-block) > .block-editor-block-list__block:not([data-align=\"full\"]) {\n\t\t\t\t\tmax-width: %2$s !important;\n\t\t\t\t}\n\t\t\t\t.block-editor__container .wp-block:not([data-align=\"full\"] {\n\t\t\t\t\tmax-width: %2$s;\n\t\t\t\t}\n\t\t\t\t/*code editor*/\n\t\t\t\t.edit-post-text-editor__body {\n\t\t\t\t\tmax-width: %2$s !important;\t\n\t\t\t\t\tmargin-left: 2%%;\n\t\t\t\t\tmargin-right: 2%%;\n\t\t\t\t}\n\t\t\t\t</style>',self::SHRT, $width);\n\t\t\t$shrt = self::SHRT;\n\t\t\t$script = <<<END_OF_SCRIPT\n\t\t\t<script id=\"{$shrt}-script\">\n\t\t\tlet blockLoadedInterval = setInterval(function () {\n\t\t\t\tlet toolbars = document.getElementsByClassName('edit-post-header-toolbar');\n\t\t\t\tif (toolbars.length>0) {\n\t\t\t\t\tlet toolbar = toolbars[0];\n\t\t\t\t\tlet div = document.createElement('div');\n\t\t\t\t\tdiv.innerHTML = 'Editor width {$width} defined by {$defined_by}';\n\t\t\t\t\ttoolbar.appendChild(div);\n\t\t\t\t\tclearInterval(blockLoadedInterval);\n\t\t\t\t}\n\t\t\t}, 500);\n\t\t\t</script>\n\t\t\tEND_OF_SCRIPT;\n\t\t\techo $script;\n\t\t}\n\t\t$et = microtime(true);\n\t\t// timing: error_log(sprintf('%s runtime: %.4f s.',self::TITLE, $et-$st));\n\t}\n}\n//===================================================================================================================\n// Initialize\nif (is_admin() && !wp_doing_ajax() && !wp_doing_cron() ) {\n\tnew MA_OxygenGutenbergEditorWidth();\n}\nendif;\n",
      "tags": [
        "Oxygen",
        "Gutenberg"
      ],
      "scope": "admin",
      "modified": "2024-05-23 13:08:30",
      "revision": "4"
    }
  ]
}