Archived topic
Customize editor width in Gutenberg
10 replies · Started by David Perez Garcia on August 24, 2021
Hello,
I use Style editor in order to make editor very near to the front end.
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );My big issue is to use custom widths depending of post type. It should the editor take the width from elements and you have not make changes. So, meanwhile, i use this style that is not working anymore in latest versions of gutenberg:
.wp-block {
max-width: 1027px;
}
.post-type-guia .wp-block {
max-width: 683px;
}Do you know how could i solve it?
Hi David,
Is this for the whole container or just the blocks?
Also, what happens if you try to add !important?
Example:
body.post-type-animals .wp-block {
max-width: 1000px !important;
}Let us know.
Thanks for your reply. I've tried but it's still the same. It loads this style:
.editor-styles-wrapper .wp-block {
max-width: 1027px;
}It's like my line:
.wp-block {
max-width: 1027px;
}It converts it with the class before .editor-styles-wrapper.
Gutenberg should allow us to define the widths. How do you solve it? GeneratePress does not help to have the editor similar to the frontend. How would we solve it?
Have you tried this?
.editor-styles-wrapper .wp-block {
max-width: 1000px !important;
}Having only .wp-block as a selector will most likely make it lose in CSS precedence as some block styling uses a more specific css selector.
Example:
.wp-block will lose to .editor-styles-wrapper .wp-block.
.editor-styles-wrapper .wp-block will lose to body.post-type-animals .editor-styles-wrapper .wp-block
but .wp-block, .editor-styles-wrapper .wp-block and body.post-type-animals .editor-styles-wrapper .wp-block will lose to a .wp-block with CSS property using !important.
Thanks Elvin, don't understand why is this difficult in Gutenberg. It should be easier. Not working, it css converts it like this:
.editor-styles-wrapper body.post-type-guia .editor-styles-wrapper .wp-block {
max-width: 683px !important;
}Hello,
I've solved using this code in the theme functions using this recommendation:
https://wordpress.org/support/topic/editor-styles-based-on-post-type-is-not-picking-up-by-wp-admin/
add_action( 'admin_footer', 'infoauto_editor_width' );
/**
* Adds style for width in the editor
*
* @return void
*/
function infoauto_editor_width() {
echo '<style>
.post-type-guia .editor-styles-wrapper .wp-block {
max-width: 683px;
}
</style>';
}It should be nice to have it native in GeneratePress. It would be easier.
Nice one. Glad you got it sorted.
It should be nice to have it native in GeneratePress. It would be easier.
Editor style isn't something the theme controls. This is a WordPress core function and we try to steer clear of it and keep the default WordPress functions intact to avoid conflicts w/ other plugins that would normally work on a default WordPress installation. :D
I believe that we want Gutenberg to be as real as possible. It should keep the styles. But at least the widths of a post type that you define in frontend, you should be able to be make that change.
;)
I believe that we want Gutenberg to be as real as possible. It should keep the styles. But at least the widths of a post type that you define in frontend, you should be able to be make that change.
😉
Yeah, I definitely agree on this one. Some page builders adhere to this idea (example: Oxygen Builder), but that's really up to WordPress for its core functions.
Personally, I didn't like the changes they did with 5.8 on the core block styles.
Best we can do is to offer a workaround if anyone asks because if we impose something, it opens up a new can of worms. (potential plugin conflict)
ok, regards.
No problem. Stay safe. :D
