Code Snippet: Oxygen Seitenbreite im Gutenberg Editor
Einführung
Der Oxygen Builder erlaubt die Festlegung der Seitenbreite sowohl in den globalen Einstellungen als auch individuell in einzelnen Templates.
Der Gutenberg Editor hat standardmäßig eine Breite von 580 Pixeln (vor WordPress 5.9) bzw. 840 Pixeln (ab WordPress 5.9).
Das ist in Ordnung für die Bearbeitung einfacher Text-Beiträge.
Sollen jedoch aufwändigere Inhalte wie Spalten oder nebeneinander angeordnete Blöcke gestaltet werden, ist der schmale Gutenberg Editor hinderlich.
Lösung
Das hier vorgestellte Code Snippet ermittelt die in Oxygen definierte Seitenbreite und stellt den Gutenberg Editor in dieser Breite dar.
Hierfür ermittelt das Snippet zunächst die in den globalen Oxygen Einstellungen definierte Seitenbreite.
Danach prüft es, ob für das aktuell anzuwendende Template eine abweichende Seitenbreite definiert ist. Berücksichtigt werden hierbei die Standard Templates (Startseite, Blog Archiv, Seiten- und Beitrags-Templates, Suchergebnisse, ...) und auch individuell der aktuellen Seite zugewiesene Templates.
Die ermittelte Seitenbreite wird dann per CSS Anpassung auf den Gutenberg Editor angewendet.
Zu beachten ist hierbei, dass das Snippet nur die definierte Seitenbreite ermittelt. Im Template definierte Sidebars, Margins oder Paddings können nicht ermittelt werden.
Die für den Gutenberg Editor vorgegebene Seitenbreite entspricht damit sicher keiner pixel-genauen Darstellung. Die geänderte Seitenbreite erlaubt jedoch eine bessere Beurteilung des verfügbaren Platzes bei der Seitenbearbeitung.
Download
Dieser JSON-Download kann direkt in die Plugins Code Snippets oder Advanced Scripts importiert werden. Vergiss nicht, das Snippet nach dem Import zu aktivieren.
Falls Du ein anderes Snippet Plugin verwendest, kannst Du stattdessen den Source Code kopieren und damit selbst ein neues Snippet anlegen.
ma-oxygen-gutenberg-editor-width.code-snippets.json
Version 1.1.1, 2024-05-23
Spenden
Es macht mir viel Freude, Code Snippets zu entwickeln und damit Anforderungen zu lösen. Die Snippets stelle ich kostenfrei zur Verfügung.
Wenn Du möchtest, kannst Du meine vielen Stunden Arbeit mit einer kleinen Kaffee-Spende über PayPal honorieren.
Spenden werden selbstverständlich ordnungsgemäß durch mich versteuert.
Disclaimer
Das Code Snippet habe ich nach bestem Wissen und Gewissen entwickelt und mit den aktuellsten Versionen von WordPress und Oxygen getestet.
Ich stelle das Code Snippet zur freien Verwendung zur Verfügung.
Eine Garantie für die Funktionalität in allen denkbaren WordPress Umgebungen kann ich nicht geben.
Download und Nutzung dieses Code Snippets erfolgen auf eigene Gefahr und Verantwortung.
Change Log
Siehe "Version History" in Source Code
Source Code
<?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;