Mở rộng không gian soạn thảo Classic Editor gấp đôi

Bài viết này dành để lưu lại tính năng mở rộng không gian soạn thảo Classic Editor. Đây là tính năng mà mình mò được, quá hay và hữu ích với mình luôn. Mình cay cái cách bố trí mặc định của WordPress lâu rồi, nó gò bó cực kỳ. Nếu mắt kém, muốn zoom lên cho dễ nhìn thì bạn chỉ có 40% không gian soạn thảo, cực kỳ bí bách.

Đây là vấn đề mà trong hơn 15 năm qua người dùng WordPress có lẽ đã không thấy thoải mái, thậm chí là rất TÙ khi viết bài trong chế độ Classic Editor. Đặt biệt là khi thực hiện trên các thiết bị có màn hình nhỏ như máy tính bảng hoặc khi chia cửa sổ làm việc. Ảnh bên dưới là ví dụ về một bên đang chế độ viết bài, một bên tra cứu thông tin/ hướng dẫn.

Giải pháp của mình là tạo một nút nhấn đặt phía trên của thanh công cụ, cùng hàng với các tab chế độ soạn thảo trực quan/ chế độ HTML. Khi bạn muốn thu gọn những thứ không cần thiết thì nhấp vào nút Ẩn Toolbar >> nó sẽ ẩn đi những phần tử mình đã đặt sẵn, khi nào cần hiện thì bấm lại nút đó. Kết quả là được khung soạn thảo cực tinh gọn như ảnh chụp màn hình phía trên. Nếu không có tính năng này thì bạn chỉ có chưa được 1/2 diện tích soạn thảo.

Để lắp nút ẩn hiện thanh Toolbar này thì bạn copy đoạn code bên dưới và chèn vào phía cùng trong file Functions.php của theme/ child theme đang dùng. Ưu tiên áp dụng cho web dùng theme GeneratePress và plugin Advanced Editor Tools. Blog Hocban.vn đang dùng combo này, mình test thấy oke rồi và đang xài mỗi ngày. Các web dùng combo khác mình chưa có test, bạn test thử xem sao ^^

//Tối ưu không gian soạn thảo Advanced Editor Tools
function custom_toolbar_css_toggle_button_final_v24($hook) {
if ( ! in_array($hook, array('post.php', 'post-new.php')) ) {
return;
}
wp_enqueue_style( 'dashicons' );
$custom_css = <<<CSS
.toolbar-hidden #content{padding-top:25px!important;}
.toolbar-hidden .mce-edit-area iframe#content_ifr{padding-top:25px!important;}
html.wp-toolbar.toolbar-hidden{padding-top:0!important;}
body.toolbar-hidden{margin-top:0!important;padding-top:0!important;top:0!important;}
body.toolbar-hidden #wpadminbar{opacity:0!important;height:0!important;overflow:hidden!important;position:absolute!important;pointer-events:none!important;z-index:-1!important;}
body.toolbar-hidden #wpcontent{padding-top:0!important;margin-top:-20px!important;}
.toolbar-hidden .wp-editor-wrap{margin-top:-2em!important;}
.toolbar-hidden #wp-content-editor-tools{margin-top:-1.2em!important;}
.toolbar-hidden .mce-flow-layout{margin-top:-1.2em!important;}
@media screen and (max-width: 1024px) {
.toolbar-hidden .mce-flow-layout{margin-top:0px!important;}
}
#wp-content-editor-tools{position:relative;min-height:40px;display:flex;align-items:center;justify-content:flex-end;}
#wp-content-editor-tools .wp-editor-tabs{margin-right:auto;}
#custom_css_toggle_btn{background:#f0f0f0;color:#32373c;border:1px solid #c3c4c7;padding:4px 8px;font-size:14px;cursor:pointer;border-radius:4px;line-height:1.5;transition:background .15s ease;box-shadow:none;outline:none;margin-left:10px;}
#custom_css_toggle_btn:hover{background-color:#e0e0e0;border-color:#7e8993;}
#custom_css_toggle_btn .dashicons{vertical-align:middle;font-size:16px;margin-left:5px;width:16px;height:16px;}
.toolbar-hidden #wp-content-editor-container .mce-toolbar-grp,
.toolbar-hidden .wp-heading-inline,
.toolbar-hidden a.page-title-action,
.toolbar-hidden #titlediv{display:none!important;}
CSS;
wp_add_inline_style('wp-admin', $custom_css);
$custom_js = <<<JS
(function(\$) {
var openIcon = '<span class="dashicons dashicons-arrow-up-alt2"></span>'; 
var closedIcon = '<span class="dashicons dashicons-arrow-down-alt2"></span>'; 
var initialButtonHTML = '<button type="button" id="custom_css_toggle_btn" aria-expanded="true">Ẩn Toolbar ' + openIcon + '</button>';
function setupToolbarToggle() {
var \$targetArea = \$('#wp-content-editor-tools'); 
var \$adminBody = \$('body');
var \$html = \$('html'); 
if (\$targetArea.length > 0 && \$('#custom_css_toggle_btn').length === 0) {
\$targetArea.append(initialButtonHTML);
}
\$('#custom_css_toggle_btn').off('click').on('click', function() {
var \$button = \$(this);
\$adminBody.toggleClass('toolbar-hidden');
\$html.toggleClass('toolbar-hidden'); 
if (\$adminBody.hasClass('toolbar-hidden')) {
\$button.html('Hiện Toolbar ' + closedIcon);
\$button.attr('aria-expanded', 'false');
} else {
\$button.html('Ẩn Toolbar ' + openIcon);
\$button.attr('aria-expanded', 'true');
}
});
}
\$(document).ready(function() {
setupToolbarToggle();
});
\$(document).on('tinymce-editor-init', function() {
setupToolbarToggle();
});
})(jQuery);
JS;
wp_enqueue_script('jquery');
wp_add_inline_script('jquery', $custom_js, 'after');
}
add_action('admin_enqueue_scripts', 'custom_toolbar_css_toggle_button_final_v24');

Ngoài ra, nếu bạn chưa tiện áp dụng thủ thuật này thì có thể thực hiện bằng cách nhấn nút thu gọn thanh công cụ bên trái của trang quản trị. Nó cũng giúp tăng không gian soạn thảo lên kha khá. Đồng thời bật chế độ toàn màn hình cho trình duyệt luôn cho vùng soạn thảo được cao lên xíu nữa (chiều rộng không đổi đâu).

Tịnh Nguyễn