Changing Gutenberg / WP block editor width only on pages, not posts or other taxonomies

Question

I have managed to change the width of the WordPress block editor so it uses my max width of my actual theme, making it easier to do layouts during the writing process. Now I wanted to change that to only happen when I edit pages, not posts or other taxonomies.

How do I do that?

My current procedure is:

Add these lines to my theme´s functions.php file:

add_theme_support( 'editor-styles' ); 
add_editor_style( 'style-editor.css' ); 

Then add this css to my style-editor.css file:

@media (min-width: 600px) {

  /* Main column width */
  .wp-block { width: 90%; max-width: 1170px; }

  /* Width of "wide" blocks */
  .wp-block[data-align="wide"] { max-width: 1170px; }

  /* Width of "full-wide" blocks */
  .wp-block[data-align="full"] { max-width: none; }

}

So far so good, the block editor displays the new width, but when I add the filter for making this only on pages, with what I assume is is_page, it does not work and I end up getting the normal wp editor width. Here is the code in functions.php:

if ( is_page() ) {

    add_theme_support( 'editor-styles' );
    add_editor_style( 'style-editor.css' );

}

I guess my problem is that I am using the front-end is_page hook, but I cannot find the wp editor equivalent of that. What is the proper code?

Answer 1

Because the WordPress hook add_theme_support( 'editor-styles' ); adds the css in the style-editor.css and appends the class .editor-styles-wrapper before my .wp-block, the usage of the body classes for page vs. post styles fails. Instead I use the answer from here, from David Walsh, to add the styles independently to the wp admin area:

// Update CSS within in Admin
function admin_style() {
  wp_enqueue_style('admin-styles', get_template_directory_uri().'/style-editor.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

Css code, as answered by @RiddleMeThis, works well now and I can differentiate between the post/page types:

@media (min-width: 600px) {

  /* Main column width - pages */
  .post-type-page .wp-block { width: 90%; max-width: 1170px; }

  /* Main column width - posts */
  .post-type-post .wp-block { width: 60%; max-width: 800px; }

} 

Answer 2

In the admin, if you inspect the body tag you will see WP is adding specific classess, similar to on the frontend. With that said you can use this class to be more specific in your CSS rules.

For example, your code could do this to target when editing pages only ...

@media (min-width: 600px) {

    /* Main column width */
    .post-type-page .wp-block { width: 90%; max-width: 1170px; }

    /* Width of "wide" blocks */
    .post-type-page .wp-block[data-align="wide"] { max-width: 1170px; }

    /* Width of "full-wide" blocks */
    .post-type-page .wp-block[data-align="full"] { max-width: none; }

}