0

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?

| improve this question | | | | |
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; }

} 
| improve this answer | | | | |
0

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; }

}
| improve this answer | | | | |
  • This solution is good but for the fact that my choice of add_theme_support( 'editor-styles' );line is inserting the styles from style-editor.css appending the .editor-styles-wrapper in front of the style I added, the .wp-block style. Thus it cannot be used with the body class that you suggested above, not directly anyway. They do not show up at all. Not with my functions.php solution. But I added a solution based on this, your css selector solution, with a more general admin-code append. Thanks. – andyNilson Mar 3 at 21:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.