有没有办法让古腾堡的编辑范围更广？和超文本标记语言块更高？

时间：2020-02-20 作者：Fredag

我是古腾堡编辑的新手。之前我在编辑WordPress时使用了经典编辑器（插件）。编辑器区域根据浏览器窗口“调整大小”。使用古腾堡方法，我可以在一个非常狭窄的区域进行编辑。当我使用HTML块时，我得到的是一个890px宽、250px高的带滚动条的区域。我有幽闭恐惧症！

有什么办法可以绕过这个问题吗？

类似的问题，但没有很好的答案：Why is the new Gutenberg editor so narrow, and how to make it wider?

6 个回复

最合适的回答,由SO网友:Fredag 整理而成

以下是我所做的：

功能。php

/* Editor styles EXTENDED */
add_action(\'admin_enqueue_scripts\', \'load_admin_style\');
function load_admin_style() {
    wp_enqueue_style(\'admin_css\', get_stylesheet_directory_uri() .\'/gutenberg-styles-extra-wide.css\' );
}

古腾堡风格超宽。css

/*--------------------------------------------------------------
# 1.0 - Editor
--------------------------------------------------------------*/
body.block-editor-page .edit-post-visual-editor .editor-post-title__block,
body.block-editor-page .edit-post-visual-editor .editor-default-block-appender,
body.block-editor-page .edit-post-visual-editor .editor-block-list__block {
   max-width: 1200px;
}
/* HTML-block */
.wp-block-html .block-editor-plain-text {
    max-height: 700px;
    font-size: 14px;
    resize: both;
}

因为我使用的是子主题，所以在函数中使用get\\u stylesheet\\u directory\\u uri（）。php。（get\\u template\\u directory\\u uri（）否则）我还希望在HTML块中有更多的空间。

谢谢你的回答和建议，汤姆和胡安。

需要一些时间来习惯古腾堡编辑器！

SO网友:Juan Díaz-Bustamante

您必须首先将样式编辑器css排队

function legit_block_editor_styles() {
wp_enqueue_style( \'legit-editor-styles\', get_theme_file_uri( \'/style-editor.css\' ), false, \'2.3\', \'all\' );} 
add_action( \'enqueue_block_editor_assets\', \'legit_block_editor_styles\' );

然后您必须创建该样式编辑器。css文件，然后将其添加到该文件中：

.wp-block {
max-width:  100%;}

SO网友:Chaz

如果它对任何人都有帮助，我们开发了一个免费的轻量级插件，可以让您控制；“宽宽度”；在古腾堡块编辑器中设置，并添加其他一些可选的视觉增强功能，以使块边更易于查看。

控制；“宽宽度”；设置插件将此管理样式排入队列，其中[变量]在插件的设置中设置：

.wp-block-columns.block-editor-block-list__block.wp-block.block-editor-block-list__layout{max-width:[variable]px!important;}

此外，我们：

add_theme_support( \'align-wide\' );

插件是：https://wordpress.org/plugins/blocksolid/

SO网友:Luca Reghellin

所用动作的变化：

add_action( \'enqueue_block_editor_assets\', \'custom_gutenberg_editor_stylesheet\' );
function custom_gutenberg_editor_stylesheet() {
  wp_enqueue_style( \'custom-gutenberg-stylesheet\', [your css path] . \'/gutenberg-styles.css\', array(), wp_get_theme()->get( \'Version\' ), \'all\' );
}

那么

.wp-block {
    max-width: 1024px; // whatever
}

SO网友:Jason

我的解决方案是将其添加到函数中。php文件：

add_action(\'admin_head\', \'admin_styles\');
function admin_styles() {
     echo \'<style>
            .wp-block {max-width: 720px;}
            .wp-block[data-align="wide"] {max-width: 1280px;}
            </style>\';
}

SO网友:gtamborero

在您的主题、函数中尝试此CSS。php：

// Wider sidebar on gutenberg backend
function my_wider_sidebar() {
echo \'
<style>
    .interface-complementary-area{ width: 450px; }
</style>
\';
}
add_action(\'admin_head\', \'my_wider_sidebar\');

小码农CODE

有没有办法让古腾堡的编辑范围更广？和超文本标记语言块更高？

相关推荐

添加具有wp_EDITOR最低编辑器配置的表控件(‘miny’)