Multiple editor widths

[manake]

This is already asked by like 10 people but there is no solution.

Sorry for asking this again but no working solution was ever provided anywhere and all questions are being ignored so far or contain wrong answers.

• content_width and new block widths #5650 (Related future plan. I like this but it's not a solution for someone who needs to style this now.)
• How can I define the width of the editor? #6064 (Ignored with no answer.)
• Body classes based on page template #7810 (Contains not working body.gutenberg-editor-page.post-type-post code snippet.)
• Add page-template/post-template value to body class #8162 (Contains some code snippet that I don't know how to implement and probably it doesn't work anyway.)
• Multiple editor width #8420 (This says "You can probably..." but that doesn't work.)
• Make the width of the editing field adjustable #8643 (Provides a link to a not working solution in the handbook.)
• No class added to body tag in editor for active page/post template #8948 (Related. Asks for a class for page templates.)
• How to get current Page Template when editting a page? #9817 (JS is a not good workaround because the textarea of the title gets inline height and would not be refreshed)
• Editor width is overridden by the default width at bottom in source code of editor. #9894 (Doesn't allow to style page and post separately.)
• No post format classes added for styling in the editor #10640 (This is about a similar issue of lacking CSS class for post formats.)
• Multiple editor widths #11288 (Ignored with no answer.)

This is frequently suggested but this just doesn't work:

body.gutenberg-editor-page.post-type-post .edit-post-visual-editor .editor-post-title__block, body.gutenberg-editor-page.post-type-post .edit-post-visual-editor .editor-block-list__block { max-width: 500px; }

Can someone please provide the official copy/paste solution (exact steps that we have to take to define width: 500px for post and width: 1000px for page)? What would I have to paste into my style-editor.css or functions.php?

[designsimply]

To answer your question with some context, you are asking to change editor width based on body classes and that cannot currently be done with the add_theme_support('editor-styles'); method because of the exact reason you mentioned at #12904: .editor-styles-wrapper is injected in order to simplify adding editor styles while still avoiding other specificity problems such as inadvertently affecting the UI bits (toolbars, movers, etc.). This is noted in the documentation about Editor styles (near the top) and that specificity change was made in #9008 in an attempt to simplify things, for example, by allowing a theme author to add a rule such as h2 { color: red; } without having to know any more complex selectors and without having to worry about affecting h2 used elsewhere in the admin area. This is already being discussed in another open issue at #10067 (comment) which I would look to as a good/relevant discussion.

To answer your question with a potential solution, you can currently work around this problem by enqueueing your custom editor width styles a bit differently. Here is an example:

Change test to a name of your choice and add this to functions.php in your theme:

function add_theme_scripts() {
        wp_enqueue_style( 'test', get_template_directory_uri() . '/test.css', array(), wp_get_theme()->get( 'Version' ), 'all');
}
add_action( 'enqueue_block_editor_assets', 'add_theme_scripts' );

Add a test.css file, or a file name of your choice matching what you picked above, to your theme with the following content:

.wp-block {
  max-width: 1000px;
}

.post-type-post .wp-block {
  max-width: 500px;
}

^{Tested with WordPress 5.0.3-RC1-44445 and the Twenty Nineteen 1.2 theme.}

Caveat! Because I used the Twenty Nineteen 1.2 theme in my test and because that theme already had more specific editor width styling, I had to remove those styles in order to allow mine to work. Of course, if you were developing your own theme, you would likely not have encoded conflicting editor styles into your theme without knowing but it is something to watch out for when making edits to another theme you may not be as familiar with. Here are the styles I removed from Twenty Nineteen for my test:

.wp-block {
  width: calc(100vw - (2 * 1rem));
  max-width: 100%;
}

@media only screen and (min-width: 768px) {
  .wp-block {
    width: calc(8 * (100vw / 12));
  }
}

@media only screen and (min-width: 1168px) {
  .wp-block {
    width: calc(6 * (100vw / 12 ));
  }
}

I acknowledge my code may not be perfect! I typically work in testing and triage and love themes but am not a full-time developer. If anyone sees area for improvement, I'd love feedback. 😊

Regarding documenting exact steps or a copy/paste solution, I wouldn't want to do that just yet because how to solve the specificity issues are still under discussion in places like #10067 (comment) (also see #9008 (comment)) and also because I would consider my solution above to be a temporary workaround and would want whatever comes out of the currently open issues to supersede the sample code I've posted here.

Regarding the bulleted list of issues you referenced, sometimes the trouble with looking at past solutions in a repository is that the code has since changed. For example, the solution proposed in #8420 no longer applies after the changes in #9008. A better approach is to include a clear set of steps to reproduce the problem and include code examples whenever possible exactly like you did in #12904. That issue is ace!

@manake if this explanation and example are sufficient for you for now, would you be okay if I closed this issue in favor of consolidating to other already-open issues such as #10067 where they are discussing this in conjunction with some other specificity problems?

[designsimply]

@samikeijonen I got the idea to use enqueue_block_editor_assets from you at #10956 (comment) 🙂 and was wondering if you might be willing to have a quick look at my example above to let me know whether it's decent or not for the use case of setting different editor widths for posts vs pages.

[samikeijonen]

@designsimply Sorry I missed your comment. I don't see issues on your example but as always, it might depend on theme you're working on.

[designsimply]

@samikeijonen thanks for taking a look!

[designsimply]

@manake were you able to try out the solution I proposed?

[thomasdebruin]

I needed custom editor width depending on page template (so not post-type).
What worked for me is:

/*
    Append gutenberg editor custom styles
*/

function add_theme_scripts() {
    wp_enqueue_style( 'editor-styles', get_template_directory_uri() . '/dist/styles/editor-styles.css', array(), wp_get_theme()->get( 'Version' ), 'all');
}
add_action( 'enqueue_block_editor_assets',  __NAMESPACE__ .'\\add_theme_scripts' );

function custom_admin_body_class( $classes ) {
    global $post;
    $cls = '';
    if ($post) {
        $cls = str_replace(".php","",get_page_template_slug());
    }
    return "$classes $cls";
}
add_filter( 'admin_body_class', __NAMESPACE__ .'\\custom_admin_body_class' );`

**editor-styles.css**
`.wp-block {
  max-width: 692px;
}

body.template-overview .wp-block {
  max-width: 1200px;
}

I think this is a flexible solution (you could easily add post-types or other contextual classes to determine your editor width or other properties). But my itnuition says this should be done in a more clean way, fi:

add_theme_support( 'wp-block-styles' );
add_editor_style(  Assets\asset_path('styles/editor-styles.css') );

This css doen't seem to apply when using the body class selector, probably because gutenberg loads this in another context, so maybe the 'page-template' class needs to be applied with another hook to another wrapper on the block editor (like the editor-styles-wrapper), but currently I lack the knowledge how to do this.

[youknowriad]

It seems that this has already some good replies. Let us know if the proposed solutions don't work for you.